From 5a28032653ba16af0c06a969aabde53c870ef41e Mon Sep 17 00:00:00 2001
From: Cal Mitchell <cal.mitchell1@nhs.net>
Date: Wed, 2 Jul 2025 13:20:26 +0000
Subject: [PATCH 1/3] NCRS-3732 MAde the warning icon be able to be monochrome
 and transparent and added aria-label

---
 src/components/icons/WarningIcon.tsx | 45 +++++++++++++++-------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/icons/WarningIcon.tsx b/src/components/icons/WarningIcon.tsx
index f3a673f..bef66b1 100644
--- a/src/components/icons/WarningIcon.tsx
+++ b/src/components/icons/WarningIcon.tsx
@@ -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" 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;

From 775adf6f40edd3741dc5dedff83b95a0e2544b8a Mon Sep 17 00:00:00 2001
From: Cal Mitchell <cal.mitchell1@nhs.net>
Date: Tue, 8 Jul 2025 08:57:02 +0000
Subject: [PATCH 2/3] NCRS-3732 Updated snapshots tests and storybook

---
 src/components/icons/WarningIcon.tsx          |  2 +-
 src/components/icons/__tests__/Icons.test.tsx |  8 ++
 .../__snapshots__/Icons.test.tsx.snap         | 74 +++++++++++++------
 stories/Icons.stories.tsx                     |  3 +-
 4 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/components/icons/WarningIcon.tsx b/src/components/icons/WarningIcon.tsx
index bef66b1..6156e45 100644
--- a/src/components/icons/WarningIcon.tsx
+++ b/src/components/icons/WarningIcon.tsx
@@ -9,7 +9,7 @@ interface WarningIconProps extends HTMLProps<SVGSVGElement> {
 const WarningIcon: React.FC<WarningIconProps> = props => {
   const inColour = props.inColour ?? true;
   return (
-    <svg className="warning-triangle-icon" viewBox="0 0 94 84" aria-label={props["aria-label"] || "Warning"} {...props}>
+    <svg className="warning-triangle-icon" viewBox="0 0 94 84" width="94" height="84" aria-label={props["aria-label"] || "Warning"} {...props}>
       {
         inColour === false ? (
           <path
diff --git a/src/components/icons/__tests__/Icons.test.tsx b/src/components/icons/__tests__/Icons.test.tsx
index 09eee4e..08a01d6 100644
--- a/src/components/icons/__tests__/Icons.test.tsx
+++ b/src/components/icons/__tests__/Icons.test.tsx
@@ -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();
+  });
 });
diff --git a/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap b/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap
index 7d5dc54..795f4ef 100644
--- a/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap
+++ b/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap
@@ -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>
+`;
diff --git a/stories/Icons.stories.tsx b/stories/Icons.stories.tsx
index 0b44e57..f7edbe6 100644
--- a/stories/Icons.stories.tsx
+++ b/stories/Icons.stories.tsx
@@ -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} />);

From 7831c60c848e049e591730cf46bf714ea9fb4a5e Mon Sep 17 00:00:00 2001
From: Cal Mitchell <cal.mitchell1@nhs.net>
Date: Tue, 8 Jul 2025 11:52:57 +0000
Subject: [PATCH 3/3] NCRS-3732 Version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7125d8f..498c317 100644
--- a/package.json
+++ b/package.json
@@ -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",