tharaday 0.7.2 → 0.7.4

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+
+import { ProgressBar } from './ProgressBar.tsx';
+
+describe('ProgressBar', () => {
+  it('renders a progressbar', () => {
+    render(<ProgressBar value={50} />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('sets aria-valuenow to the current value', () => {
+    render(<ProgressBar value={40} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '40');
+  });
+
+  it('sets aria-valuemin to 0', () => {
+    render(<ProgressBar value={50} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuemin', '0');
+  });
+
+  it('sets aria-valuemax to the max prop', () => {
+    render(<ProgressBar value={5} max={10} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuemax', '10');
+  });
+
+  it('clamps value to max', () => {
+    render(<ProgressBar value={150} max={100} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '100');
+  });
+
+  it('clamps value to 0', () => {
+    render(<ProgressBar value={-10} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0');
+  });
+
+  it('renders label text', () => {
+    render(<ProgressBar value={50} label="Uploading" />);
+    expect(screen.getByText('Uploading')).toBeInTheDocument();
+  });
+
+  it('renders percentage text when showLabel is true', () => {
+    render(<ProgressBar value={75} showLabel />);
+    expect(screen.getByText('75%')).toBeInTheDocument();
+  });
+
+  it('uses aria-label="Progress" when no label is provided', () => {
+    render(<ProgressBar value={50} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-label', 'Progress');
+  });
+
+  it('uses aria-labelledby pointing to the label when label is provided', () => {
+    render(<ProgressBar value={50} label="Loading" />);
+    const pb = screen.getByRole('progressbar');
+    const labelId = pb.getAttribute('aria-labelledby');
+    expect(labelId).toBeTruthy();
+    expect(document.getElementById(labelId!)).toHaveTextContent('Loading');
+  });
+});

package/src/components/RadioButton/RadioButton.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RadioButton } from './RadioButton.tsx';
+
+describe('RadioButton', () => {
+  it('renders a radio input', () => {
+    render(<RadioButton />);
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+
+  it('renders label and links it to the input', () => {
+    render(<RadioButton label="Option A" />);
+    expect(screen.getByLabelText('Option A')).toBeInTheDocument();
+  });
+
+  it('renders helper text', () => {
+    render(<RadioButton helperText="Recommended" />);
+    expect(screen.getByText('Recommended')).toBeInTheDocument();
+  });
+
+  it('links helper text via aria-describedby', () => {
+    render(<RadioButton helperText="Hint" />);
+    const input = screen.getByRole('radio');
+    const helperId = input.getAttribute('aria-describedby');
+    expect(helperId).toBeTruthy();
+    expect(document.getElementById(helperId!)).toHaveTextContent('Hint');
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<RadioButton disabled />);
+    expect(screen.getByRole('radio')).toBeDisabled();
+  });
+
+  it('is checked when defaultChecked', () => {
+    render(<RadioButton defaultChecked />);
+    expect(screen.getByRole('radio')).toBeChecked();
+  });
+
+  it('calls onChange when selected', async () => {
+    const onChange = vi.fn();
+    render(<RadioButton onChange={onChange} />);
+    await userEvent.click(screen.getByRole('radio'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<RadioButton error />);
+    expect(screen.getByRole('radio')).toHaveAttribute('aria-invalid');
+  });
+});

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Select } from './Select.tsx';
+
+const options = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+  { value: 'c', label: 'Option C', disabled: true },
+];
+
+describe('Select', () => {
+  it('renders a combobox', () => {
+    render(<Select options={options} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('renders label and links it to the select', () => {
+    render(<Select options={options} label="Country" />);
+    expect(screen.getByLabelText('Country')).toBeInTheDocument();
+  });
+
+  it('renders options from the options prop', () => {
+    render(<Select options={options} />);
+    expect(screen.getByRole('option', { name: 'Option A' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Option B' })).toBeInTheDocument();
+  });
+
+  it('renders children when options prop is not provided', () => {
+    render(
+      <Select>
+        <option value="x">Choice X</option>
+      </Select>
+    );
+    expect(screen.getByRole('option', { name: 'Choice X' })).toBeInTheDocument();
+  });
+
+  it('renders disabled options', () => {
+    render(<Select options={options} />);
+    expect(screen.getByRole('option', { name: 'Option C' })).toBeDisabled();
+  });
+
+  it('renders helper text', () => {
+    render(<Select options={options} helperText="Pick one" />);
+    expect(screen.getByText('Pick one')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Select options={options} disabled />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('calls onChange when selection changes', async () => {
+    const onChange = vi.fn();
+    render(<Select options={options} onChange={onChange} />);
+    await userEvent.selectOptions(screen.getByRole('combobox'), 'Option B');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<Select options={options} error />);
+    expect(screen.getByRole('combobox')).toHaveAttribute('aria-invalid');
+  });
+});

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+
+import { Slider } from './Slider.tsx';
+
+describe('Slider', () => {
+  it('renders a range input', () => {
+    render(<Slider />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+  });
+
+  it('renders label and links it to the slider', () => {
+    render(<Slider label="Volume" />);
+    expect(screen.getByLabelText('Volume')).toBeInTheDocument();
+  });
+
+  it('uses default min=0 and max=100', () => {
+    render(<Slider />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAttribute('min', '0');
+    expect(slider).toHaveAttribute('max', '100');
+  });
+
+  it('forwards min and max props', () => {
+    render(<Slider min={10} max={50} />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAttribute('min', '10');
+    expect(slider).toHaveAttribute('max', '50');
+  });
+
+  it('renders helper text', () => {
+    render(<Slider helperText="Adjust the level" />);
+    expect(screen.getByText('Adjust the level')).toBeInTheDocument();
+  });
+
+  it('shows current value when showValue is true', () => {
+    render(<Slider defaultValue={30} showValue />);
+    expect(screen.getByText('30')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Slider disabled />);
+    expect(screen.getByRole('slider')).toBeDisabled();
+  });
+
+  it('renders two sliders for a range (dual) value', () => {
+    render(<Slider defaultValue={[20, 80]} />);
+    expect(screen.getAllByRole('slider')).toHaveLength(2);
+  });
+});

package/src/components/Stepper/Step.module.css

@@ -95,13 +95,13 @@
 }
 
 [data-orientation='horizontal'] .connector {
-  height: 2px;
+  height: var(--ds-border-width-2);
   flex: 1;
   margin-left: var(--ds-space-3);
 }
 
 [data-orientation='vertical'] .connector {
-  width: 2px;
+  width: var(--ds-border-width-2);
   height: var(--ds-space-8);
   margin-left: calc(var(--stepper-marker-size) / 2 - 1px);
   margin-top: var(--ds-space-2);

package/src/components/Stepper/Stepper.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Stepper } from './Stepper.tsx';
+
+const steps = [
+  { id: 'account', label: 'Account' },
+  { id: 'profile', label: 'Profile' },
+  { id: 'review', label: 'Review' },
+];
+
+describe('Stepper', () => {
+  it('renders an ordered list', () => {
+    render(<Stepper steps={steps} currentStep="account" />);
+    expect(screen.getByRole('list')).toBeInTheDocument();
+  });
+
+  it('renders all step labels', () => {
+    render(<Stepper steps={steps} currentStep="account" />);
+    expect(screen.getByText('Account')).toBeInTheDocument();
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+    expect(screen.getByText('Review')).toBeInTheDocument();
+  });
+
+  it('uses "Progress" as default aria-label', () => {
+    render(<Stepper steps={steps} currentStep="account" />);
+    expect(screen.getByRole('list')).toHaveAttribute('aria-label', 'Progress');
+  });
+
+  it('uses custom ariaLabel when provided', () => {
+    render(<Stepper steps={steps} currentStep="account" ariaLabel="Checkout steps" />);
+    expect(screen.getByRole('list')).toHaveAttribute('aria-label', 'Checkout steps');
+  });
+
+  it('does not render interactive buttons without onStepClick', () => {
+    render(<Stepper steps={steps} currentStep="account" />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders interactive buttons when onStepClick is provided', () => {
+    render(<Stepper steps={steps} currentStep="account" onStepClick={vi.fn()} />);
+    expect(screen.getAllByRole('button')).toHaveLength(steps.length);
+  });
+
+  it('calls onStepClick with the step when clicked', async () => {
+    const onStepClick = vi.fn();
+    render(<Stepper steps={steps} currentStep="account" onStepClick={onStepClick} />);
+    await userEvent.click(screen.getByRole('button', { name: /Profile/i }));
+    expect(onStepClick).toHaveBeenCalledWith(steps[1], 1);
+  });
+});

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Switch } from './Switch.tsx';
+
+describe('Switch', () => {
+  it('renders a switch', () => {
+    render(<Switch />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('renders label and links it to the input', () => {
+    render(<Switch label="Dark mode" />);
+    expect(screen.getByLabelText('Dark mode')).toBeInTheDocument();
+  });
+
+  it('renders helper text', () => {
+    render(<Switch helperText="Toggle theme" />);
+    expect(screen.getByText('Toggle theme')).toBeInTheDocument();
+  });
+
+  it('links helper text via aria-describedby', () => {
+    render(<Switch helperText="Hint" />);
+    const input = screen.getByRole('switch');
+    const helperId = input.getAttribute('aria-describedby');
+    expect(helperId).toBeTruthy();
+    expect(document.getElementById(helperId!)).toHaveTextContent('Hint');
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Switch disabled />);
+    expect(screen.getByRole('switch')).toBeDisabled();
+  });
+
+  it('is checked when defaultChecked', () => {
+    render(<Switch defaultChecked />);
+    expect(screen.getByRole('switch')).toBeChecked();
+  });
+
+  it('calls onChange when toggled', async () => {
+    const onChange = vi.fn();
+    render(<Switch onChange={onChange} />);
+    await userEvent.click(screen.getByRole('switch'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onChange when disabled', async () => {
+    const onChange = vi.fn();
+    render(<Switch disabled onChange={onChange} />);
+    await userEvent.click(screen.getByRole('switch'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/Table/Table.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+} from './Table.tsx';
+
+const BasicTable = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Name</TableHead>
+        <TableHead>Age</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>Alice</TableCell>
+        <TableCell>30</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+describe('Table', () => {
+  it('renders a table', () => {
+    render(<BasicTable />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  it('renders column headers', () => {
+    render(<BasicTable />);
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Age' })).toBeInTheDocument();
+  });
+
+  it('renders cell content', () => {
+    render(<BasicTable />);
+    expect(screen.getByRole('cell', { name: 'Alice' })).toBeInTheDocument();
+    expect(screen.getByRole('cell', { name: '30' })).toBeInTheDocument();
+  });
+
+  it('sets aria-busy when isLoading', () => {
+    render(
+      <Table isLoading>
+        <TableBody>
+          <TableRow>
+            <TableCell>Data</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    expect(screen.getByRole('table')).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('does not set aria-busy when not loading', () => {
+    render(<BasicTable />);
+    expect(screen.getByRole('table')).not.toHaveAttribute('aria-busy');
+  });
+
+  it('renders a footer', () => {
+    render(
+      <Table>
+        <TableFooter>
+          <TableRow>
+            <TableCell>Total</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+    expect(screen.getByRole('cell', { name: 'Total' })).toBeInTheDocument();
+  });
+});

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tabs } from './Tabs.tsx';
+
+const items = [
+  { id: 'one', label: 'One', content: 'Panel One' },
+  { id: 'two', label: 'Two', content: 'Panel Two' },
+  { id: 'three', label: 'Three', content: 'Panel Three', disabled: true },
+];
+
+describe('Tabs', () => {
+  it('renders a tablist with all tabs', () => {
+    render(<Tabs items={items} />);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+    expect(screen.getAllByRole('tab')).toHaveLength(3);
+  });
+
+  it('activates the first tab by default', () => {
+    render(<Tabs items={items} />);
+    expect(screen.getByRole('tab', { name: 'One' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('shows the panel of the active tab', () => {
+    render(<Tabs items={items} />);
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Panel One');
+  });
+
+  it('activates defaultActiveId tab', () => {
+    render(<Tabs items={items} defaultActiveId="two" />);
+    expect(screen.getByRole('tab', { name: 'Two' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('switches tab on click', async () => {
+    render(<Tabs items={items} />);
+    await userEvent.click(screen.getByRole('tab', { name: 'Two' }));
+    expect(screen.getByRole('tab', { name: 'Two' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Panel Two');
+  });
+
+  it('does not activate a disabled tab on click', async () => {
+    render(<Tabs items={items} />);
+    await userEvent.click(screen.getByRole('tab', { name: 'Three' }));
+    expect(screen.getByRole('tab', { name: 'Three' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('calls onChange when switching tabs', async () => {
+    const onChange = vi.fn();
+    render(<Tabs items={items} onChange={onChange} />);
+    await userEvent.click(screen.getByRole('tab', { name: 'Two' }));
+    expect(onChange).toHaveBeenCalledWith('two');
+  });
+
+  it('navigates with ArrowRight key', async () => {
+    render(<Tabs items={items} />);
+    screen.getByRole('tab', { name: 'One' }).focus();
+    await userEvent.keyboard('{ArrowRight}');
+    expect(screen.getByRole('tab', { name: 'Two' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('navigates with ArrowLeft key', async () => {
+    render(<Tabs items={items} defaultActiveId="two" />);
+    screen.getByRole('tab', { name: 'Two' }).focus();
+    await userEvent.keyboard('{ArrowLeft}');
+    expect(screen.getByRole('tab', { name: 'One' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('links tab aria-controls to the tabpanel id', () => {
+    render(<Tabs items={items} id="t" />);
+    const tab = screen.getByRole('tab', { name: 'One' });
+    const panelId = tab.getAttribute('aria-controls');
+    expect(screen.getByRole('tabpanel').id).toBe(panelId);
+  });
+
+  it('respects controlled activeId', async () => {
+    const onChange = vi.fn();
+    render(<Tabs items={items} activeId="one" onChange={onChange} />);
+    await userEvent.click(screen.getByRole('tab', { name: 'Two' }));
+    // controlled — active tab should not change without external state update
+    expect(screen.getByRole('tab', { name: 'One' })).toHaveAttribute('aria-selected', 'true');
+    expect(onChange).toHaveBeenCalledWith('two');
+  });
+});

package/src/components/Textarea/Textarea.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Textarea } from './Textarea.tsx';
+
+describe('Textarea', () => {
+  it('renders a textarea', () => {
+    render(<Textarea />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('renders label and links it to the textarea', () => {
+    render(<Textarea label="Message" />);
+    expect(screen.getByLabelText('Message')).toBeInTheDocument();
+  });
+
+  it('renders helper text', () => {
+    render(<Textarea helperText="Max 500 characters" />);
+    expect(screen.getByText('Max 500 characters')).toBeInTheDocument();
+  });
+
+  it('links helper text via aria-describedby', () => {
+    render(<Textarea helperText="Hint" />);
+    const textarea = screen.getByRole('textbox');
+    const helperId = textarea.getAttribute('aria-describedby');
+    expect(helperId).toBeTruthy();
+    expect(document.getElementById(helperId!)).toHaveTextContent('Hint');
+  });
+
+  it('uses 4 rows by default', () => {
+    render(<Textarea />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('rows', '4');
+  });
+
+  it('forwards rows prop', () => {
+    render(<Textarea rows={8} />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('rows', '8');
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Textarea disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('calls onChange when typing', async () => {
+    const onChange = vi.fn();
+    render(<Textarea onChange={onChange} />);
+    await userEvent.type(screen.getByRole('textbox'), 'hello');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<Textarea error />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid');
+  });
+});

package/src/components/Tooltip/Tooltip.module.css

@@ -20,8 +20,8 @@
 }
 
 .dark {
-  background-color: var(--neutral-900);
-  color: var(--neutral-0);
+  background-color: var(--ds-p-neutral-900);
+  color: var(--ds-p-neutral-0);
 }
 
 .light {
@@ -75,7 +75,7 @@
 }
 
 .top.dark::after {
-  border-color: var(--neutral-900) transparent transparent transparent;
+  border-color: var(--ds-p-neutral-900) transparent transparent transparent;
 }
 
 .top.light::after {
@@ -89,7 +89,7 @@
 }
 
 .bottom.dark::after {
-  border-color: transparent transparent var(--neutral-900) transparent;
+  border-color: transparent transparent var(--ds-p-neutral-900) transparent;
 }
 
 .bottom.light::after {
@@ -103,7 +103,7 @@
 }
 
 .left.dark::after {
-  border-color: transparent transparent transparent var(--neutral-900);
+  border-color: transparent transparent transparent var(--ds-p-neutral-900);
 }
 
 .left.light::after {
@@ -117,7 +117,7 @@
 }
 
 .right.dark::after {
-  border-color: transparent var(--neutral-900) transparent transparent;
+  border-color: transparent var(--ds-p-neutral-900) transparent transparent;
 }
 
 .right.light::after {