Lukebailey/infra 386 create a a11y checkbox

.gitignore

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

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,7 @@
     "react": "^16.14.0 || ^17.0.0"
   },
   "dependencies": {
-    "@stitches/react": "^1.2.5"
+    "react-aria": "^3.12.0",
+    "react-stately": "^3.11.0"
   }
 }

src/animationIcons/CheckIcon.tsx

@@ -0,0 +1,44 @@
+import type { SVGProps } from 'react';
+import { styled } from '../../stitches.config';
+import { easeOutExpo, easeInQuad } from '../primitives/animation';
+
+const Path = styled('path', {
+  transition: `stroke-dashoffset 0.2s ${easeInQuad}`,
+  variants: {
+    isChecked: {
+      true: {
+        transition: `stroke-dashoffset 1s ${easeOutExpo}`,
+      },
+    },
+  },
+});
+
+type CheckIconProps = SVGProps<SVGSVGElement> & {
+  isChecked?: boolean;
+};
+
+export const CheckIcon = (props: CheckIconProps) => {
+  const { isChecked, ...svgProps } = props;
+
+  return (
+    <svg
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="img"
+      viewBox="0 0 16 16"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgProps}
+    >
+      <Path
+        d="M0.709339 7.44716L5.70834 12.4462L15.3004 2.8541"
+        isChecked={isChecked}
+        stroke="currentColor"
+        strokeDasharray="21 21"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};

src/components/Checkbox.tsx

@@ -0,0 +1,131 @@
+import type {
+  CheckboxProps as RTCheckboxProps,
+  ToggleProps,
+} from '@react-types/checkbox';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { useState, useRef } from 'react';
+import { useCheckbox } from 'react-aria';
+import { useToggleState } from 'react-stately';
+import { styled } from '../../stitches.config';
+import { CheckIcon } from '../animationIcons/CheckIcon';
+import { easeOutExpo } from '../primitives/animation';
+
+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',
+  },
+  appearance: 'none',
+  backgroundColor: '$brandWhite',
+  borderColor: '$gray50',
+  borderRadius: '$4',
+  borderStyle: '$solid',
+  borderWidth: '$thin',
+  height: '24px',
+  margin: '0',
+  position: 'relative',
+  transform: 'scale(1)',
+  transition: `transform 0.2s ${easeOutExpo}`,
+  variants: {
+    isPressed: {
+      true: {
+        transform: 'scale(0.9)',
+      },
+    },
+  },
+  width: '24px',
+});
+
+const IconContainer = styled('div', {
+  left: '50%',
+  position: 'absolute',
+  top: '50%',
+  transform: 'translate(-50%, -50%)',
+});
+
+type CheckboxProps = RTCheckboxProps & {
+  label?: ReactNode;
+};
+export const Checkbox = ({
+  validationState,
+  label,
+  defaultSelected,
+  isIndeterminate,
+  disabled,
+}: CheckboxProps &
+  ComponentPropsWithRef<'input'> &
+  RTCheckboxProps &
+  ToggleProps) => {
+  const ref = useRef<HTMLInputElement>(null);
+  const { isSelected, toggle, setSelected } = useToggleState({
+    defaultSelected,
+    validationState,
+  });
+  const { inputProps } = useCheckbox(
+    { isIndeterminate },
+    { isSelected, setSelected, toggle },
+    ref
+  );
+  const [isPressed, setIsPressed] = useState(false);
+
+  const handleMouseDown = () => {
+    if (disabled) return;
+    setIsPressed(true);
+  };
+
+  const handleMouseUp = () => {
+    if (disabled) return;
+    setIsPressed(false);
+  };
+
+  return (
+    <Label onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
+      <Input
+        isPressed={isPressed}
+        {...inputProps}
+        disabled={disabled}
+        ref={ref}
+      />
+      <IconContainer>
+        <CheckIcon
+          isChecked={isSelected}
+          strokeDashoffset={isSelected ? '' : '21'}
+        />
+      </IconContainer>
+      {label}
+    </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',
+};

src/primitives/animation.ts

@@ -0,0 +1,19 @@
+// Easing
+export const easeInQuad = 'cubic-bezier(0.55, 0.085, 0.68, 0.53)';
+export const easeInCubic = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
+export const easeInQuart = 'cubic-bezier(0.895, 0.03, 0.685, 0.22)';
+export const easeInQuint = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)';
+export const easeInExpo = 'cubic-bezier(0.95, 0.05, 0.795, 0.035)';
+export const easeInCirc = 'cubic-bezier(0.6, 0.04, 0.98, 0.335)';
+export const easeOutQuad = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+export const easeOutCubic = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
+export const easeOutQuart = 'cubic-bezier(0.165, 0.84, 0.44, 1)';
+export const easeOutQuint = 'cubic-bezier(0.23, 1, 0.32, 1)';
+export const easeOutExpo = 'cubic-bezier(0.19, 1, 0.22, 1)';
+export const easeOutCirc = 'cubic-bezier(0.075, 0.82, 0.165, 1)';
+export const easeInOutQuad = 'cubic-bezier(0.455, 0.03, 0.515, 0.955)';
+export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
+export const easeInOutQuart = 'cubic-bezier(0.77, 0, 0.175, 1)';
+export const easeInOutQuint = 'cubic-bezier(0.86, 0, 0.07, 1)';
+export const easeInOutExpo = 'cubic-bezier(1, 0, 0, 1)';
+export const easeInOutCirc = 'cubic-bezier(0.785, 0.135, 0.15, 0.86)';

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',