Skip to content

Commit 9620e5f

Browse files
colinrotherhamcolinrotherham
committed
Update icons for NHS.UK frontend v10.0.0
1 parent df03ce4 commit 9620e5f

File tree

21 files changed

+138
-146
lines changed

21 files changed

+138
-146
lines changed

‎src/__tests__/index.test.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ describe('Index', () => {
1717
'CharacterCount',
1818
'CharacterCountType',
1919
'Checkboxes',
20+
'ChevronRightCircleIcon',
2021
'Clearfix',
2122
'Col',
2223
'Container',
@@ -56,6 +57,7 @@ describe('Index', () => {
5657
'TextInput',
5758
'TickIcon',
5859
'useFormContext',
60+
'UserIcon',
5961
'WarningCallout',
6062
]);
6163
});

‎src/components/content-presentation/do-and-dont-list/__tests__/DoAndDontList.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ describe('DoAndDontList', () => {
7373
</DoAndDontList>,
7474
);
7575

76-
expect(container.querySelector('.nhsuk-icon__tick')).toBeTruthy();
77-
expect(container.querySelector('.nhsuk-icon__cross')).toBeFalsy();
76+
expect(container.querySelector('.nhsuk-icon--tick')).toBeTruthy();
77+
expect(container.querySelector('.nhsuk-icon--cross')).toBeFalsy();
7878
});
7979

