Skip to content

NCRS-3732 Warning Icon improvements #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CalMitchellBJSS merged 3 commits into from
Jul 8, 2025
Merged

NCRS-3732 Warning Icon improvements #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a28032
NCRS-3732 MAde the warning icon be able to be monochrome and transpar…
CalMitchellBJSS Jul 2, 2025
775adf6
NCRS-3732 Updated snapshots tests and storybook
CalMitchellBJSS Jul 8, 2025
7831c60
NCRS-3732 Version bump
CalMitchellBJSS Jul 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nhsuk-react-components-extensions",
"version": "2.2.0-beta",
"version": "2.3.0-beta",
"author": {
"email": "thomas.judd-cooper1@nhs.net",
"name": "Thomas Judd-Cooper",
Expand Down
45 changes: 24 additions & 21 deletions src/components/icons/WarningIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,33 @@ import React, { HTMLProps } from 'react';

interface WarningIconProps extends HTMLProps<SVGSVGElement> {
crossOrigin?: '' | 'anonymous' | 'use-credentials' | undefined;
inColour?: Boolean;
}

const WarningIcon: React.FC<WarningIconProps> = props => (
<svg viewBox="0 0 94 84" {...props}>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g transform="translate(-3.000000, -8.000000)" fillRule="nonzero">
<g transform="translate(3.779947, 8.633409)">
const WarningIcon: React.FC<WarningIconProps> = props => {
const inColour = props.inColour ?? true;
return (
<svg className="warning-triangle-icon" viewBox="0 0 94 84" width="94" height="84" aria-label={props["aria-label"] || "Warning"} {...props}>
{
inColour === false ? (
<path
d="M90.8930126,64.0811458 L57.1894206,6.34529674 C54.9711174,2.42788289 50.7739394,-2.84217094e-14 46.2200528,-2.84217094e-14 C41.6661663,-2.84217094e-14 37.4689882,2.42788289 35.250685,6.34529674 L1.75643213,64.0811458 C-0.537713182,67.8922222 -0.587720382,72.6207468 1.62532665,76.4780706 C3.83837369,80.3353944 7.97657929,82.7325678 12.4745931,82.762817 L79.9655126,82.762817 C84.5009389,82.8068426 88.7081638,80.4389226 90.9724747,76.5678531 C93.2367856,72.6967837 93.2064125,67.9239512 90.8930126,64.0811458 Z"
fill="#FFB81C"
d="M 49.2 53.947 L 42.36 53.947 L 41.22 24.367 L 50.46 24.367 Z M 50.04 68.247 L 41.64 68.247 L 41.64 59.847 L 50.04 59.847 Z M 90.893 64.081 L 57.189 6.345 C 54.971 2.428 50.774 0 46.22 0 C 41.666 0 37.469 2.428 35.251 6.345 L 1.756 64.081 C -0.538 67.892 -0.588 72.621 1.625 76.478 C 3.838 80.335 7.977 82.733 12.475 82.763 L 79.966 82.763 C 84.501 82.807 88.708 80.439 90.972 76.568 C 93.237 72.697 93.206 67.924 90.893 64.081 Z"
fill="#000000"
/>
<path
d="M49.2000528,53.9465905 L42.3600528,53.9465905 L41.2200528,24.3665905 L50.4600528,24.3665905 L49.2000528,53.9465905 Z M50.0400528,68.2465905 L41.6400528,68.2465905 L41.6400528,59.8465905 L50.0400528,59.8465905 L50.0400528,68.2465905 Z"
fill="#212B32"
/>
</g>
</g>
</g>
</svg>
);

WarningIcon.defaultProps = {
height: 84,
width: 94,
};
) : (
<g>
<path
d="M90.8930126,64.0811458 L57.1894206,6.34529674 C54.9711174,2.42788289 50.7739394,-2.84217094e-14 46.2200528,-2.84217094e-14 C41.6661663,-2.84217094e-14 37.4689882,2.42788289 35.250685,6.34529674 L1.75643213,64.0811458 C-0.537713182,67.8922222 -0.587720382,72.6207468 1.62532665,76.4780706 C3.83837369,80.3353944 7.97657929,82.7325678 12.4745931,82.762817 L79.9655126,82.762817 C84.5009389,82.8068426 88.7081638,80.4389226 90.9724747,76.5678531 C93.2367856,72.6967837 93.2064125,67.9239512 90.8930126,64.0811458 Z"
fill="#FFB81C"
/>
<path
d="M49.2000528,53.9465905 L42.3600528,53.9465905 L41.2200528,24.3665905 L50.4600528,24.3665905 L49.2000528,53.9465905 Z M50.0400528,68.2465905 L41.6400528,68.2465905 L41.6400528,59.8465905 L50.0400528,59.8465905 L50.0400528,68.2465905 Z"
fill="#212B32"
/>
</g>
)
}
</svg>
)};

export default WarningIcon;
8 changes: 8 additions & 0 deletions src/components/icons/__tests__/Icons.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,12 @@ describe('WarningIcon', () => {
const component = render(<WarningIcon />);
expect(component.container).toMatchSnapshot();
});
it('matches snapshot when solid', () => {
const component = render(<WarningIcon inColour={true} />);
expect(component.container).toMatchSnapshot();
});
it('matches snapshot when transparent', () => {
const component = render(<WarningIcon inColour={false} />);
expect(component.container).toMatchSnapshot();
});
});
74 changes: 51 additions & 23 deletions src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,62 @@
exports[`WarningIcon matches snapshot 1`] = `
<div>
<svg
aria-label="Warning"
class="warning-triangle-icon"
height="84"
viewBox="0 0 94 84"
width="94"
>
<g
fill="none"
fill-rule="evenodd"
stroke="none"
stroke-width="1"
>
<g
fill-rule="nonzero"
transform="translate(-3.000000, -8.000000)"
>
<g
transform="translate(3.779947, 8.633409)"
>
<path
d="M90.8930126,64.0811458 L57.1894206,6.34529674 C54.9711174,2.42788289 50.7739394,-2.84217094e-14 46.2200528,-2.84217094e-14 C41.6661663,-2.84217094e-14 37.4689882,2.42788289 35.250685,6.34529674 L1.75643213,64.0811458 C-0.537713182,67.8922222 -0.587720382,72.6207468 1.62532665,76.4780706 C3.83837369,80.3353944 7.97657929,82.7325678 12.4745931,82.762817 L79.9655126,82.762817 C84.5009389,82.8068426 88.7081638,80.4389226 90.9724747,76.5678531 C93.2367856,72.6967837 93.2064125,67.9239512 90.8930126,64.0811458 Z"
fill="#FFB81C"
/>
<path
d="M49.2000528,53.9465905 L42.3600528,53.9465905 L41.2200528,24.3665905 L50.4600528,24.3665905 L49.2000528,53.9465905 Z M50.0400528,68.2465905 L41.6400528,68.2465905 L41.6400528,59.8465905 L50.0400528,59.8465905 L50.0400528,68.2465905 Z"
fill="#212B32"
/>
</g>
</g>
<g>
<path
d="M90.8930126,64.0811458 L57.1894206,6.34529674 C54.9711174,2.42788289 50.7739394,-2.84217094e-14 46.2200528,-2.84217094e-14 C41.6661663,-2.84217094e-14 37.4689882,2.42788289 35.250685,6.34529674 L1.75643213,64.0811458 C-0.537713182,67.8922222 -0.587720382,72.6207468 1.62532665,76.4780706 C3.83837369,80.3353944 7.97657929,82.7325678 12.4745931,82.762817 L79.9655126,82.762817 C84.5009389,82.8068426 88.7081638,80.4389226 90.9724747,76.5678531 C93.2367856,72.6967837 93.2064125,67.9239512 90.8930126,64.0811458 Z"
fill="#FFB81C"
/>
<path
d="M49.2000528,53.9465905 L42.3600528,53.9465905 L41.2200528,24.3665905 L50.4600528,24.3665905 L49.2000528,53.9465905 Z M50.0400528,68.2465905 L41.6400528,68.2465905 L41.6400528,59.8465905 L50.0400528,59.8465905 L50.0400528,68.2465905 Z"
fill="#212B32"
/>
</g>
</svg>
</div>
`;

