From 096a69849a04416353c62f80aea42360115c3712 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 11:08:39 +0000 Subject: [PATCH 01/10] Split summary list into child components --- .../summary-list/SummaryList.tsx | 27 +++++-------------- .../components/SummaryListActions.tsx | 8 ++++++ .../components/SummaryListKey.tsx | 8 ++++++ .../components/SummaryListRow.tsx | 8 ++++++ .../components/SummaryListValue.tsx | 8 ++++++ .../summary-list/components/index.ts | 4 +++ .../summary-list/index.ts | 1 + 7 files changed, 44 insertions(+), 20 deletions(-) create mode 100644 src/components/content-presentation/summary-list/components/SummaryListActions.tsx create mode 100644 src/components/content-presentation/summary-list/components/SummaryListKey.tsx create mode 100644 src/components/content-presentation/summary-list/components/SummaryListRow.tsx create mode 100644 src/components/content-presentation/summary-list/components/SummaryListValue.tsx create mode 100644 src/components/content-presentation/summary-list/components/index.ts diff --git a/src/components/content-presentation/summary-list/SummaryList.tsx b/src/components/content-presentation/summary-list/SummaryList.tsx index c2cd6e70..54bccdc2 100644 --- a/src/components/content-presentation/summary-list/SummaryList.tsx +++ b/src/components/content-presentation/summary-list/SummaryList.tsx @@ -1,21 +1,12 @@ import classNames from 'classnames'; -import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react'; +import { forwardRef, type ComponentPropsWithoutRef } from 'react'; -export const SummaryListRow: FC> = ({ className, ...rest }) => ( -
-); - -export const SummaryListKey: FC> = ({ className, ...rest }) => ( -
-); - -export const SummaryListValue: FC> = ({ className, ...rest }) => ( -
-); - -export const SummaryListActions: FC> = ({ className, ...rest }) => ( -
-); +import { + SummaryListActions, + SummaryListKey, + SummaryListRow, + SummaryListValue, +} from './components/index.js'; export interface SummaryListProps extends ComponentPropsWithoutRef<'dl'> { noBorder?: boolean; @@ -36,10 +27,6 @@ const SummaryListComponent = forwardRef( ); SummaryListComponent.displayName = 'SummaryList'; -SummaryListRow.displayName = 'SummaryList.Row'; -SummaryListKey.displayName = 'SummaryList.Key'; -SummaryListValue.displayName = 'SummaryList.Value'; -SummaryListActions.displayName = 'SummaryList.Actions'; export const SummaryList = Object.assign(SummaryListComponent, { Row: SummaryListRow, diff --git a/src/components/content-presentation/summary-list/components/SummaryListActions.tsx b/src/components/content-presentation/summary-list/components/SummaryListActions.tsx new file mode 100644 index 00000000..327dcf6c --- /dev/null +++ b/src/components/content-presentation/summary-list/components/SummaryListActions.tsx @@ -0,0 +1,8 @@ +import classNames from 'classnames'; +import { type ComponentPropsWithoutRef, type FC } from 'react'; + +export const SummaryListActions: FC> = ({ className, ...rest }) => ( +
+); + +SummaryListActions.displayName = 'SummaryList.Actions'; diff --git a/src/components/content-presentation/summary-list/components/SummaryListKey.tsx b/src/components/content-presentation/summary-list/components/SummaryListKey.tsx new file mode 100644 index 00000000..1045f66e --- /dev/null +++ b/src/components/content-presentation/summary-list/components/SummaryListKey.tsx @@ -0,0 +1,8 @@ +import classNames from 'classnames'; +import { type ComponentPropsWithoutRef, type FC } from 'react'; + +export const SummaryListKey: FC> = ({ className, ...rest }) => ( +
+); + +SummaryListKey.displayName = 'SummaryList.Key'; diff --git a/src/components/content-presentation/summary-list/components/SummaryListRow.tsx b/src/components/content-presentation/summary-list/components/SummaryListRow.tsx new file mode 100644 index 00000000..fa21a305 --- /dev/null +++ b/src/components/content-presentation/summary-list/components/SummaryListRow.tsx @@ -0,0 +1,8 @@ +import classNames from 'classnames'; +import { type ComponentPropsWithoutRef, type FC } from 'react'; + +export const SummaryListRow: FC> = ({ className, ...rest }) => ( +
+); + +SummaryListRow.displayName = 'SummaryList.Row'; diff --git a/src/components/content-presentation/summary-list/components/SummaryListValue.tsx b/src/components/content-presentation/summary-list/components/SummaryListValue.tsx new file mode 100644 index 00000000..091d3799 --- /dev/null +++ b/src/components/content-presentation/summary-list/components/SummaryListValue.tsx @@ -0,0 +1,8 @@ +import classNames from 'classnames'; +import { type ComponentPropsWithoutRef, type FC } from 'react'; + +export const SummaryListValue: FC> = ({ className, ...rest }) => ( +
+); + +SummaryListValue.displayName = 'SummaryList.Value'; diff --git a/src/components/content-presentation/summary-list/components/index.ts b/src/components/content-presentation/summary-list/components/index.ts new file mode 100644 index 00000000..a8762a4c --- /dev/null +++ b/src/components/content-presentation/summary-list/components/index.ts @@ -0,0 +1,4 @@ +export * from './SummaryListActions.js'; +export * from './SummaryListKey.js'; +export * from './SummaryListRow.js'; +export * from './SummaryListValue.js'; diff --git a/src/components/content-presentation/summary-list/index.ts b/src/components/content-presentation/summary-list/index.ts index 7a6b7689..134bc45e 100644 --- a/src/components/content-presentation/summary-list/index.ts +++ b/src/components/content-presentation/summary-list/index.ts @@ -1 +1,2 @@ +export * from './components/index.js'; export * from './SummaryList.js'; From 4d51609e39806e595c82c47cf878a408db05ee17 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 11:10:33 +0000 Subject: [PATCH 02/10] Add missing summary list row `noBorder` prop --- .../__tests__/SummaryList.test.tsx | 13 +++++++++++++ .../__snapshots__/SummaryList.test.tsx.snap | 18 ++++++++++++++++++ .../summary-list/components/SummaryListRow.tsx | 15 +++++++++++++-- 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx index 02398c01..a904677c 100644 --- a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx +++ b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx @@ -10,6 +10,12 @@ describe('SummaryList', () => { expect(container).toMatchSnapshot('SummaryList'); }); + it('matches snapshot without border', () => { + const { container } = render(); + + expect(container).toMatchSnapshot(); + }); + it('forwards refs', () => { const ref = createRef(); @@ -34,6 +40,13 @@ describe('SummaryList', () => { expect(container.textContent).toBe('Row'); expect(container).toMatchSnapshot(); }); + + it('matches snapshot without border', () => { + const { container } = render(Row); + + expect(container).toHaveTextContent('Row'); + expect(container).toMatchSnapshot(); + }); }); describe('SummaryList.Key', () => { diff --git a/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap b/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap index 5cf97f27..e73c277c 100644 --- a/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap +++ b/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap @@ -30,6 +30,16 @@ exports[`SummaryList SummaryList.Row matches snapshot 1`] = `
`; +exports[`SummaryList SummaryList.Row matches snapshot without border 1`] = ` +
+
+ Row +
+
+`; + exports[`SummaryList SummaryList.Value matches snapshot 1`] = `
`; +exports[`SummaryList matches snapshot without border 1`] = ` +
+
+
+`; + exports[`SummaryList matches snapshot: SummaryList 1`] = `
> = ({ className, ...rest }) => ( -
+export interface SummaryListRowProps extends ComponentPropsWithoutRef<'div'> { + noBorder?: boolean; +} + +export const SummaryListRow: FC = ({ className, noBorder, ...rest }) => ( +
); SummaryListRow.displayName = 'SummaryList.Row'; From d39e1edb4de0a4cbdcb02994df499b72045f2010 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 11:12:05 +0000 Subject: [PATCH 03/10] Add missing summary list row `noActions` prop --- .../summary-list/components/SummaryListRow.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/content-presentation/summary-list/components/SummaryListRow.tsx b/src/components/content-presentation/summary-list/components/SummaryListRow.tsx index 44f6de4e..73ab2924 100644 --- a/src/components/content-presentation/summary-list/components/SummaryListRow.tsx +++ b/src/components/content-presentation/summary-list/components/SummaryListRow.tsx @@ -2,13 +2,20 @@ import classNames from 'classnames'; import { type ComponentPropsWithoutRef, type FC } from 'react'; export interface SummaryListRowProps extends ComponentPropsWithoutRef<'div'> { + noActions?: boolean; noBorder?: boolean; } -export const SummaryListRow: FC = ({ className, noBorder, ...rest }) => ( +export const SummaryListRow: FC = ({ + className, + noActions, + noBorder, + ...rest +}) => (
Date: Tue, 18 Nov 2025 11:17:56 +0000 Subject: [PATCH 04/10] Remove incorrect action link examples from summary lists --- .../SummaryList.stories.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx index 8cac5990..a0877874 100644 --- a/stories/Content Presentation/SummaryList.stories.tsx +++ b/stories/Content Presentation/SummaryList.stories.tsx @@ -4,23 +4,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite'; import { SummaryList } from '#components/content-presentation/summary-list/index.js'; import { BodyText } from '#components/typography/BodyText.js'; -/** - * ## Implementation notes - * - * When providing action links, you must include visually hidden text. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".' - * - * Example of an action link: - * - * ```jsx - * - * Change - * - * {' '}name - * - * - * ``` - */ - const meta: Meta = { title: 'Content Presentation/SummaryList', component: SummaryList, From 17af72a18692bfcd8d56019ca70f2b2c91b5d90d Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 11:31:04 +0000 Subject: [PATCH 05/10] Use Jest text content matchers --- .../summary-list/__tests__/SummaryList.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx index a904677c..fe403b48 100644 --- a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx +++ b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx @@ -37,7 +37,7 @@ describe('SummaryList', () => { it('matches snapshot', () => { const { container } = render(Row); - expect(container.textContent).toBe('Row'); + expect(container).toHaveTextContent('Row'); expect(container).toMatchSnapshot(); }); @@ -53,7 +53,7 @@ describe('SummaryList', () => { it('matches snapshot', () => { const { container } = render(Key); - expect(container.textContent).toBe('Key'); + expect(container).toHaveTextContent('Key'); expect(container).toMatchSnapshot(); }); }); @@ -62,7 +62,7 @@ describe('SummaryList', () => { it('matches snapshot', () => { const { container } = render(Value); - expect(container.textContent).toBe('Value'); + expect(container).toHaveTextContent('Value'); expect(container).toMatchSnapshot(); }); }); @@ -71,7 +71,7 @@ describe('SummaryList', () => { it('matches snapshot', () => { const { container } = render(Actions); - expect(container.textContent).toBe('Actions'); + expect(container).toHaveTextContent('Actions'); expect(container).toMatchSnapshot(); }); }); From 6b3bb30a8674f0638a2cd43398595c9e221963db Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 11:54:44 +0000 Subject: [PATCH 06/10] Add summary list `` child component --- src/__tests__/index.test.ts | 1 + .../summary-list/SummaryList.tsx | 2 + .../__tests__/SummaryList.test.tsx | 33 +++++-- .../__snapshots__/SummaryList.test.tsx.snap | 43 ++++++++- .../components/SummaryListAction.tsx | 22 +++++ .../summary-list/components/index.ts | 1 + .../SummaryList.stories.tsx | 87 ++++++++----------- 7 files changed, 131 insertions(+), 58 deletions(-) create mode 100644 src/components/content-presentation/summary-list/components/SummaryListAction.tsx diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts index 5755e98d..c6a86f28 100644 --- a/src/__tests__/index.test.ts +++ b/src/__tests__/index.test.ts @@ -113,6 +113,7 @@ describe('Index', () => { 'SelectOption', 'SkipLink', 'SummaryList', + 'SummaryListAction', 'SummaryListActions', 'SummaryListKey', 'SummaryListRow', diff --git a/src/components/content-presentation/summary-list/SummaryList.tsx b/src/components/content-presentation/summary-list/SummaryList.tsx index 54bccdc2..668990f1 100644 --- a/src/components/content-presentation/summary-list/SummaryList.tsx +++ b/src/components/content-presentation/summary-list/SummaryList.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames'; import { forwardRef, type ComponentPropsWithoutRef } from 'react'; import { + SummaryListAction, SummaryListActions, SummaryListKey, SummaryListRow, @@ -32,5 +33,6 @@ export const SummaryList = Object.assign(SummaryListComponent, { Row: SummaryListRow, Key: SummaryListKey, Value: SummaryListValue, + Action: SummaryListAction, Actions: SummaryListActions, }); diff --git a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx index fe403b48..cc5ff07c 100644 --- a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx +++ b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx @@ -51,27 +51,48 @@ describe('SummaryList', () => { describe('SummaryList.Key', () => { it('matches snapshot', () => { - const { container } = render(Key); + const { container } = render(Example key); - expect(container).toHaveTextContent('Key'); + expect(container).toHaveTextContent('Example key'); expect(container).toMatchSnapshot(); }); }); describe('SummaryList.Value', () => { it('matches snapshot', () => { - const { container } = render(Value); + const { container } = render(Example value); - expect(container).toHaveTextContent('Value'); + expect(container).toHaveTextContent('Example value'); expect(container).toMatchSnapshot(); }); }); describe('SummaryList.Actions', () => { it('matches snapshot', () => { - const { container } = render(Actions); + const { container } = render( + + + Edit + + + Delete + + , + ); - expect(container).toHaveTextContent('Actions'); + expect(container).toMatchSnapshot(); + }); + }); + + describe('SummaryList.Action', () => { + it('matches snapshot', () => { + const { container } = render( + + Edit + , + ); + + expect(container).toHaveTextContent('Edit example key'); expect(container).toMatchSnapshot(); }); }); diff --git a/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap b/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap index e73c277c..a350110c 100644 --- a/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap +++ b/src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap @@ -1,11 +1,48 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing +exports[`SummaryList SummaryList.Action matches snapshot 1`] = ` + +`; + exports[`SummaryList SummaryList.Actions matches snapshot 1`] = ` `; @@ -15,7 +52,7 @@ exports[`SummaryList SummaryList.Key matches snapshot 1`] = `
- Key + Example key
`; @@ -45,7 +82,7 @@ exports[`SummaryList SummaryList.Value matches snapshot 1`] = `
- Value + Example value
`; diff --git a/src/components/content-presentation/summary-list/components/SummaryListAction.tsx b/src/components/content-presentation/summary-list/components/SummaryListAction.tsx new file mode 100644 index 00000000..a19c9788 --- /dev/null +++ b/src/components/content-presentation/summary-list/components/SummaryListAction.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import { type AsElementLink } from '#util/types/LinkTypes.js'; + +export interface SummaryListActionProps extends AsElementLink { + visuallyHiddenText: string; +} + +export const SummaryListAction = forwardRef( + (props, forwardedRef) => { + const { children, className, asElement: Element = 'a', visuallyHiddenText, ...rest } = props; + + return ( + + {children} + {visuallyHiddenText} + + ); + }, +); + +SummaryListAction.displayName = 'SummaryList.Action'; diff --git a/src/components/content-presentation/summary-list/components/index.ts b/src/components/content-presentation/summary-list/components/index.ts index a8762a4c..eb031e44 100644 --- a/src/components/content-presentation/summary-list/components/index.ts +++ b/src/components/content-presentation/summary-list/components/index.ts @@ -1,3 +1,4 @@ +export * from './SummaryListAction.js'; export * from './SummaryListActions.js'; export * from './SummaryListKey.js'; export * from './SummaryListRow.js'; diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx index a0877874..6ab27d04 100644 --- a/stories/Content Presentation/SummaryList.stories.tsx +++ b/stories/Content Presentation/SummaryList.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ import { type Meta, type StoryObj } from '@storybook/react-vite'; import { SummaryList } from '#components/content-presentation/summary-list/index.js'; @@ -7,51 +6,50 @@ import { BodyText } from '#components/typography/BodyText.js'; const meta: Meta = { title: 'Content Presentation/SummaryList', component: SummaryList, -}; -export default meta; -type Story = StoryObj; - -export const Standard: Story = { argTypes: { noBorder: { type: 'boolean', defaultValue: false, }, }, - args: { noBorder: false }, - render: ({ noBorder }) => ( - +}; +export default meta; +type Story = StoryObj; + +export const Standard: Story = { + render: (args) => ( + Name - Sarah Philips + Karen Francis - - Change name - + + Change + Date of birth - 5 January 1978 + 15 March 1984 - - Change date of birth - + + Change + Contact information - 72 Guild Street + 73 Roman Rd
- London + Leeds
- SE23 6FH + LS2 5ZN - - Change contact information - + + Change + @@ -61,43 +59,34 @@ export const Standard: Story = { sarah.phillips@example.com - - Change contact details - + + Change + ), - parameters: { - docs: { - description: { - story: - 'Change links must include visually hidden text. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".', - }, - }, - }, }; export const SummaryListWithoutActions: Story = { - args: { noBorder: false }, - render: ({ noBorder }) => ( - + render: (args) => ( + Name - Sarah Philips + Karen Francis Date of birth - 5 January 1978 + 15 March 1984 Contact information - 72 Guild Street + 73 Roman Rd
- London + Leeds
- SE23 6FH + LS2 5ZN @@ -115,24 +104,24 @@ export const SummaryListWithoutBorder: Story = { args: { noBorder: true, }, - render: ({ noBorder }) => ( - + render: (args) => ( + Name - Sarah Philips + Karen Francis Date of birth - 5 January 1978 + 15 March 1984 Contact information - 72 Guild Street + 73 Roman Rd
- London + Leeds
- SE23 6FH + LS2 5ZN From bc47ba8d4915efe6b0917915000779b22734a6a0 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 11:55:10 +0000 Subject: [PATCH 07/10] Add stories for summary list row `noBorder` and `noActions` --- .../SummaryList.stories.tsx | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx index 6ab27d04..497d0040 100644 --- a/stories/Content Presentation/SummaryList.stories.tsx +++ b/stories/Content Presentation/SummaryList.stories.tsx @@ -68,6 +68,53 @@ export const Standard: Story = { ), }; +export const SummaryListWithoutActionsOnLastRow: Story = { + render: (args) => ( + + + Name + Karen Francis + + + Change + + + + + Date of birth + 15 March 1984 + + + Change + + + + + Contact information + + 73 Roman Rd +
+ Leeds +
+ LS2 5ZN + + + + Change + + + + + Contact details + + 07700 900457 + sarah.phillips@example.com + + + + ), +}; + export const SummaryListWithoutActions: Story = { render: (args) => ( @@ -100,6 +147,38 @@ export const SummaryListWithoutActions: Story = { ), }; +export const SummaryListWithoutBorderOnLastRow: Story = { + render: (args) => ( + + + Name + Karen Francis + + + Date of birth + 15 March 1984 + + + Contact information + + 73 Roman Rd +
+ Leeds +
+ LS2 5ZN + + + + Contact details + + 07700 900457 + sarah.phillips@example.com + + + + ), +}; + export const SummaryListWithoutBorder: Story = { args: { noBorder: true, From 11aab6b37fbcab2c79d418f9a7e9ff76f85ea951 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 11:56:08 +0000 Subject: [PATCH 08/10] Update migration guide --- docs/upgrade-to-6.0.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/upgrade-to-6.0.md b/docs/upgrade-to-6.0.md index bceab9fb..9c002616 100644 --- a/docs/upgrade-to-6.0.md +++ b/docs/upgrade-to-6.0.md @@ -60,6 +60,36 @@ The [panel](https://service-manual.nhs.uk/design-system/components/panel) compon This replaces the [list panel component](#list-panel) which was removed in NHS.UK frontend v6.0.0. +### Summary list rows and actions + +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 `` level +- new child component `` for row actions + +```patch + +- ++ + Name + Karen Francis + +- +- Change name +- ++ ++ Change ++ + + +- ++ + Date of birth + 15 March 1984 + + +``` + ### 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: From 0dc4e67b6b16e1e1fdc89869c14f06dc5dda0699 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 12:09:57 +0000 Subject: [PATCH 09/10] Add tests for summary list action refs --- .../summary-list/__tests__/SummaryList.test.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx index cc5ff07c..6fe348a7 100644 --- a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx +++ b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx @@ -95,5 +95,20 @@ describe('SummaryList', () => { expect(container).toHaveTextContent('Edit example key'); expect(container).toMatchSnapshot(); }); + + it('forwards refs', () => { + const ref = createRef(); + + const { container } = render( + + Edit + , + ); + + const rowActionEl = container.querySelector('a'); + + expect(ref.current).toBe(rowActionEl); + expect(ref.current).toHaveAttribute('href', '#'); + }); }); }); From 03da979a82c6ee60e5f03ac0c7dee9aef7215969 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Nov 2025 12:10:27 +0000 Subject: [PATCH 10/10] Add tests for summary list action as custom element --- .../__tests__/SummaryList.test.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx index 6fe348a7..97276e7c 100644 --- a/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx +++ b/src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx @@ -1,5 +1,5 @@ import { render } from '@testing-library/react'; -import { createRef } from 'react'; +import { createRef, type ComponentProps } from 'react'; import { SummaryList } from '..'; @@ -96,6 +96,26 @@ describe('SummaryList', () => { expect(container).toMatchSnapshot(); }); + it('renders as custom element', () => { + function CustomLink({ children, href, ...rest }: ComponentProps<'a'>) { + return ( + + {children} + + ); + } + + const { container } = render( + + Edit + , + ); + + const rowActionEl = container.querySelector('a'); + + expect(rowActionEl?.dataset).toHaveProperty('customLink', 'true'); + }); + it('forwards refs', () => { const ref = createRef();