8080
it('items render custom prefix text', () => {
@@ -116,8 +116,8 @@ describe('DoAndDontList', () => {
116116
</DoAndDontList>,
117117
);
118118

119-
expect(container.querySelector('.nhsuk-icon__tick')).toBeFalsy();
120-
expect(container.querySelector('.nhsuk-icon__cross')).toBeTruthy();
119+
expect(container.querySelector('.nhsuk-icon--tick')).toBeFalsy();
120+
expect(container.querySelector('.nhsuk-icon--cross')).toBeTruthy();
121121
});
122122

123123
it("item includes 'do not' by default", () => {

‎src/components/content-presentation/do-and-dont-list/__tests__/__snapshots__/DoAndDontList.test.tsx.snap‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,15 @@ exports[`DoAndDontList DoDontList.Item matches snapshot: DoDontList.Item 1`] = `
55
<li>
66
<svg
77
aria-hidden="true"
8-
class="nhsuk-icon nhsuk-icon__tick"
9-
height="34"
8+
class="nhsuk-icon nhsuk-icon--tick"
9+
focusable="false"
10+
height="16"
1011
viewBox="0 0 24 24"
11-
width="34"
12+
width="16"
1213
xmlns="http://www.w3.org/2000/svg"
1314
>
1415
<path
15-
d="M18.4 7.8l-8.5 8.4L5.6 12"
16-
fill="none"
17-
stroke="#007f3b"
18-
stroke-linecap="round"
19-
stroke-width="4"
16+
d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"
2017
/>
2118
</svg>
2219
Text

‎src/components/content-presentation/icons/BaseIcon.tsx‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,43 @@ import React, { FC, HTMLProps } from 'react';
22
import classNames from 'classnames';
33

44
export interface BaseIconSVGProps extends HTMLProps<SVGSVGElement> {
5-
iconType?: string;
65
crossOrigin?: '' | 'anonymous' | 'use-credentials';
6+
modifier?:
7+
| 'arrow-left'
8+
| 'arrow-right'
9+
| 'arrow-right-circle'
10+
| 'chevron-right-circle'
11+
| 'cross'
12+
| 'search'
13+
| 'tick'
14+
| 'user';
15+
16+
/**
17+
* @deprecated Use `modifier` instead.
18+
*/
19+
iconType?: BaseIconSVGProps['modifier'];
720
}
821

922
export const BaseIconSVG: FC<BaseIconSVGProps> = ({
1023
className,
1124
children,
12-
height = 34,
13-
width = 34,
1425
iconType,
26+
modifier = iconType
27+
?.replace('nhsuk-icon__', '') // NHS.UK Frontend v9.x
28+
.replace('nhsuk-icon--', ''), // NHS.UK Frontend v10.x
29+
title,
1530
...rest
1631
}) => (
1732
<svg
18-
className={classNames('nhsuk-icon', iconType, className)}
33+
className={classNames('nhsuk-icon', { [`nhsuk-icon--${modifier}`]: modifier }, className)}
1934
xmlns="http://www.w3.org/2000/svg"
2035
viewBox="0 0 24 24"
21-
aria-hidden="true"
22-
height={height}
23-
width={width}
36+
width="16"
37+
height="16"
38+
focusable="false"
39+
role={title ? 'img' : undefined}
40+
aria-label={title ? title : undefined}
41+
aria-hidden={title ? undefined : true}
2442
{...rest}
2543
>
2644
{children}

‎src/components/content-presentation/icons/__tests__/__snapshots__/Icons.test.tsx.snap‎

Lines changed: 54 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ exports[`Icons all icons match snapshots: ArrowLeft 1`] = `
44
<div>
55
<svg
66
aria-hidden="true"
7-
class="nhsuk-icon nhsuk-icon__arrow-left"
8-
height="34"
7+
class="nhsuk-icon nhsuk-icon--arrow-left"
8+
focusable="false"
9+
height="16"
910
viewBox="0 0 24 24"
10-
width="34"
11+
width="16"
1112
xmlns="http://www.w3.org/2000/svg"
1213
>
1314
<path
14-
d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"
15+
d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"
1516
/>
1617
</svg>
1718
</div>
@@ -21,14 +22,15 @@ exports[`Icons all icons match snapshots: ArrowRight 1`] = `
2122
<div>
2223
<svg
2324
aria-hidden="true"
24-
class="nhsuk-icon nhsuk-icon__arrow-right"
25-
height="34"
25+
class="nhsuk-icon nhsuk-icon--arrow-right"
26+
focusable="false"
27+
height="16"
2628
viewBox="0 0 24 24"
27-
width="34"
29+
width="16"
2830
xmlns="http://www.w3.org/2000/svg"
2931
>
3032
<path
31-
d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"
33+
d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"
3234
/>
3335
</svg>
3436
</div>
@@ -38,18 +40,15 @@ exports[`Icons all icons match snapshots: ArrowRightCircle 1`] = `
3840
<div>
3941
<svg
4042
aria-hidden="true"
41-
class="nhsuk-icon nhsuk-icon__arrow-right-circle"
42-
height="34"
43+
class="nhsuk-icon nhsuk-icon--arrow-right-circle"
44+
focusable="false"
45+
height="16"
4346
viewBox="0 0 24 24"
44-
width="34"
47+
width="16"
4548
xmlns="http://www.w3.org/2000/svg"
4649
>
4750
<path
48-
d="M0 0h24v24H0z"
49-
fill="none"
50-
/>
51-
<path
52-
d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"
51+
d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"
5352
/>
5453
</svg>
5554
</div>
@@ -59,34 +58,16 @@ exports[`Icons all icons match snapshots: ChevronRightCircle 1`] = `
5958
<div>
6059
<svg
6160
aria-hidden="true"
62-
class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle"
61+
class="nhsuk-icon nhsuk-icon--chevron-right-circle"
6362
focusable="false"
64-
height="27"
65-
width="27"
63+
height="16"
64+
viewBox="0 0 24 24"
65+
width="16"
6666
xmlns="http://www.w3.org/2000/svg"
6767
>
68-
<circle
69-
cx="13.333"
70-
cy="13.333"
71-
fill=""
72-
r="13.333"
68+
<path
69+
d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z"
7370
/>
74-
<g
75-
data-name="Group 1"
76-
fill="none"
77-
stroke="#fff"
78-
stroke-linecap="round"
79-
stroke-miterlimit="10"
80-
stroke-width="2.667"
81-
>
82-
<path
83-
d="M15.438 13l-3.771 3.771"
84-
/>
85-
<path
86-
d="M11.667 9.229L15.438 13"
87-
data-name="Path"
88-
/>
89-
</g>
9071
</svg>
9172
</div>
9273
`;
@@ -95,19 +76,15 @@ exports[`Icons all icons match snapshots: Cross 1`] = `
9576
<div>
9677
<svg
9778
aria-hidden="true"
98-
class="nhsuk-icon nhsuk-icon__cross"
99-
height="34"
79+
class="nhsuk-icon nhsuk-icon--cross"
80+
focusable="false"
81+
height="16"
10082
viewBox="0 0 24 24"
101-
width="34"
83+
width="16"
10284
xmlns="http://www.w3.org/2000/svg"
10385
>
10486
<path
105-
d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"
106-
fill="#d5281b"
107-
/>
108-
<path
109-
d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"
110-
fill="#d5281b"
87+
d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"
11188
/>
11289
</svg>
11390
</div>
@@ -117,14 +94,15 @@ exports[`Icons all icons match snapshots: Search 1`] = `
11794
<div>
11895
<svg
11996
aria-hidden="true"
120-
class="nhsuk-icon nhsuk-icon__search"
121-
height="34"
97+
class="nhsuk-icon nhsuk-icon--search"
98+
focusable="false"
99+
height="16"
122100
viewBox="0 0 24 24"
123-
width="34"
101+
width="16"
124102
xmlns="http://www.w3.org/2000/svg"
125103
>
126104
<path
127-
d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"
105+
d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"
128106
/>
129107
</svg>
130108
</div>
@@ -134,18 +112,33 @@ exports[`Icons all icons match snapshots: Tick 1`] = `
134112
<div>
135113
<svg
136114
aria-hidden="true"
137-
class="nhsuk-icon nhsuk-icon__tick"
138-
height="34"
115+
class="nhsuk-icon nhsuk-icon--tick"
116+
focusable="false"
117+
height="16"
118+
viewBox="0 0 24 24"
119+
width="16"
120+
xmlns="http://www.w3.org/2000/svg"
121+
>
122+
<path
123+
d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"
124+
/>
125+
</svg>
126+
</div>
127+
`;
128+
129+
exports[`Icons all icons match snapshots: User 1`] = `
130+
<div>
131+
<svg
132+
aria-hidden="true"
133+
class="nhsuk-icon nhsuk-icon--user"
134+
focusable="false"
135+
height="16"
139136
viewBox="0 0 24 24"
140-
width="34"
137+
width="16"
141138
xmlns="http://www.w3.org/2000/svg"
142139
>
143140
<path
144-
d="M18.4 7.8l-8.5 8.4L5.6 12"
145-
fill="none"
146-
stroke="#007f3b"
147-
stroke-linecap="round"
148-
stroke-width="4"
141+
d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"
149142
/>
150143
</svg>
151144
</div>

‎src/components/content-presentation/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ export { ChevronRightCircle } from './individual/ChevronRightCircle';
55
export { Cross } from './individual/Cross';
66
export { Search } from './individual/Search';
77
export { Tick } from './individual/Tick';
8+
export { User } from './individual/User';

‎src/components/content-presentation/icons/individual/ArrowLeft.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
22
import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
33

44
export const ArrowLeft: FC<BaseIconSVGProps> = (props) => (
5-
<BaseIconSVG iconType="nhsuk-icon__arrow-left" {...props}>
6-
<path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z" />
5+
<BaseIconSVG modifier="arrow-left" {...props}>
6+
<path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z" />
77
</BaseIconSVG>
88
);

‎src/components/content-presentation/icons/individual/ArrowRight.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
22
import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
33

44
export const ArrowRight: FC<BaseIconSVGProps> = (props) => (
5-
<BaseIconSVG iconType="nhsuk-icon__arrow-right" {...props}>
6-
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z" />
5+
<BaseIconSVG modifier="arrow-right" {...props}>
6+
<path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z" />
77
</BaseIconSVG>
88
);

‎src/components/content-presentation/icons/individual/ArrowRightCircle.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { FC } from 'react';
22
import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
33

44
export const ArrowRightCircle: FC<BaseIconSVGProps> = (props) => (
5-
<BaseIconSVG iconType="nhsuk-icon__arrow-right-circle" {...props}>
6-
<path d="M0 0h24v24H0z" fill="none" />
7-
<path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z" />
5+
<BaseIconSVG modifier="arrow-right-circle" {...props}>
6+
<path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
87
</BaseIconSVG>
98
);

‎src/components/content-presentation/icons/individual/ChevronRightCircle.tsx‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,8 @@
11
import React, { FC } from 'react';
2+
import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
23

3-
export const ChevronRightCircle: FC = () => (
4-
<svg
5-
className="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle"
6-
xmlns="http://www.w3.org/2000/svg"
7-
width="27"
8-
height="27"
9-
aria-hidden="true"
10-
focusable="false"
11-
>
12-
<circle cx="13.333" cy="13.333" r="13.333" fill="" />
13-
<g
14-
data-name="Group 1"
15-
fill="none"
16-
stroke="#fff"
17-
strokeLinecap="round"
18-
strokeMiterlimit="10"
19-
strokeWidth="2.667"
20-
>
21-
<path d="M15.438 13l-3.771 3.771" />
22-
<path data-name="Path" d="M11.667 9.229L15.438 13" />
23-
</g>
24-
</svg>
4+
export const ChevronRightCircle: FC<BaseIconSVGProps> = (props) => (
5+
<BaseIconSVG modifier="chevron-right-circle" {...props}>
6+
<path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
7+
</BaseIconSVG>
258
);

0 commit comments

Comments
 (0)