@boostdev/design-system-components 0.1.1

package/src/components/interaction/Toast/Toast.spec.tsx

@@ -0,0 +1,41 @@
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ToastProvider, useToast } from './Toast';
+
+const ToastTrigger = ({ message = 'Test toast', variant = 'info' as const }) => {
+  const { showToast } = useToast();
+  return <button onClick={() => showToast(message, variant)}>Show Toast</button>;
+};
+
+const setup = (props = {}) =>
+  render(
+    <ToastProvider>
+      <ToastTrigger {...props} />
+    </ToastProvider>,
+  );
+
+describe('Toast', () => {
+  it('shows a toast when showToast is called', async () => {
+    const user = userEvent.setup();
+    setup({ message: 'Hello toast' });
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByText('Hello toast')).toBeInTheDocument();
+  });
+
+  it('removes the toast after 5 seconds', () => {
+    vi.useFakeTimers();
+    setup({ message: 'Timed toast' });
+    act(() => { fireEvent.click(screen.getByRole('button')); });
+    expect(screen.getByText('Timed toast')).toBeInTheDocument();
+    act(() => { vi.advanceTimersByTime(5100); });
+    expect(screen.queryByText('Timed toast')).not.toBeInTheDocument();
+    vi.useRealTimers();
+  });
+
+  it('throws when useToast is used outside ToastProvider', () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const Bad = () => { useToast(); return null; };
+    expect(() => render(<Bad />)).toThrow('useToast must be used within a ToastProvider');
+    errorSpy.mockRestore();
+  });
+});

