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/Checkbox.tsx

@@ -0,0 +1,30 @@
+import { LabelHTMLAttributes, PropsWithChildren } from "react";
+import {  checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
+import styled from "styled-components";
+import { InputHTMLAttributes } from "react";
+
+const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
+  ${checkboxLabelStyles}
+`;
+
+// https://moderncss.dev/pure-css-custom-checkbox-style/
+const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: CheckboxSize; isDisabled?: boolean; }>`
+  ${checkboxInputStyles}
+`;
+
+type CheckboxProps = PropsWithChildren<
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+  variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  bold?: boolean;
+  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+}>;
+
+export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, ...props }: CheckboxProps) => {
+  return (
+    <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
+      <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} />
+      {children}
+    </StyledLabel>
+  );
+};

src/components/__snapshots__/Checkbox.spec.tsx.snap → src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Checkbox allows setting props on label 1`] = `
 <label
   aria-label="custom label"
-  className="sc-bczRLJ gvjopC"
+  className="sc-bczRLJ XfrOB"
 >
   <input
-    className="sc-gsnTZi gDsstp"
+    className="sc-gsnTZi dskNep"
     type="checkbox"
   />
   Click Me
@@ -15,10 +15,10 @@ exports[`Checkbox allows setting props on label 1`] = `
 
 exports[`Checkbox handles disabled state 1`] = `
 <label
-  className="sc-bczRLJ Kigrj"
+  className="sc-bczRLJ jDFcYw"
 >
   <input
-    className="sc-gsnTZi cZFRiM"
+    className="sc-gsnTZi dJvfbo"
     type="checkbox"
   />
   Click Me
@@ -27,10 +27,10 @@ exports[`Checkbox handles disabled state 1`] = `
 
 exports[`Checkbox handles options 1`] = `
 <label
-  className="sc-bczRLJ gvjopC"
+  className="sc-bczRLJ XfrOB"
 >
   <input
-    className="sc-gsnTZi gDsstp"
+    className="sc-gsnTZi dskNep"
     type="checkbox"
   />
   Click Me
@@ -39,10 +39,10 @@ exports[`Checkbox handles options 1`] = `
 
 exports[`Checkbox matches snapshot 1`] = `
 <label
-  className="sc-bczRLJ duZDSR"
+  className="sc-bczRLJ fIuhsq"
 >
   <input
-    className="sc-gsnTZi bBmYov"
+    className="sc-gsnTZi ehAXiz"
     type="checkbox"
   />
   Click Me

src/components/Checkbox/sharedCheckboxStyles.ts

@@ -0,0 +1,101 @@
+import { css } from "styled-components";
+import { colors } from "../../theme";
+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;
+
+// Checkbox label styles
+export const checkboxLabelStyles = css<{
+  bold?: boolean;
+  variant: CheckboxVariant;
+  isDisabled?: boolean;
+}>`
+  font-size: 1.6rem;
+  display: flex;
+  align-items: center;
+  font-weight: ${({ bold }) => (bold ? 700 : 400)};
+  color: ${({ isDisabled, variant }) =>
+    isDisabled
+      ? colors.palette.neutralLight
+      : checkboxVariants[variant].color};
+`;
+
+// Checkbox input/selection styles
+export const checkboxInputStyles = css<{
+  variant: CheckboxVariant;
+  checkboxSize: CheckboxSize;
+  isDisabled?: boolean;
+}>`
+  appearance: none;
+  background-color: ${colors.palette.white};
+  opacity: ${({ isDisabled }) => (isDisabled ? '0.4' : '1')};
+  border: ${({ isDisabled, variant }) =>
+    isDisabled
+      ? `1px solid ${colors.palette.pale}`
+      : checkboxVariants[variant].unCheckedBorder};
+  border-radius: 0.2rem;
+  transform: translateY(-0.075em);
+  width: ${({ checkboxSize }) => checkboxSize}rem;
+  height: ${({ checkboxSize }) => checkboxSize}rem;
+  margin: 0 1.6rem 0 0;
+  display: grid;
+  place-content: center;
+
+  &::before {
+    content: "";
+    border-radius: 0.2rem;
+    width: ${({ checkboxSize }) => checkboxSize}rem;
+    height: ${({ checkboxSize }) => checkboxSize}rem;
+    border: ${({ variant }) => checkboxVariants[variant].checkedBorder};
+    border-radius: 0.2rem;
+    transform: scale(0);
+    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);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+    opacity: ${({ isDisabled }) => (isDisabled ? 0 : 1)};
+  }
+`;
+
+export const checkboxSelectionSlotCheckedStyles = css<{ isDisabled?: boolean }>`
+  transform: scale(1);
+  opacity: ${({ isDisabled }) => (isDisabled ? 0 : 1)};
+`;

src/components/Tree.spec.tsx → src/components/Tree/Tree.spec.tsx

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { Tree, TreeChevron, TreeItem, TreeItemContent } from './Tree';
-import { Checkbox } from './Checkbox';
+import { Checkbox } from '../Checkbox/Checkbox';
 
 describe('Tree', () => {
   it('matches snapshot', () => {