[PRMP-1348] Update the nhsuk-frontend package and investigate its effects

app/cypress/e2e/0-ndr-core-tests/homepage.cy.js

@@ -58,13 +58,13 @@ describe('Home Page', () => {
                     'have.text',
                     'Access and store digital patient documents',
                 );
-                cy.get('.nhsuk-header__navigation').should('not.exist');
+                cy.get('.nhsuk-navigation-container').should('not.exist');
                 cy.get('.nhsuk-header__navigation-list').should('not.exist');
 
                 cy.login(Roles.GP_CLINICAL, true);
 
                 cy.url().should('eq', baseUrl + patientSearchUrl);
-                cy.get('.nhsuk-header__navigation').should('exist');
+                cy.get('.nhsuk-navigation-container').should('exist');
                 cy.get('.nhsuk-header__navigation-list').should('exist');
             },
         );
@@ -111,7 +111,7 @@ describe('Home Page', () => {
                         'You’re outside of Birmingham and Solihull (BSOL)',
                     );
 
-                    cy.get('.nhsuk-header__navigation').should('exist');
+                    cy.get('.nhsuk-navigation-container').should('exist');
                     cy.get('.nhsuk-header__navigation-list').should('exist');
                 },
             );
@@ -129,7 +129,7 @@ describe('Home Page', () => {
                     'You’re outside of Birmingham and Solihull (BSOL)',
                 );
 
-                cy.get('.nhsuk-header__navigation').should('exist');
+                cy.get('.nhsuk-navigation-container').should('exist');
                 cy.get('.nhsuk-header__navigation-list').should('exist');
             },
         );