exports[`WarningIcon matches snapshot when solid 1`] = `
<div>
<svg
aria-label="Warning"
class="warning-triangle-icon"
height="84"
viewBox="0 0 94 84"
width="94"
>
<g>
<path
d="M90.8930126,64.0811458 L57.1894206,6.34529674 C54.9711174,2.42788289 50.7739394,-2.84217094e-14 46.2200528,-2.84217094e-14 C41.6661663,-2.84217094e-14 37.4689882,2.42788289 35.250685,6.34529674 L1.75643213,64.0811458 C-0.537713182,67.8922222 -0.587720382,72.6207468 1.62532665,76.4780706 C3.83837369,80.3353944 7.97657929,82.7325678 12.4745931,82.762817 L79.9655126,82.762817 C84.5009389,82.8068426 88.7081638,80.4389226 90.9724747,76.5678531 C93.2367856,72.6967837 93.2064125,67.9239512 90.8930126,64.0811458 Z"
fill="#FFB81C"
/>
<path
d="M49.2000528,53.9465905 L42.3600528,53.9465905 L41.2200528,24.3665905 L50.4600528,24.3665905 L49.2000528,53.9465905 Z M50.0400528,68.2465905 L41.6400528,68.2465905 L41.6400528,59.8465905 L50.0400528,59.8465905 L50.0400528,68.2465905 Z"
fill="#212B32"
/>
</g>
</svg>
</div>
`;

exports[`WarningIcon matches snapshot when transparent 1`] = `
<div>
<svg
aria-label="Warning"
class="warning-triangle-icon"
height="84"
viewBox="0 0 94 84"
width="94"
>
<path
d="M 49.2 53.947 L 42.36 53.947 L 41.22 24.367 L 50.46 24.367 Z M 50.04 68.247 L 41.64 68.247 L 41.64 59.847 L 50.04 59.847 Z M 90.893 64.081 L 57.189 6.345 C 54.971 2.428 50.774 0 46.22 0 C 41.666 0 37.469 2.428 35.251 6.345 L 1.756 64.081 C -0.538 67.892 -0.588 72.621 1.625 76.478 C 3.838 80.335 7.977 82.733 12.475 82.763 L 79.966 82.763 C 84.501 82.807 88.708 80.439 90.972 76.568 C 93.237 72.697 93.206 67.924 90.893 64.081 Z"
fill="#000000"
/>
</svg>
</div>
`;
3 changes: 2 additions & 1 deletion stories/Icons.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ import { WarningIcon } from '../src';

const stories = storiesOf('Icons', module);

stories.add('WarningIcon', () => <WarningIcon />);
stories.add('WarningIcon solid', () => <WarningIcon />);
stories.add('WarningIcon transparent', () => <WarningIcon inColour={false} />);
Loading