From eec2d34fa2c9698292731925d60038fe62d0a698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 27 May 2024 11:27:00 +0100
Subject: [PATCH 1/5] feat: Basic model and Editor modal

---
 .../src/@planx/components/List/Editor.tsx     | 85 ++++++++++++++++++-
 .../src/@planx/components/List/model.ts       | 52 +++++++++++-
 .../src/@planx/components/List/schemas/Zoo.ts | 69 +++++++++++++++
 3 files changed, 202 insertions(+), 4 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts

diff --git a/editor.planx.uk/src/@planx/components/List/Editor.tsx b/editor.planx.uk/src/@planx/components/List/Editor.tsx
index 080e07a605..d2975e52ed 100644
--- a/editor.planx.uk/src/@planx/components/List/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -1,13 +1,28 @@
+import MenuItem from "@mui/material/MenuItem";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React from "react";
-import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import RichTextInput from "ui/editor/RichTextInput";
+import SelectInput from "ui/editor/SelectInput";
+import Input from "ui/shared/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowItem from "ui/shared/InputRowItem";
+import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { EditorProps } from "../ui";
+import { EditorProps, ICONS, InternalNotes, MoreInformation } from "../ui";
 import { List, parseContent } from "./model";
+import { Zoo } from "./schemas/Zoo";
 
 type Props = EditorProps<TYPES.List, List>;
 
