[WIP]: added new ui component checkbox

.storybook/preview.tsx

@@ -8,6 +8,7 @@ addDecorator(withThemes);
 enum Themes {
   Blue = 'Blue (Polymath)',
   Pink = 'Pink (Polymesh)',
+  Metafinance = 'Metafinance',
 }
 
 const Decorator = ({ themeName, children }) => {
@@ -19,6 +20,9 @@ const Decorator = ({ themeName, children }) => {
     case Themes.Pink:
       currentTheme = polyTheme.pink;
       break;
+      case Themes.Metafinance:
+      currentTheme = polyTheme.metafinance;
+      break;
   }
   return <PolyThemeProvider theme={currentTheme}>{children}</PolyThemeProvider>;
 };
@@ -36,6 +40,10 @@ export const parameters = {
         name: Themes.Pink,
         color: polyTheme.pink.COLOR.brandMain,
       },
+      {
+        name: Themes.Metafinance,
+        color: polyTheme.metafinance.COLOR.brandMain,
+      },
     ],
   },
 };

src/components/Checkbox/Checkbox.stories.tsx

@@ -25,9 +25,15 @@ const Template: Story<ComponentProps<typeof Checkbox>> = (props: any) => (
 );
 
 export const Basic = Template.bind({});
+export const Disabled = Template.bind({});
 
 Basic.args = {
   name: 'chkbox1',
   label: 'Checkbox label',
   variant: 'basic',
 };
+Disabled.args = {
+  name: 'chkbox2',
+  label: 'Checkbox label',
+  variant: 'basic',
+};

src/components/Checkbox/Checkbox.tsx

@@ -13,14 +13,15 @@ export type CheckboxProps = {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   defaultChecked?: boolean;
   checked?: boolean;
+  disabled?: boolean;
   name?: string;
   label?: React.ComponentType | JSX.Element | string;
   indeterminate?: boolean;
 };
 
 const Input = styled.input(visuallyHidden);
 
-const CheckStateIcon = styled(Icon)<any>(() => ({
+const CheckStateIcon = styled(Icon)<any>(({ theme, variant, disabled }) => ({
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -31,71 +32,93 @@ const CheckStateIcon = styled(Icon)<any>(() => ({
   pointerEvents: 'none',
   margin: 'auto',
   transition: `150ms`,
+  'svg > *': {
+    ...theme.ICON[variant]['svg > *'],
+    ...(theme.ICON[variant].fill
+      ? { fill: disabled ? `${theme.COLOR.gray4}` : `${theme.COLOR.brandMain}` }
+      : {}),
+  },
 }));
 
-const MinusBoxIcon = styled(Icon)<any>(() => ({
+const MinusBoxIcon = styled(Icon)<any>(({ theme, variant, disabled }) => ({
   position: 'absolute',
-  top: '71%',
-  left: '71%',
+  top: '73%',
+  left: '73%',
   transform: 'translate(-50%, -50%)',
   display: 'block',
   visibility: 'hidden',
   opacity: 0,
   pointerEvents: 'none',
   margin: 'auto',
   transition: `150ms`,
-}));
-
-const CheckboxInput = styled.div(({ theme }) => ({
-  position: 'relative',
-  cursor: 'pointer',
-  transition: `200ms`,
-  boxSizing: 'border-box',
-  border: `2px solid ${theme.COLOR.gray3}`,
-  borderRadius: theme.RADIUS.s,
-  minWidth: '1.125rem',
-  minHeight: '1.125rem',
-  backgroundColor: '#fff',
-  userSelect: 'none',
-
-  [`${Input}:focus + &`]: {
-    borderColor: theme.COLOR.brandMain,
-  },
-
-  [`${Input}:checked:focus + &`]: {
-    borderColor: theme.COLOR.gray5,
-  },
-
-  [`${Input}:checked + &`]: {
-    backgroundColor: theme.COLOR.gray5,
-    borderColor: theme.COLOR.brandMain,
-  },
-
-  [`${Input}:disabled + &`]: {
-    borderColor: theme.COLOR.gray4,
+  'svg > *': {
+    ...theme.ICON[variant]['svg > *'],
+    ...(theme.ICON[variant].fill
+      ? { fill: disabled ? `${theme.COLOR.gray4}` : `${theme.COLOR.brandMain}` }
+      : {}),
   },
+}));
 
-  [`${Input}:checked + & .checkIcon`]: {
-    visibility: 'visible',
-    opacity: 1,
-  },
+const CheckboxInput = styled.div<{ disabled: boolean }>(
+  ({ theme, disabled }) => ({
+    position: 'relative',
+    cursor: 'pointer',
+    transition: `200ms`,
+    boxSizing: 'border-box',
+    border: '2px solid',
+    borderColor: disabled ? theme.COLOR.gray4 : theme.COLOR.gray3,
+    borderRadius: theme.RADIUS.s,
+    minWidth: '1.125rem',
+    minHeight: '1.125rem',
+    backgroundColor: '#fff',
+    userSelect: 'none',
+    [`${Input}:focus + &`]: {
+      border: '2px solid',
+      borderColor: theme.COLOR.utilityFocus,
+      position: 'relative',
+      padding: disabled ? '0px' : '12px',
+      zIndex: '1',
+    },
 
-  '&.indeterminate': {
-    borderColor: theme.COLOR.brandMain,
+    [`${Input}:checked:focus + &`]: {
+      position: 'relative',
+      border: '2px solid',
+      borderColor: theme.COLOR.utilityFocus,
+      padding: disabled ? '0px' : '12px',
+      '&:after': {
+        border: '0px solid',
+      },
+    },
+    [`${Input}:checked + &`]: {
+      borderColor: theme.COLOR.brandMain,
+    },
 
-    '.minusIcon': {
+    [`${Input}:checked + & .checkIcon`]: {
       visibility: 'visible',
       opacity: 1,
-      background: theme.COLOR.light,
     },
+    [`${Input}:focus + & .minusIcon`]: {
+      visibility: 'visible',
+      top: '60%',
+      left: '60%',
+    },
+
+    '&.indeterminate': {
+      borderColor: theme.COLOR.brandMain,
 
-    '.checkIcon': {
-      visibility: 'hidden',
-      opacity: 0,
-      background: theme.COLOR.light,
+      '.minusIcon': {
+        visibility: 'visible',
+        opacity: 1,
+      },
+
+      '.checkIcon': {
+        visibility: 'hidden',
+        opacity: 0,
+        background: theme.COLOR.light,
+      },
     },
-  },
-}));
+  }),
+);
 
 const LabelComponent = styled.label<{ variant: string; margin?: string }>(
   ({ theme, variant, margin }) => ({
@@ -124,12 +147,12 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       label,
       indeterminate,
       name,
+      disabled,
       ...props
     } = checkboxProps;
 
     const checkedProps =
       typeof checked !== 'undefined' ? { checked } : { defaultChecked };
-
     return (
       <LabelComponent variant={variant} margin={margin}>
         <Flex variant="raw" align="center">
@@ -142,18 +165,21 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             type="checkbox"
           />
           <CheckboxInput
+            disabled={disabled as boolean}
             {...(indeterminate ? { className: 'indeterminate' } : {})}
           >
             <MinusBoxIcon
               variant="basic"
               size="1.5em"
               icon={polyIcons.MinusBox}
+              disabled={disabled}
               className="minusIcon"
             />
             <CheckStateIcon
               variant="basic"
               size="1.5em"
               icon={polyIcons.CheckboxMarked}
+              disabled={disabled}
               className="checkIcon"
             />
           </CheckboxInput>