feat: Add section descriptions (#2240)

* feat: Add section descriptions

* feat: Update to retain dl dt dd structure

* feat: Update for tests

* feat: Update input fields

* feat: Simplify layout

* feat: Update column width

* feat: Further simplify layout

e2e/tests/ui-driven/src/helpers.ts

@@ -252,8 +252,8 @@ export async function expectSections({
     status: string;
   }[];
 }) {
-  const pageSections = await page.locator("dl > dt");
-  const pageStatuses = await page.locator("dl > dd");
+  const pageSections = await page.locator("dl dt");
+  const pageStatuses = await page.locator("dl dd");
   await expect(pageSections).toContainText(sections.map((s) => s.title));
   await expect(pageStatuses).toContainText(sections.map((s) => s.status));
 }

editor.planx.uk/src/@planx/components/Section/Editor.tsx

@@ -6,6 +6,7 @@ import Input from "ui/Input";
 import InputRow from "ui/InputRow";
 import ModalSection from "ui/ModalSection";
 import ModalSectionContent from "ui/ModalSectionContent";
+import RichTextInput from "ui/RichTextInput";
 
 import { parseSection, Section } from "./model";
 
@@ -28,19 +29,27 @@ function SectionComponent(props: Props) {
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
         <ModalSectionContent
-          title="Section marker title"
+          title="Section marker"
           Icon={ICONS[TYPES.Section]}
         >
           <InputRow>
             <Input
               required
-              format="data"
+              format="large"
               name="title"
               placeholder="Title"
               value={formik.values.title}
               onChange={formik.handleChange}
             />
           </InputRow>
+          <InputRow>
+            <RichTextInput
+              placeholder="Short section description"
+              name="description"
+              value={formik.values.description}
+              onChange={formik.handleChange}
+            />
+          </InputRow>
         </ModalSectionContent>
       </ModalSection>
       <InternalNotes

editor.planx.uk/src/@planx/components/Section/Public.test.tsx

@@ -8,7 +8,7 @@ import Section, { SectionsOverviewList } from "./Public";
 describe("Section component", () => {
   it("renders correctly", () => {
     const handleSubmit = jest.fn();
-    setup(<Section title="Section one" handleSubmit={handleSubmit} />);
+    setup(<Section title="Section one" description="Description of section one" handleSubmit={handleSubmit} />);
 
     expect(screen.getByText("Application incomplete.")).toBeInTheDocument();
     expect(screen.getByText("Continue")).toBeInTheDocument();
@@ -19,7 +19,7 @@ describe("Section component", () => {
     const handleSubmit = jest.fn();
 
     const { container } = setup(
-      <Section title="Section one" handleSubmit={handleSubmit} />,
+      <Section title="Section one" description="Description of section one" handleSubmit={handleSubmit} />,
     );
 
     const results = await axe(container);
@@ -33,18 +33,21 @@ describe("SectionsOverviewList component", () => {
       type: 360,
       data: {
         title: "Section one",
+        description: "Description of section one",
       },
     },
     section2: {
       type: 360,
       data: {
         title: "Section two",
+        description: "Description of section two",
       },
     },
     section3: {
       type: 360,
       data: {
         title: "Section three",
+        description: "Description of section three",
       },
     },
   };

editor.planx.uk/src/@planx/components/Section/Public.tsx

@@ -8,6 +8,7 @@ import type { PublicProps } from "@planx/components/ui";
 import { Store, useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { SectionNode, SectionStatus } from "types";
+import ReactMarkdownOrHtml from "ui/ReactMarkdownOrHtml";
 
 import Card from "../shared/Preview/Card";
 import QuestionHeader from "../shared/Preview/QuestionHeader";
@@ -167,60 +168,80 @@ export function SectionsOverviewList({
   return (
     <DescriptionList>
       {Object.entries(sectionNodes).map(([sectionId, sectionNode]) => (
-        <React.Fragment key={sectionId}>
-          <dt>
-            {showChange &&
-            sectionStatuses[sectionId] === SectionStatus.Completed ? (
-              <Link
-                onClick={() => changeFirstAnswerInSection(sectionId)}
-                component="button"
-              >
-                <Typography variant="body1" align="left">
-                  <span style={visuallyHidden}>{`Change `}</span>
-                  {sectionNode.data.title}
-                </Typography>
-              </Link>
-            ) : (
-              <Typography variant="body1">{sectionNode.data.title}</Typography>
-            )}
-          </dt>
-          <dd> {getTag(sectionStatuses[sectionId])} </dd>
-        </React.Fragment>
+        <SectionRow key={sectionId}>
+            <SectionTitle>
+              {showChange &&
+              sectionStatuses[sectionId] === SectionStatus.Completed ? (
+                <Link
+                  onClick={() => changeFirstAnswerInSection(sectionId)}
+                  component="button"
+                >
+                  <Typography variant="subtitle1" component="h4" color="primary" align="left">
+                    <span style={visuallyHidden}>{`Change `}</span>
+                    <strong>{sectionNode.data.title}</strong>
+                  </Typography>
+                </Link>
+              ) : (
+                <Typography variant="subtitle1" component="h4" color="inherit"><strong>{sectionNode.data.title}</strong></Typography>           
+              )}
+              <ReactMarkdownOrHtml
+                source={sectionNode.data.description}
+                openLinksOnNewTab
+              />   
+            </SectionTitle>
+          <SectionState> {getTag(sectionStatuses[sectionId])} </SectionState>
+        </SectionRow>
       ))}
     </DescriptionList>
   );
 }
 
-const Grid = styled("dl")(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "1fr 220px",
-  gridRowGap: "5px",
-  paddingTop: theme.spacing(3),
-  paddingBottom: theme.spacing(2),
-  "& > *": {
-    borderBottom: `1px solid ${theme.palette.border.main}`,
-    paddingBottom: theme.spacing(1.25),
-    paddingTop: theme.spacing(1.25),
-    verticalAlign: "top",
-    margin: 0,
+const Table = styled("dl")(({ theme }) => ({
+  padding: theme.spacing(1, 0),
+  "& ul, & ol": {
+    padding: "0 0 0 1em",
+    "& p": {
+      marginTop: "0.5em",
+    },
+    "&:last-of-type": {
+      marginBottom: 0,
+    },
+  },
+}));
+
+const SectionRow = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  padding: theme.spacing(2, 0),
+  borderBottom: `1px solid ${theme.palette.border.main}`,
+  [theme.breakpoints.up("md")]: {
+    flexDirection: "row",
   },
-  "& ul": {
-    listStylePosition: "inside",
-    padding: 0,
-    margin: 0,
+}));
+
+const SectionTitle = styled("dt")(({ theme }) => ({
+  margin: 0,
+  paddingBottom: theme.spacing(2),
+  [theme.breakpoints.up("md")]: {
+    padding: theme.spacing(0.33, 1, 0, 0),
+    flexBasis: `calc(100% - 220px)`,
+    flexShrink: 1,
   },
-  "& dt": {
-    // left column
+}));
+
+const SectionState = styled("dd")(({ theme }) => ({
+  margin: 0,
+  [theme.breakpoints.up("md")]: {
     display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
+    flexBasis: "220px",
+    flexShrink: 0,
+    flexGrow: 1,
+    justifyContent: "flex-end",
+    alignItems: "flex-start",
   },
-  "& dd:nth-of-type(1n)": {
-    // right column
-    textAlign: "right",
-    "& > button": {
-      width: "auto",
-    },
+  "& > button": {
+    width: "auto",
   },
 }));
 
@@ -229,5 +250,5 @@ interface DescriptionListProps {
 }
 
 const DescriptionList: React.FC<DescriptionListProps> = ({ children }) => {
-  return <Grid>{children}</Grid>;
+  return <Table>{children}</Table>;
 };

editor.planx.uk/src/@planx/components/Section/Section.stories.tsx

@@ -18,18 +18,21 @@ const sectionNodes: { [key: string]: SectionNode } = {
   firstSection: {
     data: {
       title: "First section",
+      description: "Description of first section",
     },
     type: TYPES.Section,
   },
   secondSection: {
     data: {
       title: "Second section",
+      description: "Description of second section",
     },
     type: TYPES.Section,
   },
   thirdSection: {
     data: {
       title: "Third section",
+      description: "Description of third section",
     },
     type: TYPES.Section,
   },
@@ -51,6 +54,7 @@ const defaultProps: ComponentProps<typeof Public> = {
   changeAnswer: () => console.log("changeAnswer called"),
   breadcrumbs: {},
   title: "The property",
+  description: "Short description of the property section",
   sectionCount: 3,
 };
 

editor.planx.uk/src/@planx/components/Section/model.test.ts

@@ -7,18 +7,21 @@ const flowSections: { [key: string]: SectionNode } = {
   firstSection: {
     data: {
       title: "First section",
+      description: "Description of first section",
     },
     type: TYPES.Section,
   },
   secondSection: {
     data: {
       title: "Second section",
+      description: "Description of second section",
     },
     type: TYPES.Section,
   },
   thirdSection: {
     data: {
       title: "Third section",
+      description: "Description of third section",
     },
     type: TYPES.Section,
   },

editor.planx.uk/src/@planx/components/Section/model.ts

@@ -5,12 +5,14 @@ import { MoreInformation, parseMoreInformation } from "../shared";
 
 export interface Section extends MoreInformation {
   title: string;
+  description?: string;
 }
 
 export const parseSection = (
   data: Record<string, any> | undefined,
 ): Section => ({
   title: data?.title || "",
+  description: data?.description,
   ...parseMoreInformation(data),
 });
 

editor.planx.uk/src/types.ts

@@ -131,5 +131,6 @@ export enum SectionStatus {
 export interface SectionNode extends Store.node {
   data: {
     title: string;
+    description?: string;
   };
 }