Checkbox RAC component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/Checkbox.tsx → src/components/Checkbox/Checkbox.tsx

@@ -1,42 +1,8 @@
 import { LabelHTMLAttributes, PropsWithChildren } from "react";
-import { colors } from "../theme";
+import { checkboxVariants, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
+import { colors } from "../../theme";
 import styled from "styled-components";
 import { InputHTMLAttributes } from "react";
-import { whiteCheckmark, grayCheckmark, redCheckmark } from "./svgs/checkmarksvgs";
-
-export type CheckboxVariant = keyof typeof checkboxVariants;
-export type CheckboxSize = 1.4 | 1.6 | 1.8 | 2;
-
-export const checkboxVariants = {
-  primary: {
-    backgroundColor: colors.palette.mediumBlue,
-    color: 'inherit',
-    unCheckedBorder: `1px solid ${colors.palette.neutralThin}`,
-    checkedBorder: `1px solid ${colors.palette.mediumBlue}`,
-    backgroundImage: whiteCheckmark
-  },
-  light: {
-    backgroundColor: colors.palette.white,
-    color: 'inherit',
-    unCheckedBorder: `1px solid ${colors.palette.pale}`,
-    checkedBorder: `1px solid ${colors.palette.pale}`,
-    backgroundImage: grayCheckmark
-  },
-  error: {
-    backgroundColor: colors.palette.paleRed,
-    color: colors.palette.darkRed,
-    unCheckedBorder: `1px solid ${colors.palette.lightRed}`,
-    checkedBorder: `1px solid ${colors.palette.lightRed}`,
-    backgroundImage: redCheckmark
-  },
-  disabled: {
-    backgroundColor: colors.palette.white,
-    color: 'inherit',
-    unCheckedBorder: `1px solid ${colors.palette.pale}`,
-    checkedBorder: `1px solid ${colors.palette.pale}`,
-    backgroundImage: 'none'
-  }
-} as const;
 
 const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
   font-size: 1.6rem;

src/components/Checkbox/CheckboxRAC.spec.tsx

@@ -0,0 +1,32 @@
+import { CheckboxRAC } from './CheckboxRAC';
+import renderer from 'react-test-renderer';
+
+describe('CheckboxRAC', () => {
+  it('matches snapshot', () => {
+    const tree = renderer.create(
+      <CheckboxRAC>Click Me</CheckboxRAC>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('handles options', () => {
+    const tree = renderer.create(
+      <CheckboxRAC bold size={2} variant='light'>Click Me</CheckboxRAC>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('handles disabled state', () => {
+    const tree = renderer.create(
+      <CheckboxRAC isDisabled>Click Me</CheckboxRAC>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('supports slot="selection"', () => {
+    const tree = renderer.create(
+      <CheckboxRAC slot="selection">Click Me</CheckboxRAC>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Checkbox/CheckboxRAC.stories.tsx

@@ -0,0 +1,73 @@
+import styled from "styled-components";
+import { CheckboxRAC } from "./CheckboxRAC";
+
+const CheckboxGroup = styled.div`
+  text-transform: capitalize;
+
+  & + & {
+    margin-top: 3.2rem;
+  }
+
+  > * + * {
+    margin-top: 0.5rem;
+  }
+`;
+
+type CheckboxProps = React.ComponentProps<typeof CheckboxRAC>;
+
+const renderCheckboxes = (
+  variant: CheckboxProps['variant'],
+  size: CheckboxProps['size']
+) => (
+  <CheckboxGroup>
+    <h2>Size {size}</h2>
+    <CheckboxRAC slot='selection' {...{ size, variant }}>Checkbox label</CheckboxRAC>
+    <CheckboxRAC slot='selection' {...{ size, variant }} defaultSelected>
+      Checkbox label
+    </CheckboxRAC>
+    <CheckboxRAC slot='selection' {...{ size, variant }} defaultSelected bold>
+      Checkbox label
+    </CheckboxRAC>
+  </CheckboxGroup>
+);
+
+export const Primary = () => (
+  <>
+    {renderCheckboxes("primary", 1.4)}
+    {renderCheckboxes("primary", 1.6)}
+    {renderCheckboxes("primary", 1.8)}
+    {renderCheckboxes("primary", 2)}
+  </>
+);
+
+export const Light = () => (
+  <>
+    {renderCheckboxes("light", 1.4)}
+    {renderCheckboxes("light", 1.6)}
+    {renderCheckboxes("light", 1.8)}
+    {renderCheckboxes("light", 2)}
+  </>
+);
+
+export const Error = () => (
+  <>
+    {renderCheckboxes("error", 1.4)}
+    {renderCheckboxes("error", 1.6)}
+    {renderCheckboxes("error", 1.8)}
+    {renderCheckboxes("error", 2)}
+  </>
+);
+
+export const Disabled = () => (
+  <>
+    <CheckboxGroup>
+      <h2>Disabled</h2>
+      <CheckboxRAC slot='selection' variant="primary" size={1.6} isDisabled>
+        Checkbox label
+      </CheckboxRAC>
+      <CheckboxRAC slot='selection' variant="primary" size={1.6} isDisabled defaultSelected>
+        Checkbox label
+      </CheckboxRAC>
+    </CheckboxGroup>
+  </>
+);

src/components/Checkbox/CheckboxRAC.tsx

@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import { colors } from "../../theme";
+import {
+  Checkbox as RACCheckbox,
+  CheckboxProps as RACCheckboxProps
+} from "react-aria-components";
+import { PropsWithChildren } from "react";
+import { checkboxVariants, CheckboxSize, CheckboxVariant } from "./sharedCheckboxStyles";
+
+export interface CheckboxRACProps
+  extends PropsWithChildren<Omit<RACCheckboxProps, "children">> {
+  size?: CheckboxSize;
+  variant?: CheckboxVariant;
+  bold?: boolean;
+}
+
+const StyledCheckbox = styled(RACCheckbox) <{
+  $variant: CheckboxVariant;
+  $size: CheckboxSize;
+  $bold: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  font-size: 1.6rem;
+  font-weight: ${({ $bold }) => ($bold ? 700 : 400)};
+  color: ${(props => props.isDisabled ? colors.palette.neutralLight : checkboxVariants[props.$variant].color)};
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  [data-slot="selection"] {
+    appearance: none;
+    width: ${({ $size }) => $size}rem;
+    height: ${({ $size }) => $size}rem;
+    margin: 0 1.6rem 0 0;
+    border-radius: 0.2rem;
+    transform: translateY(-0.075em);
+    display: grid;
+    place-content: center;
+    border: ${({ $variant }) => checkboxVariants[$variant].unCheckedBorder};
+    background-color: ${colors.palette.white};
+
+    &::before {
+      content: "";
+      border-radius: 0.2rem;
+      width: ${({ $size }) => $size}rem;
+      height: ${({ $size }) => $size}rem;
+      border: ${({ $variant }) => checkboxVariants[$variant].checkedBorder};
+      background-color: ${({ $variant }) => checkboxVariants[$variant].backgroundColor};
+      background-image: url('${({ $variant }) => checkboxVariants[$variant].backgroundImage}');
+      background-size: 80%;
+      background-position: center;
+      background-repeat: no-repeat;
+      transform: scale(0);
+    }
+  }
+
+  &[data-selected] [data-slot="selection"]::before {
+    transform: scale(1);
+    opacity: ${(props => props.isDisabled ? 0 : 1)};
+  }
+`;
+
+export const CheckboxRAC = ({
+  size = 1.6,
+  variant = "primary",
+  bold = false,
+  children,
+  ...props
+}: CheckboxRACProps) => {
+  return (
+    <StyledCheckbox
+      {...props}
+      $variant={variant}
+      $size={size}
+      $bold={bold}
+    >
+      <div data-slot="selection" />
+      {children}
+    </StyledCheckbox>
+  );
+};