@@ -157,7 +157,7 @@ describe('Home Page', () => {
 
                 cy.login(Roles.GP_CLINICAL);
 
-                cy.get('.nhsuk-header__navigation').should('exist');
+                cy.get('.nhsuk-navigation-container').should('exist');
                 cy.get('.nhsuk-header__navigation-list').should('exist');
 
                 cy.intercept('GET', '/Auth/Logout', {

app/package.json

@@ -32,8 +32,8 @@
         "fake-progress": "^1.0.4",
         "history": "^5.3.0",
         "moment": "^2.30.1",
-        "nhsuk-frontend": "^7.0.0",
-        "nhsuk-react-components": "^2.2.2",
+        "nhsuk-frontend": "^9.1.0",
+        "nhsuk-react-components": "^5.0.0",
         "pdfobject": "^2.2.12",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

app/src/components/blocks/_arf/documentInputForm/DocumentInputForm.tsx

@@ -1,4 +1,4 @@
-import { Input, Table, WarningCallout } from 'nhsuk-react-components';
+import { TextInput, Table, WarningCallout } from 'nhsuk-react-components';
 import React from 'react';
 import {
     DOCUMENT_TYPE,
@@ -37,7 +37,7 @@ const DocumentInputForm = ({
     });
     return (
         <>
-            <Input
+            <TextInput
                 data-testid={`${formType}-input`}
                 id={`${formType}-documents-input`}
                 label="Select file(s)"

app/src/components/blocks/_lloydGeorge/lloydGeorgeFileInputStage/LloydGeorgeFileInputStage.tsx

@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
 import BackButton from '../../../generic/backButton/BackButton';
 import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
 import { getFormattedDate } from '../../../../helpers/utils/formatDate';
-import { Input, Button, Fieldset, InsetText, Table } from 'nhsuk-react-components';
+import { TextInput, Button, Fieldset, InsetText, Table } from 'nhsuk-react-components';
 import { ReactComponent as FileSVG } from '../../../../styles/file-input.svg';
 import {
     DOCUMENT_TYPE,
@@ -181,7 +181,7 @@ function LloydGeorgeFileInputStage({ documents, setDocuments, submitDocuments }:
                         <FileSVG />
                     </div>
                     <div>
-                        <Input
+                        <TextInput
                             data-testid={`button-input`}
                             type="file"
                             multiple={true}

app/src/components/blocks/_lloydGeorge/lloydGeorgeSelectSearchResults/LloydGeorgeSelectSearchResults.tsx

@@ -3,7 +3,7 @@ import { SearchResult } from '../../../../types/generic/searchResult';
 import { getFormattedDatetime } from '../../../../helpers/utils/formatDatetime';
 import { useNavigate } from 'react-router-dom';
 import { routeChildren } from '../../../../types/generic/routes';
-import React, { Dispatch, ReactNode, SetStateAction, SyntheticEvent, useState } from 'react';
+import React, { Dispatch, ReactNode, SetStateAction, useState } from 'react';
 import { SEARCH_AND_DOWNLOAD_STATE } from '../../../../types/pages/documentSearchResultsPage/types';
 import ErrorBox from '../../../layout/errorBox/ErrorBox';
 import PatientSummary from '../../../generic/patientSummary/PatientSummary';
@@ -43,7 +43,7 @@ const AvailableFilesTable = ({
             setSelectedDocuments([]);
         }
     };
-    const handleChangeCheckboxes = (e: SyntheticEvent<HTMLInputElement>) => {
+    const handleChangeCheckboxes = (e: React.FormEvent<HTMLInputElement>) => {
         const target = e.target as HTMLInputElement;
         const toggledDocumentId = target.value;
         if (target.checked) {
@@ -122,19 +122,18 @@ const AvailableFilesTable = ({
                         >
                             {allowSelectDocument && (
                                 <Table.Cell id={`selected-files-row-${index}`}>
-                                    <Checkboxes onChange={handleChangeCheckboxes}>
-                                        <Checkboxes.Box
-                                            value={result.ID}
-                                            id={result.ID}
-                                            data-testid={`checkbox-${index}`}
-                                            checked={selectedDocuments.includes(result.ID)}
-                                            aria-checked={selectedDocuments.includes(result.ID)}
-                                        >
-                                            <span className="nhsuk-u-visually-hidden">
-                                                {result.fileName}
-                                            </span>
-                                        </Checkboxes.Box>
-                                    </Checkboxes>
+                                    <Checkboxes.Box
+                                        value={result.ID}
+                                        id={result.ID}
+                                        data-testid={`checkbox-${index}`}
+                                        checked={selectedDocuments.includes(result.ID)}
+                                        aria-checked={selectedDocuments.includes(result.ID)}
+                                        onChange={(e) => handleChangeCheckboxes(e)}
+                                    >
+                                        <span className="nhsuk-u-visually-hidden">
+                                            {result.fileName}
+                                        </span>
+                                    </Checkboxes.Box>
                                 </Table.Cell>
                             )}
                             <Table.Cell

app/src/components/generic/backButton/BackButton.test.tsx

@@ -33,29 +33,22 @@ describe('BackButton', () => {
         });
     });
 
-    it('navigates to specified location when the "toLocation" property is defined' , async () => {
-
+    it('navigates to specified location when the "toLocation" property is defined', async () => {
         render(<BackButton toLocation="/specified-location" />);
-        userEvent.click( screen.getByText('Go back'));
+        userEvent.click(screen.getByText('Go back'));
 
         await waitFor(() => {
             expect(mockUseNavigate).toHaveBeenCalledWith('/specified-location');
         });
-
     });
 
     it('displays default back link text when "backLinkText" is not provided', async () => {
-
         render(<BackButton toLocation="/specified-location" />);
-        expect(screen.getByText('Go back')).toBeInTheDocument(); 
-
+        expect(screen.getByText('Go back')).toBeInTheDocument();
     });
 
     it('displays custom back link text when "backLinkText" is defined', async () => {
-
         render(<BackButton backLinkText="navigate to ..." />);
         expect(screen.getByText('navigate to ...')).toBeInTheDocument();
-
     });
-
 });

app/src/components/layout/header/Header.test.tsx

@@ -46,7 +46,7 @@ describe('Header', () => {
             mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);
             renderHeaderWithRouter();
 
-            userEvent.click(screen.getByRole('img', { name: 'NHS Logo' }));
+            userEvent.click(screen.getByText('NHS Logo'));
 
             await waitFor(() => {
                 expect(mockedUseNavigate).toHaveBeenCalledWith(routes.HOME);
@@ -57,7 +57,7 @@ describe('Header', () => {
             mockedUseRole.mockReturnValue(null);
             renderHeaderWithRouter();
 
-            userEvent.click(screen.getByRole('img', { name: 'NHS Logo' }));
+            userEvent.click(screen.getByText('NHS Logo'));
 
             await waitFor(() => {
                 expect(mockedUseNavigate).toHaveBeenCalledWith(routes.START);

app/src/components/layout/navLinks/NavLinks.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from 'react';
 import type { MouseEvent as ReactEvent } from 'react';
 import { Header } from 'nhsuk-react-components';
 import { useNavigate } from 'react-router-dom';
@@ -8,69 +7,31 @@ import { useSessionContext } from '../../../providers/sessionProvider/SessionPro
 const NavLinks = () => {
     const navigate = useNavigate();
     const [session] = useSessionContext();
-    const [width, setWidth] = useState<number>(window.innerWidth);
     const nav = (e: ReactEvent<HTMLAnchorElement, MouseEvent>, link: string) => {
         e.preventDefault();
         navigate(link);
     };
 
-    useEffect(() => {
-        const handleResizeWindow = () => setWidth(window.innerWidth);
-        window.addEventListener('resize', handleResizeWindow);
-        return () => {
-            window.removeEventListener('resize', handleResizeWindow);
-        };
-    }, []);
-
     const appLinks = [
+        { href: routes.START, label: 'Home', id: 'home-btn' },
         { href: routes.SEARCH_PATIENT, label: 'Search for a patient', id: 'search-btn' },
         { href: routes.LOGOUT, label: 'Sign out', id: 'logout-btn' },
     ];
 
     return session.isLoggedIn ? (
-        <Header.Nav className="navlinks">
-            <Header.NavItem
-                tabIndex={0}
-                href="#"
-                className="navlinks_item clickable"
-                role="link"
-                onClick={(e) => nav(e, routes.START)}
-            >
-                Home
-            </Header.NavItem>
-            {width <= 990 ? (
-                <>
-                    {appLinks.map((l) => (
-                        <Header.NavItem
-                            tabIndex={0}
-                            href="#"
-                            className="navlinks_item navlinks_item--mobile clickable"
-                            key={l.href}
-                            role="link"
-                            data-testid={l.id}
-                            onClick={(e) => nav(e, l.href)}
-                        >
-                            {l.label}
-                        </Header.NavItem>
-                    ))}
-                </>
-            ) : (
-                <div className="navlinks_wrapper">
-                    {appLinks.map((l) => (
-                        <Header.NavItem
-                            tabIndex={0}
-                            href="#"
-                            className="navlinks_item navlinks_item--desktop clickable"
-                            key={l.href}
-                            role="link"
-                            data-testid={l.id}
-                            onClick={(e) => nav(e, l.href)}
-                        >
-                            {l.label}
-                        </Header.NavItem>
-                    ))}
-                </div>
-            )}
+        <Header.Nav className="">
+            {appLinks.map((l) => (
+                <Header.NavItem
+                    tabIndex={0}
+                    href="#"
+                    key={l.href}
+                    role="link"
+                    data-testid={l.id}
+                    onClick={(e) => nav(e, l.href)}
+                >
+                    {l.label}
+                </Header.NavItem>
+            ))}
         </Header.Nav>
     ) : null;
 };

app/src/pages/feedbackPage/FeedbackPage.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { SubmitHandler, useForm, UseFormRegisterReturn } from 'react-hook-form';
 import isEmail from 'validator/lib/isEmail';
-import { Button, Fieldset, Input, Radios, Textarea } from 'nhsuk-react-components';
+import { Button, Fieldset, TextInput, Radios, Textarea } from 'nhsuk-react-components';
 import { useNavigate } from 'react-router-dom';
 import { AxiosError } from 'axios';
 import {
@@ -133,15 +133,15 @@ function FeedbackPage() {
                         us in developing this service.
                     </p>
 
-                    <Input
+                    <TextInput
                         label="Your name"
                         data-testid={FORM_FIELDS.RespondentName}
                         autoComplete="name"
                         spellCheck={false}
                         {...respondentNameProps}
                     />
 
-                    <Input
+                    <TextInput
                         label="Your email address"
                         hint="We’ll only use this to speak to you about your feedback"
                         data-testid={FORM_FIELDS.RespondentEmail}