Upgrade to NHS.UK frontend v10.0.0 and support SSR (#267)

* Upgrade to NHS.UK frontend v10.0.0

* Set up environments for NHS.UK frontend v10.0.0

* Prevent clashes with NHS.UK frontend exports

* Replace NHS.UK frontend CommonJS workarounds

* Prevent unnecessary Babel transforms

* Prevent duplicate initialisation

* Run Prettier `--write`

* Fix Storybook path to Sass

* Fix links to NHS.UK frontend repo

* Update back link for NHS.UK frontend v10.0.0

* Remove support for `nhsuk-button--disabled` class on buttons

* Remove support for `disabled` attribute on button links

* Remove support for `debounceTimeout` param on buttons

* Update button for NHS.UK frontend v10.0.0

* Change to new "colour" spelling in NHS.UK frontend v10.0.0

* Remove icons not in NHS.UK frontend v10.0.0

* Update icons for NHS.UK frontend v10.0.0

* Update skip link for NHS.UK frontend v10.0.0

* Update action link for NHS.UK frontend v10.0.0

* Remove support for breadcrumb back link `accessiblePrefix`

* Update breadcrumb for NHS.UK frontend v10.0.0

* Update radios for NHS.UK frontend v10.0.0

* Update checkboxes for NHS.UK frontend v10.0.0

* Update footer for NHS.UK frontend v10.0.0

* Update header for NHS.UK frontend v10.0.0

* Fix React warning "Use the `defaultValue` or `value` props instead of setting children on <textarea>"

* Align character count with NHS.UK frontend

* Align warning callout with NHS.UK frontend

* Align error message with NHS.UK frontend

* Align error summary with NHS.UK frontend

* Remove unnecessary comment

* Remove support for contents list optional visually hidden text

* Remove support for inset text optional visually hidden text

* Remove support for care card optional visually hidden text

* Remove support for warning callout custom visually hidden text

* Fix contents list missing ARIA attributes

* Avoid casting date input change event

* Always update date input value without change handler

* Remove unsupported `autoSelectNext` date input feature

* Remove incorrect `pattern` from date inputs

* Split out separate `Legend` component

* Skip rendering empty form elements

* Remove wrapping form groups around fieldsets

* Fix date input missing `role="group"` accessibility issue

* Consolidate `<FormGroup>` to support fieldsets and legends

* Add missing migration guides to storybook

* Move display names to exported components

* Remove legacy list panel component

* Remove automatic sizing from labels and legends

* Remove unused `LabelBlock` component

* Update types from `HTMLProps` to `ComponentProps`

* Remove support for uppercase heading levels

* Add default images `alt=""` when not set

* Align table caption with NHS.UK frontend

* Widen support for `ref`, `as` and `asElement` props

* Polyfill TextEncoder/TextDecoder for ReactDOM

* Document breaking changes

* Allow server-side rendering (SSR) in all components

* Add React DOM render tests

* Remove support for error lines without error messages

* Align table with NHS.UK frontend

* Update changelog

* Remove Jest globals from utils

* Update package version to v6.0.0-beta.0

* Resolve various Sonar issues

Author: colinrotherham

.github/workflows/storybook.yml

@@ -13,15 +13,15 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          
+
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
           node-version-file: .nvmrc
-          
+
       - name: Enable corepack
         run: corepack enable
-        
+
       - name: Set Yarn version
         run: yarn set version stable
 

.storybook/manager.ts

@@ -1,16 +1,15 @@
 import { addons } from '@storybook/manager-api';
 import nhsTheme from './theme';
-import { startCase, upperFirst } from "lodash";
+import { startCase, upperFirst } from 'lodash';
 
-const sentenceCase = string => {
-  if (typeof string !== 'string') return ''
-  return upperFirst(startCase(string).toLowerCase())
-}
+const sentenceCase = (string) => {
+  if (typeof string !== 'string') return '';
+  return upperFirst(startCase(string).toLowerCase());
+};
 
 addons.setConfig({
   sidebar: {
-    renderLabel: ({ name, type }) =>
-      sentenceCase(name),
+    renderLabel: ({ name, type }) => sentenceCase(name),
   },
-  theme: nhsTheme
+  theme: nhsTheme,
 });

.storybook/preview-body.html

@@ -0,0 +1,4 @@
+<script>
+  document.body.className +=
+    ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' nhsuk-frontend-supported' : '');
+</script>

.storybook/preview-head.html

@@ -1,5 +1,5 @@
 // Allow current nhsuk styles to override legacy
-@import '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
+@import 'nhsuk-frontend/dist/nhsuk';
 
 .tag-wrapper {
   display: flex;

.storybook/storybook.scss

@@ -1,20 +1,16 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch Program",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "program": "${workspaceFolder}/dist/index.js",
-            "outFiles": [
-                "${workspaceFolder}/**/*.js"
-            ]
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/dist/index.js",
+      "outFiles": ["${workspaceFolder}/**/*.js"]
+    }
+  ]
+}

.vscode/launch.json

