Skip to content

Commit 025f45b

Browse files
TomdangoTomdango
authored
Merge pull request #79 from NHSDigital/feature/addImportantToWarningCallout
NHSUK 4 - Add default visually hidden text to WarningCallout label
2 parents 10df41c + 7f6ff8c commit 025f45b

File tree

5 files changed

+210
-25
lines changed

5 files changed

+210
-25
lines changed

‎CHANGELOG.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Unreleased Changes
2+
3+
## WarningCallout
4+
5+
### Removal of WarningCallout "label" prop
6+
7+
The WarningCallout `label` prop has been removed, and replaced with `WarningCallout.Label`.
8+
9+
Existing usages of the WarningCallout will need to be replaced with the new syntax, or will no longer render properly.
10+
11+
```jsx
12+
// Old Syntax
13+
<WarningCallout label="School, nursery or work">
14+
<p>
15+
Stay away from school, nursery or work until all the spots have crusted over.
16+
This is usually 5 days after the spots first appeared.
17+
</p>
18+
</WarningCallout>
19+
20+
// New Syntax
21+
<WarningCallout>
22+
<WarningCallout.Label>School, nursery or work</WarningCallout.Label>
23+
<p>
24+
Stay away from school, nursery or work until all the spots have crusted over.
25+
This is usually 5 days after the spots first appeared.
26+
</p>
27+
</WarningCallout>
28+
```
29+
30+
### Addition of hidden text on the WarningCallout.Label
31+
32+
The `WarningCallout.Label` now has the hidden text `Important: ` before the label content. If this causes an issue in your application, and you would like to change or disable this hidden text you are able to do via the `visuallyHiddenText` prop.
33+
34+
```jsx
35+
// Custom Visually Hidden Text
36+
<WarningCallout.Label visuallyHiddenText="This is very, very important: ">
37+
Something Quite Important
38+
</WarningCallout.Label>
39+
40+
// Disabled Visually Hidden Text
41+
<WarningCallout.Label visuallyHiddenText={false}>
42+
Something Much Less Important
43+
</WarningCallout.Label>
44+
```
45+
46+

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

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,38 @@
11
import React, { HTMLProps } from 'react';
22
import classNames from 'classnames';
3+
import HeadingLevel, { HeadingLevelType } from '../../util/HeadingLevel';
34

