Checkbox/7642

.storybook/main.js

@@ -1,16 +1,20 @@
 const webpack = require('webpack');
 
 module.exports = {
-  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)', '../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+  stories: [
+    '../src/**/*.stories.@(ts|tsx|js|jsx)',
+    '../stories/**/*.stories.@(ts|tsx|js|jsx)',
+  ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   typescript: {
-    check: false, // type-check stories during Storybook build
+    check: false,
+    reactDocgen: false,
   },
-  webpackFinal: async (config) => {
+  webpackFinal: async config => {
     // allow __DEV__ macro to be used
     config.plugins.push(
       new webpack.DefinePlugin({
-        '__DEV__': process.env.NODE_ENV === 'development'
+        __DEV__: process.env.NODE_ENV === 'development',
       })
     );
 
@@ -20,4 +24,4 @@ module.exports = {
     fastRefresh: true,
     strictMode: true,
   },
-}
+};

src/Checkbox/Checkbox.stories.tsx

@@ -21,16 +21,18 @@ export default meta;
 
 const Template: Story<CheckboxProps> = args => {
   const [checked, setChecked] = React.useState(true);
-  return (
-    <Checkbox
-      checked={checked}
-      onChange={() => setChecked(!checked)}
-      {...args}
-    />
-  );
+  const onCheckboxChange = () => setChecked(!checked);
+
+  return <Checkbox checked={checked} onChange={onCheckboxChange} {...args} />;
 };
 
 export const Basic = Template.bind({});
 Basic.args = {
-  children: 'Stay Logged In',
+  children: 'Option 1',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: 'Option 1',
+  disabled: true,
 };

src/Checkbox/index.tsx

@@ -1,9 +1,16 @@
 import React, { forwardRef } from 'react';
+import styled from 'styled-components';
 import { CustomCheckboxContainer, CustomCheckboxInput } from '@reach/checkbox';
+
 import { MinervaProps, Box } from '../layout';
 import PseudoBox from '../PseudoBox';
 import { useComponentStyles } from '../theme';
 
+export const StyledBox = styled(Box)`
+  font-weight: 400;
+  font-size: 14px;
+`;
+
 type BaseProps = MinervaProps & React.InputHTMLAttributes<HTMLInputElement>;
 
 export interface CustomCheckboxProps {
@@ -28,7 +35,7 @@ export const Checkbox = forwardRef(function Checkbox(
   const componentStyles = useComponentStyles('Checkbox');
   return (
     <label>
-      <Box
+      <StyledBox
         as={CustomCheckboxContainer}
         display="flex"
         alignItems="center"
@@ -38,46 +45,21 @@ export const Checkbox = forwardRef(function Checkbox(
         defaultChecked={defaultChecked}
       >
         <PseudoBox
+          ref={ref}
           as={CustomCheckboxInput}
           backgroundImage={`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='${checkColor.replace(
             '#',
             '%23'
-          )}' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E");`}
+          )}' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");`}
           backgroundSize="100%"
           backgroundPosition="center"
           backgroundRepeat="no-repeat"
           type="checkbox"
-          ref={ref}
-          appearance="none"
-          width="18px"
-          height="18px"
-          marginRight="8px"
-          borderRadius="4px"
-          borderWidth="1px"
-          borderStyle="solid"
-          padding="2px"
-          backgroundColor="#fff"
-          transition="background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)"
-          _checked={{
-            backgroundColor: '#5850ec',
-            borderColor: '#5850ec',
-          }}
-          _focus={{
-            borderColor: '#a4cafe',
-            boxShadow: '0 0 0 3px rgba(118,169,250,.45)',
-            outline: 0,
-          }}
-          _disabled={{
-            backgroundColor: '#EAEAEA',
-            color: '#8F8F8F',
-            cursor: 'not-allowed',
-            backgroundImage: 'none',
-          }}
           {...componentStyles}
           {...props}
         />
         {children}
-      </Box>
+      </StyledBox>
     </label>
   );
 });

src/theme.ts

@@ -69,7 +69,44 @@ const defaultTheme: MinervaTheme = {
     borderStyle: 'solid',
     borderColor: '#d2d6dc',
   },
-  Checkbox: {},
+  Checkbox: {
+    width: '15px',
+    height: '15px',
+    marginRight: '8px',
+    borderRadius: '3px',
+    borderWidth: '1.5px',
+    borderColor: '#000',
+    borderStyle: 'solid',
+    padding: '2px',
+    appearance: 'none',
+    transition:
+      'background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)',
+    backgroundColor: '#fff',
+    _active: {
+      borderColor: '#000',
+    },
+    _checked: {
+      backgroundColor: '#000',
+    },
+    _focus: {
+      boxShadow: '0 0 0 1.5px #651FFF',
+    },
+    _disabled: {
+      '&[aria-checked=true]': {
+        backgroundColor: '#BDBDBD',
+      },
+      '&[aria-checked=false]': {
+        backgroundColor: '#transparent',
+        borderColor: '#000',
+      },
+      borderColor: '#BDBDBD',
+      cursor: 'not-allowed',
+      backgroundImage: 'none',
+    },
+    _hover: {
+      backgroundColor: 'transparent',
+    },
+  },
   Drawer: {},
   Heading: { fontWeight: 'bold' },
   Image: {},