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..1e429aa60 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,47 @@ 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 a59414438..93e56927d 100644 --- a/src/data-workspace/section-form/section.module.css +++ b/src/data-workspace/section-form/section.module.css @@ -91,9 +91,30 @@ outline: 3px solid var(--theme-focus); } +.sectionsTitle { + margin: 4px; + font-size: 2em; +} +.sectionsSubtitle{ + margin: 2px; + font-size: 1.5em; +} +.sectionsCustomerText{ + width: 100%; + padding: 16px; +} .sectionTab { margin-bottom: 8px; } +.textLeft{ + text-align: left; +} +.textCenter{ + text-align: center; +} +.textRight{ + text-align: right; +} .verticalSectionTabWrapper .sectionTab div { flex-direction: column;