+export const SCHEMAS = [
+  { name: "Zoo", schema: Zoo },
+  // TODO: Residential units
+  // TODO: Residential units (GLA)
+];
+
 function ListComponent(props: Props) {
   const formik = useFormik({
     initialValues: parseContent(props.node?.data),
@@ -21,7 +36,71 @@ function ListComponent(props: Props) {
 
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
-      <FeaturePlaceholder title="Under development" />
+      <ModalSection>
+        <ModalSectionContent title="List" Icon={ICONS[TYPES.List]}>
+          <InputRow>
+            <Input
+              format="large"
+              name="title"
+              value={formik.values.title}
+              placeholder="Title"
+              onChange={formik.handleChange}
+            />
+          </InputRow>
+          <InputRow>
+            <RichTextInput
+              placeholder="Description"
+              name="description"
+              value={formik.values.description}
+              onChange={formik.handleChange}
+            />
+          </InputRow>
+          <InputRow>
+            <Input
+              format="data"
+              name="fn"
+              value={formik.values.fn}
+              placeholder="Data Field"
+              onChange={formik.handleChange}
+            />
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>Schema</InputRowLabel>
+            <InputRowItem>
+              <SelectInput
+                value={formik.values.schemaName}
+                onChange={(e) => {
+                  formik.setFieldValue("schemaName", e.target.value);
+                  formik.setFieldValue(
+                    "schema",
+                    SCHEMAS.find(
+                      ({ name }) => name === (e.target.value as string),
+                    )?.schema,
+                  );
+                }}
+              >
+                {SCHEMAS.map(({ name }) => (
+                  <MenuItem key={name} value={name}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </SelectInput>
+            </InputRowItem>
+          </InputRow>
+        </ModalSectionContent>
+      </ModalSection>
+      <MoreInformation
+        changeField={formik.handleChange}
+        definitionImg={formik.values.definitionImg}
+        howMeasured={formik.values.howMeasured}
+        policyRef={formik.values.policyRef}
+        info={formik.values.info}
+      />
+      <InternalNotes
+        name="notes"
+        value={formik.values.notes}
+        onChange={formik.handleChange}
+      />
     </form>
   );
 }
diff --git a/editor.planx.uk/src/@planx/components/List/model.ts b/editor.planx.uk/src/@planx/components/List/model.ts
index f2139bc96e..c0cef6f759 100644
--- a/editor.planx.uk/src/@planx/components/List/model.ts
+++ b/editor.planx.uk/src/@planx/components/List/model.ts
@@ -1,10 +1,60 @@
-import { MoreInformation, parseMoreInformation } from "../shared";
+import { NumberInput } from "../NumberInput/model";
+import { MoreInformation, Option, parseMoreInformation } from "../shared";
+import { TextInput } from "../TextInput/model";
+import { SCHEMAS } from "./Editor";
+
+/**
+ * Simplified custom QuestionInput as existing model is too complex for our needs currently
+ * If adding more properties here, check if re-using existing model could be an option
+ */
+interface QuestionInput {
+  title: string;
+  description?: string;
+  fn?: string;
+  options: Option[];
+}
+
+export type TextField = { type: "text"; required?: boolean; data: TextInput };
+export type NumberField = {
+  type: "number";
+  required?: boolean;
+  data: NumberInput;
+};
+export type QuestionField = {
+  type: "question";
+  required?: boolean;
+  data: QuestionInput;
+};
+
+/**
+ * Represents the input types available in the List component
+ * Existing models are used to allow to us to re-use existing components, maintaining consistend UX/UI
+ */
+export type Field = TextField | NumberField | QuestionField;
+
+/**
+ * Models the form displayed to the user
+ */
+export interface Schema {
+  type: string;
+  fields: Field[];
+  min?: number;
+  max?: number;
+}
 
 export interface List extends MoreInformation {
   fn: string;
+  title: string;
+  description?: string;
+  schemaName: string;
+  schema: Schema;
 }
 
 export const parseContent = (data: Record<string, any> | undefined): List => ({
   fn: data?.fn || "",
+  title: data?.title,
+  description: data?.description,
+  schemaName: data?.schemaName || SCHEMAS[0].name,
+  schema: data?.schema || SCHEMAS[0].schema,
   ...parseMoreInformation(data),
 });
diff --git a/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts b/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts
new file mode 100644
index 0000000000..9030655498
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts
@@ -0,0 +1,69 @@
+import { TextInputType } from "@planx/components/TextInput/model";
+
+import { Schema } from "../model";
+
+/**
+ * Temp simple example to build out UI
+ * Can be re-used as mock for testing
+ */
+export const Zoo: Schema = {
+  type: "Animal",
+  fields: [
+    // Text - short
+    {
+      type: "text",
+      data: {
+        title: "Name your animal",
+        description: "Please make it cute",
+        fn: "name",
+        type: TextInputType.Short,
+      },
+    },
+    // Text - email
+    {
+      type: "text",
+      data: {
+        title: "What's their email address?",
+        fn: "email",
+        type: TextInputType.Email,
+      },
+    },
+    // Number
+    {
+      type: "number",
+      data: {
+        title: "How old are they?",
+        fn: "age",
+        units: "years old",
+        allowNegatives: false,
+      },
+    },
+    // Question - multiple options
+    {
+      type: "question",
+      data: {
+        title: "What size are they?",
+        fn: "size",
+        options: [
+          { id: "small", data: { text: "Small" } },
+          { id: "medium", data: { text: "Medium" } },
+          { id: "large", data: { text: "Large" } },
+        ],
+      },
+    },
+    // Question - only two options
+    {
+      type: "question",
+      data: {
+        title: "How cute are they?",
+        fn: "cuteness",
+        options: [
+          { id: "very", data: { text: "Very" } },
+          { id: "super", data: { text: "Super" } },
+        ],
+      },
+    },
+  ],
+  min: 1,
+  max: 10,
+} as const;

From f2203535b7a3e0e127a31ec865d513683684cc00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 27 May 2024 11:32:17 +0100
Subject: [PATCH 2/5] fix: Move feature flag to Node to avoid 'conditional
 hooks' warning

---
 editor.planx.uk/src/pages/Preview/Node.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/pages/Preview/Node.tsx b/editor.planx.uk/src/pages/Preview/Node.tsx
index b2a22b4dec..eb6ace5e29 100644
--- a/editor.planx.uk/src/pages/Preview/Node.tsx
+++ b/editor.planx.uk/src/pages/Preview/Node.tsx
@@ -30,6 +30,7 @@ import Send from "@planx/components/Send/Public";
 import SetValue from "@planx/components/SetValue/Public";
 import TaskList from "@planx/components/TaskList/Public";
 import TextInput from "@planx/components/TextInput/Public";
+import { hasFeatureFlag } from "lib/featureFlags";
 import { objectWithoutNullishValues } from "lib/objectHelpers";
 import mapAccum from "ramda/src/mapAccum";
 import React from "react";
@@ -169,7 +170,7 @@ const Node: React.FC<any> = (props: Props) => {
       return <FindProperty {...allProps} />;
 
     case TYPES.List:
-      return <List {...allProps} />;
+      return hasFeatureFlag("LIST_COMPONENT") ? <List {...allProps} /> : null;
 
     case TYPES.NextSteps:
       return <NextSteps {...allProps} />;

From 51bfc1a4381b428c36da94359e8175fb8ca098b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 27 May 2024 11:33:32 +0100
Subject: [PATCH 3/5] feat: Basic UI structure

---
 .../src/@planx/components/List/Public.tsx     |  27 ----
 .../@planx/components/List/Public/Fields.tsx  | 134 ++++++++++++++++++
 .../index.test.tsx}                           |   2 +-
 .../@planx/components/List/Public/index.tsx   |  97 +++++++++++++
 editor.planx.uk/src/ui/editor/SelectInput.tsx |   4 +-
 5 files changed, 235 insertions(+), 29 deletions(-)
 delete mode 100644 editor.planx.uk/src/@planx/components/List/Public.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
 rename editor.planx.uk/src/@planx/components/List/{Public.test.tsx => Public/index.test.tsx} (87%)
 create mode 100644 editor.planx.uk/src/@planx/components/List/Public/index.tsx

diff --git a/editor.planx.uk/src/@planx/components/List/Public.tsx b/editor.planx.uk/src/@planx/components/List/Public.tsx
deleted file mode 100644
index 11dd56a160..0000000000
--- a/editor.planx.uk/src/@planx/components/List/Public.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { PublicProps } from "@planx/components/ui";
-import { hasFeatureFlag } from "lib/featureFlags";
-import React from "react";
-import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
-
-import Card from "../shared/Preview/Card";
-import CardHeader from "../shared/Preview/CardHeader";
-import { List } from "./model";
-
-type Props = PublicProps<List>;
-
-function ListComponent(props: Props) {
-  if (!hasFeatureFlag("LIST_COMPONENT")) return null;
-
-  return (
-    <Card handleSubmit={props.handleSubmit} isValid>
-      <CardHeader
-        info={props.info}
-        policyRef={props.policyRef}
-        howMeasured={props.howMeasured}
-      />
-      <FeaturePlaceholder title="Under development" />
-    </Card>
-  );
-}
-
-export default ListComponent;
diff --git a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
new file mode 100644
index 0000000000..17937ab425
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
@@ -0,0 +1,134 @@
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import MenuItem from "@mui/material/MenuItem";
+import RadioGroup from "@mui/material/RadioGroup";
+import React from "react";
+import SelectInput from "ui/editor/SelectInput";
+import InputLabel from "ui/public/InputLabel";
+import Input from "ui/shared/Input";
+import InputRowLabel from "ui/shared/InputRowLabel";
+
+import { DESCRIPTION_TEXT } from "../../shared/constants";
+import BasicRadio from "../../shared/Radio/BasicRadio";
+import type { NumberField, QuestionField, TextField } from "../model";
+
+type Props<T> = T & { id: string };
+
+export const TextFieldInput: React.FC<Props<TextField>> = ({
+  id,
+  data,
+  required,
+}) => (
+  <InputLabel label={data.title} htmlFor={id}>
+    <Input
+      type={((type) => {
+        if (type === "email") return "email";
+        else if (type === "phone") return "tel";
+        return "text";
+      })(data.type)}
+      multiline={data.type && ["long", "extraLong"].includes(data.type)}
+      bordered
+      id={id}
+      rows={
+        data.type && ["long", "extraLong"].includes(data.type) ? 5 : undefined
+      }
+      name="text"
+      required={required}
+      inputProps={{
+        "aria-describedby": [
+          data.description ? DESCRIPTION_TEXT : "",
+          // TODO: When handling errors, revisit this
+          // formik.errors.text ? `${ERROR_MESSAGE}-${inputFieldId}` : "",
+        ]
+          .filter(Boolean)
+          .join(" "),
+      }}
+    />
+  </InputLabel>
+);
+
+export const NumberFieldInput: React.FC<Props<NumberField>> = ({
+  id,
+  data,
+  required,
+}) => (
+  <InputLabel label={data.title} htmlFor={id}>
+    <Box sx={{ display: "flex", alignItems: "baseline" }}>
+      <Input
+        required={required}
+        bordered
+        name="value"
+        type="number"
+        // value={formik.values.value}
+        // onChange={formik.handleChange}
+        // errorMessage={formik.errors.value as string}
+        inputProps={{
+          "aria-describedby": [
+            data.description ? DESCRIPTION_TEXT : "",
+            // formik.errors.value ? `${ERROR_MESSAGE}-${props.id}` : "",
+          ]
+            .filter(Boolean)
+            .join(" "),
+        }}
+        id={id}
+      />
+      {data.units && <InputRowLabel>{data.units}</InputRowLabel>}
+    </Box>
+  </InputLabel>
+);
+
+export const RadioFieldInput: React.FC<Props<QuestionField>> = ({
+  id,
+  data,
+}) => (
+  <FormControl sx={{ width: "100%" }} component="fieldset">
+    <FormLabel
+      component="legend"
+      id={`radio-buttons-group-label-${id}`}
+      sx={(theme) => ({
+        color: theme.palette.text.primary,
+        "&.Mui-focused": {
+          color: theme.palette.text.primary,
+        },
+      })}
+    >
+      {data.title}
+    </FormLabel>
+    {/* <ErrorWrapper id={props.id} error={formik.errors.selected?.id}> */}
+    <RadioGroup
+      aria-labelledby={`radio-buttons-group-label-${id}`}
+      name={`radio-buttons-group-${id}`}
+      sx={{ p: 1 }}
+      // value={formik.values.selected.id}
+    >
+      {data.options.map(({ id, data }) => (
+        <BasicRadio
+          id={id}
+          title={data.text}
+          onChange={() => console.log("change radio")}
+        />
+      ))}
+    </RadioGroup>
+    {/* </ErrorWrapper> */}
+  </FormControl>
+);
+
+export const SelectFieldInput: React.FC<Props<QuestionField>> = ({
+  id,
+  data,
+  required,
+}) => (
+  <InputLabel label={data.title} htmlFor={id}>
+    <SelectInput id={id} bordered required={required}>
+      {data.options.map((option) => (
+        <MenuItem
+          key={option.id}
+          // value={option.data.text}
+        >
+          {option.data.text}
+        </MenuItem>
+      ))}
+    </SelectInput>
+  </InputLabel>
+);
diff --git a/editor.planx.uk/src/@planx/components/List/Public.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
similarity index 87%
rename from editor.planx.uk/src/@planx/components/List/Public.test.tsx
rename to editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
index 316d17a08f..a653cbadc5 100644
--- a/editor.planx.uk/src/@planx/components/List/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { axe, setup } from "testUtils";
 
-import ListComponent from "./Editor";
+import ListComponent from "../Editor";
 
 it("should not have any accessibility violations", async () => {
   const { container } = setup(<ListComponent />);
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
new file mode 100644
index 0000000000..cb98e7caf9
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -0,0 +1,97 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import { PublicProps } from "@planx/components/ui";
+import React from "react";
+import InputRow from "ui/shared/InputRow";
+
+import Card from "../../shared/Preview/Card";
+import CardHeader from "../../shared/Preview/CardHeader";
+import type { Field, List } from "../model";
+import {
+  NumberFieldInput,
+  RadioFieldInput,
+  SelectFieldInput,
+  TextFieldInput,
+} from "./Fields";
+
+type Props = PublicProps<List>;
+
+const ListCard = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(2),
+  backgroundColor: theme.palette.background.paper,
+  border: "1px solid darkgray",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+}));
+
+/**
+ * Controller to return correct user input for field in schema
+ */
+const InputField: React.FC<Field & { index: number }> = (props) => {
+  const inputFieldId = `input-${props.type}-${props.index}`;
+
+  switch (props.type) {
+    case "text":
+      return <TextFieldInput id={inputFieldId} {...props} />;
+    case "number":
+      return <NumberFieldInput id={inputFieldId} {...props} />;
+    case "question":
+      if (props.data.options.length === 2) {
+        return <RadioFieldInput id={inputFieldId} {...props} />;
+      }
+      return <SelectFieldInput id={inputFieldId} {...props} />;
+  }
+};
+
+function ListComponent({
+  info,
+  policyRef,
+  howMeasured,
+  schema,
+  handleSubmit,
+  title,
+  description,
+}: Props) {
+  // TODO: Track user state, allow items to be added and removed
+  // TODO: Track "active" index
+  // TODO: Validate min / max
+  // TODO: Validate user input against schema fields, track errors
+  // TODO: On submit generate a payload
+
+  return (
+    <Card handleSubmit={handleSubmit} isValid>
+      <CardHeader
+        title={title}
+        description={description}
+        info={info}
+        policyRef={policyRef}
+        howMeasured={howMeasured}
+      />
+      <ListCard>
+        <Typography component="h3" variant="h3">
+          {schema.type} index
+        </Typography>
+        {schema.fields.map((field, i) => (
+          <InputRow key={i}>
+            <InputField {...field} index={i} />
+          </InputRow>
+        ))}
+        <Box display="flex" gap={2}>
+          <Button variant="contained" color="primary">
+            Save
+          </Button>
+          <Button>Cancel</Button>
+        </Box>
+      </ListCard>
+      <Button variant="contained" color="secondary">
+        + Add a new {schema.type.toLowerCase()} type
+      </Button>
+    </Card>
+  );
+}
+
+export default ListComponent;
diff --git a/editor.planx.uk/src/ui/editor/SelectInput.tsx b/editor.planx.uk/src/ui/editor/SelectInput.tsx
index 61954a5ae1..926e01b58b 100644
--- a/editor.planx.uk/src/ui/editor/SelectInput.tsx
+++ b/editor.planx.uk/src/ui/editor/SelectInput.tsx
@@ -9,6 +9,7 @@ export interface Props extends SelectProps {
   name?: string;
   children?: ReactNode;
   onChange?: SelectProps["onChange"];
+  bordered?: boolean;
 }
 
 const PREFIX = "SelectInput";
@@ -77,6 +78,7 @@ export default function SelectInput({
   value,
   name,
   onChange,
+  bordered,
   ...props
 }: Props): FCReturn {
   return (
@@ -89,7 +91,7 @@ export default function SelectInput({
       }}
       onChange={onChange}
       IconComponent={ArrowIcon}
-      input={<Input />}
+      input={<Input bordered={bordered} />}
       inputProps={{
         name,
         classes: {

From f07dcee99dafe8fd316996a34a099f0773ac2865 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 27 May 2024 12:48:17 +0100
Subject: [PATCH 4/5] test: Fix a11y test and add todos

---
 .../@planx/components/List/Public/Fields.tsx  |  9 +++-
 .../components/List/Public/index.test.tsx     | 42 ++++++++++++++++---
 .../@planx/components/List/Public/index.tsx   |  4 +-
 editor.planx.uk/src/ui/public/InputLabel.tsx  |  3 +-
 4 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
index 17937ab425..78ab5dc178 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
@@ -119,8 +119,13 @@ export const SelectFieldInput: React.FC<Props<QuestionField>> = ({
   data,
   required,
 }) => (
-  <InputLabel label={data.title} htmlFor={id}>
-    <SelectInput id={id} bordered required={required}>
+  <InputLabel label={data.title} id={`select-label-${id}`}>
+    <SelectInput
+      bordered
+      required={required}
+      title={data.title}
+      labelId={`select-label-${id}`}
+    >
       {data.options.map((option) => (
         <MenuItem
           key={option.id}
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
index a653cbadc5..d66800b79b 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
@@ -1,10 +1,42 @@
 import React from "react";
 import { axe, setup } from "testUtils";
 
-import ListComponent from "../Editor";
+import ListComponent, { Props } from "../Public";
+import { Zoo } from "../schemas/Zoo";
 
-it("should not have any accessibility violations", async () => {
-  const { container } = setup(<ListComponent />);
-  const results = await axe(container);
-  expect(results).toHaveNoViolations();
+const mockProps: Props = {
+  fn: "mock",
+  schema: Zoo,
+  schemaName: "Zoo",
+  title: "Mock Title",
+  description: "Mock description",
+};
+
+describe("Basic UI", () => {
+  it.todo("renders correctly");
+
+  it.todo("parses provided schema to render expected form");
+
+  it("should not have any accessibility violations", async () => {
+    const { container } = setup(<ListComponent {...mockProps} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe("Navigating back", () => {
+  test.todo("it pre-populates list correctly");
+});
+
+describe("Building a list", () => {
+  test.todo("Adding an item");
+  test.todo("Editing an item");
+  test.todo("Removing an item");
+});
+
+describe("Form validation and error handling", () => {
+  test.todo("Text field");
+  test.todo("Number field");
+  test.todo("Question field - select");
+  test.todo("Question field - radio");
 });
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
index cb98e7caf9..654e00a0ee 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -16,7 +16,7 @@ import {
   TextFieldInput,
 } from "./Fields";
 
-type Props = PublicProps<List>;
+export type Props = PublicProps<List>;
 
 const ListCard = styled(Box)(({ theme }) => ({
   padding: theme.spacing(2),
@@ -72,7 +72,7 @@ function ListComponent({
         howMeasured={howMeasured}
       />
       <ListCard>
-        <Typography component="h3" variant="h3">
+        <Typography component="h2" variant="h3">
           {schema.type} index
         </Typography>
         {schema.fields.map((field, i) => (
diff --git a/editor.planx.uk/src/ui/public/InputLabel.tsx b/editor.planx.uk/src/ui/public/InputLabel.tsx
index 0ee71532dc..816006a974 100644
--- a/editor.planx.uk/src/ui/public/InputLabel.tsx
+++ b/editor.planx.uk/src/ui/public/InputLabel.tsx
@@ -13,9 +13,10 @@ export default function InputLabel(props: {
   children: ReactNode;
   hidden?: boolean;
   htmlFor?: string;
+  id?: string;
 }) {
   return (
-    <Root htmlFor={props.htmlFor}>
+    <Root htmlFor={props.htmlFor} id={props.id}>
       <Typography
         sx={{ pb: 1 }}
         variant="body1"

From 0243169472062725c34c2621e57b5aff0b2c101a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 27 May 2024 13:57:59 +0100
Subject: [PATCH 5/5] test: Basic test of form structure being build from test
 schema

---
 .../@planx/components/List/Public/Fields.tsx  |  6 +-
 .../components/List/Public/index.test.tsx     | 78 ++++++++++++++++++-
 .../src/@planx/components/List/schemas/Zoo.ts |  2 +-
 3 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
index 78ab5dc178..59150f431b 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
@@ -104,6 +104,7 @@ export const RadioFieldInput: React.FC<Props<QuestionField>> = ({
     >
       {data.options.map(({ id, data }) => (
         <BasicRadio
+          key={id}
           id={id}
           title={data.text}
           onChange={() => console.log("change radio")}
@@ -127,10 +128,7 @@ export const SelectFieldInput: React.FC<Props<QuestionField>> = ({
       labelId={`select-label-${id}`}
     >
       {data.options.map((option) => (
-        <MenuItem
-          key={option.id}
-          // value={option.data.text}
-        >
+        <MenuItem key={option.id} value={option.data.text}>
           {option.data.text}
         </MenuItem>
       ))}
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
index d66800b79b..d4c1d036b4 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
@@ -13,9 +13,79 @@ const mockProps: Props = {
 };
 
 describe("Basic UI", () => {
-  it.todo("renders correctly");
+  it("renders correctly", () => {
+    const { getByText } = setup(<ListComponent {...mockProps} />);
 
-  it.todo("parses provided schema to render expected form");
+    expect(getByText(/Mock Title/)).toBeInTheDocument();
+    expect(getByText(/Mock description/)).toBeInTheDocument();
+  });
+
+  it("parses provided schema to render expected form", async () => {
+    const { getByLabelText, getByText, user, getByRole, queryAllByRole } =
+      setup(<ListComponent {...mockProps} />);
+
+    // Text inputs are generated from schema...
+    const textInput = getByLabelText(/What's their name?/) as HTMLInputElement;
+    expect(textInput).toBeInTheDocument();
+    expect(textInput.type).toBe("text");
+
+    // Props are correctly read
+    const emailInput = getByLabelText(
+      /What's their email address?/,
+    ) as HTMLInputElement;
+    expect(emailInput).toBeInTheDocument();
+    expect(emailInput.type).toBe("email");
+
+    // Number inputs are generated from schema
+    const numberInput = getByLabelText(/How old are they?/) as HTMLInputElement;
+    expect(numberInput).toBeInTheDocument();
+    expect(numberInput.type).toBe("number");
+
+    // Props are correctly read
+    const units = getByText(/years old/);
+    expect(units).toBeInTheDocument();
+
+    // Question inputs generated from schema
+    // Combobox displayed when number of options > 2
+    const selectInput = getByRole("combobox");
+    expect(selectInput).toBeInTheDocument();
+
+    // Open combobox
+    await user.click(selectInput);
+
+    // All options display
+    expect(getByRole("option", { name: "Small" })).toBeInTheDocument();
+    expect(getByRole("option", { name: "Medium" })).toBeInTheDocument();
+    expect(getByRole("option", { name: "Large" })).toBeInTheDocument();
+
+    // No default option selected
+    expect(
+      queryAllByRole("option", { selected: true }) as HTMLOptionElement[],
+    ).toHaveLength(0);
+
+    // Close combobox
+    await user.click(selectInput);
+
+    // Radio groups displayed when number of options = 2
+    const radioInput = getByLabelText(/How cute are they?/);
+    expect(radioInput).toBeInTheDocument();
+
+    // All options display
+    const radioButton1 = getByLabelText("Very") as HTMLInputElement;
+    expect(radioButton1).toBeInTheDocument();
+    expect(radioButton1.type).toBe("radio");
+
+    const radioButton2 = getByLabelText("Super") as HTMLInputElement;
+    expect(radioButton2).toBeInTheDocument();
+    expect(radioButton2.type).toBe("radio");
+
+    // No default option selected
+    expect(radioButton1).not.toBeChecked();
+    expect(radioButton2).not.toBeChecked();
+
+    expect(getByText(/Save/, { selector: "button" })).toBeInTheDocument();
+    expect(getByText(/Cancel/, { selector: "button" })).toBeInTheDocument();
+  });
 
   it("should not have any accessibility violations", async () => {
     const { container } = setup(<ListComponent {...mockProps} />);
@@ -40,3 +110,7 @@ describe("Form validation and error handling", () => {
   test.todo("Question field - select");
   test.todo("Question field - radio");
 });
+
+describe("Payload generation", () => {
+  it.todo("generates a valid payload on submission");
+});
diff --git a/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts b/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts
index 9030655498..655512f182 100644
--- a/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts
+++ b/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts
@@ -13,7 +13,7 @@ export const Zoo: Schema = {
     {
       type: "text",
       data: {
-        title: "Name your animal",
+        title: "What's their name?",
         description: "Please make it cute",
         fn: "name",
         type: TextInputType.Short,