APPT-1971 Moving remaining components to be used from nhsuk-react-components (#1615)

# Description

This PR is ensuring that Button, Checkbox and Radio components are being
used from nhsuk-react-components library.
It also fixes the jest test issue where jest is complaining that these 3
components use dynamic import.
To get around the dynamic imports issue, we have global mock for Button,
Checkbox and Radio components as we do not need to test those. The
global mock can be found in setupTests.tsx file.

It also converts Tabs component, and ensure horizontal button alignment.

# Checklist:

- [ ] My work is behind a feature toggle (if appropriate)
- [ ] If my work is behind a feature toggle, I've added a full suite of
tests for both the ON and OFF state
- [ ] The ticket number is in the Pull Request title, with format
"APPT-XXX: My Title Here"
- [ ] I have ran npm tsc / lint (in the future these will be ran
automatically)
- [ ] My code generates no new .NET warnings (in the future these will
be treated as errors)
- [ ] If I've added a new Function, it is disabled in all but one of the
terraform groups (e.g. http_functions)
- [ ] If I've added a new Function, it has both unit and integration
tests. Any request body validators have unit tests also
- [ ] If I've made UI changes, I've added appropriate Playwright and
Jest tests
- [ ] If I've added/updated an end-point, I've added the appropriate
annotations and tested the Swagger documentation reflects the change

Author: Dave-O-NHS

src/client/jest.config.js

@@ -7,7 +7,7 @@ const createJestConfig = nextJest({
 /** @type {import('jest').Config} */
 const config = {
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
-  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.tsx'],
   testMatch: [
     '<rootDir>/src/**/*.(spec|test).{js,jsx,ts,tsx}',
     '<rootDir>/test/**/*.(spec|test).{js,jsx,ts,tsx}',

src/client/setupTests.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { loadEnvConfig } from '@next/env';
+
+loadEnvConfig(process.cwd());
+
+jest.setTimeout(10000);
+
+// Global mock for NHS UK React Components
+// This prevents "Experimental VM Modules" errors caused by
+// dynamic imports inside the library's Button and Radios components.
+/* eslint-disable @typescript-eslint/no-explicit-any, react/jsx-props-no-spreading */
+jest.mock('nhsuk-react-components', () => {
+  const actual = jest.requireActual('nhsuk-react-components');
+
+  const MockRadios = ({ children, legend, error, ...props }: any) => (
+    <div {...props}>
+      {legend && <legend>{legend}</legend>}
+      {error && <span className="nhsuk-error-message">{error}</span>}
+      {children}
+    </div>
+  );
+
+  const MockRadiosItem = React.forwardRef(
+    ({ children, id, value, ...props }: any, ref: any) => (
+      <div>
+        <input type="radio" id={id} value={value} ref={ref} {...props} />
+        <label htmlFor={id}>{children}</label>
+      </div>
+    ),
+  );
+
+  MockRadiosItem.displayName = 'MockRadiosItem';
+  MockRadios.Item = MockRadiosItem;
+
+  const MockCheckboxes = ({ children, ...props }: any) => (
+    <div {...props}>{children}</div>
+  );
+
+  const MockCheckboxesItem = React.forwardRef(
+    ({ children, id, value, ...props }: any, ref: any) => (
+      <div>
+        <input
+          type="checkbox"
+          id={id}
+          value={value}
+          ref={ref}
+          label={typeof children === 'string' ? children : undefined}
+          {...props}
+        />
+        <label htmlFor={id}>{children}</label>
+      </div>
+    ),
+  );
+  MockCheckboxesItem.displayName = 'MockCheckboxesItem';
+  MockCheckboxes.Item = MockCheckboxesItem;
+
+  return {
+    ...actual,
+    Button: ({ children, warning, secondary: _, ...props }: any) => (
+      <button {...props} data-warning={warning?.toString()}>
+        {children}
+      </button>
+    ),
+    Radios: MockRadios,
+    Checkboxes: MockCheckboxes,
+  };
+});
+/* eslint-enable @typescript-eslint/no-explicit-any, react/jsx-props-no-spreading */

src/client/setupTests.tsx

@@ -1,17 +1,12 @@
 'use client';
 
-import {
-  Button,
-  FormGroup,
-  Radio,
-  RadioGroup,
-  SmallSpinnerWithText,
-} from '@components/nhsuk-frontend';
+import { FormGroup, SmallSpinnerWithText } from '@components/nhsuk-frontend';
 import { setCookieConsent } from '@services/cookiesService';
 import { NhsMyaCookieConsent } from '@types';
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { Button, Radios } from 'nhsuk-react-components';
 
 type CookieConsentFormProps = {
   consentCookie?: NhsMyaCookieConsent;
@@ -52,24 +47,20 @@ const CookieConsentForm = ({ consentCookie }: CookieConsentFormProps) => {
         legend="Tell us if we can use analytics cookies"
         error={errors.consented?.message}
       >
-        <RadioGroup>
-          <Radio
-            label="Use cookies to measure my website use"
-            id="consented-yes"
+        <Radios>
+          <Radios.Item
             value="yes"
+            id="consented-yes"
             {...register('consented', {
-              required: { value: true, message: 'Select an option' },
-            })}
-          />
-          <Radio
-            label="Do not use cookies to measure my website use"
-            id="consented-no"
-            value="no"
-            {...register('consented', {
-              required: { value: true, message: 'Select an option' },
+              required: 'Select an option',
             })}
-          />
-        </RadioGroup>
+          >
+            Use cookies to measure my website use
+          </Radios.Item>
+          <Radios.Item value="no" id="consented-no" {...register('consented')}>
+            Do not use cookies to measure my website use
+          </Radios.Item>
+        </Radios>
       </FormGroup>
       {pendingSubmit ? (
         <SmallSpinnerWithText text="Working..." />

src/client/src/app/cookies-policy/cookie-consent-form.tsx

@@ -1,11 +1,12 @@
 'use client';
-import { Button, SmallSpinnerWithText } from '@components/nhsuk-frontend';
+import { SmallSpinnerWithText } from '@components/nhsuk-frontend';
 import { acceptEula } from '@services/appointmentsService';
 import { EulaVersion } from '@types';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 import fromServer from '@server/fromServer';
+import { Button } from 'nhsuk-react-components';
 
 type AcceptEulaFormProps = {
   eulaVersion: EulaVersion;

src/client/src/app/eula/accept-eula-form.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonGroup } from '@nhsuk-frontend-components';
+import { ButtonGroup } from '@nhsuk-frontend-components';
+import { Button } from 'nhsuk-react-components';
 import render from '@testing/render';
 import { screen } from '@testing-library/react';
 

src/client/src/app/lib/components/nhsuk-frontend/button-group.test.tsx

@@ -1,41 +1,31 @@
-import React from 'react';
-import { ReactNode, Children } from 'react';
+import React, { ReactNode, Children } from 'react';
 
 type Props = {
   children: ReactNode;
   vertical?: boolean;
 };
 
 const ButtonGroup = ({ children, vertical = false }: Props) => {
-  const childrenArray = Children.toArray(children);
-
   return (
     <ol
-      className={`nhsuk-list nhsuk-u-clear nhsuk-u-margin-0 ${
+      className={`nhsuk-list nhsuk-u-margin-0 nhsuk-button-group-flat ${
         vertical ? 'flex-col' : 'flex-row'
       }`}
       style={{
         display: 'flex',
         flexDirection: vertical ? 'column' : 'row',
-        gap: '0.5rem',
+        gap: '1rem',
         padding: 0,
         margin: 0,
         listStyle: 'none',
-        alignItems: vertical ? '' : 'center',
+        alignItems: vertical ? 'stretch' : 'center',
       }}
     >
-      {childrenArray.map((child, index) => {
-        return (
-          <li
-            key={`button-list-${index}`}
-            className={`nhsuk-a-to-z-min-width ${
-              vertical ? '' : 'nhsuk-u-float-left nhsuk-u-margin-right-3'
-            }`}
-          >
-            {child}
-          </li>
-        );
-      })}
+      {Children.toArray(children).map((child, index) => (
+        <li key={index} className="nhsuk-u-margin-0">
+          {child}
+        </li>
+      ))}
     </ol>
   );
 };

src/client/src/app/lib/components/nhsuk-frontend/button-group.tsx

@@ -0,0 +1,7 @@
+const CheckBoxOrAll = () => {
+  return (
+    <div style={{ marginBottom: 8, marginLeft: 12, display: 'block' }}>or</div>
+  );
+};
+
+export default CheckBoxOrAll;