From 0ec15561c159cecd26c4e220664b84d2c96e03d2 Mon Sep 17 00:00:00 2001
From: Pedro Marti <pedro@cratebind.com>
Date: Fri, 28 May 2021 15:12:35 -0400
Subject: [PATCH 1/3] fix: checkbox, styles & added disabled example

---
 .storybook/main.js                | 14 +++++++----
 src/Checkbox/Checkbox.stories.tsx |  6 +++++
 src/Checkbox/index.tsx            | 29 ++---------------------
 src/theme.ts                      | 39 ++++++++++++++++++++++++++++++-
 4 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 86e57839..df4a39ff 100644
--- a/.storybook/main.js
+++ b/.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,
   },
-}
\ No newline at end of file
+};
diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx
index 033a2f96..ad909883 100644
--- a/src/Checkbox/Checkbox.stories.tsx
+++ b/src/Checkbox/Checkbox.stories.tsx
@@ -34,3 +34,9 @@ export const Basic = Template.bind({});
 Basic.args = {
   children: 'Stay Logged In',
 };
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: 'Stay Logged In',
+  disabled: true,
+};
diff --git a/src/Checkbox/index.tsx b/src/Checkbox/index.tsx
index 5ff0eacf..6bdf8372 100644
--- a/src/Checkbox/index.tsx
+++ b/src/Checkbox/index.tsx
@@ -38,41 +38,16 @@ 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}
         />
diff --git a/src/theme.ts b/src/theme.ts
index f803e613..528eec83 100644
--- a/src/theme.ts
+++ b/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: {},

From d2a5c7af89d0d4122c60b45692d0891a18dfccc7 Mon Sep 17 00:00:00 2001
From: Pedro Marti <pedro@cratebind.com>
Date: Wed, 2 Jun 2021 21:32:02 -0400
Subject: [PATCH 2/3] fix: fix: font styles

---
 src/Checkbox/index.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Checkbox/index.tsx b/src/Checkbox/index.tsx
index 6bdf8372..e3027ec6 100644
--- a/src/Checkbox/index.tsx
+++ b/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"
@@ -52,7 +59,7 @@ export const Checkbox = forwardRef(function Checkbox(
           {...props}
         />
         {children}
-      </Box>
+      </StyledBox>
     </label>
   );
 });

From 7e53afba0cf9d3855e17beb180921e3777dc4f14 Mon Sep 17 00:00:00 2001
From: Pedro Marti <pedro@cratebind.com>
Date: Thu, 3 Jun 2021 22:13:31 -0400
Subject: [PATCH 3/3] fix: fix: example onChange function & children

---
 src/Checkbox/Checkbox.stories.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx
index ad909883..c351dfb8 100644
--- a/src/Checkbox/Checkbox.stories.tsx
+++ b/src/Checkbox/Checkbox.stories.tsx
@@ -21,22 +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: 'Stay Logged In',
+  children: 'Option 1',
   disabled: true,
 };