Migrate to nhsuk-frontend v9

Author: jakeb-nhs

CHANGELOG.md

@@ -2,59 +2,65 @@
 
 ## Unreleased
 
+This version updates nhsuk-frontend to version 9.
+
+For a full list of changes in this release please refer to the [migration doc](https://github.com/NHSDigital/nhsuk-react-components/blob/main/docs/upgrade-to-5.0.md).
+
+## 4.1.3 - 23 September 2024
+
 :wrench: **Fixes**
-* Remove the unnecessary aria-labelledby tags from radio items. PR [#253](https://github.com/NHSDigital/nhsuk-react-components/pull/253)
 
+- Remove the unnecessary aria-labelledby tags from radio items. PR [#253](https://github.com/NHSDigital/nhsuk-react-components/pull/253)
 
 ## 4.1.2 - 3 September 2024
 
 :wrench: **Fixes**
 
-* Fix issues with SkipLink (always set the href) and bring into line with NHSUK frontend. PR [#248](https://github.com/NHSDigital/nhsuk-react-components/pull/248)
+- Fix issues with SkipLink (always set the href) and bring into line with NHSUK frontend. PR [#248](https://github.com/NHSDigital/nhsuk-react-components/pull/248)
 
 ## 4.1.1 - 9 August 2024
 
 :wrench: **Fixes**
 
-* Remove the unnecessary aria-labelledby tags from DateInput fields. PR [#246](https://github.com/NHSDigital/nhsuk-react-components/pull/246)
+- Remove the unnecessary aria-labelledby tags from DateInput fields. PR [#246](https://github.com/NHSDigital/nhsuk-react-components/pull/246)
 
 ## 4.1.0 - 11 June 2024
 
 :wrench: **Fixes**
 
-* Add js shims for buttons. PR [#231](https://github.com/NHSDigital/nhsuk-react-components/pull/231), Fixes [#218](https://github.com/NHSDigital/nhsuk-react-components/issues/218)
-* Fix errors not being linked to inputs. PR [#230](https://github.com/NHSDigital/nhsuk-react-components/pull/230), Fixes [#227](https://github.com/NHSDigital/nhsuk-react-components/issues/227)
-* Fix inputs incorrectly using `aria-labelledby`. PR [#230](https://github.com/NHSDigital/nhsuk-react-components/pull/230), Fixes [#212](https://github.com/NHSDigital/nhsuk-react-components/issues/212)
-* Update Storybook docs for several components.
+- Add js shims for buttons. PR [#231](https://github.com/NHSDigital/nhsuk-react-components/pull/231), Fixes [#218](https://github.com/NHSDigital/nhsuk-react-components/issues/218)
+- Fix errors not being linked to inputs. PR [#230](https://github.com/NHSDigital/nhsuk-react-components/pull/230), Fixes [#227](https://github.com/NHSDigital/nhsuk-react-components/issues/227)
+- Fix inputs incorrectly using `aria-labelledby`. PR [#230](https://github.com/NHSDigital/nhsuk-react-components/pull/230), Fixes [#212](https://github.com/NHSDigital/nhsuk-react-components/issues/212)
+- Update Storybook docs for several components.
 
 :new: **New features**
 
-* Added a CHANGELOG to keep track of changes between releases. [Keep a changelog](https://keepachangelog.com)
-* Added support for `preventDoubleClick` debouncing on buttons. PR [#231](https://github.com/NHSDigital/nhsuk-react-components/pull/231)
-* Error summaries now automatically set role, tabindex, and aria-labelledby. PR [#229](https://github.com/NHSDigital/nhsuk-react-components/pull/237), Fixes [#228](https://github.com/NHSDigital/nhsuk-react-components/issues/229)
-* Storybook link in readme now points to latest version. PR [#226](https://github.com/NHSDigital/nhsuk-react-components/pull/226)
+- Added a CHANGELOG to keep track of changes between releases. [Keep a changelog](https://keepachangelog.com)
+- Added support for `preventDoubleClick` debouncing on buttons. PR [#231](https://github.com/NHSDigital/nhsuk-react-components/pull/231)
+- Error summaries now automatically set role, tabindex, and aria-labelledby. PR [#229](https://github.com/NHSDigital/nhsuk-react-components/pull/237), Fixes [#228](https://github.com/NHSDigital/nhsuk-react-components/issues/229)
+- Storybook link in readme now points to latest version. PR [#226](https://github.com/NHSDigital/nhsuk-react-components/pull/226)
 
 ## 4.0.2 - 21 May 2024
 
 :wrench: **Fixes**
 
-* Fix error message role by @edwardhorsford in [#219](https://github.com/NHSDigital/nhsuk-react-components/pull/219)
+- Fix error message role by @edwardhorsford in [#219](https://github.com/NHSDigital/nhsuk-react-components/pull/219)
 
 ## 4.0.1 - 20 May 2024
 
 :wrench: **Fixes**
 
-* Fix issue with the footer copyright not being rendered in the correct location if there are multiple link columns by @jakeb-nhs in [#223](https://github.com/NHSDigital/nhsuk-react-components/pull/223)
+- Fix issue with the footer copyright not being rendered in the correct location if there are multiple link columns by @jakeb-nhs in [#223](https://github.com/NHSDigital/nhsuk-react-components/pull/223)
 
 ## 4.0.0 - 15 May 2024
 
 This version updates nhsuk-frontend to version 8.
 
-For a full list of changes in this release please refer to the [migration doc](https://github.com/NHSDigital/nhsuk-react-components/blob/feature/nhsuk-frontend-v8/docs/upgrade-to-4.0.md).
+For a full list of changes in this release please refer to the [migration doc](https://github.com/NHSDigital/nhsuk-react-components/blob/main/docs/upgrade-to-4.0.md).
 
-* Migrate enzyme to react-testing-library by @JoshuaBates-NHS in [#198](https://github.com/NHSDigital/nhsuk-react-components/pull/198)
-* Allow support for module directives in build process by @JoshuaBates-NHS in [#199](https://github.com/NHSDigital/nhsuk-react-components/pull/199)
-* Update modified components since NHS UK frontend v5 by @jakeb-nhs in [#197](https://github.com/NHSDigital/nhsuk-react-components/pull/197)
-* Add new components since NHS UK frontend v5 by @jakeb-nhs in [#202](https://github.com/NHSDigital/nhsuk-react-components/pull/202)
-* Migrate some patterns to components, rework removed components from frontend v8 by @jakeb-nhs in [#203](https://github.com/NHSDigital/nhsuk-react-components/pull/203)
-* Improve unit test coverage by @jakeb-nhs in [#204](https://github.com/NHSDigital/nhsuk-react-components/pull/204)
+- Migrate enzyme to react-testing-library by @JoshuaBates-NHS in [#198](https://github.com/NHSDigital/nhsuk-react-components/pull/198)
+- Allow support for module directives in build process by @JoshuaBates-NHS in [#199](https://github.com/NHSDigital/nhsuk-react-components/pull/199)
+- Update modified components since NHS UK frontend v5 by @jakeb-nhs in [#197](https://github.com/NHSDigital/nhsuk-react-components/pull/197)
+- Add new components since NHS UK frontend v5 by @jakeb-nhs in [#202](https://github.com/NHSDigital/nhsuk-react-components/pull/202)
+- Migrate some patterns to components, rework removed components from frontend v8 by @jakeb-nhs in [#203](https://github.com/NHSDigital/nhsuk-react-components/pull/203)
+- Improve unit test coverage by @jakeb-nhs in [#204](https://github.com/NHSDigital/nhsuk-react-components/pull/204)

README.md

@@ -38,10 +38,11 @@ class GetStartedButton extends PureComponent {
 
 ## Upgrading
 
-* [Upgrading to 1.0](/docs/upgrade-to-1.0.md)
-* [Upgrading to 2.0](/docs/upgrade-to-2.0.md)
-* [Upgrading to 3.0](/docs/upgrade-to-3.0.md)
-* [Upgrading to 4.0](/docs/upgrade-to-4.0.md)
+- [Upgrading to 1.0](/docs/upgrade-to-1.0.md)
+- [Upgrading to 2.0](/docs/upgrade-to-2.0.md)
+- [Upgrading to 3.0](/docs/upgrade-to-3.0.md)
+- [Upgrading to 4.0](/docs/upgrade-to-4.0.md)
+- [Upgrading to 5.0](/docs/upgrade-to-5.0.md)
 
 ## Maintainers
 

docs/upgrade-to-5.0.md

@@ -0,0 +1,88 @@
+# Upgrading to 5.0
+
+There are some breaking changes you'll need to be aware of when upgrading to v5. These are mostly related to us upgrading our dependency on [nhsuk-frontend to v9](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#901---9-october-2024) which also includes breaking changes.
+
+## Breaking changes
+
+### Breadcrumbs
+
+The `Breadcrumbs` component no longer contains its own `<Container>` container component.
+
+Instead, `Breadcrumbs` should be moved inside the existing `<Container>` or `<div class="nhsuk-width-container">` for your overall page, but before the `<main>` tag.
+
+This means that instead of this:
+
+```
+<Breadcrumb>
+    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+</Breadcrumb>
+<Container>
+  <main class="nhsuk-main-wrapper" id="maincontent" role="main">
+    ...
+  </main>
+</Container>
+```
+
+You should have this:
+
+```
+<Container>
+    <Breadcrumb>
+        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+    </Breadcrumb>
+    <main class="nhsuk-main-wrapper" id="maincontent" role="main">
+        ...
+    </main>
+</Container>
+```
+
+### Back link
+
+Although no changes were needed in this library, nhsuk-frontend library has a breaking change for consumers of the `BackLink` component. See the [Changelog](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#updated-back-link-and-breadcrumbs-pr-1002)
+
+## New Features
+
+### Warning Button
+
+A new Warning Button variant has been added to the `Button` component. To use this, set the `warning` prop on `Button`, e.g.
+
+```
+<Button warning>Delete</Button>
+```
+
+### FormGroup
+
+In order to provide consumers of this library more control over when to render fieldsets, some behaviour of the previous `Fieldset` component has been extracted into a new `FormGroup` component. This makes `FormGroup` responsible for rendering the error decorator line for groups of inputs, and `Fieldset` is now a simpler component which makes use of this component.
+
+No changes are required for existing usages of `Fieldset`. For examples of the usage of `FormGroup`, please see storybook.
+
+For example, this:
+
+```
+    <Fieldset>
+        <Fieldset.Legend>What is your address?</Fieldset.Legend>
+        <TextInput id="address-1" />
+        <TextInput id="address-2" />
+    </Fieldset>
+```
+
+Would become this:
+
+```
+    <InputGroup>
+        <Fieldset>
+            <Fieldset.Legend>What is your address?</Fieldset.Legend>
+            <TextInput id="address-1" />
+            <TextInput id="address-2" />
+        </Fieldset>
+    </InputGroup>
+```
+
+Which also allows consumers to omit the `Fieldset` if rendering a single input:
+
+```
+    <InputGroup>
+        <HeadingLevel headingLevel="h3">What is your address?</HeadingLevel>
+        <TextInput id="address-1" />
+    </InputGroup>
+```

package.json

@@ -66,7 +66,7 @@
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "nhsuk-frontend": "8.1.0",
+    "nhsuk-frontend": "^9.0.1",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -87,7 +87,7 @@
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
-    "nhsuk-frontend": ">=8.0.0 <9.0.0",
+    "nhsuk-frontend": ">=9.0.0 <10.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },

src/__tests__/index.test.ts

@@ -36,6 +36,7 @@ describe('Index', () => {
       'Fieldset',
       'Footer',
       'Form',
+      'FormGroup',
       'Header',
       'Hero',
       'HintText',

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -2,7 +2,7 @@
 import React, { FC, HTMLProps, createContext, useContext, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Tick, Cross } from '@components/content-presentation/icons';
-import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel';
+import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
 
 type ListType = 'do' | 'dont';
 

src/components/content-presentation/hero/Hero.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLProps } from 'react';
 import classNames from 'classnames';
 import { Container, Row, Col } from '../../layout';
-import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel';
+import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
 
 interface HeroContentProps extends HTMLProps<HTMLDivElement> {
   hasImage: boolean;

src/components/content-presentation/table/components/TablePanel.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ComponentProps, HTMLProps } from 'react';
 import classNames from 'classnames';
-import HeadingLevel from '@util/HeadingLevel';
+import HeadingLevel from '@components/utils/HeadingLevel';
 
 export interface TablePanelProps extends HTMLProps<HTMLDivElement> {
   heading?: string;

src/components/content-presentation/tabs/Tabs.tsx

@@ -1,7 +1,7 @@
 'use client';
 import classNames from 'classnames';
 import React, { FC, HTMLAttributes, useEffect } from 'react';
-import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel';
+import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
 import TabsJs from '@resources/tabs';
 
 type TabsProps = HTMLAttributes<HTMLDivElement>;

src/components/content-presentation/tabs/__tests__/Tabs.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import Tabs from '../Tabs';
-import { HeadingLevelType } from '@util/HeadingLevel';
+import { HeadingLevelType } from '@components/utils/HeadingLevel';
 
 describe('The tabs component', () => {
   it('Matches the snapshot', () => {