Skip to content

Commit 0b8c98f

Browse files
colinrotherhamcolinrotherham
committed
Remove support for care card optional visually hidden text
1 parent fed3a7a commit 0b8c98f

File tree

4 files changed

+63
-181
lines changed

4 files changed

+63
-181
lines changed

‎src/components/navigation/card/__tests__/Card.test.tsx‎

Lines changed: 56 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable jsx-a11y/anchor-is-valid */
2-
import { render } from '@testing-library/react';
32
import React from 'react';
3+
import { render } from '@testing-library/react';
4+
import { CardType } from '@util/types/NHSUKTypes';
45
import Card from '../Card';
56

67
describe('Card', () => {
@@ -50,7 +51,9 @@ describe('Card', () => {
5051
</Card>,
5152
);
5253

53-
expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--clickable')).toBeTruthy();
54+
const cardEl = container.querySelector('.nhsuk-card');
55+
56+
expect(cardEl).toHaveClass('nhsuk-card--clickable');
5457
});
5558

5659
it('adds feature classes to all elements', () => {
@@ -63,17 +66,12 @@ describe('Card', () => {
6366
</Card>,
6467
);
6568

66-
expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--feature')).toBeTruthy();
67-
expect(
68-
container.querySelector(
69-
'div.nhsuk-card__content.nhsuk-card__content.nhsuk-card__content--feature',
70-
),
71-
).toBeTruthy();
72-
expect(
73-
container.querySelector(
74-
'h2.nhsuk-card__heading.nhsuk-card__heading.nhsuk-card__heading--feature',
75-
),
76-
).toBeTruthy();
69+
const cardEl = container.querySelector('.nhsuk-card');
70+
const cardHeadingEl = cardEl?.querySelector('.nhsuk-card__heading');
71+
72+
expect(cardHeadingEl).toHaveClass('nhsuk-card__heading');
73+
expect(cardHeadingEl).toHaveClass('nhsuk-card__heading--feature');
74+
expect(cardHeadingEl?.tagName).toBe('H2');
7775
});
7876

7977
it('adds primary class to card contents', () => {
@@ -86,11 +84,10 @@ describe('Card', () => {
8684
</Card>,
8785
);
8886

89-
expect(
90-
container.querySelector(
91-
'div.nhsuk-card__content.nhsuk-card__content.nhsuk-card__content--primary',
92-
),
93-
).toBeTruthy();
87+
const cardEl = container.querySelector('.nhsuk-card');
88+
const cardContentsEl = cardEl?.querySelector('.nhsuk-card__content');
89+
90+
expect(cardContentsEl).toHaveClass('nhsuk-card__content--primary');
9491
});
9592

9693
it('adds secondary classes to card and contents', () => {
@@ -103,148 +100,77 @@ describe('Card', () => {
103100
</Card>,
104101
);
105102

106-
expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--secondary')).toBeTruthy();
107-
expect(
108-
container.querySelector(
109-
'div.nhsuk-card__content.nhsuk-card__content.nhsuk-card__content--secondary',
110-
),
111-
).toBeTruthy();
103+
const cardEl = container.querySelector('.nhsuk-card');
104+
const cardContentsEl = cardEl?.querySelector('.nhsuk-card__content');
105+
106+
expect(cardEl).toHaveClass('nhsuk-card');
107+
expect(cardEl).toHaveClass('nhsuk-card--secondary');
108+
expect(cardContentsEl).toHaveClass('nhsuk-card__content--secondary');
112109
});
113110

114111
describe('Care card variant', () => {
115-
describe('non-urgent', () => {
112+
describe.each<{
113+
heading: string;
114+
cardType: CardType;
115+
visuallyHidden: string;
116+
}>([
117+
{
118+
heading: 'Non urgent heading (blue)',
119+
cardType: 'non-urgent',
120+
visuallyHidden: 'Non-urgent advice',
121+
},
122+
{
123+
heading: 'Urgent heading (red)',
124+
cardType: 'urgent',
125+
visuallyHidden: 'Urgent advice',
126+
},
127+
{
128+
heading: 'Emergency heading (red and black)',
129+
cardType: 'emergency',
130+
visuallyHidden: 'Immediate action required',
131+
},
132+
])('$cardType', ({ heading, cardType, visuallyHidden }) => {
116133
it('matches the snapshot', () => {
117134
const { container } = render(
118-
<Card cardType="non-urgent">
119-
<Card.Heading>Non urgent heading</Card.Heading>
135+
<Card cardType={cardType}>
136+
<Card.Heading>{heading}</Card.Heading>
120137
</Card>,
121138
);
122139

123140
expect(container).toMatchSnapshot();
124141
});
125-
it('adds classes to card', () => {
126-
const { container } = render(
127-
<Card cardType="non-urgent">
128-
<Card.Heading>Non urgent heading</Card.Heading>
129-
</Card>,
130-
);
131-
132-
expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care')).toBeTruthy();
133-
expect(
134-
container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care--non-urgent'),
135-
).toBeTruthy();
136-
});
137142

138-
it('renders the heading with the expected hidden text', () => {
139-
const { container } = render(
140-
<Card cardType="non-urgent">
141-
<Card.Heading>Non urgent heading</Card.Heading>
142-
</Card>,
143-
);
144-
145-
const headingContainer = container.querySelector('.nhsuk-card--care__heading-container');
146-
147-
expect(headingContainer?.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
148-
'Non-urgent advice: ',
149-
);
150-
});
151-
});
152-
153-
describe('urgent', () => {
154-
it('matches the snapshot', () => {
155-
const { container } = render(
156-
<Card cardType="urgent">
157-
<Card.Heading>Urgent heading</Card.Heading>
158-
</Card>,
159-
);
160-
161-
expect(container).toMatchSnapshot();
162-
});
163143
it('adds classes to card', () => {
164144
const { container } = render(
165-
<Card cardType="urgent">
166-
<Card.Heading>Urgent heading</Card.Heading>
145+
<Card cardType={cardType}>
146+
<Card.Heading>{heading}</Card.Heading>
167147
</Card>,
168148
);
169149

170-
expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care')).toBeTruthy();
171-
expect(
172-
container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care--urgent'),
173-
).toBeTruthy();
174-
});
150+
const cardEl = container.querySelector('.nhsuk-card');
175151

176-
it('renders the heading with the expected hidden text', () => {
177-
const { container } = render(
178-
<Card cardType="urgent">
179-
<Card.Heading>Urgent heading</Card.Heading>
180-
</Card>,
181-
);
182-
183-
const headingContainer = container.querySelector('.nhsuk-card--care__heading-container');
184-
185-
expect(headingContainer?.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
186-
'Urgent advice: ',
187-
);
188-
});
189-
});
190-
191-
describe('emergency', () => {
192-
it('matches the snapshot', () => {
193-
const { container } = render(
194-
<Card cardType="emergency">
195-
<Card.Heading>Emergency heading</Card.Heading>
196-
</Card>,
197-
);
198-
199-
expect(container).toMatchSnapshot();
200-
});
201-
it('adds classes to card', () => {
202-
const { container } = render(
203-
<Card cardType="emergency">
204-
<Card.Heading>Emergency heading</Card.Heading>
205-
</Card>,
206-
);
207-
208-
expect(container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care')).toBeTruthy();
209-
expect(
210-
container.querySelector('div.nhsuk-card.nhsuk-card.nhsuk-card--care--emergency'),
211-
).toBeTruthy();
152+
expect(cardEl).toHaveClass('nhsuk-card--care');
153+
expect(cardEl).toHaveClass(`nhsuk-card--care--${cardType}`);
212154
});
213155

214156
it('renders the heading with the expected hidden text', () => {
215157
const { container } = render(
216-
<Card cardType="emergency">
217-
<Card.Heading>Emergency heading</Card.Heading>
218-
</Card>,
219-
);
220-
221-
const headingContainer = container.querySelector('.nhsuk-card--care__heading-container');
222-
223-
expect(headingContainer?.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual(
224-
'Immediate action required: ',
225-
);
226-
});
227-
});
228-
229-
describe('hidden text', () => {
230-
it('renders without hidden text', () => {
231-
const { container } = render(
232-
<Card cardType="urgent">
233-
<Card.Heading visuallyHiddenText={false}>Heading</Card.Heading>
158+
<Card cardType={cardType}>
159+
<Card.Heading>{heading}</Card.Heading>
234160
</Card>,
235161
);
236162

237-
expect(container.querySelector('.nhsuk-u-visually-hidden')).toBeFalsy();
163+
expect(container.querySelector('h2')).toHaveAccessibleName(`${visuallyHidden}: ${heading}`);
238164
});
239165

240-
it('renders with hidden text', () => {
166+
it('renders the heading with custom heading level', () => {
241167
const { container } = render(
242-
<Card cardType="urgent">
243-
<Card.Heading visuallyHiddenText="Custom">Heading</Card.Heading>
168+
<Card cardType={cardType}>
169+
<Card.Heading headingLevel="h3">{heading}</Card.Heading>
244170
</Card>,
245171
);
246172

247-
expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toEqual('Custom');
173+
expect(container.querySelector('h3')).toHaveAccessibleName(`${visuallyHidden}: ${heading}`);
248174
});
249175
});
250176
});

‎src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ exports[`Card Care card variant emergency matches the snapshot 1`] = `
7272
>
7373
Immediate action required:
7474
</span>
75-
Emergency heading
75+
Emergency heading (red and black)
7676
</span>
7777
</h2>
7878
<span
@@ -103,7 +103,7 @@ exports[`Card Care card variant non-urgent matches the snapshot 1`] = `
103103
>
104104
Non-urgent advice:
105105
</span>
106-
Non urgent heading
106+
Non urgent heading (blue)
107107
</span>
108108
</h2>
109109
<span
@@ -134,7 +134,7 @@ exports[`Card Care card variant urgent matches the snapshot 1`] = `
134134
>
135135
Urgent advice:
136136
</span>
137-
Urgent heading
137+
Urgent heading (red)
138138
</span>
139139
</h2>
140140
<span

‎src/components/navigation/card/components/CardHeading.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,22 @@ import { cardTypeIsCareCard } from '@util/types/TypeGuards';
88

99
export interface CardHeadingProps extends HTMLProps<HTMLHeadingElement> {
1010
headingLevel?: HeadingLevelType;
11-
visuallyHiddenText?: false | string;
1211
}
1312

1413
const genHiddenText = (cardType: CareCardType): string => {
1514
switch (cardType) {
16-
case 'non-urgent':
17-
return 'Non-urgent advice: ';
18-
case 'urgent':
19-
return 'Urgent advice: ';
2015
case 'emergency':
2116
return 'Immediate action required: ';
17+
case 'urgent':
18+
return 'Urgent advice: ';
2219
default:
23-
return '';
20+
return 'Non-urgent advice: ';
2421
}
2522
};
2623

2724
const CareHeading: FC<CardHeadingProps & { careType: CareCardType }> = ({
2825
className,
2926
children,
30-
visuallyHiddenText,
3127
careType,
3228
headingLevel = 'h2',
3329
role = 'text',
@@ -41,11 +37,7 @@ const CareHeading: FC<CardHeadingProps & { careType: CareCardType }> = ({
4137
{...rest}
4238
>
4339
<span role={role}>
44-
{visuallyHiddenText !== false ? (
45-
<span className="nhsuk-u-visually-hidden">
46-
{visuallyHiddenText || genHiddenText(careType)}
47-
</span>
48-
) : null}
40+
<span className="nhsuk-u-visually-hidden">{genHiddenText(careType)}</span>
4941
{children}
5042
</span>
5143
</HeadingLevel>

‎stories/Navigation/Card.stories.tsx‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -236,39 +236,3 @@ export const EmergencyCareCard: Story = {
236236
</Card>
237237
),
238238
};
239-
240-
/**
241-
* By default, CareCard components prepend hidden text before the title. These are:
242-
*
243-
* - ("non-urgent") Non-urgent advice:
244-
* - ("urgent") Urgent advice:
245-
* - ("immediate") Immediate action required:
246-
*
247-
* If you wish to disable this behaviour, pass the prop `visuallyHiddenText={false}` to the `CareCard.Heading` component or specify your own visually hidden text by using `visuallyHiddenText="Custom"`.
248-
*
249-
* You can change the heading type (i.e. `h1`, `h2` and so on) of the title by passing the prop `headingLevel="<headingLevel>"` to the `CareCard.Heading`.
250-
*/
251-
export const WithCustomVisuallyHiddenText: Story = {
252-
args: { cardType: 'non-urgent' },
253-
render: (args) => (
254-
<Card cardType={args.cardType}>
255-
<Card.Heading visuallyHiddenText="Custom visually hidden text">
256-
Speak to a GP if:
257-
</Card.Heading>
258-
<Card.Content>
259-
<ul>
260-
<li>you&apos;re not sure it&apos;s chickenpox</li>
261-
<li>the skin around the blisters is red, hot or painful (signs of infection)</li>
262-
<li>
263-
your child is <a href="">dehydrated</a>
264-
</li>
265-
<li>you&apos;re concerned about your child or they get worse</li>
266-
</ul>
267-
<p>
268-
Tell the receptionist you think it&apos;s chickenpox before going in. They may recommend a
269-
special appointment time if other patients are at risk.
270-
</p>
271-
</Card.Content>
272-
</Card>
273-
),
274-
};

0 commit comments

Comments
 (0)