4-
interface WarningCalloutProps extends HTMLProps<HTMLDivElement> {
5-
labelProps?: HTMLProps<HTMLHeadingElement>;
5+
interface WarningCalloutLabelProps extends HTMLProps<HTMLHeadingElement> {
6+
headingLevel?: HeadingLevelType;
7+
visuallyHiddenText?: string | false;
68
}
79

8-
const WarningCallout: React.FC<WarningCalloutProps> = ({
10+
const WarningCalloutLabel: React.FC<WarningCalloutLabelProps> = ({
911
className,
10-
label,
12+
visuallyHiddenText,
1113
children,
12-
labelProps,
1314
...rest
14-
}) => {
15-
const { className: labelClassName, ...restLabelProps } = labelProps || {};
16-
return (
17-
<div className={classNames('nhsuk-warning-callout', className)} {...rest}>
18-
{label ? (
19-
<h3
20-
className={classNames('nhsuk-warning-callout__label', labelClassName)}
21-
{...restLabelProps}
22-
>
23-
{label}
24-
</h3>
25-
) : null}
15+
}) => (
16+
<HeadingLevel className={classNames('nhsuk-warning-callout__label')} {...rest}>
17+
<span role="text">
18+
{visuallyHiddenText && <span className="nhsuk-u-visually-hidden">{visuallyHiddenText}</span>}
2619
{children}
27-
</div>
28-
);
20+
</span>
21+
</HeadingLevel>
22+
);
23+
24+
WarningCalloutLabel.defaultProps = {
25+
visuallyHiddenText: 'Important: ',
2926
};
3027

28+
interface IWarningCallout extends React.FC<HTMLProps<HTMLDivElement>> {
29+
Label: typeof WarningCalloutLabel;
30+
}
31+
32+
const WarningCallout: IWarningCallout = ({ className, ...rest }) => (
33+
<div className={classNames('nhsuk-warning-callout', className)} {...rest} />
34+
);
35+
36+
WarningCallout.Label = WarningCalloutLabel;
37+
3138
export default WarningCallout;

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import WarningCallout from '../WarningCallout';
4+
5+
describe('WarningCallout', () => {
6+
it('matches snapshot', () => {
7+
const wrapper = mount(
8+
<WarningCallout>
9+
<WarningCallout.Label>School, nursery or work</WarningCallout.Label>
10+
<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.
13+
</p>
14+
</WarningCallout>,
15+
);
16+
17+
expect(wrapper).toMatchSnapshot();
18+
wrapper.unmount();
19+
});
20+
21+
it('adds default visually hidden text', () => {
22+
const wrapper = mount(
23+
<WarningCallout>
24+
<WarningCallout.Label>School, nursery or work</WarningCallout.Label>
25+
<p>
26+
Stay away from school, nursery or work until all the spots have crusted over. This is
27+
usually 5 days after the spots first appeared.
28+
</p>
29+
</WarningCallout>,
30+
);
31+
32+
expect(wrapper.find(WarningCallout.Label).text()).toBe('Important: School, nursery or work');
33+
34+
wrapper.unmount();
35+
});
36+
37+
it('adds custom visually hidden text', () => {
38+
const wrapper = mount(
39+
<WarningCallout>
40+
<WarningCallout.Label visuallyHiddenText="Not Very Important: ">
41+
School, nursery or work
42+
</WarningCallout.Label>
43+
<p>
44+
Stay away from school, nursery or work until all the spots have crusted over. This is
45+
usually 5 days after the spots first appeared.
46+
</p>
47+
</WarningCallout>,
48+
);
49+
50+
expect(wrapper.find(WarningCallout.Label).text()).toBe(
51+
'Not Very Important: School, nursery or work',
52+
);
53+
54+
wrapper.unmount();
55+
});
56+
57+
it('can disable visually hidden text', () => {
58+
const wrapper = mount(
59+
<WarningCallout>
60+
<WarningCallout.Label visuallyHiddenText={false}>
61+
School, nursery or work
62+
</WarningCallout.Label>
63+
<p>
64+
Stay away from school, nursery or work until all the spots have crusted over. This is
65+
usually 5 days after the spots first appeared.
66+
</p>
67+
</WarningCallout>,
68+
);
69+
70+
expect(wrapper.find(WarningCallout.Label).text()).toBe('School, nursery or work');
71+
72+
wrapper.unmount();
73+
});
74+
});

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`WarningCallout matches snapshot 1`] = `
4+
<WarningCallout>
5+
<div
6+
className="nhsuk-warning-callout"
7+
>
8+
<WarningCalloutLabel
9+
visuallyHiddenText="Important: "
10+
>
11+
<HeadingLevel
12+
className="nhsuk-warning-callout__label"
13+
>
14+
<h3
15+
className="nhsuk-warning-callout__label"
16+
>
17+
<span
18+
role="text"
19+
>
20+
<span
21+
className="nhsuk-u-visually-hidden"
22+
>
23+
Important:
24+
</span>
25+
School, nursery or work
26+
</span>
27+
</h3>
28+
</HeadingLevel>
29+
</WarningCalloutLabel>
30+
<p>
31+
Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.
32+
</p>
33+
</div>
34+
</WarningCallout>
35+
`;

‎stories/WarningCallout.stories.tsx‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,43 @@
11
import React from 'react';
22
import { WarningCallout } from '../src';
33

4-
export const Standard = () => (
5-
<WarningCallout label="School, nursery or work">
4+
export const WarningCallout = () => (
5+
<WarningCallout>
6+
<WarningCallout.Label>School, nursery or work</WarningCallout.Label>
7+
<p>
8+
Stay away from school, nursery or work until all the spots have crusted over. This is usually
9+
5 days after the spots first appeared.
10+
</p>
11+
</WarningCallout>
12+
);
13+
14+
export const WarningCalloutWithCustomVisuallyHiddenText = () => (
15+
<WarningCallout>
16+
<WarningCallout.Label visuallyHiddenText="Not Important: ">
17+
School, nursery or work
18+
</WarningCallout.Label>
19+
<p>
20+
Stay away from school, nursery or work until all the spots have crusted over. This is usually
21+
5 days after the spots first appeared.
22+
</p>
23+
</WarningCallout>
24+
);
25+
26+
export const WarningCalloutWithDisabledVisuallyHiddenText = () => (
27+
<WarningCallout>
28+
<WarningCallout.Label visuallyHiddenText={false}>School, nursery or work</WarningCallout.Label>
629
<p>
7-
Stay away from school, nursery or work until all the spots have crusted over. This is
8-
usually 5 days after the spots first appeared.
30+
Stay away from school, nursery or work until all the spots have crusted over. This is usually
31+
5 days after the spots first appeared.
932
</p>
1033
</WarningCallout>
1134
);
1235

1336
export const WarningCalloutWithoutLabel = () => (
1437
<WarningCallout>
1538
<p>
16-
Stay away from school, nursery or work until all the spots have crusted over. This is
17-
usually 5 days after the spots first appeared.
39+
Stay away from school, nursery or work until all the spots have crusted over. This is usually
40+
5 days after the spots first appeared.
1841
</p>
1942
</WarningCallout>
2043
);

0 commit comments

Comments
 (0)