@boostdev/design-system-components 0.1.18 → 1.0.0

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, useId } from 'react';
+import { InputHTMLAttributes, ReactNode, useId } from 'react';
 import css from './Checkbox.module.css';
 import { Message } from '../atoms/Message';
 import { Label } from '../atoms/Label';
@@ -6,7 +6,7 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  label: string;
+  label: ReactNode;
   name: string;
   error?: string;
   hint?: string;

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

@@ -0,0 +1,29 @@
+@layer component {
+  .group {
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
+  }
+
+  .legend {
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--medium);
+    color: var(--bds-on-bg);
+    padding: 0;
+    margin-block-end: var(--bds-space_xs);
+  }
+
+  .required {
+    color: var(--bds-error);
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
+  }
+}

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

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from '../Checkbox';
+import { CheckboxGroup } from './CheckboxGroup';
+
+describe('CheckboxGroup', () => {
+  it('renders a fieldset with a legend', () => {
+    render(
+      <CheckboxGroup legend="Notifications">
+        <Checkbox label="Email" name="email" />
+      </CheckboxGroup>
+    );
+    expect(screen.getByRole('group', { name: 'Notifications' })).toBeInTheDocument();
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  it('renders child checkboxes', () => {
+    render(
+      <CheckboxGroup legend="Options">
+        <Checkbox label="Email" name="email" />
+        <Checkbox label="SMS" name="sms" />
+      </CheckboxGroup>
+    );
+    expect(screen.getByRole('checkbox', { name: 'Email' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'SMS' })).toBeInTheDocument();
+  });
+
+  it('shows an error message', () => {
+    render(
+      <CheckboxGroup legend="Required" error="Select at least one option">
+        <Checkbox label="Option" name="opt" />
+      </CheckboxGroup>
+    );
+    expect(screen.getByText('Select at least one option')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(
+      <CheckboxGroup legend="Preferences" hint="You can select multiple">
+        <Checkbox label="Option" name="opt" />
+      </CheckboxGroup>
+    );
+    expect(screen.getByText('You can select multiple')).toBeInTheDocument();
+  });
+
+  it('links error message via aria-describedby', () => {
+    render(
+      <CheckboxGroup legend="Required" error="Required field">
+        <Checkbox label="Option" name="opt" />
+      </CheckboxGroup>
+    );
+    const fieldset = screen.getByRole('group');
+    const errorMsg = screen.getByText('Required field');
+    expect(fieldset).toHaveAttribute('aria-describedby');
+    expect(fieldset.getAttribute('aria-describedby')).toContain(errorMsg.id);
+  });
+
+  it('links hint message via aria-describedby', () => {
+    render(
+      <CheckboxGroup legend="Options" hint="Pick any">
+        <Checkbox label="Option" name="opt" />
+      </CheckboxGroup>
+    );
+    const fieldset = screen.getByRole('group');
+    const hintMsg = screen.getByText('Pick any');
+    expect(fieldset).toHaveAttribute('aria-describedby');
+    expect(fieldset.getAttribute('aria-describedby')).toContain(hintMsg.id);
+  });
+
+  it('marks fieldset as required when required prop is set', () => {
+    render(
+      <CheckboxGroup legend="Required" required>
+        <Checkbox label="Option" name="opt" />
+      </CheckboxGroup>
+    );
+    expect(screen.getByRole('group')).toHaveAttribute('aria-required', 'true');
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  it('disables the fieldset when disabled prop is set', () => {
+    render(
+      <CheckboxGroup legend="Disabled" disabled>
+        <Checkbox label="Option" name="opt" />
+      </CheckboxGroup>
+    );
+    expect(screen.getByRole('group')).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from '../Checkbox';
+import { CheckboxGroup } from './CheckboxGroup';
+
+const meta = {
+  title: 'Form/CheckboxGroup',
+  component: CheckboxGroup,
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { legend: 'Notifications' },
+  render: args => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Email" name="notify_email" />
+      <Checkbox label="SMS" name="notify_sms" />
+      <Checkbox label="Push" name="notify_push" />
+    </CheckboxGroup>
+  ),
+};
+
+export const WithError: Story = {
+  args: { legend: 'Required options', error: 'Select at least one option' },
+  render: args => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Email" name="notify_email" />
+      <Checkbox label="SMS" name="notify_sms" />
+    </CheckboxGroup>
+  ),
+};
+
+export const WithHint: Story = {
+  args: { legend: 'Preferences', hint: 'You can select multiple options' },
+  render: args => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Dark mode" name="pref_dark" />
+      <Checkbox label="Compact view" name="pref_compact" />
+    </CheckboxGroup>
+  ),
+};
+
+export const Required: Story = {
+  args: { legend: 'Agreement', required: true },
+  render: args => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="I agree to the terms" name="terms" />
+      <Checkbox label="I agree to the privacy policy" name="privacy" />
+    </CheckboxGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { legend: 'Unavailable options', disabled: true },
+  render: args => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Email" name="notify_email" defaultChecked />
+      <Checkbox label="SMS" name="notify_sms" />
+    </CheckboxGroup>
+  ),
+};

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

@@ -0,0 +1,46 @@
+import { ReactNode, useId } from 'react';
+import css from './CheckboxGroup.module.css';
+import { Message } from '../atoms/Message';
+import { cn } from '@boostdev/design-system-foundation';
+
+export interface CheckboxGroupProps {
+  legend: string;
+  children: ReactNode;
+  error?: string;
+  hint?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function CheckboxGroup({
+  legend,
+  children,
+  error,
+  hint,
+  required,
+  disabled,
+  className,
+}: Readonly<CheckboxGroupProps>) {
+  const id = useId();
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
+
+  return (
+    <fieldset
+      className={cn(css.group, className)}
+      disabled={disabled}
+      aria-required={required || undefined}
+      aria-describedby={describedBy}
+    >
+      <legend className={css.legend}>
+        {legend}
+        {required && <span className={css.required} aria-hidden="true"> *</span>}
+      </legend>
+      <div className={css.items}>{children}</div>
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </fieldset>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps } from './CheckboxGroup';

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

@@ -13,22 +13,31 @@
   .input {
     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, currentcolor);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--combobox_color_bg, var(--color_bg));
-    color: var(--combobox_color, var(--color_on-bg));
-    transition: var(--animation_transition);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    padding: var(--bds-space_s);
+    padding-inline-end: var(--bds-space_xxl);
+    border: var(--combobox_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--xs);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--combobox_radius, var(--bdc_radius));
+    box-shadow: var(--combobox_shadow, var(--bdc_shadow));
+    background-color: var(--combobox_color_bg, var(--bds-bg));
+    color: var(--combobox_color, var(--bds-on-bg));
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .input:focus {
-    --combobox_border-color: var(--color_interactive);
+    --bdc_color: var(--bdc_color--focus);
+  }
 
-    outline: none;
-    box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+  .input:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   .input:disabled {
@@ -37,20 +46,16 @@
   }
 
   .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%);
+    --bdc_color: var(--bdc_color--error);
   }
 
   .chevron {
     position: absolute;
-    inset-inline-end: var(--space_s);
+    inset-inline-end: var(--bds-space_s);
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--combobox_color, var(--color_on-bg));
+    color: var(--combobox_color, var(--bds-on-bg));
   }
 
   .chevron svg {
@@ -60,39 +65,44 @@
 
   .listbox {
     position: absolute;
-    top: calc(100% + var(--space_xxs));
+    top: calc(100% + var(--bds-space_xxs));
     left: 0;
     right: 0;
-    z-index: var(--z-index_dropdown);
+    z-index: var(--bds-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 currentcolor;
-    background-color: var(--combobox_color, var(--color_bg));
-    color: var(--combobox_on-color, var(--color_on-bg));
-    box-shadow: var(--shadow_m);
+    padding: var(--bds-space_xxs) 0;
+    border: var(--combobox_listbox-border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--xs);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--combobox_listbox-radius, var(--bdc_radius));
+    background-color: var(--combobox_color, var(--bds-bg));
+    color: var(--combobox_on-color, var(--bds-on-bg));
+    box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
   }
 
   .option {
     display: flex;
     align-items: center;
-    padding: var(--space_xs) var(--space_m);
-    font-size: var(--font_size--body);
-    color: var(--combobox_color, var(--color_on-bg));
+    padding: var(--bds-space_xs) var(--bds-space_m);
+    font-size: var(--bds-font_size--body);
+    color: var(--combobox_color, var(--bds-on-bg));
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .option.--highlighted {
-    background-color: var(--color_bg--subtle);
-    color: var(--color_interactive);
+    background-color: var(--bds-bg--subtle);
+    color: var(--bds-interactive);
   }
 
   .option.--selected {
-    font-weight: var(--font_weight--semibold);
+    font-weight: var(--bds-font_weight--semibold);
   }
 
   .option.--disabled {

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

@@ -156,7 +156,6 @@ export function Combobox({
           <ul
             id={listboxId}
             role="listbox"
-            aria-label={String(label)}
             className={css.listbox}
           >
             {filtered.map((option, index) => (

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

@@ -4,24 +4,32 @@
     flex-direction: column;
   }
 
+  .fieldLabel {
+    display: flex;
+    align-items: center;
+    font-family: var(--bds-font_family--body);
+    color: var(--bds-on-bg);
+    margin-block-end: var(--bds-space_xs);
+  }
+
   .dropZone {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--space_xs);
-    padding: var(--space_l) var(--space_m);
+    gap: var(--bds-space_xs);
+    padding: var(--bds-space_l) var(--bds-space_m);
     border: 2px dashed currentcolor;
-    border-radius: var(--border_radius--s);
-    color: var(--fileInput_color, var(--color_on-bg));
+    border-radius: var(--bds-border_radius--s);
+    color: var(--fileInput_color, var(--bds-on-bg));
     cursor: pointer;
     text-align: center;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .dropZone:focus-within {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
     border-color: var(--fileInput_border-color, currentcolor);
   }
 
@@ -31,7 +39,7 @@
   }
 
   .hasError {
-    border-color: var(--color_error);
+    border-color: var(--bds-error);
   }
 
   .isDisabled {
@@ -46,18 +54,18 @@
   }
 
   .prompt {
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg--muted);
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
   }
 
   .prompt strong {
-    color: var(--color_interactive);
-    font-weight: var(--font_weight--semibold);
+    color: var(--bds-interactive);
+    font-weight: var(--bds-font_weight--semibold);
   }
 
   .acceptHint {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
   }
 
   .hiddenInput {
@@ -72,8 +80,8 @@
 
   @media (hover: hover) and (pointer: fine) {
     .dropZone:not(.isDisabled):hover {
-      border-color: var(--color_interactive);
-      background-color: rgb(from var(--color_interactive) r g b / 4%);
+      border-color: var(--bds-interactive);
+      background-color: rgb(from var(--bds-interactive) r g b / 4%);
     }
   }
 }

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

@@ -1,6 +1,5 @@
 import { useId, useRef, useState, DragEvent, ChangeEvent } from 'react';
 import css from './FileInput.module.css';
-import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
@@ -11,6 +10,7 @@ interface FileInputProps {
   accept?: string;
   multiple?: boolean;
   disabled?: boolean;
+  required?: boolean;
   error?: string;
   hint?: string;
   onChange?: (files: FileList | null) => void;
@@ -23,6 +23,7 @@ export function FileInput({
   accept,
   multiple = false,
   disabled = false,
+  required,
   error,
   hint,
   onChange,
@@ -73,7 +74,6 @@ export function FileInput({
 
   return (
     <InputContainer className={cn(css.formGroup, className)}>
-      <Label id={uid} label={label} />
       <label
         htmlFor={uid}
         className={cn(css.dropZone, isDragging && css.isDragging, error && css.hasError, disabled && css.isDisabled)}
@@ -81,6 +81,7 @@ export function FileInput({
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
       >
+        <span className={css.fieldLabel}>{label}</span>
         <svg aria-hidden="true" className={css.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
           <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
         </svg>
@@ -101,6 +102,8 @@ export function FileInput({
           disabled={disabled}
           aria-invalid={!!error}
           aria-describedby={describedBy}
+          aria-required={required || undefined}
+          required={required}
           className={css.hiddenInput}
           onChange={handleChange}
         />

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

@@ -7,28 +7,33 @@
   }
 
   .input {
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    padding: var(--space_s);
-    border: 1px solid var(--input_border-color, currentcolor);
-    border-radius: var(--input_radius, var(--border_radius--xs));
-    transition: var(--animation_transition);
-    color: var(--input_color, var(--color_on-bg));
-    background-color: var(--input_color_bg, var(--color_bg));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    padding: var(--bds-space_s);
+    border: var(--input_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--xs);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--input_radius, var(--bdc_radius));
+    box-shadow: var(--input_shadow, var(--bdc_shadow));
+    color: var(--input_color, var(--bds-on-bg));
+    background-color: var(--input_color_bg, var(--bds-bg));
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .input:focus {
-    --input_border-color: var(--color_interactive);
-
-    outline: none;
-    box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+    --bdc_color: var(--bdc_color--focus);
   }
 
-  .inputError {
-    --input_border-color: var(--color_error);
+  .input:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
-  .inputError:focus {
-    --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .inputError {
+    --bdc_color: var(--bdc_color--error);
   }
 }

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

@@ -22,6 +22,7 @@ export function FormInput({
   error,
   hint,
   className,
+  required,
   ...props
 }: FormInputProps) {
   const id = name + useId();
@@ -36,8 +37,10 @@ export function FormInput({
         aria-invalid={!!error}
         aria-describedby={describedBy}
         aria-label={ariaLabel}
+        aria-required={required || undefined}
         id={id}
         name={name}
+        required={required}
         className={cn(css.input, error && css.inputError)}
         {...props}
       />

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

@@ -7,27 +7,37 @@
   .inputRow {
     display: flex;
     align-items: stretch;
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+    border: var(--numberInput_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--xs);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--numberInput_radius, var(--bdc_radius));
+    box-shadow: var(--numberInput_shadow, var(--bdc_shadow));
     overflow: hidden;
-    transition: var(--animation_transition);
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .inputRow:focus-within {
-    border-color: var(--numberInput_border-color, var(--color_interactive));
-    box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+    --bdc_color: var(--bdc_color--focus);
+  }
+
+  .inputRow:focus-within:has(:focus-visible) {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   .input {
     flex: 1;
     border: none;
     outline: none;
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
     text-align: center;
-    padding: var(--space_s);
+    padding: var(--bds-space_s);
     background: transparent;
-    color: var(--numberInput_color, var(--color_on-bg));
+    color: var(--numberInput_color, var(--bds-on-bg));
     min-width: 0;
     appearance: textfield;
   }
@@ -38,11 +48,7 @@
   }
 
   .inputError {
-    --numberInput_border-color: var(--color_error);
-  }
-
-  .inputError:focus-within {
-    --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+    --bdc_color: var(--bdc_color--error);
   }
 
   .stepper {
@@ -50,11 +56,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--space_xs);
-    background-color: var(--color_bg--subtle);
-    color: var(--numberInput_color, var(--color_on-bg));
+    padding: var(--bds-space_xs);
+    background-color: var(--bds-bg--subtle);
+    color: var(--numberInput_color, var(--bds-on-bg));
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     flex-shrink: 0;
   }
 
@@ -70,7 +76,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .stepper:not(:disabled):hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
       opacity: 0.7;
     }
   }