feat: implement Checkbox component

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -7,6 +7,7 @@ import { ButtonStyles } from '../Button/Button.styles'
 import { CardStyles } from '../Card/Card.styles'
 import { CardBodyStyles } from '../CardBody/CardBody.styles'
 import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
+import { CheckboxStyles } from '../Checkbox/Checkbox.styles'
 import { CollapseStyles } from '../Collapse/Collapse.styles'
 import { CollapseHeaderStyles } from '../CollapseHeader/CollapseHeader.styles'
 import { DropdownStyles } from '../Dropdown/Dropdown.styles'
@@ -40,6 +41,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     CardBodyStyles,
     TagStyles,
     TextFieldStyles,
+    CheckboxStyles,
     AutocompleteStyles,
     QuoteStyles,
     CollapseStyles,

packages/lsd-react/src/components/Checkbox/Checkbox.classes.ts

@@ -0,0 +1,15 @@
+export const checkboxClasses = {
+  root: `lsd-checkbox`,
+
+  input: `lsd-checkbox__input`,
+  icon: `lsd-checkbox__icon`,
+  label: `lsd-checkbox__label`,
+
+  focused: `lsd-checkbox--focused`,
+  disabled: `lsd-checkbox--disabled`,
+  indeterminate: 'lsd-checkbox--indeterminate',
+
+  large: `lsd-checkbox--large`,
+  medium: `lsd-checkbox--medium`,
+  small: 'lsd-checkbox--small',
+}

packages/lsd-react/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/react'
+import { Checkbox, CheckboxProps } from './Checkbox'
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
+} as Meta
+
+export const Root: Story<CheckboxProps> = (args) => (
+  <Checkbox {...args}>Checkbox</Checkbox>
+)
+
+Root.args = {
+  size: 'large',
+  disabled: false,
+  indeterminate: false,
+  checked: undefined,
+  onChange: undefined,
+}

packages/lsd-react/src/components/Checkbox/Checkbox.styles.ts

@@ -0,0 +1,59 @@
+import { css } from '@emotion/react'
+import { checkboxClasses } from './Checkbox.classes'
+
+export const CheckboxStyles = css`
+  .${checkboxClasses.root} {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .${checkboxClasses.input} {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .${checkboxClasses.root}:not(.${checkboxClasses.disabled}) {
+    &:hover,
+    &.${checkboxClasses.focused} {
+      text-decoration: underline;
+    }
+
+    .${checkboxClasses.input} {
+      cursor: pointer;
+    }
+  }
+
+  .${checkboxClasses.disabled} {
+    opacity: 0.34;
+  }
+
+  .${checkboxClasses.label} {
+    margin-left: 18px;
+  }
+
+  .${checkboxClasses.large} {
+    .${checkboxClasses.label} {
+      margin-left: 18px;
+    }
+  }
+
+  .${checkboxClasses.medium} {
+    .${checkboxClasses.label} {
+      margin-left: 14px;
+    }
+  }
+
+  .${checkboxClasses.small} {
+    .${checkboxClasses.label} {
+      margin-left: 12px;
+    }
+  }
+`

