feat: added Checkbox component (#336)

Nieuw component: Checkbox

---------

Co-authored-by: Vlad Afanasev <[email protected]>

.changeset/rude-fishes-give.md

@@ -0,0 +1,5 @@
+---
+"@lux-design-system/components-react": minor
+---
+
+Nieuw component: Checkbox

packages/components-react/src/checkbox/Checkbox.css

@@ -0,0 +1,27 @@
+.lux-checkbox:checked:focus {
+  border-color: var(--lux-checkbox-checked-focus-border-color);
+  background-color: var(--lux-checkbox-checked-focus-background-color);
+  color: var(--lux-checkbox-checked-focus-color);
+}
+
+.lux-checkbox:checked:hover {
+  border-color: var(--lux-checkbox-checked-hover-border-color);
+  background-color: var(--lux-checkbox-checked-hover-background-color);
+  color: var(--lux-checkbox-checked-hover-color);
+}
+
+.lux-checkbox:checked:active {
+  border-color: var(--lux-checkbox-checked-active-border-color);
+  background-color: var(--lux-checkbox-checked-active-background-color);
+  color: var(--lux-checkbox-checked-active-color);
+}
+
+.lux-checkbox:checked:disabled {
+  border-color: var(--lux-checkbox-checked-disabled-border-color);
+  background-color: var(--lux-checkbox-checked-disabled-background-color);
+  color: var(--lux-checkbox-checked-disabled-color);
+}
+
+.lux-checkbox--disabled {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,48 @@
+import {
+  Checkbox as UtrechtCheckbox,
+  type CheckboxProps as UtrechtCheckboxProps,
+} from '@utrecht/component-library-react/dist/css-module';
+import './Checkbox.css';
+import clsx from 'clsx';
+import { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+
+export type LuxCheckboxProps = UtrechtCheckboxProps & {
+  invalid?: boolean;
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+const CLASSNAME = {
+  checkbox: 'lux-checkbox',
+  disabled: 'lux-checkbox--disabled',
+};
+
+export const LuxCheckbox = forwardRef(
+  (
+    { disabled, className, name, checked, ...restProps }: PropsWithChildren<LuxCheckboxProps>,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const combinedClassName = clsx(
+      CLASSNAME.checkbox,
+      {
+        [CLASSNAME.disabled]: disabled,
+      },
+      className,
+    );
+
+    return (
+      <UtrechtCheckbox
+        ref={ref}
+        name={name}
+        className={combinedClassName}
+        checked={checked}
+        disabled={disabled}
+        {...restProps}
+      />
+    );
+  },
+);
+
+LuxCheckbox.displayName = 'LuxCheckbox';

packages/components-react/src/checkbox/test/Checkbox.spec.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { LuxCheckbox } from '../Checkbox';
+
+describe('Checkbox', () => {
+  it('renders a checkbox', () => {
+    render(<LuxCheckbox name="test-checkbox" />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it('renders a checkbox with correct name attribute', () => {
+    render(<LuxCheckbox name="test-checkbox" />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('name', 'test-checkbox');
+  });
+
+  it('renders a checked checkbox when checked prop is true', () => {
+    render(<LuxCheckbox name="test-checkbox" checked={true} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('renders an unchecked checkbox when checked prop is false', () => {
+    render(<LuxCheckbox name="test-checkbox" checked={false} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('renders a disabled checkbox when disabled prop is true', () => {
+    render(<LuxCheckbox name="test-checkbox" disabled={true} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+    expect(checkbox).toHaveClass('lux-checkbox--disabled');
+  });
+
+  it('applies custom className when provided', () => {
+    const customClass = 'custom-checkbox';
+    render(<LuxCheckbox name="test-checkbox" className={customClass} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveClass(customClass);
+  });
+
+  it('forwards additional props to the checkbox input', () => {
+    render(<LuxCheckbox name="test-checkbox" data-testid="test-id" aria-label="test label" />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('data-testid', 'test-id');
+    expect(checkbox).toHaveAttribute('aria-label', 'test label');
+  });
+
+  it('combines multiple classes correctly', () => {
+    render(<LuxCheckbox name="test-checkbox" className="custom-class" disabled={true} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveClass('lux-checkbox');
+    expect(checkbox).toHaveClass('lux-checkbox--disabled');
+    expect(checkbox).toHaveClass('custom-class');
+  });
+});

packages/components-react/src/index.ts

@@ -25,5 +25,6 @@ export {
 export { LuxTextbox, INPUT_TYPES, type LuxTextboxProps } from './textbox/Textbox';
 export { LuxFormFieldTextbox, type LuxFormFieldTextboxProps } from './form-field-textbox/FormFieldTextbox';
 export { LuxParagraph, type LuxParagraphProps } from './paragraph/Paragraph';
+export { LuxCheckbox, type LuxCheckboxProps } from './checkbox/Checkbox';
 export { LuxPreHeading, type LuxPreHeadingProps } from './pre-heading/PreHeading';
 export { LuxSection, type LuxSectionProps } from './section/Section';

packages/storybook/package.json

@@ -53,6 +53,7 @@
     "@types/react-dom": "18.3.0",
     "@utrecht/alert-css": "1.1.0",
     "@utrecht/button-css": "1.2.0",
+    "@utrecht/checkbox-css": "1.3.0",
     "@utrecht/form-field-css": "1.3.0",
     "@utrecht/form-field-description-css": "1.3.0",
     "@utrecht/form-field-error-message-css": "1.3.1",

packages/storybook/src/react-components/checkbox/checkbox.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Controls, Markdown, Meta } from "@storybook/blocks";
+import markdown from "@utrecht/checkbox-css/README.md?raw";
+import * as CheckboxStories from "./checkbox.stories.tsx";
+import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+<CitationDocumentation
+  component="Utrecht Checkbox"
+  url="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-checkbox--docs"
+/>
+
+<Markdown>{markdown}</Markdown>
+
+## Notes
+
+- The checkbox supports different states: checked, disabled, invalid, required
+- All states can be combined
+- The component inherits its styling from the Utrecht Design System
+
+## Playground
+
+<Canvas of={CheckboxStories.Playground} />
+<Controls of={CheckboxStories.Playground} />
+
+## Default
+
+<Canvas of={CheckboxStories.Default} />
+
+## States
+
+### Checked
+
+<Canvas of={CheckboxStories.Checked} />
+
+### Disabled
+
+<Canvas of={CheckboxStories.Disabled} />
+
+### Checked and Disabled
+
+<Canvas of={CheckboxStories.CheckedAndDisabled} />
+
+### Hover
+
+<Canvas of={CheckboxStories.Hover} />
+
+### Focus
+
+<Canvas of={CheckboxStories.Focus} />
+
+### Focus Visible
+
+<Canvas of={CheckboxStories.FocusVisible} />

packages/storybook/src/react-components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,100 @@
+import { LuxCheckbox } from '@lux-design-system/components-react';
+import tokens from '@lux-design-system/design-tokens/dist/index.json';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  title: 'React Components/Checkbox',
+  id: 'react-components-checkbox',
+  component: LuxCheckbox,
+  subcomponents: {},
+  parameters: {
+    tokens,
+    tokensPrefix: 'utrecht-checkbox',
+  },
+  argTypes: {
+    checked: {
+      description: 'Checked state',
+      control: 'boolean',
+    },
+    disabled: {
+      description: 'Disabled state',
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof LuxCheckbox>;
+
+export default meta;
+
+const CheckboxTemplate: Story = {
+  args: {
+    checked: false,
+    disabled: false,
+    invalid: false,
+    required: false,
+  },
+  render: ({ ...args }) => <LuxCheckbox {...args} />,
+};
+
+export const Playground: Story = {
+  ...CheckboxTemplate,
+  name: 'Playground',
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+  tags: ['!autodocs'],
+};
+
+export const Default: Story = {
+  name: 'Default',
+  args: {},
+};
+
+export const Checked: Story = {
+  name: 'Checked',
+  args: {
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  args: {
+    disabled: true,
+  },
+};
+
+export const CheckedAndDisabled: Story = {
+  name: 'Checked and Disabled',
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const Hover: Story = {
+  ...CheckboxTemplate,
+  name: 'Hover',
+  parameters: {
+    pseudo: { hover: true },
+  },
+};
+
+export const Focus: Story = {
+  ...CheckboxTemplate,
+  name: 'Focus',
+  parameters: {
+    pseudo: { focus: true, focusVisible: true },
+  },
+};
+
+export const FocusVisible: Story = {
+  ...CheckboxTemplate,
+  name: 'Focus Visible',
+  parameters: {
+    pseudo: { focusVisible: true },
+  },
+};