package/src/components/interaction/Toast/Toast.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToastProvider, useToast } from './Toast';
+import { Button } from '../Button/Button';
+
+const meta = {
+  title: 'Interaction/Toast',
+  component: ToastProvider,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ToastProvider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ToastDemo = ({ variant }: { variant?: 'success' | 'error' | 'info' }) => {
+  const { showToast } = useToast();
+  return (
+    <Button onClick={() => showToast(`This is a ${variant ?? 'info'} toast`, variant ?? 'info')}>
+      Show {variant ?? 'info'} toast
+    </Button>
+  );
+};
+
+export const Success: Story = {
+  render: () => (
+    <ToastProvider>
+      <ToastDemo variant="success" />
+    </ToastProvider>
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <ToastProvider>
+      <ToastDemo variant="error" />
+    </ToastProvider>
+  ),
+};
+
+export const Info: Story = {
+  render: () => (
+    <ToastProvider>
+      <ToastDemo variant="info" />
+    </ToastProvider>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <ToastProvider>
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <ToastDemo variant="success" />
+        <ToastDemo variant="error" />
+        <ToastDemo variant="info" />
+      </div>
+    </ToastProvider>
+  ),
+};

package/src/components/interaction/Toast/Toast.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect, createContext, useContext, ReactNode, useCallback, useMemo } from 'react';
+import css from './Toast.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+type ToastVariant = 'success' | 'error' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+}
+
+interface ToastContextType {
+  showToast: (message: string, variant: ToastVariant) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback((message: string, variant: ToastVariant) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts(prev => [...prev, { id, message, variant }]);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+  }, []);
+
+  const value = useMemo(() => ({ showToast }), [showToast]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className={css.toastContainer}>
+        {toasts.map(toast => (
+          <ToastItem
+            key={toast.id}
+            toast={toast}
+            onRemove={() => removeToast(toast.id)}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+function ToastItem({ toast, onRemove }: { toast: Toast; onRemove: () => void }) {
+  useEffect(() => {
+    const timer = setTimeout(onRemove, 5000);
+    return () => clearTimeout(timer);
+  }, [onRemove]);
+
+  return <div className={cn(css.toast, css[`--variant_${toast.variant}`])}>{toast.message}</div>;
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}

package/src/components/interaction/Toast/index.ts

@@ -0,0 +1 @@
+export { ToastProvider, useToast } from './Toast';

package/src/components/interaction/form/Checkbox/Checkbox.module.css

@@ -0,0 +1,61 @@
+@layer component {
+  .checkboxGroup {
+    --inputSize: calc(var(--space_s) * 2);
+
+    display: flex;
+    flex-direction: column;
+    margin-block-end: var(--space_m);
+  }
+
+  .inputWrapper {
+    display: flex;
+    align-items: stretch;
+    gap: var(--space_xs);
+  }
+
+  .checkbox {
+    margin-block-start: 0.25em;
+    width: var(--inputSize);
+    height: var(--inputSize);
+    border: 1px solid var(--color_border);
+    border-radius: var(--border_radius--xs);
+    appearance: none;
+    background-color: var(--color_bg);
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+  }
+
+  .checkbox:checked {
+    background-color: var(--color_green);
+    border-color: var(--color_green);
+    box-shadow: 0 0 0 2px var(--color_green);
+  }
+
+  .checkbox:checked::after {
+    content: '';
+    position: absolute;
+    left: 0.6em;
+    top: 0.2em;
+    width: 0.5em;
+    height: 1em;
+    border: solid var(--color_on-green);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  .checkbox:focus {
+    outline: none;
+    border-color: var(--color_interactive);
+    box-shadow: 0 0 0 2px var(--color_green);
+  }
+
+  .checkboxError {
+    border-color: var(--color_error);
+  }
+
+  .checkboxError:focus {
+    border-color: var(--color_error);
+    box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  }
+}

package/src/components/interaction/form/Checkbox/Checkbox.spec.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('renders with a label', () => {
+    render(<Checkbox label="Accept terms" name="terms" />);
+    expect(screen.getByLabelText('Accept terms')).toBeInTheDocument();
+  });
+
+  it('renders a checkbox input', () => {
+    render(<Checkbox label="Opt in" name="optin" />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('can be toggled', async () => {
+    const user = userEvent.setup();
+    render(<Checkbox label="Toggle" name="toggle" />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+    await user.click(checkbox);
+    expect(checkbox).toBeChecked();
+  });
+
+  it('shows an error message', () => {
+    render(<Checkbox label="Accept" name="accept" error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(<Checkbox label="Subscribe" name="sub" hint="Weekly updates" />);
+    expect(screen.getByText('Weekly updates')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Checkbox label="Disabled" name="disabled" disabled />);
+    expect(screen.getByRole('checkbox')).toBeDisabled();
+  });
+});

package/src/components/interaction/form/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+
+const meta = {
+  title: 'Form/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Accept terms', name: 'terms' } };
+export const Checked: Story = { args: { label: 'Checked', name: 'checked', defaultChecked: true } };
+export const WithError: Story = { args: { label: 'Required', name: 'required', error: 'This field is required' } };
+export const WithHint: Story = { args: { label: 'Subscribe', name: 'subscribe', hint: 'Receive weekly updates' } };
+export const Disabled: Story = { args: { label: 'Disabled', name: 'disabled', disabled: true } };

package/src/components/interaction/form/Checkbox/Checkbox.tsx

@@ -0,0 +1,39 @@
+import { InputHTMLAttributes, useId } from 'react';
+import css from './Checkbox.module.css';
+import { Message } from '../atoms/Message';
+import { Label } from '../atoms/Label';
+import { cn } from '@boostdev/design-system-foundation';
+import { InputContainer } from '../atoms/InputContainer';
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: string;
+  name: string;
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function Checkbox({ label, name, error, hint, className, ...props }: CheckboxProps) {
+  const id = name + useId();
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = !!error ? errorId : hintId;
+
+  return (
+    <InputContainer className={cn(css.checkboxGroup, className)}>
+      <div className={css.inputWrapper}>
+        <input
+          aria-describedby={describedBy}
+          type="checkbox"
+          id={id}
+          name={name}
+          className={`${css.checkbox} ${error ? css.checkboxError : ''}`}
+          {...props}
+        />
+        <Label id={id} label={label} />
+      </div>
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

package/src/components/interaction/form/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/src/components/interaction/form/Combobox/Combobox.module.css

@@ -0,0 +1,104 @@
+@layer component {
+  .formGroup {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .inputWrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .input {
+    --combobox_border-color: var(--color_on-bg);
+    --combobox_focus-ring:   0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+
+    appearance: none;
+    width: 100%;
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    padding: var(--space_s);
+    padding-inline-end: var(--space_xxl);
+    border: 1px solid var(--combobox_border-color);
+    border-radius: var(--border_radius--xs);
+    background-color: var(--color_bg);
+    color: var(--color_on-bg);
+    transition: var(--animation_transition);
+  }
+
+  .input:focus {
+    --combobox_border-color: var(--color_interactive);
+
+    outline: none;
+    box-shadow: var(--combobox_focus-ring);
+  }
+
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .inputError {
+    --combobox_border-color: var(--color_error);
+  }
+
+  .inputError:focus {
+    --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  }
+
+  .chevron {
+    position: absolute;
+    inset-inline-end: var(--space_s);
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    color: var(--color_on-bg);
+  }
+
+  .chevron svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .listbox {
+    position: absolute;
+    top: calc(100% + var(--space_xxs));
+    left: 0;
+    right: 0;
+    z-index: var(--z-index_dropdown);
+    max-height: 15rem;
+    overflow-y: auto;
+    list-style: none;
+    margin: 0;
+    padding: var(--space_xxs) 0;
+    border-radius: var(--border_radius--xs);
+    border: 1px solid var(--color_bg--subtle);
+    background-color: var(--color_bg);
+    box-shadow: var(--shadow_m);
+  }
+
+  .option {
+    display: flex;
+    align-items: center;
+    padding: var(--space_xs) var(--space_m);
+    font-size: var(--font_size--body);
+    color: var(--color_on-bg);
+    cursor: pointer;
+    transition: var(--animation_transition);
+  }
+
+  .option.--highlighted {
+    background-color: var(--color_bg--subtle);
+    color: var(--color_interactive);
+  }
+
+  .option.--selected {
+    font-weight: var(--font_weight--semibold);
+  }
+
+  .option.--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}

package/src/components/interaction/form/Combobox/Combobox.spec.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Combobox } from './Combobox';
+
+const options = [
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France', disabled: true },
+];
+
+describe('Combobox', () => {
+  it('renders with a label', () => {
+    render(<Combobox label="Country" name="country" options={options} />);
+    expect(screen.getByLabelText('Country')).toBeInTheDocument();
+  });
+
+  it('renders an input with role="combobox"', () => {
+    render(<Combobox label="Country" name="country" options={options} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('opens the listbox on focus', async () => {
+    const user = userEvent.setup();
+    render(<Combobox label="Country" name="country" options={options} />);
+    await user.click(screen.getByRole('combobox'));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('filters options as the user types', async () => {
+    const user = userEvent.setup();
+    render(<Combobox label="Country" name="country" options={options} />);
+    await user.type(screen.getByRole('combobox'), 'Be');
+    expect(screen.getByRole('option', { name: 'Belgium' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Netherlands' })).not.toBeInTheDocument();
+  });
+
+  it('selects an option on click and closes the listbox', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Combobox label="Country" name="country" options={options} onChange={onChange} />);
+    await user.click(screen.getByRole('combobox'));
+    await user.click(screen.getByRole('option', { name: 'Netherlands' }));
+    expect(onChange).toHaveBeenCalledWith('nl');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toHaveValue('Netherlands');
+  });
+
+  it('selects highlighted option with Enter key', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Combobox label="Country" name="country" options={options} onChange={onChange} />);
+    await user.click(screen.getByRole('combobox'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+    expect(onChange).toHaveBeenCalledOnce();
+  });
+
+  it('closes the listbox on Escape', async () => {
+    const user = userEvent.setup();
+    render(<Combobox label="Country" name="country" options={options} />);
+    await user.click(screen.getByRole('combobox'));
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('shows an error message', () => {
+    render(<Combobox label="Country" name="country" options={options} error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(<Combobox label="Country" name="country" options={options} hint="Start typing to search" />);
+    expect(screen.getByText('Start typing to search')).toBeInTheDocument();
+  });
+
+  it('marks the combobox as aria-invalid when there is an error', () => {
+    render(<Combobox label="Country" name="country" options={options} error="Required" />);
+    expect(screen.getByRole('combobox')).toHaveAttribute('aria-invalid', 'true');
+  });
+});

package/src/components/interaction/form/Combobox/Combobox.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Combobox } from './Combobox';
+
+const options = [
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'es', label: 'Spain' },
+  { value: 'it', label: 'Italy' },
+  { value: 'pt', label: 'Portugal', disabled: true },
+];
+
+const meta = {
+  title: 'Form/Combobox',
+  component: Combobox,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Country', name: 'country', options, placeholder: 'Search…' } };
+export const WithError: Story = { args: { label: 'Country', name: 'country', options, error: 'Please select a valid country' } };
+export const WithHint: Story = { args: { label: 'Country', name: 'country', options, hint: 'Start typing to filter options' } };