Upgrade to NHS.UK frontend v10.3, prepare beta release (#323)

* Update to NHS.UK frontend v10.3.1

* Update snapshots with duplicate class now removed

* Rename input prefix and suffix HTML class

* Update the HTML for header search

* Update the HTML for responsive table cell content

* Rename checkbox and radio button 'aria-controls' attributes

* Update the HTML for tables as a panel

* Add support for `size` on headings

* Add support for `size` on body text

* Add support for `visuallyHiddenText` to render React elements

* Add support for `visuallyHiddenText` prop on headings

* Add support for `visuallyHiddenText` prop on back link

* Only use boolean props for card types (excluding care cards)

* Update the HTML for warning callouts

* Add interruption panel variant

* Add file upload component

* Enable NHS.UK frontend i18n support

* Formatting

* Remove `Table.Panel` component

* Simplify summary list component to avoid actions wrapper

* Simplify card component to avoid unnecessary content wrapper

* Add more card examples

* Set up story backgrounds and column widths

* Add support for card actions

* Add more card examples

* Add support for `reverse` prop in link components

* Move heading level component into typography

* Rename heading level to `<Heading>` with h1 default

* Update migration guide

* Allow checkbox item `exclusiveGroup` to be set manually

* Update checkbox examples

* Update migration guide

* Formatting

* Fix footer meta to omit heading and list without items

* Update footer component to support headings and content

* Update footer examples

* Add support for `visuallyHiddenText` to render React elements (more)

* Update FormGroup component to support multiple children

* Prevent text input `beforeInput` and `afterInput` from overriding prefix/suffix

* Fix "Error: Functions cannot be passed directly to Client Components…"

* Remove unnecessary context from card component

* Add changelog entry

* Fix typo

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

Author: colinrotherham

.storybook/preview.ts

@@ -0,0 +1,53 @@
+import './storybook.scss';
+import { type Preview } from '@storybook/react-vite';
+
+import { Col, Container, Row } from '#components/layout/index.js';
+
+const preview: Preview = {
+  decorators: (Story, { parameters }) =>
+    parameters.width === false ? (
+      <Story />
+    ) : (
+      <Container>
+        <main className="nhsuk-main-wrapper" id="maincontent">
+          <Row>
+            <Col width={parameters.width ?? 'two-thirds'}>
+              <Story />
+            </Col>
+          </Row>
+        </main>
+      </Container>
+    ),
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: {
+      options: {
+        dark: { name: 'Dark', value: '#005eb8' },
+        light: { name: 'Light', value: '#f0f4f5' },
+        white: { name: 'White', value: '#fff' },
+        grey: { name: 'Grey', value: '#d8dde0' },
+      },
+    },
+    width: 'two-thirds',
+    layout: 'fullscreen',
+    initialGlobals: {
+      backgrounds: { value: 'light' },
+    },
+    options: {
+      storySort: {
+        order: [
+          'Welcome',
+          'Migration Guides',
+          'Form Elements',
+          'Content Presentation',
+          'Navigation',
+          'Layout',
+          'Patterns',
+        ],
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;

.storybook/preview.tsx

@@ -1,8 +1,14 @@
 # NHS.UK React components
 
-## Unreleased
+## 6.0.0-beta.5 - 23 January 2026
 
-This version provides support for NHS.UK frontend v10.2 and includes:
+This version provides support for NHS.UK frontend v10.3 and includes:
+
+- [File upload component](https://service-manual.nhs.uk/design-system/components/file-upload)
+- [Interruption panel variant](https://service-manual.nhs.uk/design-system/components/panel#interruption-panel)
+- [Summary cards](https://service-manual.nhs.uk/design-system/components/summary-list#summary-cards)
+
+With additional support added for NHS.UK frontend v10.2 including:
 
 - [Password input component](https://service-manual.nhs.uk/design-system/components/password-input)
 - [Smaller and inline buttons](https://service-manual.nhs.uk/design-system/components/buttons#smaller-buttons)

CHANGELOG.md

@@ -18,7 +18,15 @@ The updated [header](https://service-manual.nhs.uk/design-system/components/head
 - update NHS logo in the header to have higher contrast when focused
 - refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element
 
-#### Use the password input component to help users accessibly enter passwords
+#### New file upload component
+
+We've added a new [file upload](https://service-manual.nhs.uk/design-system/components/file-upload) component from NHS.UK frontend v10.3 which:
+
+- makes the file inputs easier to use for drag and drop
+- allows the text of the component to be translated
+- fixes accessibility issues for users of Dragon, a speech recognition software
+
+#### New password input component to help users accessibly enter passwords
 
 The [password input](https://service-manual.nhs.uk/design-system/components/password-input) component from NHS.UK frontend v10.2 allows users to choose:
 
@@ -48,7 +56,7 @@ You can now add inline buttons to text inputs and select menus using the `formGr
 ```jsx
 <TextInput
   formGroupProps={{
-    afterInput: () => (
+    afterInput: (
       <Button secondary small>
         Search
       </Button>
@@ -88,6 +96,18 @@ We've added a new `<Select.Divider />` child component for select menus to suppo
   </Select>
 ```
 
+#### Use cards to visually separate multiple summary lists on a single page
+
+You can now wrap a [card](https://service-manual.nhs.uk/design-system/components/cards) around [summary lists](https://service-manual.nhs.uk/design-system/components/summary-list) to help you:
+
+- design and build pages with multiple summary lists
+- show visual dividers between summary lists
+- allow users to apply actions to entire lists
+
+### Reverse links
+
+To align with NHS.UK frontend, we've updated the [action link](https://service-manual.nhs.uk/design-system/components/action-link), [back link](https://service-manual.nhs.uk/design-system/components/back-link) and [breadcrumbs](https://service-manual.nhs.uk/design-system/components/breadcrumbs) components to support the `reverse` prop for dark backgrounds.
+
 ### Numbered pagination component
 
 The [pagination](https://service-manual.nhs.uk/design-system/components/pagination) component from NHS.UK frontend v10.1 has been updated to support numbered pagination:
@@ -115,7 +135,7 @@ The [notification banner](https://service-manual.nhs.uk/design-system/components
 
 ### Panel component
 
-The [panel](https://service-manual.nhs.uk/design-system/components/panel) component from NHS.UK frontend v9.3.0 has been added:
+The [panel](https://service-manual.nhs.uk/design-system/components/panel) component from NHS.UK frontend v9.3.0, and the [interruption panel variant](https://service-manual.nhs.uk/design-system/components/panel#interruption-panel) from NHS.UK frontend v10.3.0, have been added:
 
 ```jsx
 <Panel>
@@ -130,32 +150,32 @@ This replaces the [list panel component](#list-panel) which was removed in NHS.U
 
 The [summary list](https://service-manual.nhs.uk/design-system/components/summary-list) component now includes improvements from NHS.UK frontend v9.6.2:
 
-- new props `noBorder` and `noActions` supported at `<SummaryList.Row>` level
+- new prop `noBorder` supported at `<SummaryList.Row>` level
 - new child component `<SummaryList.Action>` for row actions
+- removed unnecessary child component `<SummaryList.Actions>`
 
 ```patch
   <SummaryList>
 -   <SummaryList.Row>
 +   <SummaryList.Row noBorder>
       <SummaryList.Key>Name</SummaryList.Key>
       <SummaryList.Value>Karen Francis</SummaryList.Value>
-      <SummaryList.Actions>
+-     <SummaryList.Actions>
 -       <a href="#">
 -         Change<span className="nhsuk-u-visually-hidden"> name</span>
 -       </a>
-+       <SummaryList.Action href="#" visuallyHiddenText="name">
-+         Change
-+       </SummaryList.Action>
-      </SummaryList.Actions>
-    </SummaryList.Row>
--   <SummaryList.Row>
-+   <SummaryList.Row noActions>
-      <SummaryList.Key>Date of birth</SummaryList.Key>
-      <SummaryList.Value>15 March 1984</SummaryList.Value>
++     <SummaryList.Action href="#" visuallyHiddenText="name">
++       Change
++     </SummaryList.Action>
+-     </SummaryList.Actions>
     </SummaryList.Row>
   </SummaryList>
 ```
 
+### Support for component language localisation
+
+The [character count](https://service-manual.nhs.uk/design-system/components/character-count), [file upload](https://service-manual.nhs.uk/design-system/components/file-upload) and [password input](https://service-manual.nhs.uk/design-system/components/password-input) components now support the `i18n` prop for [NHS.UK frontend localisation](https://github.com/nhsuk/nhsuk-frontend/blob/main/docs/configuration/localisation.md).
+
 ### Support for React Server Components (RSC)
 
 All components have been tested as React Server Components (RSC) but due to [multipart namespace component limitations](https://ivicabatinic.from.hr/posts/multipart-namespace-components-addressing-rsc-and-dot-notation-issues) an alternative syntax (without dot notation) can be used as a workaround:
@@ -243,6 +263,18 @@ If you are using the `headingLevel` prop you will need to update any uppercase v
 + <Card.Heading headingLevel="h3">Example heading</Card.Heading>
 ```
 
+### Rename the heading level component
+
+If you are using the `HeadingLevel` component you must rename it to `Heading` where the `size` and `visuallyHiddenText` props now supported:
+
+```patch
+- <HeadingLevel className="nhsuk-heading-m">
++ <Heading size="m">
+    Example heading
+- </HeadingLevel>
++ </Heading>
+```
+
 ### Restore visually hidden text for accessibility
 
 For accessibility reasons, it's no longer possible to pass `visuallyHiddenText: false` or override other hidden text for the following:
@@ -255,14 +287,44 @@ For accessibility reasons, it's no longer possible to pass `visuallyHiddenText:
 
 Read about other [changes to meet WCAG 2.2](https://service-manual.nhs.uk/design-system/changes-to-design-system-wcag-2-2) on the design system in the NHS digital service manual.
 
-### Check components that conditionally reveal content still work
+### Check radios and checkboxes that conditionally reveal content still work
 
 Previously, conditionally revealing content ([radios](https://service-manual.nhs.uk/design-system/components/radios#conditionally-revealing-content), [checkboxes](https://service-manual.nhs.uk/design-system/components/checkboxes#conditionally-revealing-content)) would not be rendered until their related input was checked.
 
 To align with NHS.UK frontend, conditionally revealing content is now always rendered but remains hidden until revealed. Accessibility issues with missing `aria-controls`, `aria-describedby` or `aria-expanded` are now fixed.
 
 You must check all form components, form validation and error handling that may not expect hidden conditionally revealing content in the HTML.
 
+### Check checkboxes with exclusive behaviour still work
+
+Previously, the [checkboxes component](https://service-manual.nhs.uk/design-system/components/checkboxes) incorrectly set the the `data-checkbox-exclusive-group` attribute on all items, even when no [option for "none"](https://service-manual.nhs.uk/design-system/components/checkboxes#none-option) was included.
+
+To align with NHS.UK frontend, one or more exclusive groups are now supported using the `Checkboxes.Item` prop `exclusiveGroup`.
+
+You must manually add the `exclusiveGroup` prop to all checkboxes in the same exclusive group. You do not need to do anything if your checkboxes share the same `name` attribute in the rendered HTML, as the exclusive group is determined automatically.
+
+```patch
+  <Checkboxes legend="How do you want to be contacted about this?" name="colour">
+-   <Checkboxes.Item name="colour-red">
++   <Checkboxes.Item name="colour-red" exclusiveGroup="colour">
+      Red
+    </Checkboxes.Item>
+-   <Checkboxes.Item name="colour-blue">
++   <Checkboxes.Item name="colour-blue" exclusiveGroup="colour">
+      Blue
+    </Checkboxes.Item>
+-   <Checkboxes.Item name="colour-blue">
++   <Checkboxes.Item name="colour-blue" exclusiveGroup="colour">
+      Green
+    </Checkboxes.Item>
+    <Checkboxes.Divider />
+-   <Checkboxes.Item value="colour-none" exclusive>
++   <Checkboxes.Item value="colour-none" exclusiveGroup="colour" exclusive>
+      None of the above
+    </Checkboxes.Item>
+  </Checkboxes>
+```
+
 ### Remove unsupported icons
 
 To align with NHS.UK frontend, icons unused by components have been removed:
@@ -291,6 +353,30 @@ You must also make the following changes:
 - replace `<LinkButton>` with `<Button href="/example">` to render HTML `<a>` elements
 - remove the `debounceTimeout` prop when preventing double clicks
 
+### Cards
+
+To align with NHS.UK frontend, we've updated the [card component](https://service-manual.nhs.uk/design-system/components/card) to use boolean props for all supported card types. The existing `cardType` prop can now only be used to set care card variants.
+
+```patch
+- <Card cardType="clickable">
++ <Card clickable>
+```
+
+```patch
+- <Card cardType="feature">
++ <Card feature>
+```
+
+```patch
+- <Card cardType="primary">
++ <Card primary>
+```
+
+```patch
+- <Card cardType="secondary">
++ <Card secondary>
+```
+
 ### Character count
 
 To align with NHS.UK frontend, the character count component automatically renders its own children (label, hint, error message etc) and associated ARIA attributes. We have removed `enum CharacterCountType` and you must make the following changes:
@@ -460,14 +546,12 @@ Before:
 After:
 
 ```jsx
-<Card cardType="feature">
-  <Card.Content>
-    <Card.Heading id="C">C</Card.Heading>
-    <ul className="nhsuk-list nhsuk-list--border">
-      <li><a href="/conditions/chest-pain/">Chest pain</a></li>
-      <li><a href="/conditions/cold-sores/">Cold sore</a></li>
-    </ul>
-  </Card.Content>
+<Card feature>
+  <Card.Heading id="C">C</Card.Heading>
+  <ul className="nhsuk-list nhsuk-list--border">
+    <li><a href="/conditions/chest-pain/">Chest pain</a></li>
+    <li><a href="/conditions/cold-sores/">Cold sore</a></li>
+  </ul>
 </Card>
 
 <div className="nhsuk-back-to-top">
@@ -622,6 +706,14 @@ To align with NHS.UK frontend, you must make the following changes:
   </Table>
 ```
 
+If you are using the `Table.Panel` child component, you must migrate to the feature card:
+
+```patch
+- <Table.Panel heading="Other conditions like impetigo">
++ <Card feature>
++   <Card.Heading>Other conditions like impetigo</Card.Heading>
+```
+
 ### Textarea
 
 You must rename the `Textarea` prop `textareaRef` to `ref` for consistency with other components:

docs/upgrade-to-6.0.md

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components",
-  "version": "6.0.0-beta.4",
+  "version": "6.0.0-beta.5",
   "license": "MIT",
   "author": {
     "name": "NHS England"
@@ -97,7 +97,7 @@
     "jest": "^30.2.0",
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.2.0",
-    "nhsuk-frontend": "^10.2.2",
+    "nhsuk-frontend": "^10.3.1",
     "outdent": "^0.8.0",
     "prettier": "^3.8.0",
     "react": "^19.2.3",
@@ -114,7 +114,7 @@
   },
   "peerDependencies": {
     "classnames": ">=2.5.0",
-    "nhsuk-frontend": ">=10.2.0 <11.0.0",
+    "nhsuk-frontend": ">=10.3.0 <11.0.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "tslib": ">=2.8.0"