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;