@@ -1,6 +1,12 @@
 # NHS.UK React components
 
-## 5.0.0 - TBC
+## 6.0.0-beta.0 - 30 September 2025
+
+This version provides support for nhsuk-frontend version 10.
+
+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-6.0.md).
+
+## 5.0.0 - 4 November 2024
 
 This version provides support for nhsuk-frontend version 9.
 

CHANGELOG.md

@@ -23,8 +23,7 @@
       "@navigation/*": ["src/components/navigation/*"],
       "@typography/*": ["src/components/typography/*"],
       "@util/*": ["src/util/*"],
-      "@patterns/*": ["src/patterns/*"],
-      "@resources/*": ["src/resources/*"]
+      "@patterns/*": ["src/patterns/*"]
     }
   },
   "include": ["src"],

bundle-base.tsconfig.json

@@ -1,6 +1,6 @@
 # Upgrading to 2.0
 
-There are some breaking changes you'll need to be aware of when upgrading to v2.  These are mostly related to us upgrading our dependency on [nhsuk-frontend to v4](https://github.com/nhsuk/nhsuk-frontend/blob/master/CHANGELOG.md#400---26-october-2020) which also includes some breaking changes.
+There are some breaking changes you'll need to be aware of when upgrading to v2. These are mostly related to us upgrading our dependency on [nhsuk-frontend to v4](https://github.com/nhsuk/nhsuk-frontend/blob/master/CHANGELOG.md#400---26-october-2020) which also includes some breaking changes.
 
 ## New Card Component
 
@@ -59,11 +59,11 @@ The `Panel` and `Promo` components have been removed from `nhsuk-frontend` since
 
 ```jsx
 // Old Imports
-import { Button, Panel, Promo } from "nhsuk-react-components";
+import { Button, Panel, Promo } from 'nhsuk-react-components';
 
 // New Imports
-import { Button } from "nhsuk-react-components";
-import { Panel, Promo } from "nhsuk-react-components/dist/deprecated";
+import { Button } from 'nhsuk-react-components';
+import { Panel, Promo } from 'nhsuk-react-components/dist/deprecated';
 ```
 
 A warning is printed to the console in dev environments when using these components, as they are set to be removed in the next major release.
@@ -73,7 +73,7 @@ A warning is printed to the console in dev environments when using these compone
 In line with the upstream nhsuk-frontend, NHS Design Kit and GDS recommendations, we now render the input boxes in the date component as follows:
 
 ```html
-<input type="text" inputType="numeric" pattern="[0-9]*">
+<input type="text" inputType="numeric" pattern="[0-9]*" />
 ```
 
 There is more on this change here:

docs/upgrade-to-2.0.md

@@ -2,11 +2,11 @@
 
 > v3.0 is an upcoming release, this page is a work in progress.
 
-There are some breaking changes you'll need to be aware of when upgrading to v3.  These are mostly related to us upgrading our dependency on [nhsuk-frontend to v5](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#500---16-march-2021) which also includes some breaking changes.
+There are some breaking changes you'll need to be aware of when upgrading to v3. These are mostly related to us upgrading our dependency on [nhsuk-frontend to v5](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#500---16-march-2021) which also includes some breaking changes.
 
 ## Review Date component is now a pattern
 
-The `ReviewDate` component has been removed from nhsuk-frontend in version 5.0.0. This component is now a `pattern` in the nhsuk-frontend library. 
+The `ReviewDate` component has been removed from nhsuk-frontend in version 5.0.0. This component is now a `pattern` in the nhsuk-frontend library.
 
 The only change is that the Default import has a new path.
 
@@ -16,12 +16,12 @@ There are no functional changes to the component, and it works exactly as it did
 
 ```tsx
 // Old Import
-import { ReviewDate } from "nhsuk-react-components";
-import ReviewDate from "nhsuk-react-components/lib/components/review-date";
+import { ReviewDate } from 'nhsuk-react-components';
+import ReviewDate from 'nhsuk-react-components/lib/components/review-date';
 
 // New Import
-import { ReviewDate } from "nhsuk-react-components";
-import ReviewDate  from "nhsuk-react-components/lib/patterns/review-date";
+import { ReviewDate } from 'nhsuk-react-components';
+import ReviewDate from 'nhsuk-react-components/lib/patterns/review-date';
 ```
 
 ## NHS Logo PNG Fallback Removed
@@ -38,4 +38,4 @@ In NHS.UK Frontend v5 and above, the header text now defaults to wrapping undern
 
 ## The `prefixText` prop has been added to the `DoDontList.Item` component
 
-You can now add prefixed text to each `DoDontList.Item` component by supplying the `prefixText` prop. Items with a `type` of `dont` will automatically have a 'do not' prefix text added in the next major release to align with the NHS.UK frontend library v5.
+You can now add prefixed text to each `DoDontList.Item` component by supplying the `prefixText` prop. Items with a `type` of `dont` will automatically have a 'do not' prefix text added in the next major release to align with the NHS.UK frontend library v5.