feat(checkbox): theme checkbox

ZopaPublic · Jul 31, 2024 · a2503e7 · a2503e7
1 parent 9ed44de
commit a2503e7
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 8 deletions.
diff --git a/.changeset/ten-waves-camp.md b/.changeset/ten-waves-camp.md
@@ -0,0 +1,5 @@
+---
+'@zopauk/react-components': minor
+---
+
+checkbox
diff --git a/src/components/molecules/CheckboxField/CheckboxField.tsx b/src/components/molecules/CheckboxField/CheckboxField.tsx
@@ -4,6 +4,7 @@ import { colors, typography } from '../../../constants';
 import tealCheckMark from '../../../content/images/teal-check-mark.svg';
 import greenCheckMark from '../../../content/images/green-check-mark.svg';
 import unbrandedTick from '../../../content/images/unbranded-tick.svg';
+import unbrandedTickWhite from '../../../content/images/unbranded-tick-white.svg';
 import ErrorMessage from '../../atoms/ErrorMessage/ErrorMessage';
 import InputLabel from '../../atoms/InputLabel/InputLabel';
 import SizedContainer from '../../layout/SizedContainer/SizedContainer';
@@ -37,6 +38,24 @@ const getTickIcon = ({ isValid, theme }: Pick<InputProps, 'disabled' | 'isValid'
   return tealCheckMark;
 };
 
+const getCheckboxBorderColorByStatus = ({
+  hasError,
+  isValid,
+  disabled,
+  theme,
+}: Pick<InputProps, 'disabled' | 'isValid' | 'hasError'> & AppThemeProps) => {
+  if (hasError) {
+    return theme.input.checkBox.borderColorByStatus.error;
+  }
+  if (isValid) {
+    return theme.input.checkBox.borderColorByStatus.valid;
+  }
+  if (disabled) {
+    return theme.input.checkBox.borderColorByStatus.disabled;
+  }
+  return theme.input.checkBox.borderColorByStatus.default;
+};
+
 const zoomOut = keyframes`
   from {
     transform: scale(0.4);
@@ -74,7 +93,7 @@ const Label = styled(InputLabel)<Pick<InputProps, 'disabled' | 'hasError' | 'isV
     transition-property: border, box-shadow;
     transition: 0.2s ease-in-out;
     box-shadow: 0 0 4px 0 transparent;
-    border: 1px ${getBorderColorByStatus} solid;
+    border: 1px ${getCheckboxBorderColorByStatus} solid;
     display: block;
   }
   &:after {
@@ -100,36 +119,49 @@ const Input = styled.input<InputProps & GroupingControlsProps>`
 
   &:hover:not(:disabled) + label,
   &:focus + label {
-    border-color: ${({ theme }) => theme.input.checkBox.defaultColor};
-    box-shadow: ${({ theme }) => `${theme.input.hover.boxShadow} ${theme.input.hover.border}`};
+    border-color: ${({ theme, hasError }) => (hasError ? theme.input.hover.error : theme.input.hover.border)};
+    box-shadow: ${({ hasError, theme }) =>
+      hasError
+        ? `${theme.input.hover.boxShadow} ${theme.input.hover.error}`
+        : `${theme.input.hover.boxShadow} ${theme.input.hover.border}`};
     &:before {
-      border-color: ${({ theme }) => theme.input.checkBox.defaultColor};
+      border-color: ${({ theme }) => theme.input.hover.border};
       box-shadow: ${({ theme }) => `${theme.input.hover.boxShadow} ${theme.input.hover.border}`};
     }
+    background-color: ${({ theme }) => theme.input.hover.backgroundColor};
   }
   &:hover:checked:not(:disabled) + label,
   &:focus:checked + label {
+    &:before {
+      background-color: ${({ theme }) => theme.input.checkBox.checkboxBackgroundColor.hover};
+    }
     &:after {
       background-image: ${({ theme }) =>
-        theme.input.checkBox.customIcon ? `url(${unbrandedTick})` : `url(${tealCheckMark})`};
+        theme.input.checkBox.customIcon ? `url(${unbrandedTickWhite})` : `url(${tealCheckMark})`};
     }
   }
   &:disabled + label {
     cursor: not-allowed;
-    color: ${colors.grey};
-    background-color: ${colors.greyLightest};
+    color: ${({ theme }) => theme.input.disabled.color};
+    background-color: ${({ theme }) => theme.input.disabled.backgroundColor};
   }
   &:disabled:not(:checked) + label {
     border-color: ${colors.greyLight};
     &:before {
       border-color: ${colors.greyLight};
     }
   }
+  &:disabled {
+    &:before {
+      background-color: ${({ theme }) => theme.input.checkBox.checkboxBackgroundColor.disabled};
+    }
+  }
   &:checked + label {
     border-color: ${getCheckedColor};
     background-color: ${({ theme }) => theme.input.checkBox.label.backgroundColor};
-    box-shadow: none;
+    box-shadow: ${({ theme }) => `${theme.input.checkBox.checked.boxShadow} ${theme.input.hover.border}`};
     &:before {
+      background-color: ${({ theme }) => theme.input.checkBox.checkboxBackgroundColor.checked};
       border-color: ${getCheckedColor};
       box-shadow: none;
     }

diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -168,6 +168,20 @@ export interface InputTheme {
       backgroundColor: string;
     };
     customIcon: boolean;
+    checked: {
+      boxShadow: string;
+    };
+    borderColorByStatus: {
+      error: string;
+      valid: string;
+      disabled: string;
+      default: string;
+    };
+    checkboxBackgroundColor: {
+      checked: string;
+      hover: string;
+      disabled: string;
+    };
   };
 }
 
@@ -557,6 +571,20 @@ export const zopaTheme: AppTheme = {
         backgroundColor: colors.brandLight,
       },
       customIcon: false,
+      checked: {
+        boxShadow: 'none',
+      },
+      borderColorByStatus: {
+        error: colors.alert,
+        valid: colors.success,
+        disabled: colors.greyLight,
+        default: colors.grey,
+      },
+      checkboxBackgroundColor: {
+        checked: colors.white,
+        hover: colors.white,
+        disabled: colors.white,
+      },
     },
   },
   link: {

diff --git a/src/content/images/unbranded-tick-white.svg b/src/content/images/unbranded-tick-white.svg