Add Checkbox component

see #81

Author: stuarthendren

package-lock.json

@@ -77,7 +77,9 @@
     },
     "rules": {
       "import/default": "off",
-      "import/no-default-export": "off"
+      "import/no-default-export": "off",
+      "react/display-name": "off",
+      "import/no-named-as-default-member": "warn"
     },
     "ignorePatterns": [
       "dist",
@@ -141,6 +143,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^0.0.14",
     "@radix-ui/react-avatar": "^0.0.13",
+    "@radix-ui/react-checkbox": "^0.0.15",
     "@radix-ui/react-polymorphic": "^0.0.11",
     "@stitches/react": "^0.1.9"
   }

package.json

@@ -1,6 +1,7 @@
+import { action } from '@storybook/addon-actions'
+import { Meta } from '@storybook/react'
 import React from 'react'
 import { styled } from 'stitches.config'
-import { Story, Meta } from '@storybook/react'
 import { Card } from '.'
 import { Row } from '../'
 
@@ -90,12 +91,7 @@ export const Ghost = () => {
           Lorem Ipsum is simply dummy text...
         </Text>
       </Card>
-      <Card
-        as="button"
-        interactive
-        variant="ghost"
-        onClick={() => alert('Action')}
-      >
+      <Card as="button" interactive variant="ghost" onClick={action('Action')}>
         <Text css={{ lineHeight: '23px', fontWeight: 500 }}>Ghost</Text>
         <Text css={{ color: '$grey900', lineHeight: '23px' }}>
           Lorem Ipsum is simply dummy text...

src/components/Card/Card.stories.tsx

@@ -0,0 +1,87 @@
+import React, { useState, ChangeEventHandler } from 'react'
+import { Story, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { Checkbox } from '.'
+import { Variants } from '../../docs/util'
+import { Flex } from '../'
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+} as Meta
+const click = action('clicked')
+
+export const Default = () => <Checkbox onCheckedChange={action('checked')} />
+
+/**
+ * A primary version for if the check is the main action.
+ * (This probably doesn't happen very often.)
+ *
+ *  Example with state - __Note__ the use of `onCheckedChange` to get the change notification from all triggering actions.
+ */
+export const Primary = () => {
+  const [checked, setChecked] = useState(false)
+  return (
+    <Checkbox
+      css={{ m: '$3' }}
+      checked={checked}
+      variant="primary"
+      onCheckedChange={(event) => {
+        click(event)
+        setChecked(!checked)
+      }}
+    />
+  )
+}
+
+export const Destructive = () => {
+  return (
+    <Flex>
+      <Checkbox css={{ m: '$3' }} variant="primary" destructive />
+      <Checkbox css={{ m: '$3' }} destructive />
+    </Flex>
+  )
+}
+
+/**
+ * Checkbox also support a `indeterminate` checked state.
+ * This can only be used in a controlled behaviour.
+ */
+export const Indeterminate = () => {
+  const [checked, setChecked] = useState<boolean | 'indeterminate'>(
+    'indeterminate'
+  )
+
+  const rotate: ChangeEventHandler<HTMLInputElement> = (e) => {
+    click(e)
+    if (checked === 'indeterminate') {
+      setChecked(true)
+    } else if (checked) {
+      setChecked(false)
+    } else {
+      setChecked('indeterminate')
+    }
+  }
+  return (
+    <Flex>
+      <Checkbox
+        css={{ m: '$3' }}
+        checked={checked}
+        variant="primary"
+        onCheckedChange={rotate}
+      />
+      <Checkbox css={{ m: '$3' }} checked={checked} onCheckedChange={rotate} />
+    </Flex>
+  )
+}
+
+export const All = () => (
+  <Variants
+    component={Checkbox}
+    css={{ m: '$3' }}
+    variant={['primary', 'secondary']}
+    destructive={[false, true]}
+    disabled={[false, true]}
+    checked={[false, true, 'indeterminate']}
+  />
+)

src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { renderLight, renderDark } from 'test-utils'
+import { Default } from './Checkbox.stories'
+
+it('renders light without error', () => {
+  const { asFragment } = renderLight(<Default />)
+  expect(asFragment()).toBeDefined()
+})
+
+it('renders dark without error', () => {
+  const { asFragment } = renderDark(<Default />)
+  expect(asFragment()).toBeDefined()
+})