Merge pull request #407 from dhis2/DHIS2-18129/add-custom-text-to-dat…

…a-sets feat: add title and subtitle to data sets if set in display options
dhis2 · Oct 23, 2024 · 1af359f · 1af359f · dhis2-bot · Oct 23, 2024
2 parents 0924e52 + f44f0d1
commit 1af359f
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 28 deletions.
diff --git a/...space/section-form/section-description.js → ...-workspace/section-form/sanitized-text.js b/...space/section-form/section-description.js → ...-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 (
-        <div
-            className={styles.sectionDescription}
-            dangerouslySetInnerHTML={{ __html: html }}
-        ></div>
+        <p className={className} dangerouslySetInnerHTML={{ __html: html }}></p>
     )
 }
 
-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
@@ -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 (
-            <TabbedSectionForm
-                globalFilterText={globalFilterText}
-                sections={dataSet.sections}
-                dataSetId={dataSet.id}
-                direction={displayOptions?.tabsDirection}
-            />
-        )
-    }
-
     return (
         <>
-            {filteredSections.map((s) => (
-                <SectionFormSection
-                    section={s}
-                    dataSetId={dataSet.id}
-                    key={s.id}
+            <div
+                className={cx(styles.sectionsCustomText, {
+                    [styles.textStartLine]:
+                        displayOptions.customText?.align === 'line-start',
+                    [styles.textCenter]:
+                        displayOptions.customText?.align === 'center',
+                    [styles.textEndLine]:
+                        !displayOptions.customText ||
+                        displayOptions.customText?.align === 'line-end',
+                })}
+            >
+                {displayOptions.customText?.header && (
+                    <SanitizedText className={styles.sectionsTitle}>
+                        {displayOptions.customText?.header}
+                    </SanitizedText>
+                )}
+                {displayOptions.customText?.subheader && (
+                    <SanitizedText className={styles.sectionsSubtitle}>
+                        {displayOptions.customText?.subheader}
+                    </SanitizedText>
+                )}
+            </div>
+            {dataSet.renderAsTabs ? (
+                <TabbedSectionForm
                     globalFilterText={globalFilterText}
-                    collapsible
+                    sections={dataSet.sections}
+                    dataSetId={dataSet.id}
+                    direction={displayOptions?.tabsDirection}
                 />
-            ))}
+            ) : (
+                filteredSections.map((s) => (
+                    <SectionFormSection
+                        section={s}
+                        dataSetId={dataSet.id}
+                        key={s.id}
+                        globalFilterText={globalFilterText}
+                        collapsible
+                    />
+                ))
+            )}
         </>
     )
 }

diff --git 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 (
         <div>
-            <SectionDescription>{beforeSectionText}</SectionDescription>
+            <SanitizedText className={styles.sectionDescription}>
+                {beforeSectionText}
+            </SanitizedText>
             <Table className={styles.table} suppressZebraStriping>
                 <TableHead>
                     <TableRowHead>
@@ -189,7 +191,9 @@ export function SectionFormSection({
                     />
                 )}
             </Table>
-            <SectionDescription>{afterSectionText}</SectionDescription>
+            <SanitizedText className={styles.sectionDescription}>
+                {afterSectionText}
+            </SanitizedText>
         </div>
     )
 }

diff --git 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;