Skip to content

Commit 13037a8

Browse files
colinrotherhamcolinrotherham
committed
Remove support for warning callout custom visually hidden text
1 parent 2ed3592 commit 13037a8

File tree

4 files changed

+57
-61
lines changed

4 files changed

+57
-61
lines changed

‎src/components/content-presentation/warning-callout/WarningCallout.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,28 @@ import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
44

55
interface WarningCalloutHeadingProps extends HTMLProps<HTMLHeadingElement> {
66
headingLevel?: HeadingLevelType;
7-
visuallyHiddenText?: string | false;
87
}
98

109
const WarningCalloutHeading: FC<WarningCalloutHeadingProps> = ({
1110
className,
12-
visuallyHiddenText = 'Important: ',
1311
children,
1412
...rest
1513
}) => (
1614
<HeadingLevel className={classNames('nhsuk-warning-callout__label', className)} {...rest}>
17-
{/* eslint-disable-next-line jsx-a11y/aria-role */}
18-
<span role="text">
19-
{visuallyHiddenText && <span className="nhsuk-u-visually-hidden">{visuallyHiddenText}</span>}
20-
{children}
21-
</span>
15+
{children?.toString().toLowerCase().includes('important') ? (
16+
<>
17+
{children}
18+
<span className="nhsuk-u-visually-hidden">:</span>
19+
</>
20+
) : (
21+
<>
22+
{/* eslint-disable-next-line jsx-a11y/aria-role */}
23+
<span role="text">
24+
<span className="nhsuk-u-visually-hidden">Important: </span>
25+
{children}
26+
</span>
27+
</>
28+
)}
2229
</HeadingLevel>
2330
);
2431

