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;