From 4365dd8f74cb27f1d620e16887dd35253f9a1b0d Mon Sep 17 00:00:00 2001
From: Tom King <tom.jack.king@gmail.com>
Date: Mon, 23 Oct 2023 11:27:49 +1000
Subject: [PATCH] - changed tick icon based on ui/ux feedback

---
 .../checkbox/checkbox.component.tsx           | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/checkbox-group/components/checkbox/checkbox.component.tsx b/packages/ui/src/components/checkbox-group/components/checkbox/checkbox.component.tsx
index 7458bb688..b9a60bac5 100644
--- a/packages/ui/src/components/checkbox-group/components/checkbox/checkbox.component.tsx
+++ b/packages/ui/src/components/checkbox-group/components/checkbox/checkbox.component.tsx
@@ -9,13 +9,22 @@ import { styles as checkboxItemStyles } from './checkbox.styles.js';
 import { type CheckboxProps } from './checkbox.types.js';
 
 // TODO: Discuss with designers if this icon should be included as part of Icons
-function CheckIcon({ copyrightYear = '2023', ...props }: IconProps) {
+// Icon based on SVGs/instructions received from this issue https://github.com/WestpacGEL/GEL-next/issues/159
+function CheckIcon({ copyrightYear = '2023', size, ...props }: IconProps) {
+  const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
   return (
-    <Icon copyrightYear={copyrightYear} {...props}>
-      <path
-        d="M16.285 6.0003L10.769 13.8053L6.936 11.0173L5 13.6463L11.526 18.5263L19 8.0053L16.285 6.0003Z"
-        fill="currentColor"
-      />
+    <Icon copyrightYear={copyrightYear} viewBox={viewBoxSize} {...props}>
+      {size === 'large' ? (
+        <path
+          d="M12.9952 17.5891L20.2923 10.292L21.7023 11.712L12.9952 20.4191L8.28809 15.712L9.69809 14.302L12.9952 17.5891Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          d="M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }
@@ -34,7 +43,7 @@ function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxPr
         <input {...inputProps} {...focusProps} ref={localRef} />
       </VisuallyHidden>
       <div className={styles.checkbox()}>
-        {isSelected && <CheckIcon className={styles.checkIcon()} color={isDisabled ? 'border' : 'hero'} />}
+        {isSelected && <CheckIcon className={styles.checkIcon()} size={size} color={isDisabled ? 'border' : 'hero'} />}
       </div>
       <div className={styles.textWrapper()}>
         <span className={styles.labelText()}>{children}</span>