‎src/components/content-presentation/warning-callout/__tests__/WarningCallout.test.tsx‎

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,48 @@ describe('WarningCallout', () => {
66
it('matches snapshot', () => {
77
const { container } = render(
88
<WarningCallout>
9-
<WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
9+
<WarningCallout.Heading>Important</WarningCallout.Heading>
1010
<p>
11-
Stay away from school, nursery or work until all the spots have crusted over. This is
12-
usually 5 days after the spots first appeared.
11+
For safety, tell your doctor or pharmacist if you&apos;re taking any other medicines,
12+
including herbal medicines, vitamins or supplements.
1313
</p>
1414
</WarningCallout>,
1515
);
1616

17-
expect(container).toMatchSnapshot();
17+
expect(container).toMatchSnapshot('WarningCallout');
1818
});
1919

20-
it('adds default visually hidden text', () => {
20+
it('omits visually hidden text when unnecessary', () => {
2121
const { container } = render(
2222
<WarningCallout>
23-
<WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
23+
<WarningCallout.Heading>Important</WarningCallout.Heading>
2424
<p>
25-
Stay away from school, nursery or work until all the spots have crusted over. This is
26-
usually 5 days after the spots first appeared.
25+
For safety, tell your doctor or pharmacist if you&apos;re taking any other medicines,
26+
including herbal medicines, vitamins or supplements.
2727
</p>
2828
</WarningCallout>,
2929
);
3030

3131
expect(container.querySelector('.nhsuk-warning-callout__label')?.textContent).toBe(
32-
'Important: School, nursery or work',
32+
'Important:',
3333
);
3434
});
3535

36-
it('adds custom visually hidden text', () => {
36+
it('adds visually hidden text when necessary', () => {
3737
const { container } = render(
3838
<WarningCallout>
39-
<WarningCallout.Heading visuallyHiddenText="Not Very Important: ">
40-
School, nursery or work
41-
</WarningCallout.Heading>
39+
<WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
4240
<p>
4341
Stay away from school, nursery or work until all the spots have crusted over. This is
4442
usually 5 days after the spots first appeared.
4543
</p>
4644
</WarningCallout>,
4745
);
4846

49-
expect(container.querySelector('.nhsuk-warning-callout__label')?.textContent).toBe(
50-
'Not Very Important: School, nursery or work',
51-
);
52-
});
53-
54-
it('can disable visually hidden text', () => {
55-
const { container } = render(
56-
<WarningCallout>
57-
<WarningCallout.Heading visuallyHiddenText={false}>
58-
School, nursery or work
59-
</WarningCallout.Heading>
60-
<p>
61-
Stay away from school, nursery or work until all the spots have crusted over. This is
62-
usually 5 days after the spots first appeared.
63-
</p>
64-
</WarningCallout>,
65-
);
47+
expect(container).toMatchSnapshot('WarningCalloutWithTextRole');
6648

6749
expect(container.querySelector('.nhsuk-warning-callout__label')?.textContent).toBe(
68-
'School, nursery or work',
50+
'Important: School, nursery or work',
6951
);
7052
});
7153
});

‎src/components/content-presentation/warning-callout/__tests__/__snapshots__/WarningCallout.test.tsx.snap‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`WarningCallout matches snapshot 1`] = `
3+
exports[`WarningCallout adds visually hidden text when necessary: WarningCalloutWithTextRole 1`] = `
44
<div>
55
<div
66
class="nhsuk-warning-callout"
@@ -25,3 +25,25 @@ exports[`WarningCallout matches snapshot 1`] = `
2525
</div>
2626
</div>
2727
`;
28+
29+
exports[`WarningCallout matches snapshot: WarningCallout 1`] = `
30+
<div>
31+
<div
32+
class="nhsuk-warning-callout"
33+
>
34+
<h3
35+
class="nhsuk-warning-callout__label"
36+
>
37+
Important
38+
<span
39+
class="nhsuk-u-visually-hidden"
40+
>
41+
:
42+
</span>
43+
</h3>
44+
<p>
45+
For safety, tell your doctor or pharmacist if you're taking any other medicines, including herbal medicines, vitamins or supplements.
46+
</p>
47+
</div>
48+
</div>
49+
`;

‎stories/Content Presentation/WarningCallout.stories.tsx‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,21 @@ WarningCallout.Heading.displayName = 'WarningCallout.Heading';
1414
export const StandardWarningCallout: Story = {
1515
render: (args) => (
1616
<WarningCallout>
17-
<WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
17+
<WarningCallout.Heading>Important</WarningCallout.Heading>
1818
<p>
19-
Stay away from school, nursery or work until all the spots have crusted over. This is
20-
usually 5 days after the spots first appeared.
19+
For safety, tell your doctor or pharmacist if you&apos;re taking any other medicines,
20+
including herbal medicines, vitamins or supplements.
2121
</p>
2222
</WarningCallout>
2323
),
2424

2525
name: 'WarningCallout',
2626
};
2727

28-
export const WarningCalloutWithCustomVisuallyHiddenText: Story = {
29-
render: (args) => (
30-
<WarningCallout>
31-
<WarningCallout.Heading visuallyHiddenText="Not Important: ">
32-
School, nursery or work
33-
</WarningCallout.Heading>
34-
<p>
35-
Stay away from school, nursery or work until all the spots have crusted over. This is
36-
usually 5 days after the spots first appeared.
37-
</p>
38-
</WarningCallout>
39-
),
40-
};
41-
42-
export const WarningCalloutWithDisabledVisuallyHiddenText: Story = {
28+
export const WarningCalloutWithCustomHeading: Story = {
4329
render: (args) => (
4430
<WarningCallout>
45-
<WarningCallout.Heading visuallyHiddenText={false}>
46-
School, nursery or work
47-
</WarningCallout.Heading>
31+
<WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
4832
<p>
4933
Stay away from school, nursery or work until all the spots have crusted over. This is
5034
usually 5 days after the spots first appeared.
@@ -53,9 +37,10 @@ export const WarningCalloutWithDisabledVisuallyHiddenText: Story = {
5337
),
5438
};
5539

56-
export const WarningCalloutWithoutLabel: Story = {
40+
export const WarningCalloutWithCustomHeadingLevel: Story = {
5741
render: (args) => (
5842
<WarningCallout>
43+
<WarningCallout.Heading headingLevel="h4">School, nursery or work</WarningCallout.Heading>
5944
<p>
6045
Stay away from school, nursery or work until all the spots have crusted over. This is
6146
usually 5 days after the spots first appeared.

0 commit comments

Comments
 (0)