From 917288f8e739ee3347026671bca62319df5b313a Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 09:51:38 +0000
Subject: [PATCH 01/31] add mocked data for new fields

---
 .../cms/pages/fixtures/page/feedback.ts       | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 90194b34..916feb61 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -82,6 +82,32 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: '',
       default_value: '',
     },
+    {
+      id: 5,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+      label: 'Select all the options you would you like to see on the dashboard in the future?',
+      field_type: 'checkboxes',
+      help_text: 'Select all that apply',
+      required: false,
+      choices: '',
+      default_value: 'Improve\r\nModify',
+    },
+    {
+      id: 6,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+      label: 'Choose some options you would like to see on the dashboard in the future?',
+      field_type: 'dropdown',
+      help_text: '',
+      required: false,
+      choices: 'Option One\r\nOption Two',
+      default_value: '',
+    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From 70f5af419ca705f5cc76930124b96d1146b322bd Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 11:39:17 +0000
Subject: [PATCH 02/31] add mock data for number field

---
 .../handlers/cms/pages/fixtures/page/feedback.ts    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 916feb61..7b030030 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -108,6 +108,19 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: 'Option One\r\nOption Two',
       default_value: '',
     },
+    {
+      id: 7,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'enter-any-number',
+      label: 'Enter any number',
+      field_type: 'number',
+      help_text: '',
+      required: false,
+      choices: '',
+      default_value: '',
+    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From d6f5cc33db7844417cc8a65ab7a6d2c55e877b82 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 12:05:15 +0000
Subject: [PATCH 03/31] add mock data for field type

---
 .../handlers/cms/pages/fixtures/page/feedback.ts    | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 7b030030..916feb61 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -108,19 +108,6 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: 'Option One\r\nOption Two',
       default_value: '',
     },
