CCM-13415: Fix spacing

Author: chris-elliott-nhsd

frontend/src/__tests__/components/molecules/NhsNotifyErrorSummary.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
+import { ErrorCodes } from '@utils/error-codes';
 
 const focusMock = jest.spyOn(window.HTMLElement.prototype, 'focus');
 const scrollIntoViewMock = jest.spyOn(
@@ -25,7 +26,7 @@ test('Renders NhsNotifyErrorSummary correctly with errors', async () => {
       errorState={{
         fieldErrors: {
           'radios-id': ['Radio error 1', 'Radio error 2'],
-          'select-id': ['Select error'],
+          'select-id': ['Select error', ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME],
         },
         formErrors: ['Form error', 'Form error 2'],
       }}

frontend/src/__tests__/components/molecules/__snapshots__/NhsNotifyErrorSummary.test.tsx.snap

@@ -39,6 +39,61 @@ exports[`Renders NhsNotifyErrorSummary correctly with errors 1`] = `
           Select error
         </a>
       </li>
+      <li>
+        <a
+          href="#select-id"
+        >
+          <div
+            class="nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-4"
+          >
+            You cannot use the following custom personalisation fields in your message:
+          </div>
+          <ul
+            class="nhsuk-list nhsuk-list--bullet"
+          >
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              date
+            </li>
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              address_line_1
+            </li>
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              address_line_2
+            </li>
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              address_line_3
+            </li>
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              address_line_4
+            </li>
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              address_line_5
+            </li>
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              address_line_6
+            </li>
+            <li
+              class="nhsuk-u-margin-bottom-0"
+            >
+              address_line_7
+            </li>
+          </ul>
+        </a>
+      </li>
       <li>
         <span
           class="nhsuk-error-message"

frontend/src/components/molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary.tsx

@@ -16,10 +16,12 @@ const UnlinkedErrorSummaryItem: FC<HTMLProps<HTMLSpanElement>> = (props) => (
 const errorComponents: Record<string, JSX.Element> = {
   [ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME]: (
     <>
-      {templateMessageContainsInvalidPersonalisationErrorText}
+      <div className="nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-4">
+        {templateMessageContainsInvalidPersonalisationErrorText}
+      </div>
       <ul className='nhsuk-list nhsuk-list--bullet'>
         {INVALID_PERSONALISATION_FIELDS.map((item) => (
-          <li key={`personalisation-field-${item.slice(0, 5)}`}>{item}</li>
+          <li key={`personalisation-field-${item.slice(0, 5)}`} className="nhsuk-u-margin-bottom-0">{item}</li>
         ))}
       </ul>
     </>