Merge remote-tracking branch 'origin/develop'

WestpacGEL · Oct 23, 2023 · f0a956f · f0a956f
2 parents acbc6b8 + 6955f41
commit f0a956f
Showing 1 changed file with 16 additions and 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
@@ -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>