Add Checkbox components

.changeset/neat-rockets-drop.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/web-ui': patch
+---
+
+Add `disableUserSelect` prop to Label & HelperText components

.changeset/plenty-bats-happen.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/web-ui': patch
+---
+
+Change cursor to pointer for Radio & Checkbox components

.changeset/twelve-buses-decide.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/web-ui': patch
+---
+
+Fix `HelperText` fontsize & lineheight

.changeset/weak-tips-fly.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/web-ui': minor
+---
+
+Add `Checkbox`, `CheckboxTile`, `CheckboxGroup`, `CheckboxGridGroup` components

packages/web-ui/package.json

@@ -31,8 +31,10 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/system": "5.15.15",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-use-controllable-state": "^1.0.1",
     "@utilitywarehouse/colour-system": "workspace:^",
     "@utilitywarehouse/react-icons": "^1.1.1",
     "clsx": "^2.0.0"
@@ -52,17 +54,17 @@
     "@storybook/testing-library": "^0.0.14-next.1",
     "@types/node": "^18.15.11",
     "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "@utilitywarehouse/css-reset": "workspace:^",
     "@utilitywarehouse/fontsource": "^0.0.5",
     "chromatic": "^11.3.5",
     "prop-types": "^15.8.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
+    "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.0",
     "storybook": "^7.6.3",
