Skip to content

Commit 6b3bb30

Browse files
colinrotherhamcolinrotherham
committed
Add summary list <SummaryList.Action> child component
1 parent 17af72a commit 6b3bb30

File tree

7 files changed

+131
-58
lines changed

7 files changed

+131
-58
lines changed

‎src/__tests__/index.test.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ describe('Index', () => {
113113
'SelectOption',
114114
'SkipLink',
115115
'SummaryList',
116+
'SummaryListAction',
116117
'SummaryListActions',
117118
'SummaryListKey',
118119
'SummaryListRow',

‎src/components/content-presentation/summary-list/SummaryList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import classNames from 'classnames';
22
import { forwardRef, type ComponentPropsWithoutRef } from 'react';
33

44
import {
5+
SummaryListAction,
56
SummaryListActions,
67
SummaryListKey,
78
SummaryListRow,
@@ -32,5 +33,6 @@ export const SummaryList = Object.assign(SummaryListComponent, {
3233
Row: SummaryListRow,
3334
Key: SummaryListKey,
3435
Value: SummaryListValue,
36+
Action: SummaryListAction,
3537
Actions: SummaryListActions,
3638
});

‎src/components/content-presentation/summary-list/__tests__/SummaryList.test.tsx‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,27 +51,48 @@ describe('SummaryList', () => {
5151

5252
describe('SummaryList.Key', () => {
5353
it('matches snapshot', () => {
54-
const { container } = render(<SummaryList.Key>Key</SummaryList.Key>);
54+
const { container } = render(<SummaryList.Key>Example key</SummaryList.Key>);
5555

56-
expect(container).toHaveTextContent('Key');
56+
expect(container).toHaveTextContent('Example key');
5757
expect(container).toMatchSnapshot();
5858
});
5959
});
6060

6161
describe('SummaryList.Value', () => {
6262
it('matches snapshot', () => {
63-
const { container } = render(<SummaryList.Value>Value</SummaryList.Value>);
63+
const { container } = render(<SummaryList.Value>Example value</SummaryList.Value>);
6464

65-
expect(container).toHaveTextContent('Value');
65+
expect(container).toHaveTextContent('Example value');
6666
expect(container).toMatchSnapshot();
6767
});
6868
});
6969

7070
describe('SummaryList.Actions', () => {
7171
it('matches snapshot', () => {
72-
const { container } = render(<SummaryList.Actions>Actions</SummaryList.Actions>);
72+
const { container } = render(
73+
<SummaryList.Actions>
74+
<SummaryList.Action href="#" visuallyHiddenText="example key">
75+
Edit
76+
</SummaryList.Action>
77+
<SummaryList.Action href="#" visuallyHiddenText="example key">
78+
Delete
79+
</SummaryList.Action>
80+
</SummaryList.Actions>,
81+
);
7382

74-
expect(container).toHaveTextContent('Actions');
83+
expect(container).toMatchSnapshot();
84+
});
85+
});
86+
87+
describe('SummaryList.Action', () => {
88+
it('matches snapshot', () => {
89+
const { container } = render(
90+
<SummaryList.Action href="#" visuallyHiddenText="example key">
91+
Edit
92+
</SummaryList.Action>,
93+
);
94+
95+
expect(container).toHaveTextContent('Edit example key');
7596
expect(container).toMatchSnapshot();
7697
});
7798
});

‎src/components/content-presentation/summary-list/__tests__/__snapshots__/SummaryList.test.tsx.snap‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,48 @@
11
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
22

3+
exports[`SummaryList SummaryList.Action matches snapshot 1`] = `
4+
<div>
5+
<a
6+
href="#"
7+
>
8+
Edit
9+
<span
10+
class="nhsuk-u-visually-hidden"
11+
>
12+
13+
example key
14+
</span>
15+
</a>
16+
</div>
17+
`;
18+
319
exports[`SummaryList SummaryList.Actions matches snapshot 1`] = `
420
<div>
521
<dd
622
class="nhsuk-summary-list__actions"
723
>
8-
Actions
24+
<a
25+
href="#"
26+
>
27+
Edit
28+
<span
29+
class="nhsuk-u-visually-hidden"
30+
>
31+
32+
example key
33+
</span>
34+
</a>
35+
<a
36+
href="#"
37+
>
38+
Delete
39+
<span
40+
class="nhsuk-u-visually-hidden"
41+
>
42+
43+
example key
44+
</span>
45+
</a>
946
</dd>
1047
</div>
1148
`;
@@ -15,7 +52,7 @@ exports[`SummaryList SummaryList.Key matches snapshot 1`] = `
1552
<dt
1653
class="nhsuk-summary-list__key"
1754
>
18-
Key
55+
Example key
1956
</dt>
2057
</div>
2158
`;
@@ -45,7 +82,7 @@ exports[`SummaryList SummaryList.Value matches snapshot 1`] = `
4582
<dd
4683
class="nhsuk-summary-list__value"
4784
>
48-
Value
85+
Example value
4986
</dd>
5087
</div>
5188
`;

‎src/components/content-presentation/summary-list/components/SummaryListAction.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { forwardRef } from 'react';
2+
3+
import { type AsElementLink } from '#util/types/LinkTypes.js';
4+
5+
export interface SummaryListActionProps extends AsElementLink<HTMLAnchorElement> {
6+
visuallyHiddenText: string;
7+
}
8+
9+
export const SummaryListAction = forwardRef<HTMLAnchorElement, SummaryListActionProps>(
10+
(props, forwardedRef) => {
11+
const { children, className, asElement: Element = 'a', visuallyHiddenText, ...rest } = props;
12+
13+
return (
14+
<Element ref={forwardedRef} {...rest}>
15+
{children}
16+
<span className="nhsuk-u-visually-hidden"> {visuallyHiddenText}</span>
17+
</Element>
18+
);
19+
},
20+
);
21+
22+
SummaryListAction.displayName = 'SummaryList.Action';

‎src/components/content-presentation/summary-list/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './SummaryListAction.js';
12
export * from './SummaryListActions.js';
23
export * from './SummaryListKey.js';
34
export * from './SummaryListRow.js';

‎stories/Content Presentation/SummaryList.stories.tsx‎

Lines changed: 38 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable jsx-a11y/anchor-is-valid */
21
import { type Meta, type StoryObj } from '@storybook/react-vite';
32

43
import { SummaryList } from '#components/content-presentation/summary-list/index.js';
@@ -7,51 +6,50 @@ import { BodyText } from '#components/typography/BodyText.js';
76
const meta: Meta<typeof SummaryList> = {
87
title: 'Content Presentation/SummaryList',
98
component: SummaryList,
10-
};
11-
export default meta;
12-
type Story = StoryObj<typeof SummaryList>;
13-
14-
export const Standard: Story = {
159
argTypes: {
1610
noBorder: {
1711
type: 'boolean',
1812
defaultValue: false,
1913
},
2014
},
21-
args: { noBorder: false },
22-
render: ({ noBorder }) => (
23-
<SummaryList noBorder={noBorder}>
15+
};
16+
export default meta;
17+
type Story = StoryObj<typeof SummaryList>;
18+
19+
export const Standard: Story = {
20+
render: (args) => (
21+
<SummaryList {...args}>
2422
<SummaryList.Row>
2523
<SummaryList.Key>Name</SummaryList.Key>
26-
<SummaryList.Value>Sarah Philips</SummaryList.Value>
24+
<SummaryList.Value>Karen Francis</SummaryList.Value>
2725
<SummaryList.Actions>
28-
<a href="#">
29-
Change<span className="nhsuk-u-visually-hidden"> name</span>
30-
</a>
26+
<SummaryList.Action href="#" visuallyHiddenText="name">
27+
Change
28+
</SummaryList.Action>
3129
</SummaryList.Actions>
3230
</SummaryList.Row>
3331
<SummaryList.Row>
3432
<SummaryList.Key>Date of birth</SummaryList.Key>
35-
<SummaryList.Value>5 January 1978</SummaryList.Value>
33+
<SummaryList.Value>15 March 1984</SummaryList.Value>
3634
<SummaryList.Actions>
37-
<a href="#">
38-
Change<span className="nhsuk-u-visually-hidden"> date of birth</span>
39-
</a>
35+
<SummaryList.Action href="#" visuallyHiddenText="date of birth">
36+
Change
37+
</SummaryList.Action>
4038
</SummaryList.Actions>
4139
</SummaryList.Row>
4240
<SummaryList.Row>
4341
<SummaryList.Key>Contact information</SummaryList.Key>
4442
<SummaryList.Value>
45-
72 Guild Street
43+
73 Roman Rd
4644
<br />
47-
London
45+
Leeds
4846
<br />
49-
SE23 6FH
47+
LS2 5ZN
5048
</SummaryList.Value>
5149
<SummaryList.Actions>
52-
<a href="#">
53-
Change<span className="nhsuk-u-visually-hidden"> contact information</span>
54-
</a>
50+
<SummaryList.Action href="#" visuallyHiddenText="contact information">
51+
Change
52+
</SummaryList.Action>
5553
</SummaryList.Actions>
5654
</SummaryList.Row>
5755
<SummaryList.Row>
@@ -61,43 +59,34 @@ export const Standard: Story = {
6159
<BodyText>[email protected]</BodyText>
6260
</SummaryList.Value>
6361
<SummaryList.Actions>
64-
<a href="#">
65-
Change<span className="nhsuk-u-visually-hidden"> contact details</span>
66-
</a>
62+
<SummaryList.Action href="#" visuallyHiddenText="contact details">
63+
Change
64+
</SummaryList.Action>
6765
</SummaryList.Actions>
6866
</SummaryList.Row>
6967
</SummaryList>
7068
),
71-
parameters: {
72-
docs: {
73-
description: {
74-
story:
75-
'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".',
76-
},
77-
},
78-
},
7969
};
8070

8171
export const SummaryListWithoutActions: Story = {
82-
args: { noBorder: false },
83-
render: ({ noBorder }) => (
84-
<SummaryList noBorder={noBorder}>
72+
render: (args) => (
73+
<SummaryList {...args}>
8574
<SummaryList.Row>
8675
<SummaryList.Key>Name</SummaryList.Key>
87-
<SummaryList.Value>Sarah Philips</SummaryList.Value>
76+
<SummaryList.Value>Karen Francis</SummaryList.Value>
8877
</SummaryList.Row>
8978
<SummaryList.Row>
9079
<SummaryList.Key>Date of birth</SummaryList.Key>
91-
<SummaryList.Value>5 January 1978</SummaryList.Value>
80+
<SummaryList.Value>15 March 1984</SummaryList.Value>
9281
</SummaryList.Row>
9382
<SummaryList.Row>
9483
<SummaryList.Key>Contact information</SummaryList.Key>
9584
<SummaryList.Value>
96-
72 Guild Street
85+
73 Roman Rd
9786
<br />
98-
London
87+
Leeds
9988
<br />
100-
SE23 6FH
89+
LS2 5ZN
10190
</SummaryList.Value>
10291
</SummaryList.Row>
10392
<SummaryList.Row>
@@ -115,24 +104,24 @@ export const SummaryListWithoutBorder: Story = {
115104
args: {
116105
noBorder: true,
117106
},
118-
render: ({ noBorder }) => (
119-
<SummaryList noBorder={noBorder}>
107+
render: (args) => (
108+
<SummaryList {...args}>
120109
<SummaryList.Row>
121110
<SummaryList.Key>Name</SummaryList.Key>
122-
<SummaryList.Value>Sarah Philips</SummaryList.Value>
111+
<SummaryList.Value>Karen Francis</SummaryList.Value>
123112
</SummaryList.Row>
124113
<SummaryList.Row>
125114
<SummaryList.Key>Date of birth</SummaryList.Key>
126-
<SummaryList.Value>5 January 1978</SummaryList.Value>
115+
<SummaryList.Value>15 March 1984</SummaryList.Value>
127116
</SummaryList.Row>
128117
<SummaryList.Row>
129118
<SummaryList.Key>Contact information</SummaryList.Key>
130119
<SummaryList.Value>
131-
72 Guild Street
120+
73 Roman Rd
132121
<br />
133-
London
122+
Leeds
134123
<br />
135-
SE23 6FH
124+
LS2 5ZN
136125
</SummaryList.Value>
137126
</SummaryList.Row>
138127
<SummaryList.Row>

0 commit comments

Comments
 (0)