-    {
-      id: 7,
-      meta: {
-        type: 'forms.FormField',
-      },
-      clean_name: 'enter-any-number',
-      label: 'Enter any number',
-      field_type: 'number',
-      help_text: '',
-      required: false,
-      choices: '',
-      default_value: '',
-    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From e8d1935ed06c524275e5d629998f0a8864fc8436 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 12:20:20 +0000
Subject: [PATCH 04/31] no unused vars

---
 src/app/components/cms/Feedback/EmailField.tsx | 18 ++++++++++++++++++
 src/app/components/cms/Feedback/Feedback.tsx   | 16 +++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/app/components/cms/Feedback/EmailField.tsx

diff --git a/src/app/components/cms/Feedback/EmailField.tsx b/src/app/components/cms/Feedback/EmailField.tsx
new file mode 100644
index 00000000..5e88bc66
--- /dev/null
+++ b/src/app/components/cms/Feedback/EmailField.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { Fieldtype } from './Feedback'
+
+export default function EmailField({ label, helpText, cleanName }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <h2 className="govuk-label-wrapper">
+        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+          {label}
+        </label>
+      </h2>
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+      <input className="govuk-input" name={cleanName} id={cleanName} type="email" />
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index 619fcaa8..08f5c2be 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -6,6 +6,7 @@ import { useFormState } from 'react-dom'
 import { z } from 'zod'
 
 import { FormField } from '@/api/models/cms/Page/FormFields'
+import EmailField from '@/app/components/cms/Feedback/EmailField'
 
 import { handler } from '../utils/handler'
 
@@ -14,6 +15,14 @@ const initialState = {
   errors: {},
 }
 
+export interface Fieldtype {
+  label: string
+  helpText: string
+  cleanName: string
+  choices?: string
+  defaultValue?: string
+}
+
 interface FeedbackProps {
   formFields: {
     id: number
@@ -44,7 +53,7 @@ export default function Feedback({ formFields }: FeedbackProps) {
     <div className="govuk-grid-row">
       <form className="govuk-grid-column-two-thirds" action={formAction}>
         {formFields.map(renderFormFields)}
-
+        {state.message}
         <div className="govuk-button-group">
           <button className="govuk-button" type="submit">
             Submit
@@ -67,12 +76,11 @@ export const renderFormFields = ({
   // TODO: Required validation added in ticket CDD-2300
   // required,
   choices,
-  // default_value: defaultValue,
 }: z.infer<typeof FormField>) => {
   const choicesList = choices.includes('\r\n') ? choices.split('\r\n') : choices.split(',')
 
   // TODO: Implement default values only for checkboxes
-  // const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
+  //const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
 
   return (
     <Fragment key={id}>
@@ -123,6 +131,8 @@ export const renderFormFields = ({
           </div>
         </fieldset>
       )}
+
+      {fieldType === 'email' && <EmailField label={label} helpText={helpText} cleanName={cleanName} />}
     </Fragment>
   )
 }

From aa4dfb8ac32df410ca311c6ff0f011bd65481059 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 12:45:18 +0000
Subject: [PATCH 05/31] add Checkboxes form field

---
 .../cms/Feedback/CheckboxesField.tsx          | 42 +++++++++++++++++++
 src/app/components/cms/Feedback/Feedback.tsx  | 12 ++++--
 2 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/app/components/cms/Feedback/CheckboxesField.tsx

diff --git a/src/app/components/cms/Feedback/CheckboxesField.tsx b/src/app/components/cms/Feedback/CheckboxesField.tsx
new file mode 100644
index 00000000..644a33d3
--- /dev/null
+++ b/src/app/components/cms/Feedback/CheckboxesField.tsx
@@ -0,0 +1,42 @@
+import { Fieldtype } from './Feedback'
+
+export default function CheckboxesField({ label, helpText, cleanName, defaultValue = '' }: Fieldtype) {
+  const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
+  const trimmedValuesList = defaultValuesList.map((value) => value.trim())
+
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <fieldset className="govuk-fieldset govuk-!-margin-bottom-9">
+        <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+          <h2 className="govuk-fieldset__heading">
+            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+              {label}
+            </label>
+          </h2>
+        </legend>
+
+        {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+        <div className="govuk-checkboxes" data-module="govuk-checkboxes">
+          {trimmedValuesList.map((defaultVal, key) => {
+            const uniqueId = `${cleanName}-${key}` // Generate a unique ID for each checkbox
+            return (
+              <div key={key} className="govuk-checkboxes__item">
+                <input
+                  className="govuk-checkboxes__input"
+                  id={uniqueId}
+                  name={cleanName}
+                  type="checkbox"
+                  value={defaultVal}
+                />
+                <label className="govuk-label govuk-checkboxes__label" htmlFor={uniqueId}>
+                  {defaultVal}
+                </label>
+              </div>
+            )
+          })}
+        </div>
+      </fieldset>
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index 08f5c2be..acb67b96 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -6,9 +6,10 @@ import { useFormState } from 'react-dom'
 import { z } from 'zod'
 
 import { FormField } from '@/api/models/cms/Page/FormFields'
-import EmailField from '@/app/components/cms/Feedback/EmailField'
 
 import { handler } from '../utils/handler'
+import CheckboxesField from './CheckboxesField'
+import EmailField from './EmailField'
 
 const initialState = {
   message: '',
@@ -53,7 +54,7 @@ export default function Feedback({ formFields }: FeedbackProps) {
     <div className="govuk-grid-row">
       <form className="govuk-grid-column-two-thirds" action={formAction}>
         {formFields.map(renderFormFields)}
-        {state.message}
+
         <div className="govuk-button-group">
           <button className="govuk-button" type="submit">
             Submit
@@ -76,11 +77,12 @@ export const renderFormFields = ({
   // TODO: Required validation added in ticket CDD-2300
   // required,
   choices,
+  default_value: defaultValue,
 }: z.infer<typeof FormField>) => {
   const choicesList = choices.includes('\r\n') ? choices.split('\r\n') : choices.split(',')
 
   // TODO: Implement default values only for checkboxes
-  //const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
+  // const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
 
   return (
     <Fragment key={id}>
@@ -133,6 +135,10 @@ export const renderFormFields = ({
       )}
 
       {fieldType === 'email' && <EmailField label={label} helpText={helpText} cleanName={cleanName} />}
+
+      {fieldType === 'checkboxes' && (
+        <CheckboxesField label={label} helpText={helpText} cleanName={cleanName} defaultValue={defaultValue} />
+      )}
     </Fragment>
   )
 }

From b0cf0859bd9970a50ffc2f4dec95a5893216a6bd Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 13:11:02 +0000
Subject: [PATCH 06/31] add Url, Dropdown, and Number Field types/component

---
 .../components/cms/Feedback/DropdownField.tsx | 29 +++++++++++++++++++
 src/app/components/cms/Feedback/Feedback.tsx  | 11 +++++++
 .../components/cms/Feedback/NumberField.tsx   | 18 ++++++++++++
 src/app/components/cms/Feedback/UrlField.tsx  | 19 ++++++++++++
 4 files changed, 77 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/DropdownField.tsx
 create mode 100644 src/app/components/cms/Feedback/NumberField.tsx
 create mode 100644 src/app/components/cms/Feedback/UrlField.tsx

diff --git a/src/app/components/cms/Feedback/DropdownField.tsx b/src/app/components/cms/Feedback/DropdownField.tsx
new file mode 100644
index 00000000..3cb3f26c
--- /dev/null
+++ b/src/app/components/cms/Feedback/DropdownField.tsx
@@ -0,0 +1,29 @@
+import { Fieldtype } from './Feedback'
+
+export default function DropdownField({ label, helpText, cleanName, choices = '' }: Fieldtype) {
+  const choicesList = choices.includes('\r\n') ? choices.split('\r\n') : choices.split(',')
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <h2 className="govuk-label-wrapper">
+        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+          {label}
+        </label>
+      </h2>
+
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+      <select className="govuk-select" id={cleanName} name={cleanName} aria-describedby={helpText}>
+        <option value="choose an option" data-testid="submit-button">
+          Choose an option
+        </option>
+        {choicesList.map((choice, key) => {
+          return (
+            <option key={key} value={choice}>
+              {choice}
+            </option>
+          )
+        })}
+      </select>
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index acb67b96..90faa905 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -9,7 +9,10 @@ import { FormField } from '@/api/models/cms/Page/FormFields'
 
 import { handler } from '../utils/handler'
 import CheckboxesField from './CheckboxesField'
+import DropdownField from './DropdownField'
 import EmailField from './EmailField'
+import NumberField from './NumberField'
+import UrlField from './UrlField'
 
 const initialState = {
   message: '',
@@ -139,6 +142,14 @@ export const renderFormFields = ({
       {fieldType === 'checkboxes' && (
         <CheckboxesField label={label} helpText={helpText} cleanName={cleanName} defaultValue={defaultValue} />
       )}
+
+      {fieldType === 'number' && <NumberField label={label} helpText={helpText} cleanName={cleanName} />}
+
+      {fieldType === 'url' && <UrlField label={label} helpText={helpText} cleanName={cleanName} />}
+
+      {fieldType === 'dropdown' && (
+        <DropdownField label={label} helpText={helpText} cleanName={cleanName} choices={choices} />
+      )}
     </Fragment>
   )
 }
diff --git a/src/app/components/cms/Feedback/NumberField.tsx b/src/app/components/cms/Feedback/NumberField.tsx
new file mode 100644
index 00000000..bd7fbec5
--- /dev/null
+++ b/src/app/components/cms/Feedback/NumberField.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { Fieldtype } from './Feedback'
+
+export default function NumberField({ label, helpText, cleanName }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <h2 className="govuk-label-wrapper">
+        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+          {label}
+        </label>
+      </h2>
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+      <input className="govuk-input" name={cleanName} id={cleanName} inputMode="numeric" />
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/UrlField.tsx b/src/app/components/cms/Feedback/UrlField.tsx
new file mode 100644
index 00000000..ae564d92
--- /dev/null
+++ b/src/app/components/cms/Feedback/UrlField.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { Fieldtype } from './Feedback'
+
+export default function UrlField({ label, helpText, cleanName }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <h2 className="govuk-label-wrapper">
+        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+          {label}
+        </label>
+      </h2>
+
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+      <input className="govuk-input" name={cleanName} id={cleanName} type="text" />
+    </div>
+  )
+}

From 9630d499a9623d1c7d10b54012b3ee8ec8e1f53b Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 13:20:22 +0000
Subject: [PATCH 07/31] add mock data for phone, url and number

---
 .../cms/pages/fixtures/page/feedback.ts       | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 916feb61..2734a9f6 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -108,6 +108,45 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: 'Option One\r\nOption Two',
       default_value: '',
     },
+    {
+      id: 7,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'what_is_your_email',
+      label: 'Tell us your email',
+      field_type: 'email',
+      help_text: '',
+      required: false,
+      choices: '',
+      default_value: '',
+    },
+    {
+      id: 8,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'what_is_your_phone_number',
+      label: 'Tell us your phone number',
+      field_type: 'number',
+      help_text: '',
+      required: false,
+      choices: '',
+      default_value: '',
+    },
+    {
+      id: 9,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'enter_a_url',
+      label: 'Enter your url here',
+      field_type: 'url',
+      help_text: '',
+      required: false,
+      choices: '',
+      default_value: '',
+    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From f1de03eb43718d6ef3ccba5390ab83d62b926eff Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 13:53:12 +0000
Subject: [PATCH 08/31] add unit test for Email field

---
 .../cms/Feedback/Emailfield.spec.tsx          | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Emailfield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Emailfield.spec.tsx b/src/app/components/cms/Feedback/Emailfield.spec.tsx
new file mode 100644
index 00000000..152339d4
--- /dev/null
+++ b/src/app/components/cms/Feedback/Emailfield.spec.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from '@/config/test-utils'
+
+import EmailField from './EmailField'
+
+describe('EmailField Component', () => {
+  it('should render the component with a label, helpText, and an email input', () => {
+    const label = 'Email address'
+    const helpText = 'Please enter a valid email address.'
+    const cleanName = 'email'
+
+    render(<EmailField label={label} helpText={helpText} cleanName={cleanName} />)
+
+    const labelElement = screen.getByLabelText(label)
+    expect(labelElement).toBeInTheDocument()
+
+    const helpTextElement = screen.getByText(helpText)
+    expect(helpTextElement).toBeInTheDocument()
+
+    const inputElement = screen.getByRole('textbox')
+    expect(inputElement).toHaveAttribute('type', 'email')
+    expect(inputElement).toHaveAttribute('name', cleanName)
+    expect(inputElement).toHaveAttribute('id', cleanName)
+  })
+})

From df3e73d35e417ab6576db1748aeeb36f777e3061 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 13:56:23 +0000
Subject: [PATCH 09/31] add unit test for Number field

---
 .../cms/Feedback/Numberfield.spec.tsx         | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Numberfield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Numberfield.spec.tsx b/src/app/components/cms/Feedback/Numberfield.spec.tsx
new file mode 100644
index 00000000..7d9db9bd
--- /dev/null
+++ b/src/app/components/cms/Feedback/Numberfield.spec.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@/config/test-utils'
+
+import NumberField from './NumberField'
+
+describe('NumberField', () => {
+  test('should render the component with a label, helpText, and numeric input field', () => {
+    const label = 'Phone Number'
+    const helpText = 'Please enter your phone number.'
+    const cleanName = 'phone-number'
+
+    render(<NumberField label={label} helpText={helpText} cleanName={cleanName} />)
+
+    // see if the label is rendered correctly
+    const labelElement = screen.getByLabelText(label)
+    expect(labelElement).toBeInTheDocument()
+
+    // help text rendered correctly
+    const helpTextElement = screen.getByText(helpText)
+    expect(helpTextElement).toBeInTheDocument()
+
+    // input rendered with  correct attributes
+    const inputElement = screen.getByRole('textbox')
+    expect(inputElement).toHaveAttribute('name', cleanName)
+    expect(inputElement).toHaveAttribute('id', cleanName)
+    expect(inputElement).toHaveAttribute('inputMode', 'numeric')
+  })
+
+  test('should not render help text when helpText is an empty string', () => {
+    const label = 'Phone Number'
+    const helpText = ''
+    const cleanName = 'phone-number'
+
+    render(<NumberField label={label} helpText={helpText} cleanName={cleanName} />)
+
+    // Check that help text is not rendered
+    const helpTextElement = screen.queryByText('Please enter your phone number.')
+    expect(helpTextElement).not.toBeInTheDocument()
+  })
+})

From 5270cd23c58bd56745f75643b1ca90252986ca94 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 13:59:44 +0000
Subject: [PATCH 10/31] add test for Url field

---
 .../components/cms/Feedback/Urlfield.spec.tsx | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Urlfield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Urlfield.spec.tsx b/src/app/components/cms/Feedback/Urlfield.spec.tsx
new file mode 100644
index 00000000..b899bec5
--- /dev/null
+++ b/src/app/components/cms/Feedback/Urlfield.spec.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from '@/config/test-utils'
+
+import UrlField from './UrlField'
+
+describe('UrlField', () => {
+  test('renders label correctly', () => {
+    const label = 'https://ukhsa-dashboard.data.gov.uk'
+    const helpText = 'Please enter a valid URL.'
+    const cleanName = 'website-url'
+
+    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+
+    const labelElement = screen.getByLabelText(label)
+    expect(labelElement).toBeInTheDocument()
+    expect(labelElement).toHaveAttribute('type', 'text')
+  })
+
+  test('should render the component with a label, helpText, and an email input', () => {
+    const label = 'Email Address'
+    const helpText = 'https://ukhsa-dashboard.data.gov.uk'
+    const cleanName = 'email-address'
+
+    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+
+    // Check
+    const labelElement = screen.getByLabelText(label)
+    expect(labelElement).toBeInTheDocument()
+
+    const helpTextElement = screen.getByText(helpText)
+    expect(helpTextElement).toBeInTheDocument()
+
+    const inputElement = screen.getByRole('textbox')
+    expect(inputElement).toHaveAttribute('type', 'text')
+    expect(inputElement).toHaveAttribute('name', cleanName)
+    expect(inputElement).toHaveAttribute('id', cleanName)
+  })
+
+  test('renders help text if provided', () => {
+    const label = 'https://ukhsa-dashboard.data.gov.uk'
+    const helpText = 'Please enter a valid URL.'
+    const cleanName = 'website-url'
+
+    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+
+    // Check if the help text is rendered correctly
+    const helpTextElement = screen.getByText(helpText)
+    expect(helpTextElement).toBeInTheDocument()
+  })
+
+  test('renders input with correct name and id attributes', () => {
+    const label = 'Website URL'
+    const helpText = 'https://ukhsa-dashboard.data.gov.uk'
+    const cleanName = 'website-url'
+
+    render(<UrlField label={label} helpText={helpText} cleanName={cleanName} />)
+
+    // Check if the input has the correct name and id
+    const inputElement = screen.getByRole('textbox')
+    expect(inputElement).toHaveAttribute('name', cleanName)
+    expect(inputElement).toHaveAttribute('id', cleanName)
+  })
+})

From 6c49160685d4ff244aa95439d66d30d613fcb4a6 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 14:03:30 +0000
Subject: [PATCH 11/31] add unit test for Check boxes

---
 .../cms/Feedback/Checkboxesfield.spec.tsx     | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Checkboxesfield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Checkboxesfield.spec.tsx b/src/app/components/cms/Feedback/Checkboxesfield.spec.tsx
new file mode 100644
index 00000000..785c6a6e
--- /dev/null
+++ b/src/app/components/cms/Feedback/Checkboxesfield.spec.tsx
@@ -0,0 +1,81 @@
+import { render, screen } from '@/config/test-utils'
+
+import CheckboxesField from './CheckboxesField'
+
+describe('CheckboxesField Component', () => {
+  const mockProps = {
+    label: 'What would you like to see on the dashboard in the future?',
+    helpText: 'Pick one option from the list.',
+    cleanName: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+    defaultValue: 'Option 1, Option 2, Option 3',
+  }
+
+  it('should render the label correctly', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    const labelElement = screen.getByText(mockProps.label)
+    expect(labelElement).toBeInTheDocument()
+  })
+
+  it('should render help text if provided', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    const helpTextElement = screen.getByText(mockProps.helpText)
+    expect(helpTextElement).toBeInTheDocument()
+  })
+
+  it('should not render help text if not provided', () => {
+    render(<CheckboxesField {...{ ...mockProps, helpText: '' }} />)
+
+    const helpTextElement = screen.queryByText(mockProps.helpText)
+    expect(helpTextElement).toBeNull()
+  })
+
+  it('should render the correct number of checkboxes based on the defaultValue', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    const checkboxes = screen.getAllByRole('checkbox')
+    expect(checkboxes).toHaveLength(3) // There are 3 choices in the defaultValue
+  })
+
+  it('should render checkboxes with correct labels and values', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check that the checkboxes are present
+    const checkboxOption1 = screen.getByLabelText('Option 1')
+    const checkboxOption2 = screen.getByLabelText('Option 2')
+    const checkboxOption3 = screen.getByLabelText('Option 3')
+
+    expect(checkboxOption1).toBeInTheDocument()
+    expect(checkboxOption2).toBeInTheDocument()
+    expect(checkboxOption3).toBeInTheDocument()
+
+    // Check that the checkboxes have the correct value
+    expect(checkboxOption1).toHaveAttribute('value', 'Option 1')
+    expect(checkboxOption2).toHaveAttribute('value', 'Option 2')
+    expect(checkboxOption3).toHaveAttribute('value', 'Option 3')
+  })
+
+  it('should correctly handle defaultValue with newline characters', () => {
+    const propsWithNewline = {
+      ...mockProps,
+      defaultValue: 'Option 1\r\nOption 2\r\nOption 3',
+    }
+
+    render(<CheckboxesField {...propsWithNewline} />)
+
+    const checkboxes = screen.getAllByRole('checkbox')
+    expect(checkboxes).toHaveLength(3) // There are 3 options in the defaultValue with newline characters
+  })
+
+  it('should correctly render the cleanName in the checkbox inputs', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    const checkboxes = screen.getAllByRole('checkbox')
+    checkboxes.forEach((checkbox, index) => {
+      const uniqueId = `${mockProps.cleanName}-${index}` // Match the generated id
+      expect(checkbox).toHaveAttribute('name', mockProps.cleanName)
+      expect(checkbox).toHaveAttribute('id', uniqueId) // Check that the id is unique
+    })
+  })
+})

From 53636d8558d49791cc0fb274a6364788db5a4a30 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 14:08:14 +0000
Subject: [PATCH 12/31] add unit test for Dropdown field component

---
 .../cms/Feedback/Dropdownfield.spec.tsx       | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Dropdownfield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Dropdownfield.spec.tsx b/src/app/components/cms/Feedback/Dropdownfield.spec.tsx
new file mode 100644
index 00000000..61b54503
--- /dev/null
+++ b/src/app/components/cms/Feedback/Dropdownfield.spec.tsx
@@ -0,0 +1,73 @@
+import { render, screen } from '@/config/test-utils'
+
+import DropdownField from './DropdownField'
+
+describe('Dropdownfield Component', () => {
+  const mockProps = {
+    label: 'What would you like to see on the dashboard in the future?',
+    helpText: 'Pick one option from the list.',
+    cleanName: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+    choices: 'Option 1, Option 2, Option 3',
+  }
+
+  it('should render the label correctly', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const labelElement = screen.getByText('What would you like to see on the dashboard in the future?')
+    expect(labelElement).toBeInTheDocument()
+  })
+
+  it('should render help text if provided', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const helpTextElement = screen.getByText('Pick one option from the list.')
+    expect(helpTextElement).toBeInTheDocument()
+  })
+
+  it('should not render help text if not provided', () => {
+    render(<DropdownField {...{ ...mockProps, helpText: '' }} />)
+
+    const helpTextElement = screen.queryByText('Pick one option from the list.')
+    expect(helpTextElement).toBeNull()
+  })
+
+  it('should render the default "Choose an option" option', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const defaultOption = screen.getByText('Choose an option')
+    expect(defaultOption).toBeInTheDocument()
+  })
+
+  it('should render options based on choices string with commas', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(4) // 3 options + 1 default option
+    expect(screen.getByText('Option 1')).toBeInTheDocument()
+    expect(screen.getByText('Option 2')).toBeInTheDocument()
+    expect(screen.getByText('Option 3')).toBeInTheDocument()
+  })
+
+  it('should render options based on choices string with newline', () => {
+    const propsWithNewlineChoices = {
+      ...mockProps,
+      choices: 'Option 1\r\nOption 2\r\nOption 3',
+    }
+    render(<DropdownField {...propsWithNewlineChoices} />)
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(4) // 3 options + 1 default option
+    expect(screen.getByText('Choose an option')).toBeInTheDocument()
+    expect(screen.getByText('Option 1')).toBeInTheDocument()
+    expect(screen.getByText('Option 2')).toBeInTheDocument()
+    expect(screen.getByText('Option 3')).toBeInTheDocument()
+  })
+
+  it('should correctly render the cleanName in the select input', () => {
+    render(<DropdownField {...mockProps} />)
+
+    const selectElement = screen.getByRole('combobox')
+    expect(selectElement).toHaveAttribute('name', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
+    expect(selectElement).toHaveAttribute('id', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
+  })
+})

From 2f5167a0c328ddde22f7cedb394ff2849b437c6a Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Mon, 25 Nov 2024 14:28:03 +0000
Subject: [PATCH 13/31] add folders for each component+test file

---
 src/app/components/cms/Feedback/Feedback.tsx           | 10 +++++-----
 .../{ => Fields/Checkboxes}/CheckboxesField.tsx        |  2 +-
 .../{ => Fields/Checkboxes}/Checkboxesfield.spec.tsx   |  0
 .../Feedback/{ => Fields/Dropdown}/DropdownField.tsx   |  2 +-
 .../{ => Fields/Dropdown}/Dropdownfield.spec.tsx       |  0
 .../cms/Feedback/{ => Fields/Email}/EmailField.tsx     |  2 +-
 .../Feedback/{ => Fields/Email}/Emailfield.spec.tsx    |  0
 .../cms/Feedback/{ => Fields/Number}/NumberField.tsx   |  2 +-
 .../Feedback/{ => Fields/Number}/Numberfield.spec.tsx  |  0
 .../cms/Feedback/{ => Fields/Url}/UrlField.tsx         |  2 +-
 .../cms/Feedback/{ => Fields/Url}/Urlfield.spec.tsx    |  0
 11 files changed, 10 insertions(+), 10 deletions(-)
 rename src/app/components/cms/Feedback/{ => Fields/Checkboxes}/CheckboxesField.tsx (97%)
 rename src/app/components/cms/Feedback/{ => Fields/Checkboxes}/Checkboxesfield.spec.tsx (100%)
 rename src/app/components/cms/Feedback/{ => Fields/Dropdown}/DropdownField.tsx (95%)
 rename src/app/components/cms/Feedback/{ => Fields/Dropdown}/Dropdownfield.spec.tsx (100%)
 rename src/app/components/cms/Feedback/{ => Fields/Email}/EmailField.tsx (92%)
 rename src/app/components/cms/Feedback/{ => Fields/Email}/Emailfield.spec.tsx (100%)
 rename src/app/components/cms/Feedback/{ => Fields/Number}/NumberField.tsx (92%)
 rename src/app/components/cms/Feedback/{ => Fields/Number}/Numberfield.spec.tsx (100%)
 rename src/app/components/cms/Feedback/{ => Fields/Url}/UrlField.tsx (92%)
 rename src/app/components/cms/Feedback/{ => Fields/Url}/Urlfield.spec.tsx (100%)

diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index 90faa905..b2a42dfe 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -8,11 +8,11 @@ import { z } from 'zod'
 import { FormField } from '@/api/models/cms/Page/FormFields'
 
 import { handler } from '../utils/handler'
-import CheckboxesField from './CheckboxesField'
-import DropdownField from './DropdownField'
-import EmailField from './EmailField'
-import NumberField from './NumberField'
-import UrlField from './UrlField'
+import CheckboxesField from './Fields/Checkboxes/CheckboxesField'
+import DropdownField from './Fields/Dropdown/DropdownField'
+import EmailField from './Fields/Email/EmailField'
+import NumberField from './Fields/Number/NumberField'
+import UrlField from './Fields/Url/UrlField'
 
 const initialState = {
   message: '',
diff --git a/src/app/components/cms/Feedback/CheckboxesField.tsx b/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
similarity index 97%
rename from src/app/components/cms/Feedback/CheckboxesField.tsx
rename to src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
index 644a33d3..ab712c74 100644
--- a/src/app/components/cms/Feedback/CheckboxesField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
@@ -1,4 +1,4 @@
-import { Fieldtype } from './Feedback'
+import { Fieldtype } from '../../Feedback'
 
 export default function CheckboxesField({ label, helpText, cleanName, defaultValue = '' }: Fieldtype) {
   const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
diff --git a/src/app/components/cms/Feedback/Checkboxesfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx
similarity index 100%
rename from src/app/components/cms/Feedback/Checkboxesfield.spec.tsx
rename to src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx
diff --git a/src/app/components/cms/Feedback/DropdownField.tsx b/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx
similarity index 95%
rename from src/app/components/cms/Feedback/DropdownField.tsx
rename to src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx
index 3cb3f26c..2e8dfbc2 100644
--- a/src/app/components/cms/Feedback/DropdownField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx
@@ -1,4 +1,4 @@
-import { Fieldtype } from './Feedback'
+import { Fieldtype } from '../../Feedback'
 
 export default function DropdownField({ label, helpText, cleanName, choices = '' }: Fieldtype) {
   const choicesList = choices.includes('\r\n') ? choices.split('\r\n') : choices.split(',')
diff --git a/src/app/components/cms/Feedback/Dropdownfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx
similarity index 100%
rename from src/app/components/cms/Feedback/Dropdownfield.spec.tsx
rename to src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx
diff --git a/src/app/components/cms/Feedback/EmailField.tsx b/src/app/components/cms/Feedback/Fields/Email/EmailField.tsx
similarity index 92%
rename from src/app/components/cms/Feedback/EmailField.tsx
rename to src/app/components/cms/Feedback/Fields/Email/EmailField.tsx
index 5e88bc66..a3de12df 100644
--- a/src/app/components/cms/Feedback/EmailField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Email/EmailField.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Fieldtype } from './Feedback'
+import { Fieldtype } from '../../Feedback'
 
 export default function EmailField({ label, helpText, cleanName }: Fieldtype) {
   return (
diff --git a/src/app/components/cms/Feedback/Emailfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Email/Emailfield.spec.tsx
similarity index 100%
rename from src/app/components/cms/Feedback/Emailfield.spec.tsx
rename to src/app/components/cms/Feedback/Fields/Email/Emailfield.spec.tsx
diff --git a/src/app/components/cms/Feedback/NumberField.tsx b/src/app/components/cms/Feedback/Fields/Number/NumberField.tsx
similarity index 92%
rename from src/app/components/cms/Feedback/NumberField.tsx
rename to src/app/components/cms/Feedback/Fields/Number/NumberField.tsx
index bd7fbec5..e85dba15 100644
--- a/src/app/components/cms/Feedback/NumberField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Number/NumberField.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Fieldtype } from './Feedback'
+import { Fieldtype } from '../../Feedback'
 
 export default function NumberField({ label, helpText, cleanName }: Fieldtype) {
   return (
diff --git a/src/app/components/cms/Feedback/Numberfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Number/Numberfield.spec.tsx
similarity index 100%
rename from src/app/components/cms/Feedback/Numberfield.spec.tsx
rename to src/app/components/cms/Feedback/Fields/Number/Numberfield.spec.tsx
diff --git a/src/app/components/cms/Feedback/UrlField.tsx b/src/app/components/cms/Feedback/Fields/Url/UrlField.tsx
similarity index 92%
rename from src/app/components/cms/Feedback/UrlField.tsx
rename to src/app/components/cms/Feedback/Fields/Url/UrlField.tsx
index ae564d92..6ede9f26 100644
--- a/src/app/components/cms/Feedback/UrlField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Url/UrlField.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Fieldtype } from './Feedback'
+import { Fieldtype } from '../../Feedback'
 
 export default function UrlField({ label, helpText, cleanName }: Fieldtype) {
   return (
diff --git a/src/app/components/cms/Feedback/Urlfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx
similarity index 100%
rename from src/app/components/cms/Feedback/Urlfield.spec.tsx
rename to src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx

From fadc7d469a8f52a8656f9909510d1902d70f7a4f Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 08:32:03 +0000
Subject: [PATCH 14/31] refactor radio button into separate component and add
 unit test file

---
 .../cms/Feedback/Fields/Radio/RadioField.tsx  | 27 ++++++++
 .../Feedback/Fields/Radio/Radiofield.spec.tsx | 61 +++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx
 create mode 100644 src/app/components/cms/Feedback/Fields/Radio/Radiofield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx b/src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx
new file mode 100644
index 00000000..b09f94a4
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { Fieldtype } from '../../Feedback'
+
+export default function RadioField({ label, helpText, cleanName, choicesList = [] }: Fieldtype) {
+  return (
+    <fieldset className="govuk-fieldset govuk-!-margin-bottom-9">
+      <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+        <h2 className="govuk-fieldset__heading">{label}</h2>
+      </legend>
+      <div className="govuk-radios" data-module="govuk-radios">
+        {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+        {choicesList.map((choice, key) => {
+          return (
+            <div key={key} className="govuk-radios__item">
+              <input className="govuk-radios__input" id={cleanName} name={cleanName} type="radio" value={choice} />
+              <label className="govuk-label govuk-radios__label" htmlFor={cleanName}>
+                {choice}
+              </label>
+            </div>
+          )
+        })}
+      </div>
+    </fieldset>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Radio/Radiofield.spec.tsx b/src/app/components/cms/Feedback/Fields/Radio/Radiofield.spec.tsx
new file mode 100644
index 00000000..d44d2e85
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Radio/Radiofield.spec.tsx
@@ -0,0 +1,61 @@
+import { render, screen } from '@/config/test-utils'
+
+import RadioField from './RadioField'
+
+describe('RadioField Component', () => {
+  const mockProps = {
+    label: 'What would you like to see on the dashboard in the future?',
+    helpText: 'Pick one option from the list.',
+    cleanName: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+    choicesList: ['Choice 1', 'Choice 2', 'Choice 3'],
+  }
+
+  it('should render the label correctly', () => {
+    render(<RadioField {...mockProps} />)
+
+    // Check if the label is rendered
+    expect(screen.getByText(mockProps.label)).toBeInTheDocument()
+  })
+
+  it('should render the help text if provided', () => {
+    render(<RadioField {...mockProps} />)
+
+    // Check if the help text is rendered
+    expect(screen.getByText(mockProps.helpText)).toBeInTheDocument()
+  })
+
+  it('should render the correct number of radio buttons from choicesList', () => {
+    render(<RadioField {...mockProps} />)
+
+    // Check if the correct number of radio buttons are rendered
+    const radioButtons = screen.getAllByRole('radio')
+    expect(radioButtons).toHaveLength(mockProps.choicesList.length)
+  })
+
+  it('should render radio buttons with the correct values from choicesList', () => {
+    render(<RadioField {...mockProps} />)
+
+    // Check if the radio buttons have the correct value attribute
+    const radioButtons = screen.getAllByRole('radio')
+    expect(radioButtons[0]).toHaveAttribute('value', mockProps.choicesList[0])
+    expect(radioButtons[1]).toHaveAttribute('value', mockProps.choicesList[1])
+    expect(radioButtons[2]).toHaveAttribute('value', mockProps.choicesList[2])
+  })
+
+  it('should render the radio buttons with the correct labels', () => {
+    render(<RadioField {...mockProps} />)
+
+    // Check if the radio button labels are rendered correctly
+    expect(screen.getByLabelText(mockProps.choicesList[0])).toBeInTheDocument()
+    expect(screen.getByLabelText(mockProps.choicesList[1])).toBeInTheDocument()
+    expect(screen.getByLabelText(mockProps.choicesList[2])).toBeInTheDocument()
+  })
+
+  it('should not render any radio buttons if choicesList is empty', () => {
+    render(<RadioField {...{ ...mockProps, choicesList: [] }} />)
+
+    // Check if no radio buttons are rendered
+    const radioButtons = screen.queryAllByRole('radio')
+    expect(radioButtons).toHaveLength(0)
+  })
+})

From 58ed10a09a4d21dc2f7fe4a9200fdde7f9a2c733 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 11:58:02 +0000
Subject: [PATCH 15/31] modify default_value and choices value for fieldType
 checkboxes

---
 src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 2734a9f6..fe11d9ca 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -92,8 +92,8 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       field_type: 'checkboxes',
       help_text: 'Select all that apply',
       required: false,
-      choices: '',
-      default_value: 'Improve\r\nModify',
+      choices: 'Improve\r\nModify',
+      default_value: 'Improve',
     },
     {
       id: 6,

From 94e1f8e92bf639b6e87a5abb641594d3018f203c Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 12:38:17 +0000
Subject: [PATCH 16/31] add checkbox field component and unit test

---
 .../Fields/Checkbox/CheckboxField.tsx         | 24 +++++++
 .../Fields/Checkbox/Checkboxfield.spec.tsx    | 71 +++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
 create mode 100644 src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx b/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
new file mode 100644
index 00000000..051f1256
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
@@ -0,0 +1,24 @@
+import { Fieldtype } from '../../Feedback'
+
+export default function CheckboxField({ label, helpText, cleanName, defaultValue }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <h2 className="govuk-label-wrapper">
+        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+          {label}
+        </label>
+      </h2>
+
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+      <div className="govuk-checkboxes__item">
+        <input
+          className="govuk-checkboxes__input"
+          name={cleanName}
+          value={defaultValue}
+          type="checkbox"
+          id={cleanName}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx
new file mode 100644
index 00000000..648485c1
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx
@@ -0,0 +1,71 @@
+import { render, screen } from '@/config/test-utils'
+
+import CheckboxField from './CheckboxField'
+
+describe('CheckboxField', () => {
+  const mockProps = {
+    label: 'Accept terms and conditions',
+    helpText: 'Please read the terms carefully.',
+    cleanName: 'terms_and_conditions',
+    defaultValue: 'true', // Testing with a string value
+  }
+
+  test('renders checkbox field with label', () => {
+    render(<CheckboxField {...mockProps} />)
+
+    // Check if the label is rendered correctly
+    const label = screen.getByLabelText(mockProps.label)
+    expect(label).toBeInTheDocument()
+  })
+
+  test('renders help text when provided', () => {
+    render(<CheckboxField {...mockProps} />)
+
+    // Check if help text is rendered
+    const helpText = screen.getByText(mockProps.helpText)
+    expect(helpText).toBeInTheDocument()
+  })
+
+  test('does not render help text when not provided', () => {
+    render(<CheckboxField {...{ ...mockProps, helpText: '' }} />)
+
+    // Ensure help text is not rendered if it's an empty string
+    const helpText = screen.queryByText(mockProps.helpText)
+    expect(helpText).toBeNull()
+  })
+
+  test('checkbox is unchecked by default when defaultValue is an empty string', () => {
+    render(<CheckboxField {...{ ...mockProps, defaultValue: '' }} />)
+
+    // Check if the checkbox is unchecked when defaultValue is an empty string
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).not.toBeChecked()
+  })
+
+  test('checkbox is unchecked by default when defaultValue is a falsy string ("false")', () => {
+    render(<CheckboxField {...{ ...mockProps, defaultValue: 'false' }} />)
+
+    // Check if the checkbox is unchecked when defaultValue is "false"
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).not.toBeChecked()
+  })
+
+  test('checkbox input has the correct name and id', () => {
+    render(<CheckboxField {...mockProps} />)
+
+    const checkbox = screen.getByRole('checkbox')
+
+    // Check if the checkbox has the correct name and id
+    expect(checkbox).toHaveAttribute('name', mockProps.cleanName)
+    expect(checkbox).toHaveAttribute('id', mockProps.cleanName)
+  })
+
+  test('checkbox input value matches the defaultValue prop', () => {
+    render(<CheckboxField {...mockProps} />)
+
+    const checkbox = screen.getByRole('checkbox')
+
+    // Ensure the checkbox input value matches defaultValue prop
+    expect(checkbox).toHaveAttribute('value', mockProps.defaultValue)
+  })
+})

From 326a38c7fdb70304c9a74a8b02173c30144cd542 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 12:42:38 +0000
Subject: [PATCH 17/31] add Singlelinefield component and unit test

---
 .../Fields/Singleline/SinglelineField.tsx     | 19 ++++++++
 .../Singleline/Singlelinefield.spec.tsx       | 46 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Fields/Singleline/SinglelineField.tsx
 create mode 100644 src/app/components/cms/Feedback/Fields/Singleline/Singlelinefield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Fields/Singleline/SinglelineField.tsx b/src/app/components/cms/Feedback/Fields/Singleline/SinglelineField.tsx
new file mode 100644
index 00000000..830a6923
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Singleline/SinglelineField.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { Fieldtype } from '../../Feedback'
+
+export default function SinglelineField({ label, helpText, cleanName }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <h2 className="govuk-label-wrapper">
+        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+          {label}
+        </label>
+      </h2>
+
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+      <textarea className="govuk-textarea" name={cleanName} id={cleanName} rows={1}></textarea>
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Singleline/Singlelinefield.spec.tsx b/src/app/components/cms/Feedback/Fields/Singleline/Singlelinefield.spec.tsx
new file mode 100644
index 00000000..0482a3ef
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Singleline/Singlelinefield.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@/config/test-utils'
+
+import SinglelineField from './SinglelineField'
+
+describe('SinglelineField', () => {
+  const mockProps = {
+    label: 'What is your name?',
+    helpText: 'Please provide your full name.',
+    cleanName: 'name',
+  }
+
+  test('renders the label correctly', () => {
+    render(<SinglelineField {...mockProps} />)
+
+    // Check if the label is rendered correctly and is associated with the textarea
+    const label = screen.getByLabelText(mockProps.label)
+    expect(label).toBeInTheDocument()
+  })
+
+  test('renders help text when provided', () => {
+    render(<SinglelineField {...mockProps} />)
+
+    // Check if the help text is rendered
+    const helpText = screen.getByText(mockProps.helpText)
+    expect(helpText).toBeInTheDocument()
+  })
+
+  test('does not render help text when not provided', () => {
+    render(<SinglelineField {...{ ...mockProps, helpText: '' }} />)
+
+    // Ensure help text is not rendered if it's an empty string
+    const helpText = screen.queryByText(mockProps.helpText)
+    expect(helpText).toBeNull()
+  })
+
+  test('renders textarea with the correct name, id, and rows attribute', () => {
+    render(<SinglelineField {...mockProps} />)
+
+    const textarea = screen.getByRole('textbox')
+
+    // Check if the textarea has the correct attributes
+    expect(textarea).toHaveAttribute('name', mockProps.cleanName)
+    expect(textarea).toHaveAttribute('id', mockProps.cleanName)
+    expect(textarea).toHaveAttribute('rows', '1') // Ensure rows attribute is set to 1
+  })
+})

From 2036b56161c0db42f2d2da585124de6a6b23c06c Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 12:46:33 +0000
Subject: [PATCH 18/31] add Multilinefield component and unit test

---
 .../Fields/Multiline/MultilineField.tsx       | 19 ++++++++
 .../Fields/Multiline/Multilinefield.spec.tsx  | 46 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Fields/Multiline/MultilineField.tsx
 create mode 100644 src/app/components/cms/Feedback/Fields/Multiline/Multilinefield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Fields/Multiline/MultilineField.tsx b/src/app/components/cms/Feedback/Fields/Multiline/MultilineField.tsx
new file mode 100644
index 00000000..9e891fbb
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Multiline/MultilineField.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { Fieldtype } from '../../Feedback'
+
+export default function MultilineField({ label, helpText, cleanName }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <h2 className="govuk-label-wrapper">
+        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+          {label}
+        </label>
+      </h2>
+
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+      <textarea className="govuk-textarea" name={cleanName} id={cleanName} rows={5} />
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Multiline/Multilinefield.spec.tsx b/src/app/components/cms/Feedback/Fields/Multiline/Multilinefield.spec.tsx
new file mode 100644
index 00000000..39f5333a
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Multiline/Multilinefield.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@/config/test-utils'
+
+import MultilineField from './MultilineField'
+
+describe('MultilineField', () => {
+  const mockProps = {
+    label: 'What is your feedback?',
+    helpText: 'Please provide your feedback in the box below.',
+    cleanName: 'feedback',
+  }
+
+  test('renders the label correctly', () => {
+    render(<MultilineField {...mockProps} />)
+
+    // Check if the label is rendered correctly
+    const label = screen.getByLabelText(mockProps.label)
+    expect(label).toBeInTheDocument()
+  })
+
+  test('renders help text when provided', () => {
+    render(<MultilineField {...mockProps} />)
+
+    // Check if the help text is rendered
+    const helpText = screen.getByText(mockProps.helpText)
+    expect(helpText).toBeInTheDocument()
+  })
+
+  test('does not render help text when not provided', () => {
+    render(<MultilineField {...{ ...mockProps, helpText: '' }} />)
+
+    // Ensure help text is not rendered if it's an empty string
+    const helpText = screen.queryByText(mockProps.helpText)
+    expect(helpText).toBeNull()
+  })
+
+  test('renders textarea with the correct name, id, and rows attribute', () => {
+    render(<MultilineField {...mockProps} />)
+
+    const textarea = screen.getByRole('textbox') // Since it's a <textarea>, it's considered a textbox
+
+    // Check if the textarea has the correct attributes
+    expect(textarea).toHaveAttribute('name', mockProps.cleanName)
+    expect(textarea).toHaveAttribute('id', mockProps.cleanName)
+    expect(textarea).toHaveAttribute('rows', '5') // Ensure rows attribute is set to 5
+  })
+})

From 5bda9937225b8cf7121bd2f2d13c3a622880a7f5 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 12:53:04 +0000
Subject: [PATCH 19/31] add label for checkbox field

---
 .../components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx b/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
index 051f1256..6153dd50 100644
--- a/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
@@ -18,6 +18,9 @@ export default function CheckboxField({ label, helpText, cleanName, defaultValue
           type="checkbox"
           id={cleanName}
         />
+        <label className="govuk-label govuk-checkboxes__label" htmlFor={cleanName}>
+          {cleanName}
+        </label>
       </div>
     </div>
   )

From d58bac30530583ef9fcac0470f64c3ceb617faab Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 12:54:44 +0000
Subject: [PATCH 20/31] refactor DropdownField component, pass choicesList[] as
 props

---
 .../components/cms/Feedback/Fields/Dropdown/DropdownField.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx b/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx
index 2e8dfbc2..5917103b 100644
--- a/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx
@@ -1,7 +1,6 @@
 import { Fieldtype } from '../../Feedback'
 
-export default function DropdownField({ label, helpText, cleanName, choices = '' }: Fieldtype) {
-  const choicesList = choices.includes('\r\n') ? choices.split('\r\n') : choices.split(',')
+export default function DropdownField({ label, helpText, cleanName, choicesList = [] }: Fieldtype) {
   return (
     <div className="govuk-form-group govuk-!-margin-bottom-9">
       <h2 className="govuk-label-wrapper">

From 8162d217a93bec77c2f4657b09c13ea867946fca Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 12:58:46 +0000
Subject: [PATCH 21/31] refactor CheckboxesField so that it accepts choicesList
 and defaultValuesList as props

---
 .../Fields/Checkboxes/CheckboxesField.tsx     | 18 +++--
 .../Checkboxes/Checkboxesfield.spec.tsx       | 80 ++++++++++---------
 2 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx b/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
index ab712c74..07cbf465 100644
--- a/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
@@ -1,9 +1,12 @@
 import { Fieldtype } from '../../Feedback'
 
-export default function CheckboxesField({ label, helpText, cleanName, defaultValue = '' }: Fieldtype) {
-  const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
-  const trimmedValuesList = defaultValuesList.map((value) => value.trim())
-
+export default function CheckboxesField({
+  label,
+  helpText,
+  cleanName,
+  choicesList = [],
+  defaultValuesList = [],
+}: Fieldtype) {
   return (
     <div className="govuk-form-group govuk-!-margin-bottom-9">
       <fieldset className="govuk-fieldset govuk-!-margin-bottom-9">
@@ -18,7 +21,7 @@ export default function CheckboxesField({ label, helpText, cleanName, defaultVal
         {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
 
         <div className="govuk-checkboxes" data-module="govuk-checkboxes">
-          {trimmedValuesList.map((defaultVal, key) => {
+          {choicesList.map((choiceVal, key) => {
             const uniqueId = `${cleanName}-${key}` // Generate a unique ID for each checkbox
             return (
               <div key={key} className="govuk-checkboxes__item">
@@ -27,10 +30,11 @@ export default function CheckboxesField({ label, helpText, cleanName, defaultVal
                   id={uniqueId}
                   name={cleanName}
                   type="checkbox"
-                  value={defaultVal}
+                  value={choiceVal}
+                  defaultChecked={defaultValuesList.includes(choiceVal)}
                 />
                 <label className="govuk-label govuk-checkboxes__label" htmlFor={uniqueId}>
-                  {defaultVal}
+                  {choiceVal}
                 </label>
               </div>
             )
diff --git a/src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx
index 785c6a6e..195db2a5 100644
--- a/src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx
@@ -5,77 +5,85 @@ import CheckboxesField from './CheckboxesField'
 describe('CheckboxesField Component', () => {
   const mockProps = {
     label: 'What would you like to see on the dashboard in the future?',
-    helpText: 'Pick one option from the list.',
-    cleanName: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
-    defaultValue: 'Option 1, Option 2, Option 3',
+    helpText: 'Pick one or more options from the list.',
+    cleanName: 'dashboard_features',
+    choicesList: ['Choice 1', 'Choice 2', 'Choice 3'],
+    defaultValuesList: ['Choice 1', 'Choice 3'], // The items in the defaultValuesList Choices should be checked by default
   }
 
   it('should render the label correctly', () => {
     render(<CheckboxesField {...mockProps} />)
 
-    const labelElement = screen.getByText(mockProps.label)
-    expect(labelElement).toBeInTheDocument()
+    // Check if the label is rendered correctly
+    expect(screen.getByText(mockProps.label)).toBeInTheDocument()
   })
 
-  it('should render help text if provided', () => {
+  it('should render the help text if provided', () => {
     render(<CheckboxesField {...mockProps} />)
 
-    const helpTextElement = screen.getByText(mockProps.helpText)
-    expect(helpTextElement).toBeInTheDocument()
+    // Check if the help text is rendered
+    expect(screen.getByText(mockProps.helpText)).toBeInTheDocument()
   })
 
   it('should not render help text if not provided', () => {
     render(<CheckboxesField {...{ ...mockProps, helpText: '' }} />)
 
-    const helpTextElement = screen.queryByText(mockProps.helpText)
-    expect(helpTextElement).toBeNull()
+    // Check if help text is not rendered
+    expect(screen.queryByText(mockProps.helpText)).not.toBeInTheDocument()
   })
 
-  it('should render the correct number of checkboxes based on the defaultValue', () => {
+  it('should render the correct number of checkboxes from choicesList', () => {
     render(<CheckboxesField {...mockProps} />)
 
+    // Check if the correct number of checkboxes are rendered
     const checkboxes = screen.getAllByRole('checkbox')
-    expect(checkboxes).toHaveLength(3) // There are 3 choices in the defaultValue
+    expect(checkboxes).toHaveLength(mockProps.choicesList.length)
   })
 
-  it('should render checkboxes with correct labels and values', () => {
+  it('should render checkboxes with the correct values from choicesList', () => {
     render(<CheckboxesField {...mockProps} />)
 
-    // Check that the checkboxes are present
-    const checkboxOption1 = screen.getByLabelText('Option 1')
-    const checkboxOption2 = screen.getByLabelText('Option 2')
-    const checkboxOption3 = screen.getByLabelText('Option 3')
+    // Check if the checkboxes have the correct value attribute
+    const checkboxes = screen.getAllByRole('checkbox')
+    expect(checkboxes[0]).toHaveAttribute('value', mockProps.choicesList[0])
+    expect(checkboxes[1]).toHaveAttribute('value', mockProps.choicesList[1])
+    expect(checkboxes[2]).toHaveAttribute('value', mockProps.choicesList[2])
+  })
 
-    expect(checkboxOption1).toBeInTheDocument()
-    expect(checkboxOption2).toBeInTheDocument()
-    expect(checkboxOption3).toBeInTheDocument()
+  it('should render checkboxes with the correct label associated', () => {
+    render(<CheckboxesField {...mockProps} />)
 
-    // Check that the checkboxes have the correct value
-    expect(checkboxOption1).toHaveAttribute('value', 'Option 1')
-    expect(checkboxOption2).toHaveAttribute('value', 'Option 2')
-    expect(checkboxOption3).toHaveAttribute('value', 'Option 3')
+    // Check if the checkboxes have the correct labels
+    expect(screen.getByLabelText(mockProps.choicesList[0])).toBeInTheDocument()
+    expect(screen.getByLabelText(mockProps.choicesList[1])).toBeInTheDocument()
+    expect(screen.getByLabelText(mockProps.choicesList[2])).toBeInTheDocument()
   })
 
-  it('should correctly handle defaultValue with newline characters', () => {
-    const propsWithNewline = {
-      ...mockProps,
-      defaultValue: 'Option 1\r\nOption 2\r\nOption 3',
-    }
-
-    render(<CheckboxesField {...propsWithNewline} />)
+  it('should render the checkboxes with the correct default checked state', () => {
+    render(<CheckboxesField {...mockProps} />)
 
+    // Check if the checkboxes have the correct default checked state
     const checkboxes = screen.getAllByRole('checkbox')
-    expect(checkboxes).toHaveLength(3) // There are 3 options in the defaultValue with newline characters
+    expect(checkboxes[0]).toBeChecked() // Choice 1 is in defaultValuesList, hence it should be checked
+    expect(checkboxes[1]).not.toBeChecked() // Choice 2 is not in defaultValuesList, so it should not be checked
+    expect(checkboxes[2]).toBeChecked()
   })
 
-  it('should correctly render the cleanName in the checkbox inputs', () => {
+  it('should render unique ids for each checkbox', () => {
     render(<CheckboxesField {...mockProps} />)
 
+    // Check if each checkbox has a unique id
     const checkboxes = screen.getAllByRole('checkbox')
     checkboxes.forEach((checkbox, index) => {
-      const uniqueId = `${mockProps.cleanName}-${index}` // Match the generated id
-      expect(checkbox).toHaveAttribute('name', mockProps.cleanName)
-      expect(checkbox).toHaveAttribute('id', uniqueId) // Check that the id is unique
+      expect(checkbox).toHaveAttribute('id', `${mockProps.cleanName}-${index}`)
     })
   })
+
+  it('should not render any checkboxes if choicesList is empty', () => {
+    render(<CheckboxesField {...{ ...mockProps, choicesList: [] }} />)
+
+    // Check if no checkboxes are rendered
+    const checkboxes = screen.queryAllByRole('checkbox')
+    expect(checkboxes).toHaveLength(0)
+  })
 })

From 46fc198f7df72c838a4fe2ac35e94031082f6a64 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 13:18:51 +0000
Subject: [PATCH 22/31] remove h2 header for checkbox field

---
 src/app/components/cms/Feedback/Feedback.tsx  | 72 ++++++-------------
 .../Fields/Checkbox/CheckboxField.tsx         |  8 +--
 2 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index b2a42dfe..56211db1 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -8,10 +8,14 @@ import { z } from 'zod'
 import { FormField } from '@/api/models/cms/Page/FormFields'
 
 import { handler } from '../utils/handler'
+import CheckboxField from './Fields/Checkbox/CheckboxField'
 import CheckboxesField from './Fields/Checkboxes/CheckboxesField'
 import DropdownField from './Fields/Dropdown/DropdownField'
 import EmailField from './Fields/Email/EmailField'
+import MultilineField from './Fields/Multiline/MultilineField'
 import NumberField from './Fields/Number/NumberField'
+import RadioField from './Fields/Radio/RadioField'
+import SinglelineField from './Fields/Singleline/SinglelineField'
 import UrlField from './Fields/Url/UrlField'
 
 const initialState = {
@@ -23,8 +27,9 @@ export interface Fieldtype {
   label: string
   helpText: string
   cleanName: string
-  choices?: string
+  choicesList?: string[]
   defaultValue?: string
+  defaultValuesList?: string[]
 }
 
 interface FeedbackProps {
@@ -83,64 +88,33 @@ export const renderFormFields = ({
   default_value: defaultValue,
 }: z.infer<typeof FormField>) => {
   const choicesList = choices.includes('\r\n') ? choices.split('\r\n') : choices.split(',')
-
-  // TODO: Implement default values only for checkboxes
-  // const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
+  // Implement default values only for checkboxes
+  const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
 
   return (
     <Fragment key={id}>
-      {fieldType === 'singleline' && (
-        <div className="govuk-form-group govuk-!-margin-bottom-9">
-          <h2 className="govuk-label-wrapper">
-            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
-              {label}
-            </label>
-          </h2>
-
-          {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
-
-          <textarea className="govuk-textarea" name={cleanName} id={cleanName} rows={1}></textarea>
-        </div>
-      )}
-
-      {fieldType === 'multiline' && (
-        <div className="govuk-form-group govuk-!-margin-bottom-9">
-          <h2 className="govuk-label-wrapper">
-            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
-              {label}
-            </label>
-          </h2>
+      {fieldType === 'singleline' && <SinglelineField label={label} helpText={helpText} cleanName={cleanName} />}
 
-          {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
-
-          <textarea className="govuk-textarea" name={cleanName} id={cleanName} rows={5} />
-        </div>
-      )}
+      {fieldType === 'multiline' && <MultilineField label={label} helpText={helpText} cleanName={cleanName} />}
 
       {fieldType === 'radio' && (
-        <fieldset className="govuk-fieldset govuk-!-margin-bottom-9">
-          <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-            <h2 className="govuk-fieldset__heading">{label}</h2>
-          </legend>
-          <div className="govuk-radios" data-module="govuk-radios">
-            {choicesList.map((choice, key) => {
-              return (
-                <div key={key} className="govuk-radios__item">
-                  <input className="govuk-radios__input" id={cleanName} name={cleanName} type="radio" value={choice} />
-                  <label className="govuk-label govuk-radios__label" htmlFor={cleanName}>
-                    {choice}
-                  </label>
-                </div>
-              )
-            })}
-          </div>
-        </fieldset>
+        <RadioField label={label} helpText={helpText} cleanName={cleanName} choicesList={choicesList} />
       )}
 
       {fieldType === 'email' && <EmailField label={label} helpText={helpText} cleanName={cleanName} />}
 
+      {fieldType === 'checkbox' && (
+        <CheckboxField label={label} helpText={helpText} cleanName={cleanName} defaultValue={defaultValue} />
+      )}
+
       {fieldType === 'checkboxes' && (
-        <CheckboxesField label={label} helpText={helpText} cleanName={cleanName} defaultValue={defaultValue} />
+        <CheckboxesField
+          label={label}
+          helpText={helpText}
+          cleanName={cleanName}
+          choicesList={choicesList}
+          defaultValuesList={defaultValuesList}
+        />
       )}
 
       {fieldType === 'number' && <NumberField label={label} helpText={helpText} cleanName={cleanName} />}
@@ -148,7 +122,7 @@ export const renderFormFields = ({
       {fieldType === 'url' && <UrlField label={label} helpText={helpText} cleanName={cleanName} />}
 
       {fieldType === 'dropdown' && (
-        <DropdownField label={label} helpText={helpText} cleanName={cleanName} choices={choices} />
+        <DropdownField label={label} helpText={helpText} cleanName={cleanName} choicesList={choicesList} />
       )}
     </Fragment>
   )
diff --git a/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx b/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
index 6153dd50..47b99db5 100644
--- a/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx
@@ -3,12 +3,6 @@ import { Fieldtype } from '../../Feedback'
 export default function CheckboxField({ label, helpText, cleanName, defaultValue }: Fieldtype) {
   return (
     <div className="govuk-form-group govuk-!-margin-bottom-9">
-      <h2 className="govuk-label-wrapper">
-        <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
-          {label}
-        </label>
-      </h2>
-
       {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
       <div className="govuk-checkboxes__item">
         <input
@@ -19,7 +13,7 @@ export default function CheckboxField({ label, helpText, cleanName, defaultValue
           id={cleanName}
         />
         <label className="govuk-label govuk-checkboxes__label" htmlFor={cleanName}>
-          {cleanName}
+          {label}
         </label>
       </div>
     </div>

From d8f01e3705e9aff3159a54cee91066fce78cf7e2 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 13:20:09 +0000
Subject: [PATCH 23/31] add new mock-data for checkbox fieldType

---
 .../handlers/cms/pages/fixtures/page/feedback.ts    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index fe11d9ca..3e2c8b9f 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -147,6 +147,19 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: '',
       default_value: '',
     },
+    {
+      id: 10,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+      label: 'Select all the options you would you like to see on the dashboard in the future?',
+      field_type: 'checkbox',
+      help_text: '',
+      required: false,
+      choices: 'Improve\r\nModify',
+      default_value: 'Improve',
+    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From 8a9f54a46b21b1efac7c3b1bc4d749925f8fcf9a Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 28 Nov 2024 13:33:25 +0000
Subject: [PATCH 24/31] Modify DropdownField test cases, dropdown should be
 based on choiceList array not newline-separated strings

---
 .../Feedback/Fields/Dropdown/Dropdownfield.spec.tsx  | 12 ++++++------
 .../handlers/cms/pages/fixtures/page/feedback.ts     |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx
index 61b54503..c7df2883 100644
--- a/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx
@@ -7,7 +7,7 @@ describe('Dropdownfield Component', () => {
     label: 'What would you like to see on the dashboard in the future?',
     helpText: 'Pick one option from the list.',
     cleanName: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
-    choices: 'Option 1, Option 2, Option 3',
+    choicesList: ['Option 1', 'Option 2', 'Option 3'],
   }
 
   it('should render the label correctly', () => {
@@ -38,7 +38,7 @@ describe('Dropdownfield Component', () => {
     expect(defaultOption).toBeInTheDocument()
   })
 
-  it('should render options based on choices string with commas', () => {
+  it('should render options based on choicesList array', () => {
     render(<DropdownField {...mockProps} />)
 
     const options = screen.getAllByRole('option')
@@ -48,12 +48,12 @@ describe('Dropdownfield Component', () => {
     expect(screen.getByText('Option 3')).toBeInTheDocument()
   })
 
-  it('should render options based on choices string with newline', () => {
-    const propsWithNewlineChoices = {
+  it('should render options when choicesList is provided as an array', () => {
+    const propsWithChoicesList = {
       ...mockProps,
-      choices: 'Option 1\r\nOption 2\r\nOption 3',
+      choicesList: ['Option 1', 'Option 2', 'Option 3'],
     }
-    render(<DropdownField {...propsWithNewlineChoices} />)
+    render(<DropdownField {...propsWithChoicesList} />)
 
     const options = screen.getAllByRole('option')
     expect(options).toHaveLength(4) // 3 options + 1 default option
diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 3e2c8b9f..d2e3f89c 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -157,8 +157,8 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       field_type: 'checkbox',
       help_text: '',
       required: false,
-      choices: 'Improve\r\nModify',
-      default_value: 'Improve',
+      choices: '',
+      default_value: '',
     },
   ],
   confirmation_slug: 'confirmation',

From 192487f9c0b8964613b97cdb48464584e0b0f3e7 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Fri, 29 Nov 2024 07:33:25 +0000
Subject: [PATCH 25/31] set unique clean_name for field types checkbox,
 checkboxes, and dropdown for easy formdata retrieval

---
 .../handlers/cms/pages/fixtures/page/feedback.ts            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index d2e3f89c..bab52cdc 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -87,7 +87,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       meta: {
         type: 'forms.FormField',
       },
-      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future_checkboxes',
       label: 'Select all the options you would you like to see on the dashboard in the future?',
       field_type: 'checkboxes',
       help_text: 'Select all that apply',
@@ -100,7 +100,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       meta: {
         type: 'forms.FormField',
       },
-      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future_dropdown',
       label: 'Choose some options you would like to see on the dashboard in the future?',
       field_type: 'dropdown',
       help_text: '',
@@ -152,7 +152,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       meta: {
         type: 'forms.FormField',
       },
-      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+      clean_name: 'what_would_you_like_to_see_on_the_dashboard_in_the_future_checkbox',
       label: 'Select all the options you would you like to see on the dashboard in the future?',
       field_type: 'checkbox',
       help_text: '',

From ba3a716dae1a73d76018d67a3e7789ae8bd410e9 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Fri, 29 Nov 2024 10:49:21 +0000
Subject: [PATCH 26/31] set type to url for <UrlField /> component

---
 src/app/components/cms/Feedback/Fields/Url/UrlField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/cms/Feedback/Fields/Url/UrlField.tsx b/src/app/components/cms/Feedback/Fields/Url/UrlField.tsx
index 6ede9f26..d2c3f43c 100644
--- a/src/app/components/cms/Feedback/Fields/Url/UrlField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Url/UrlField.tsx
@@ -13,7 +13,7 @@ export default function UrlField({ label, helpText, cleanName }: Fieldtype) {
 
       {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
 
-      <input className="govuk-input" name={cleanName} id={cleanName} type="text" />
+      <input className="govuk-input" name={cleanName} id={cleanName} type="url" />
     </div>
   )
 }

From 4c8807eb1287a6cbd5ebb548ea18a5b2821f6d36 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Fri, 29 Nov 2024 11:38:26 +0000
Subject: [PATCH 27/31] merge test for rendering and checking label

---
 .../cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx   | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx
index 648485c1..a85cc85c 100644
--- a/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx
@@ -10,18 +10,14 @@ describe('CheckboxField', () => {
     defaultValue: 'true', // Testing with a string value
   }
 
-  test('renders checkbox field with label', () => {
+  test('renders checkbox field with label and help text when provided', () => {
     render(<CheckboxField {...mockProps} />)
 
     // Check if the label is rendered correctly
     const label = screen.getByLabelText(mockProps.label)
     expect(label).toBeInTheDocument()
-  })
-
-  test('renders help text when provided', () => {
-    render(<CheckboxField {...mockProps} />)
 
-    // Check if help text is rendered
+    // Check if the help text is rendered correctly
     const helpText = screen.getByText(mockProps.helpText)
     expect(helpText).toBeInTheDocument()
   })

From e2dba76a3cee394cc17c61122ef8517b34e22336 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Fri, 29 Nov 2024 11:41:49 +0000
Subject: [PATCH 28/31] set url attribute type to url

---
 src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx
index b899bec5..79d9b078 100644
--- a/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx
@@ -12,7 +12,7 @@ describe('UrlField', () => {
 
     const labelElement = screen.getByLabelText(label)
     expect(labelElement).toBeInTheDocument()
-    expect(labelElement).toHaveAttribute('type', 'text')
+    expect(labelElement).toHaveAttribute('type', 'url')
   })
 
   test('should render the component with a label, helpText, and an email input', () => {

From a0431ac66ea9ced38cc67331a8a7084803b1c545 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Fri, 29 Nov 2024 11:44:49 +0000
Subject: [PATCH 29/31] set url attribute type to url

---
 src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx
index 79d9b078..192cd342 100644
--- a/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Url/Urlfield.spec.tsx
@@ -30,7 +30,7 @@ describe('UrlField', () => {
     expect(helpTextElement).toBeInTheDocument()
 
     const inputElement = screen.getByRole('textbox')
-    expect(inputElement).toHaveAttribute('type', 'text')
+    expect(inputElement).toHaveAttribute('type', 'url')
     expect(inputElement).toHaveAttribute('name', cleanName)
     expect(inputElement).toHaveAttribute('id', cleanName)
   })

From 43b2dc3f34ba49d5813507a03c8cedbd4f9fd675 Mon Sep 17 00:00:00 2001
From: Rhys <rhys.howard@burendo.com>
Date: Thu, 19 Dec 2024 08:55:59 +0000
Subject: [PATCH 30/31] Remove required status from feedback

---
 .../handlers/cms/pages/fixtures/page/feedback.ts          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index cc292212..bab52cdc 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -39,7 +39,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       field_type: 'multiline',
       help_text:
         'We will not be able to get in touch with you about your responses so please do not leave any personal details, such as your name or email address.',
-      required: true,
+      required: false,
       choices: '',
       default_value: '',
     },
@@ -78,7 +78,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       label: 'What would you like to see on the dashboard in the future?',
       field_type: 'multiline',
       help_text: '',
-      required: true,
+      required: false,
       choices: '',
       default_value: '',
     },
@@ -104,7 +104,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       label: 'Choose some options you would like to see on the dashboard in the future?',
       field_type: 'dropdown',
       help_text: '',
-      required: true,
+      required: false,
       choices: 'Option One\r\nOption Two',
       default_value: '',
     },
@@ -117,7 +117,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       label: 'Tell us your email',
       field_type: 'email',
       help_text: '',
-      required: true,
+      required: false,
       choices: '',
       default_value: '',
     },

From 20b54448f87544f18003f8a9cc91e5f126429fc5 Mon Sep 17 00:00:00 2001
From: Rhys <rhys.howard@burendo.com>
Date: Thu, 19 Dec 2024 09:34:56 +0000
Subject: [PATCH 31/31] Radiofield merge issue fix

---
 src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx b/src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx
index cf522692..38c41f5a 100644
--- a/src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Radio/RadioField.tsx
@@ -21,8 +21,6 @@ export default function RadioField({ label, helpText, cleanName, choicesList = [
         ) : null}
 
         <div className="govuk-radios" data-module="govuk-radios">
-          {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
-
           {choicesList.map((choice, key) => {
             return (
               <div key={key} className="govuk-radios__item">