-    "tsup": "^8.0.1",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "react-syntax-highlighter": "^15.5.0"
+    "tsup": "^8.0.1"
   },
   "peerDependencies": {
     "@mui/material": "5.11.14",

packages/web-ui/src/BaseCheckbox/BaseCheckbox.props.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox';
+
+export interface BaseCheckboxProps
+  extends Omit<
+    RadixCheckboxProps,
+    'asChild' | 'value' | 'onCheckedChange' | 'defaultChecked' | 'defaultValue'
+  > {
+  /** The value given as data when submitted with a `name`. */
+  value?: string;
+  defaultValue?: string;
+  /**
+   * The label for the Checkbox. If not using please properly associate the
+   * checkbox with a label using the `aria-label` or `aria-labelledby` props.
+   */
+  label?: ReactNode;
+  /** Helper text for the Checkbox. Will not display if the checkbox group has `helperText` set. */
+  helperText?: ReactNode;
+  /** The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange. */
+  checked?: boolean;
+  /** Event handler called when the checked state of the checkbox changes. */
+  onCheckedChange?: (checked: boolean) => void;
+  /** The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. */
+  defaultChecked?: boolean;
+}

packages/web-ui/src/BaseCheckbox/BaseCheckbox.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { styled } from '../theme';
+import { TickMediumIcon } from '@utilitywarehouse/react-icons';
+import { BaseCheckboxProps } from './BaseCheckbox.props';
+import { colors, colorsCommon } from '@utilitywarehouse/colour-system';
+import { px } from '../utils';
+import { useBaseCheckboxGroup } from '../BaseCheckboxGroup';
+
+const componentName = 'BaseCheckbox';
+
+export const StyledIndicator = styled(RadixCheckbox.Indicator)({
+  position: 'absolute',
+});
+
+const StyledCheckboxRoot = styled(RadixCheckbox.Root)({
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  verticalAlign: 'top',
+  flexShrink: 0,
+  padding: 0,
+  height: 24,
+  width: 24,
+  border: 'none',
+  borderRadius: '50%',
+  '--checkbox-color': colors.cyan1000,
+  '--checkbox-color-disabled': colors.grey400,
+  '--checkbox-background-color-unchecked': colorsCommon.brandWhite,
+  '--checkbox-background-color-checked': colors.cyan500,
+  '--checkbox-background-color-unchecked-disabled': colorsCommon.brandWhite,
+  '--checkbox-background-color-checked-disabled': colors.grey150,
+  '--checkbox-border-width': px(2),
+  '--checkbox-border-color-unchecked': colors.grey500,
+  '--checkbox-border-color-checked': colors.cyan500,
+  '--checkbox-border-color-hover': colors.cyan500,
+  '--checkbox-border-color-focus': colors.cyan500,
+  '--checkbox-border-color-unchecked-disabled': colors.grey300,
+  '--checkbox-border-color-checked-disabled': colors.grey150,
+  '--checkbox-outline-color': 'transparent',
+  '--checkbox-outline-color-focus': colors.cyan700,
+  color: 'var(--checkbox-color)',
+  backgroundColor: 'var(--checkbox-background-color)',
+  outline: 'none',
+  '&::before': {
+    content: '""',
+    display: 'block',
+    height: 24,
+    width: 24,
+    borderRadius: px(3),
+    backgroundColor: 'inherit',
+    boxShadow: 'inset 0 0 0 var(--checkbox-border-width) var(--checkbox-border-color)',
+    outline: `2px solid var(--checkbox-outline-color)`,
+  },
+  ':where([data-state="unchecked"])': {
+    '--checkbox-background-color': 'var(--checkbox-background-color-unchecked)',
+    '--checkbox-border-color': 'var(--checkbox-border-color-unchecked)',
+    '--checkbox-border-color-disabled': 'var(--checkbox-border-color-unchecked-disabled)',
+    '--checkbox-background-color-disabled': 'var(--checkbox-background-color-unchecked-disabled)',
+  },
+  ':where([data-state="checked"])': {
+    '--checkbox-background-color': 'var(--checkbox-background-color-checked)',
+    '--checkbox-border-color': 'var(--checkbox-border-color-checked)',
+    '--checkbox-border-color-disabled': 'var(--checkbox-border-color-checked-disabled)',
+    '--checkbox-background-color-disabled': 'var(--checkbox-background-color-checked-disabled)',
+  },
+  '@media (hover: hover)': {
+    ':where(:hover:enabled)': {
+      boxShadow: `0 0 0 8px ${colors.cyan75}`,
+      '--checkbox-border-color': 'var(--checkbox-border-color-hover)',
+    },
+  },
+  ':where([data-disabled],[data-disabled] &)': {
+    '--checkbox-color': 'var(--checkbox-color-disabled)',
+    '--checkbox-border-color': 'var(--checkbox-border-color-disabled)',
+    '--checkbox-background-color': 'var(--checkbox-background-color-disabled)',
+  },
+  ':where(:focus-visible)': {
+    '--checkbox-border-color': 'var(--checkbox-border-color-focus)',
+  },
+});
+
+export const BaseCheckbox = React.forwardRef<HTMLButtonElement, BaseCheckboxProps>(
+  ({ onCheckedChange, value = 'on', ...props }, ref) => {
+    const context = useBaseCheckboxGroup();
+    const checked = context?.value?.includes(value);
+
+    return (
+      <StyledCheckboxRoot
+        ref={ref}
+        name={context?.name}
+        disabled={context?.disabled}
+        required={context?.required}
+        checked={checked}
+        value={value}
+        {...props}
+        onCheckedChange={(checked: boolean) => {
+          if (context) {
+            if (checked) {
+              context?.onItemCheck(value);
+            } else {
+              context?.onItemUncheck(value);
+            }
+          }
+          if (onCheckedChange) {
+            onCheckedChange(checked);
+          }
+        }}
+      >
+        <StyledIndicator asChild>
+          <TickMediumIcon />
+        </StyledIndicator>
+      </StyledCheckboxRoot>
+    );
+  }
+);
+
+BaseCheckbox.displayName = componentName;

packages/web-ui/src/BaseCheckbox/index.ts

@@ -0,0 +1,2 @@
+export { BaseCheckbox } from './BaseCheckbox';
+export type { BaseCheckboxProps } from './BaseCheckbox.props';

packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.context.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+export type BaseCheckboxGroupContextValue = {
+  name?: string;
+  required: boolean;
+  disabled: boolean;
+  value?: Array<string>;
+  onItemCheck(value: string): void;
+  onItemUncheck(value: string): void;
+  hasGroupHelperText: boolean;
+  'aria-describedby'?: string;
+};
+
+export const BaseCheckboxGroupContext = createContext<BaseCheckboxGroupContextValue | undefined>(
+  undefined
+);
+
+export const BaseCheckboxGroupProvider = BaseCheckboxGroupContext.Provider;
+
+export const useBaseCheckboxGroup = () => useContext(BaseCheckboxGroupContext);

packages/web-ui/src/BaseCheckboxGroup/BaseCheckboxGroup.props.ts

@@ -0,0 +1,49 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { BoxProps } from '../Box';
+import { BaseCheckboxGroupContextValue } from './BaseCheckboxGroup.context';
+
+export interface BaseCheckboxGroupProps extends ComponentPropsWithoutRef<'fieldset'> {
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+  defaultValue?: Array<string>;
+  value?: BaseCheckboxGroupContextValue['value'];
+  onValueChange?: (value: Array<string>) => void;
+  /**
+   * The label for the checkbox group. This should contain the question being
+   * answered by the checkbox group.
+   *
+   * If you don't include a label you need to ensure you use the `aria-label`
+   * or `aria-labelledby` prop to properly associate a label with the checkbox
+   * group.
+   */
+  label?: ReactNode;
+  /**
+   * Helper text for the checkbox group. Provides a hint such as specific
+   * requirements for what to choose. When displayed, child `Checkbox` or
+   * `CheckboxTile` components will not display `helperText`.
+   */
+  helperText?: ReactNode;
+  /**
+   * Position of the helper text.
+   * @default 'top'
+   */
+  helperTextPosition?: 'top' | 'bottom';
+  /**
+   * Set whether to display the helper text icon.
+   */
+  showHelperTextIcon?: boolean;
+  /** Controls whether the error message is displayed. */
+  error?: boolean;
+  /** The error message to be displayed. */
+  errorMessage?: ReactNode;
+  /**
+   * Set whether to display the error message icon.
+   */
+  showErrorMessageIcon?: boolean;
+  /**
+   * Set the width of the CheckboxGroup children, separate to the width of the
+   * entire CheckboxGroup.
+   */
+  contentWidth?: BoxProps['width'];
+}