diff --git a/src/data-workspace/section-form/section-description.js b/src/data-workspace/section-form/sanitized-text.js similarity index 54% rename from src/data-workspace/section-form/section-description.js rename to src/data-workspace/section-form/sanitized-text.js index 36ed68a59..e5996ec6a 100644 --- a/src/data-workspace/section-form/section-description.js +++ b/src/data-workspace/section-form/sanitized-text.js @@ -1,9 +1,8 @@ import * as DOMPurify from 'dompurify' import PropTypes from 'prop-types' import React from 'react' -import styles from './section.module.css' -export const SectionDescription = ({ children }) => { +export const SanitizedText = ({ children, className }) => { if (!children) { return null } @@ -12,13 +11,11 @@ export const SectionDescription = ({ children }) => { }) return ( -
+

) } -SectionDescription.propTypes = { +SanitizedText.propTypes = { children: PropTypes.node, + className: PropTypes.string, } diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js index 593dc43bb..64a28df25 100644 --- a/src/data-workspace/section-form/section-form.js +++ b/src/data-workspace/section-form/section-form.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { useSectionFilter } from '../../shared/index.js' import { getDisplayOptions } from './displayOptions.js' +import { SanitizedText } from './sanitized-text.js' import { SectionFormSection } from './section.js' import styles from './section.module.css' @@ -15,28 +16,48 @@ export const SectionForm = ({ dataSet, globalFilterText }) => { const displayOptions = getDisplayOptions(dataSet) - if (dataSet.renderAsTabs) { - return ( - - ) - } - return ( <> - {filteredSections.map((s) => ( - + {displayOptions.customText?.header && ( + + {displayOptions.customText?.header} + + )} + {displayOptions.customText?.subheader && ( + + {displayOptions.customText?.subheader} + + )} + + {dataSet.renderAsTabs ? ( + - ))} + ) : ( + filteredSections.map((s) => ( + + )) + )} ) } diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js index 8a362ef57..15bfbbbab 100644 --- a/src/data-workspace/section-form/section.js +++ b/src/data-workspace/section-form/section.js @@ -18,7 +18,7 @@ import { PivotedCategoryComboTableBody } from '../category-combo-table-body-pivo import { getFieldId } from '../get-field-id.js' import { IndicatorsTableBody } from '../indicators-table-body/indicators-table-body.js' import { getDisplayOptions } from './displayOptions.js' -import { SectionDescription } from './section-description.js' +import { SanitizedText } from './sanitized-text.js' import styles from './section.module.css' export function SectionFormSection({ @@ -97,7 +97,9 @@ export function SectionFormSection({ return (
- {beforeSectionText} + + {beforeSectionText} + @@ -189,7 +191,9 @@ export function SectionFormSection({ /> )}
- {afterSectionText} + + {afterSectionText} +
) } diff --git a/src/data-workspace/section-form/section.module.css b/src/data-workspace/section-form/section.module.css index 4662e93a2..2ffe48f6d 100644 --- a/src/data-workspace/section-form/section.module.css +++ b/src/data-workspace/section-form/section.module.css @@ -91,9 +91,53 @@ outline: 3px solid var(--theme-focus); } +.sectionsTitle { + margin: 0 0 var(--spacers-dp8) 0; + font-size: 1.125rem; + line-height: 1.3; + color: var(--colors-grey900); + max-width: 1040px; +} +.sectionsSubtitle { + margin: 0; + font-size: 0.875em; + line-height: 1.3; + color: var(--colors-grey800); + max-width: 1040px; +} +.sectionsCustomText { + width: 100%; + display: flex; + flex-direction: column; + margin: 0 0 var(--spacers-dp4) 0; +} +.sectionsCustomText :global(a):link, +.sectionsCustomText :global(a):visited { + color: var(--colors-blue700); +} +.sectionsCustomText :global(a):hover, +.sectionsCustomText :global(a):active { + color: var(--colors-blue900); +} +.sectionsCustomText :global(a):focus { + outline-color: var(--theme-focus); +} + .sectionTab { margin-block-end: 8px; } +.textStartLine { + align-items: flex-start; + text-align: start; +} +.textCenter { + align-items: center; + text-align: center; +} +.textEndLine { + align-items: flex-end; + text-align: end; +} .verticalSectionTabWrapper .sectionTab div { flex-direction: column;