Lukebailey/infra 386 create a a11y checkbox

.gitignore

@@ -37,4 +37,5 @@ junit.xml
 .idea
 
 # logs
-*.log
+*.log
+.vscode/

bin/build-cjs.js

@@ -8,7 +8,14 @@ const sharedConfig = {
   platform: 'node',
   sourcemap: true,
   bundle: true,
-  external: ['react', 'react-dom', '@stitches/react'],
+  external: [
+    'react',
+    'react-dom',
+    '@stitches/react',
+    'react-aria',
+    'react-stately',
+    'gsap',
+  ],
   target: ['node12'],
   inject: ['./bin/util/react-shim.js'],
 };

package.json

@@ -45,6 +45,7 @@
     "@commitlint/cli": "^14.1.0",
     "@commitlint/config-conventional": "^14.1.0",
     "@skypack/package-check": "^0.2.2",
+    "@stitches/react": "^1.2.5",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
@@ -85,6 +86,8 @@
     "react": "^16.14.0 || ^17.0.0"
   },
   "dependencies": {
-    "@stitches/react": "^1.2.5"
+    "gsap": "^3.9.1",
+    "react-aria": "^3.12.0",
+    "react-stately": "^3.11.0"
   }
 }

src/animationIcons/CheckIcon.tsx

@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react';
+import { styled } from '../../stitches.config';
+
+const Path = styled('path', {
+  'input:checked ~ div &': {
+    transition: 'stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1)',
+  },
+  transition: 'stroke-dashoffset 0.2s cubic-bezier(0.11, 0, 0.5, 0)',
+});
+
+export const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="img"
+    viewBox="0 0 16 16"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <Path
+      d="M0.709339 7.44716L5.70834 12.4462L15.3004 2.8541"
+      stroke="currentColor"
+      strokeDasharray="21 21"
+      strokeMiterlimit="10"
+      strokeWidth="2"
+    />
+  </svg>
+);

src/components/Checkbox.tsx

@@ -0,0 +1,123 @@
+import type { CheckboxProps, ToggleProps } from '@react-types/checkbox';
+import { gsap } from 'gsap';
+import type { ChangeEvent, ComponentPropsWithRef } from 'react';
+import { useEffect, useRef } from 'react';
+import { useCheckbox } from 'react-aria';
+import { useToggleState } from 'react-stately';
+import { styled } from '../../stitches.config';
+import { CheckIcon } from '../animationIcons/CheckIcon';
+
+const Label = styled('label', {
+  '& input:checked:disabled + div': {
+    color: '$gray50',
+  },
+  display: 'block',
+  position: 'relative',
+});
+
+const Input = styled('input', {
+  '&:checked': {
+    backgroundColor: '$brandYellow',
+    borderColor: '$brandYellow',
+  },
+  '&:checked&:disabled': {
+    backgroundColor: '$yellow20',
+    borderColor: '$yellow20',
+  },
+  '&:disabled': {
+    borderColor: '$gray30',
+  },
+  '&:focus': {
+    outline: '2px solid $brandYellow',
+    outlineOffset: '2px',
+  },
+  '&:indeterminate': {
+    borderColor: '$brandYellow',
+    position: 'relative',
+  },
+  '&:indeterminate:after': {
+    backgroundColor: '$brandYellow',
+    content: '""',
+    height: '12px',
+    left: '50%',
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '12px',
+  },
+  '&:invalid': {
+    borderColor: '$uiErrorRegular',
+  },
+  appearance: 'none',
+  backgroundColor: '$brandWhite',
+  borderColor: '$gray50',
+  borderRadius: '$4',
+  borderStyle: '$solid',
+  borderWidth: '$thin',
+  height: '24px',
+  margin: '0',
+  position: 'relative',
+  width: '24px',
+});
+
+const IconContainer = styled('div', {
+  left: '50%',
+  position: 'absolute',
+  top: '50%',
+  transform: 'translate(-50%, -50%)',
+});
+
+type CustomCheckboxProps = {
+  text?: string;
+};
+
+export const Checkbox = ({
+  validationState,
+  text,
+  defaultSelected,
+  isIndeterminate,
+  ...restProps
+}: CheckboxProps &
+  ComponentPropsWithRef<'input'> &
+  CustomCheckboxProps &
+  ToggleProps) => {
+  const ref = useRef<HTMLInputElement>(null);
+  const state = useToggleState({ defaultSelected, validationState });
+  const { inputProps } = useCheckbox(
+    { isIndeterminate, ...restProps },
+    state,
+    ref
+  );
+  const checkedTl = useRef<GSAPTimeline>(gsap.timeline({ paused: true }));
+
+  useEffect(() => {
+    checkedTl.current
+      .to(ref.current, {
+        duration: 0.1,
+        ease: 'quad.easeIn',
+        scale: 0.9,
+      })
+      .to(ref.current, {
+        duration: 0.1,
+        ease: 'quad.easeOut',
+        scale: 1,
+      });
+  }, []);
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const checked = event.target.checked;
+    state.setSelected(checked);
+
+    checkedTl.current.play(0);
+  };
+
+  return (
+    <Label>
+      <Input {...inputProps} {...restProps} onChange={onChange} ref={ref} />
+      <IconContainer>
+        <CheckIcon strokeDashoffset={state.isSelected ? '' : '21'} />
+      </IconContainer>
+      {text}
+    </Label>
+  );
+};

src/components/stories/Checkbox.stories.tsx

@@ -0,0 +1,34 @@
+import { styled } from '../../../stitches.config';
+import { Checkbox } from '../Checkbox';
+
+const Wrapper = styled('div', {
+  display: 'flex',
+  flexFlow: 'row wrap',
+  gap: '$16',
+  width: '100%',
+});
+
+export const CheckboxStates = () => (
+  <Wrapper>
+    <Checkbox aria-label="Example checkbox: disabled" disabled />
+    <Checkbox aria-label="Example checkbox: unchecked" />
+    <Checkbox aria-label="Example checkbox: checked" defaultSelected />
+    <Checkbox
+      aria-label="Example checkbox: focused"
+      autoFocus
+      defaultSelected
+    />
+    <Checkbox
+      aria-label="Example checkbox: unchecked"
+      defaultSelected
+      disabled
+    />
+    <Checkbox aria-label="test" isIndeterminate />
+    <Checkbox aria-label="test" required validationState="invalid" />
+  </Wrapper>
+);
+
+export default {
+  component: CheckboxStates,
+  title: 'Checkbox',
+};

stitches.config.ts

@@ -14,7 +14,16 @@ export const {
 } = createStitches({
   media: {},
   theme: {
+    borderStyles: {
+      solid: 'solid',
+    },
+    borderWidths: {
+      thin: '2px',
+    },
     colors: colorPrimitives,
+    radii: {
+      4: '4px',
+    },
     space: {
       4: '4px',
       8: '8px',