[WIP] Upgrade to NHS.UK frontend v10.5

.storybook/preview.tsx

@@ -3,8 +3,6 @@ import { type Preview } from '@storybook/react-vite';
 
 import { Col, Container, Row } from '#components/layout/index.js';
 
-import './storybook.scss';
-
 const preview: Preview = {
   decorators: (Story, { parameters }) =>
     parameters.width === false ? (

docs/upgrade-to-6.0.md

@@ -48,7 +48,7 @@ You can now use smaller versions of [buttons](https://service-manual.nhs.uk/desi
 
 By default, the secondary button is transparent and has no colour.
 
-You can now make the [button](https://service-manual.nhs.uk/design-system/components/button) component white when you use it on darker backgrounds by adding the `secondarySolid` prop.
+You can now make the [button](https://service-manual.nhs.uk/design-system/components/button) component white when you use it on darker backgrounds by setting the `variant` prop to `'secondary-solid'`.
 
 #### Add inline buttons to text inputs and select menus
 
@@ -58,7 +58,7 @@ You can now add inline buttons to text inputs and select menus using the `formGr
 <TextInput
   formGroupProps={{
     afterInput: (
-      <Button secondary small>
+      <Button variant="secondary" small>
         Search
       </Button>
     ),
@@ -333,10 +333,11 @@ To align with NHS.UK frontend, icons unused by components have been removed:
 - `ChevronLeftIcon`
 - `ChevronRightIcon`
 - `ChevronDownIcon`
-- `CloseIcon`
 - `EmdashIcon` and `SmallEmdashIcon`
-- `MinusIcon`
-- `PlusIcon`
+
+With the following icons renamed:
+
+- `CloseIcon` renamed to `CrossIcon`
 
 ### Back link
 
@@ -719,6 +720,15 @@ If you are using the `Table.Panel` child component, you must migrate to the feat
 +   <Card.Heading>Other conditions like impetigo</Card.Heading>
 ```
 
+### Tags
+
+To align with NHS.UK frontend, you must rename the `Tag` prop `color` to `colour`:
+
+```patch
+- <Tag color="white">In progress</Tag>
++ <Tag colour="white">In progress</Tag>
+```
+
 ### Textarea
 
 You must rename the `Textarea` prop `textareaRef` to `ref` for consistency with other components:

eslint.config.js

@@ -36,6 +36,7 @@ export default defineConfig([
       'no-redeclare': 'off',
       'no-undef': 'off',
       'no-unused-vars': 'off',
+      '@typescript-eslint/no-deprecated': 'warn',
       '@typescript-eslint/no-redeclare': 'error',
       '@typescript-eslint/no-unused-vars': [
         'error',

package.json

@@ -103,7 +103,7 @@
     "jest": "^30.4.2",
     "jest-axe": "^11.0.0",
     "jest-environment-jsdom": "^30.4.1",
-    "nhsuk-frontend": "^10.3.1",
+    "nhsuk-frontend": "^10.5.2",
     "outdent": "^0.8.0",
     "prettier": "^3.9.6",
     "react": "^19.2.8",

src/components/content-presentation/details/Details.tsx

@@ -3,12 +3,20 @@ import { type ComponentPropsWithoutRef, type FC, forwardRef } from 'react';
 
 export interface DetailsProps extends ComponentPropsWithoutRef<'details'> {
   expander?: boolean;
+  variant?: 'reverse';
 }
 
 const DetailsComponent = forwardRef<HTMLDetailsElement, DetailsProps>(
-  ({ className, expander, ...rest }, forwardedRef) => (
+  ({ className, expander, variant, ...rest }, forwardedRef) => (
     <details
-      className={classNames('nhsuk-details', { 'nhsuk-expander': expander }, className)}
+      className={classNames(
+        'nhsuk-details',
+        {
+          'nhsuk-expander': expander,
+          'nhsuk-details--reverse': variant === 'reverse',
+        },
+        className,
+      )}
       ref={forwardedRef}
       {...rest}
     />

src/components/content-presentation/details/__tests__/Details.test.tsx

@@ -47,6 +47,15 @@ describe('Details', () => {
     expect(detailsEl).toHaveClass('nhsuk-expander');
   });
 
+  it('adds reverse variant', async () => {
+    const { modules } = await renderClient(<Details variant="reverse" />, {
+      className: 'nhsuk-details',
+    });
+
+    const [detailsEl] = modules;
+    expect(detailsEl).toHaveClass('nhsuk-details--reverse');
+  });
+
   it('forwards refs', async () => {
     const ref = createRef<HTMLDetailsElement>();
 

src/components/content-presentation/icons/Icon.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
 import classNames from 'classnames';
 import { type ComponentPropsWithoutRef, type FC } from 'react';
 
 export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
   title?: string;
-  modifier?:
+  name?:
     | 'arrow-left'
     | 'arrow-right'
     | 'arrow-right-circle'
@@ -14,18 +15,25 @@
     | 'user';
 
   /**
-   * @deprecated Use `modifier` instead.
+   * @deprecated Use `name` instead.
    */
-  iconType?: IconProps['modifier'];
+  iconType?: IconProps['name'];
+
+  /**
+   * @deprecated Use `name` instead.
+   */
+  modifier?: IconProps['name'];
 }
 
 export const Icon: FC<IconProps> = ({
   className,
   children,
+  name,
   iconType,
-  modifier = iconType
-    ?.replace('nhsuk-icon__', '') // NHS.UK frontend v9.x
-    .replace('nhsuk-icon--', ''), // NHS.UK frontend v10.x
+  modifier = name ??
+    iconType
+      ?.replace('nhsuk-icon__', '') // NHS.UK frontend v9.x
+      .replace('nhsuk-icon--', ''), // NHS.UK frontend v10.x
   title,
   ...rest
 }) => (

src/components/content-presentation/icons/individual/ArrowLeftIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const ArrowLeftIcon: FC<IconProps> = (props) => (
-  <Icon modifier="arrow-left" {...props}>
+  <Icon name="arrow-left" {...props}>
     <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z" />
   </Icon>
 );

src/components/content-presentation/icons/individual/ArrowRightCircleIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const ArrowRightCircleIcon: FC<IconProps> = (props) => (
-  <Icon modifier="arrow-right-circle" {...props}>
+  <Icon name="arrow-right-circle" {...props}>
     <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
   </Icon>
 );

src/components/content-presentation/icons/individual/ArrowRightIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const ArrowRightIcon: FC<IconProps> = (props) => (
-  <Icon modifier="arrow-right" {...props}>
+  <Icon name="arrow-right" {...props}>
     <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z" />
   </Icon>
 );

src/components/content-presentation/icons/individual/ChevronRightCircleIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const ChevronRightCircleIcon: FC<IconProps> = (props) => (
-  <Icon modifier="chevron-right-circle" {...props}>
+  <Icon name="chevron-right-circle" {...props}>
     <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
   </Icon>
 );

src/components/content-presentation/icons/individual/CrossIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const CrossIcon: FC<IconProps> = (props) => (
-  <Icon modifier="cross" {...props}>
+  <Icon name="cross" {...props}>
     <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z" />
   </Icon>
 );

src/components/content-presentation/icons/individual/SearchIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const SearchIcon: FC<IconProps> = (props) => (
-  <Icon modifier="search" {...props}>
+  <Icon name="search" {...props}>
     <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
   </Icon>
 );

src/components/content-presentation/icons/individual/TickIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const TickIcon: FC<IconProps> = (props) => (
-  <Icon modifier="tick" {...props}>
+  <Icon name="tick" {...props}>
     <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z" />
   </Icon>
 );

src/components/content-presentation/icons/individual/UserIcon.tsx

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 import { Icon, type IconProps } from '../Icon.js';
 
 export const UserIcon: FC<IconProps> = (props) => (
-  <Icon modifier="user" {...props}>
+  <Icon name="user" {...props}>
     <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
   </Icon>
 );

src/components/content-presentation/tag/Tag.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
 import classNames from 'classnames';
 import { type ComponentPropsWithoutRef, type FC } from 'react';
 
 export interface TagProps extends ComponentPropsWithoutRef<'strong'> {
-  modifier?:
+  colour?:
     | 'white'
     | 'grey'
     | 'green'
@@ -15,14 +16,37 @@
     | 'yellow';
 
   /**
-   * @deprecated Use `modifier` instead.
+   * @deprecated Use `colour` instead.
    */
-  color?: TagProps['modifier'];
+  color?: TagProps['colour'];
+
+  /**
+   * @deprecated Use `colour` instead.
+   */
+  modifier?: TagProps['colour'];
+
+  border?: boolean;
+  noBorder?: boolean;
 }
 
-export const Tag: FC<TagProps> = ({ className, color, modifier = color, ...rest }) => (
+export const Tag: FC<TagProps> = ({
+  className,
+  modifier,
+  color,
+  colour = color ?? modifier,
+  border = true,
+  noBorder = false,
+  ...rest
+}) => (
   <strong
-    className={classNames('nhsuk-tag', { [`nhsuk-tag--${modifier}`]: modifier }, className)}
+    className={classNames(
+      'nhsuk-tag',
+      {
+        [`nhsuk-tag--${colour}`]: colour,
+        'nhsuk-tag--no-border': noBorder || !border,
+      },
+      className,
+    )}
     {...rest}
   />
 );

src/components/content-presentation/tag/__tests__/Tag.test.tsx

@@ -16,7 +16,7 @@ describe('Tag', () => {
     expect(container.querySelector('strong.nhsuk-tag')).toBeTruthy();
   });
 
-  it.each<ComponentPropsWithoutRef<typeof Tag>['modifier']>([
+  it.each<ComponentPropsWithoutRef<typeof Tag>['colour']>([
     'white',
     'grey',
     'green',
@@ -28,7 +28,7 @@ describe('Tag', () => {
     'orange',
     'yellow',
   ])('adds colour class %s ', (colour) => {
-    const { container } = render(<Tag modifier={colour} />);
+    const { container } = render(<Tag colour={colour} />);
 
     expect(container.querySelector(`strong.nhsuk-tag.nhsuk-tag--${colour}`)).toBeTruthy();
   });

src/components/form-elements/button/Button.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
 'use client';
 
 import classNames from 'classnames';
@@ -26,24 +27,48 @@
 }
 
 interface ButtonBaseProps {
+  small?: boolean;
+  variant?: 'brand' | 'login' | 'reverse' | 'secondary' | 'secondary-solid' | 'warning';
+  preventDoubleClick?: boolean;
+
+  /**
+   * @deprecated Use `variant` instead.
+   */
   secondary?: boolean;
+
+  /**
+   * @deprecated Use `variant` instead.
+   */
   secondarySolid?: boolean;
+
+  /**
+   * @deprecated Use `variant` instead.
+   */
   reverse?: boolean;
+
+  /**
+   * @deprecated Use `variant` instead.
+   */
   warning?: boolean;
+
+  /**
+   * @deprecated Use `variant` instead.
+   */
   login?: boolean;
-  small?: boolean;
-  preventDoubleClick?: boolean;
 }
 
 function getButtonClassNames(props: ButtonProps | ButtonLinkProps) {
   return classNames(
     'nhsuk-button',
-    { 'nhsuk-button--secondary': props.secondary },
-    { 'nhsuk-button--secondary-solid': props.secondarySolid },
-    { 'nhsuk-button--reverse': props.reverse },
-    { 'nhsuk-button--warning': props.warning },
-    { 'nhsuk-button--login': props.login },
-    { 'nhsuk-button--small': props.small },
+    {
+      'nhsuk-button--secondary': props.variant === 'secondary' || props.secondary,
+      'nhsuk-button--secondary-solid': props.variant === 'secondary-solid' || props.secondarySolid,
+      'nhsuk-button--reverse': props.variant === 'reverse' || props.reverse,
+      'nhsuk-button--warning': props.variant === 'warning' || props.warning,
+      'nhsuk-button--login': props.variant === 'login' || props.login,
+      'nhsuk-button--brand': props.variant === 'brand',
+      'nhsuk-button--small': props.small,
+    },
     props.className,
   );
 }
@@ -53,12 +78,13 @@
     className,
     asElement: Element = 'button',
     disabled,
     secondary,
     secondarySolid,
     reverse,
     warning,
     login,
     small,
+    variant,
     type = 'submit',
     preventDoubleClick,
     onClick,
@@ -113,12 +139,13 @@
     const {
       className,
       asElement: Element = 'a',
       secondary,
       secondarySolid,
       reverse,
       warning,
       login,
       small,
+      variant,
       preventDoubleClick,
       onClick,
       ...rest