packages/lsd-react/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,97 @@
+import clsx from 'clsx'
+import React, { useEffect, useRef, useState } from 'react'
+import { useInput } from '../../utils/useInput'
+import { CheckboxFilledIcon, CheckboxIcon } from '../Icons'
+import { CheckboxIndeterminateIcon } from '../Icons/CheckboxIndeterminate'
+import { Typography } from '../Typography'
+import { checkboxClasses } from './Checkbox.classes'
+
+export type CheckboxProps = Omit<
+  React.LabelHTMLAttributes<HTMLLabelElement>,
+  'onChange' | 'value' | 'color'
+> &
+  Pick<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'checked' | 'defaultChecked'
+  > & {
+    disabled?: boolean
+    indeterminate?: boolean
+    size?: 'small' | 'medium' | 'large'
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  }
+
+export const Checkbox: React.FC<CheckboxProps> & {
+  classes: typeof checkboxClasses
+} = ({
+  size = 'large',
+  onChange,
+  checked,
+  defaultChecked,
+  disabled = false,
+  indeterminate = false,
+  inputProps = {},
+  children,
+  ...props
+}) => {
+  const ref = useRef<HTMLInputElement>(null)
+  const [focused, setFocused] = useState(false)
+  const input = useInput({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange,
+    ref,
+  })
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const onFocus = () => setFocused(true)
+    const onBlur = () => setFocused(false)
+
+    ref.current.addEventListener('focus', onFocus)
+    ref.current.addEventListener('blur', onBlur)
+
+    return () => {
+      ref.current?.removeEventListener('focus', onFocus)
+      ref.current?.removeEventListener('blur', onBlur)
+    }
+  }, [ref.current])
+
+  return (
+    <Typography
+      color="primary"
+      variant={size === 'large' ? 'label1' : 'label2'}
+      component="label"
+      aria-disabled={disabled ? 'true' : 'false'}
+      {...props}
+      className={clsx(
+        props.className,
+        checkboxClasses.root,
+        checkboxClasses[size],
+        focused && checkboxClasses.focused,
+        disabled && checkboxClasses.disabled,
+        indeterminate && checkboxClasses.indeterminate,
+      )}
+    >
+      <input
+        ref={ref}
+        type="checkbox"
+        checked={input.value}
+        onChange={input.onChange}
+        defaultChecked={defaultChecked}
+        className={clsx(inputProps.className, checkboxClasses.input)}
+        {...inputProps}
+      />
+      {indeterminate ? (
+        <CheckboxIndeterminateIcon color="primary" focusable={false} />
+      ) : input.value ? (
+        <CheckboxFilledIcon color="primary" focusable={false} />
+      ) : (
+        <CheckboxIcon color="primary" focusable={false} />
+      )}
+      <span className={checkboxClasses.label}>{children}</span>
+    </Typography>
+  )
+}
+
+Checkbox.classes = checkboxClasses

packages/lsd-react/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox'

packages/lsd-react/src/components/Icons/CheckboxIndeterminate/CheckboxIndeterminateIcon.tsx

@@ -0,0 +1,24 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const CheckboxIndeterminateIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.91667 1.75C2.27233 1.75 1.75 2.27233 1.75 2.91667V11.0833C1.75 11.7277 2.27233 12.25 2.91667 12.25H11.0833C11.7277 12.25 12.25 11.7277 12.25 11.0833V2.91667C12.25 2.27233 11.7277 1.75 11.0833 1.75H2.91667ZM9.91667 6.41667H4.08333V7.58333H9.91667V6.41667Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)

packages/lsd-react/src/components/Icons/CheckboxIndeterminate/index.ts

@@ -0,0 +1 @@
+export * from './CheckboxIndeterminateIcon'

packages/lsd-react/src/index.ts

@@ -5,6 +5,7 @@ export * from './components/Button'
 export * from './components/Card'
 export * from './components/CardBody'
 export * from './components/CardHeader'
+export * from './components/Checkbox'
 export * from './components/Collapse'
 export * from './components/CollapseHeader'
 export * from './components/Dropdown'

packages/lsd-react/src/utils/useInput.ts

@@ -1,22 +1,23 @@
 import React, { useEffect, useState } from 'react'
 
 export type InputValueType =
-  React.InputHTMLAttributes<HTMLInputElement>['value']
+  | React.InputHTMLAttributes<HTMLInputElement>['value']
+  | boolean
 
 export type InputOnChangeType =
   React.InputHTMLAttributes<HTMLInputElement>['onChange']
 
-export type InputProps = {
-  value?: InputValueType
-  defaultValue?: InputValueType
+export type InputProps<T extends InputValueType = InputValueType> = {
+  value?: T
+  defaultValue: T
   onChange?: InputOnChangeType
   ref?: React.RefObject<HTMLInputElement>
 }
 
-export const useInput = (props: InputProps) => {
-  const [value, setValue] = useState<InputValueType>(
-    props.value ?? props.defaultValue ?? '',
-  )
+export const useInput = <T extends InputValueType = InputValueType>(
+  props: InputProps<T>,
+) => {
+  const [value, setValue] = useState<T>(props.value ?? props.defaultValue)
 
   const uncontrolled = typeof props.value === 'undefined'
   const filled =
@@ -27,7 +28,9 @@ export const useInput = (props: InputProps) => {
       : value.toString().length > 0
 
   const onChange: InputOnChangeType = (event) => {
-    if (uncontrolled) return setValue(event.target.value)
+    const type = event.target.type
+    const value = event.target[type === 'checkbox' ? 'checked' : 'value']
+    if (uncontrolled) return setValue(value as T)
     props.onChange && props.onChange(event)
   }
 
@@ -46,7 +49,7 @@ export const useInput = (props: InputProps) => {
   }
 
   useEffect(() => {
-    !uncontrolled && setValue(props.value)
+    !uncontrolled && setValue(props.value as T)
   }, [uncontrolled, props.value])
 
   return {