tharaday 0.7.2 → 0.7.3

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

@@ -27,16 +27,16 @@
 
 .control {
   flex-shrink: 0;
-  height: 1.125rem;
-  width: 1.125rem;
+  height: var(--ds-checkbox-size);
+  width: var(--ds-checkbox-size);
   background-color: var(--ds-surface-0);
-  border: 0.125rem solid var(--ds-border-1);
+  border: var(--ds-border-width-2) solid var(--ds-border-1);
   border-radius: var(--ds-radius-sm);
   transition: all var(--ds-transition-fast);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 0.125rem;
+  margin-top: var(--ds-border-width-2);
 }
 
 .input:checked ~ .control {
@@ -56,8 +56,8 @@
 
 .checkmark {
   color: var(--ds-text-on-brand);
-  width: 0.75rem;
-  height: 0.75rem;
+  width: var(--ds-space-3);
+  height: var(--ds-space-3);
   display: none;
 }
 
@@ -80,7 +80,7 @@
   font-family: var(--ds-font-family-base);
   font-size: var(--ds-font-size-xs);
   color: var(--ds-text-2);
-  margin-left: calc(1.125rem + var(--ds-space-2));
+  margin-left: calc(var(--ds-checkbox-size) + var(--ds-space-2));
 }
 
 .errorText {

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Checkbox } from './Checkbox.tsx';
+
+describe('Checkbox', () => {
+  it('renders a checkbox input', () => {
+    render(<Checkbox />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('renders label text', () => {
+    render(<Checkbox label="Accept terms" />);
+    expect(screen.getByLabelText('Accept terms')).toBeInTheDocument();
+  });
+
+  it('renders helper text', () => {
+    render(<Checkbox helperText="Required field" />);
+    expect(screen.getByText('Required field')).toBeInTheDocument();
+  });
+
+  it('links helper text via aria-describedby', () => {
+    render(<Checkbox label="Accept" helperText="Required" />);
+    const input = screen.getByRole('checkbox');
+    const helperId = input.getAttribute('aria-describedby');
+    expect(helperId).toBeTruthy();
+    expect(document.getElementById(helperId!)).toHaveTextContent('Required');
+  });
+
+  it('does not set aria-describedby when no helperText', () => {
+    render(<Checkbox label="Accept" />);
+    expect(screen.getByRole('checkbox')).not.toHaveAttribute('aria-describedby');
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Checkbox disabled />);
+    expect(screen.getByRole('checkbox')).toBeDisabled();
+  });
+
+  it('is checked when defaultChecked', () => {
+    render(<Checkbox defaultChecked />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  it('calls onChange when clicked', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox onChange={onChange} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onChange when disabled', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox disabled onChange={onChange} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<Checkbox error />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-invalid');
+  });
+
+  it('does not set aria-invalid without error', () => {
+    render(<Checkbox />);
+    expect(screen.getByRole('checkbox')).not.toHaveAttribute('aria-invalid');
+  });
+});

package/src/components/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Dropdown } from './Dropdown.tsx';
+
+// jsdom doesn't implement scrollIntoView
+Element.prototype.scrollIntoView = vi.fn();
+
+const options = [
+  { value: 'a', label: 'Apple' },
+  { value: 'b', label: 'Banana' },
+  { value: 'c', label: 'Cherry', disabled: true },
+];
+
+describe('Dropdown', () => {
+  it('renders the trigger button', () => {
+    render(<Dropdown options={options} />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no value is selected', () => {
+    render(<Dropdown options={options} placeholder="Pick a fruit" />);
+    expect(screen.getByRole('button')).toHaveTextContent('Pick a fruit');
+  });
+
+  it('renders label and links it to the trigger', () => {
+    render(<Dropdown options={options} label="Fruit" />);
+    expect(screen.getByLabelText('Fruit')).toBeInTheDocument();
+  });
+
+  it('is closed by default', () => {
+    render(<Dropdown options={options} />);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('opens listbox on click', async () => {
+    render(<Dropdown options={options} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('shows all options when open', async () => {
+    render(<Dropdown options={options} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getAllByRole('option')).toHaveLength(3);
+  });
+
+  it('selects an option on click and closes', async () => {
+    render(<Dropdown options={options} />);
+    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('option', { name: 'Banana' }));
+    expect(screen.getByRole('button')).toHaveTextContent('Banana');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('calls onChange when an option is selected', async () => {
+    const onChange = vi.fn();
+    render(<Dropdown options={options} onChange={onChange} />);
+    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('option', { name: 'Apple' }));
+    expect(onChange).toHaveBeenCalledWith('a');
+  });
+
+  it('does not select a disabled option', async () => {
+    const onChange = vi.fn();
+    render(<Dropdown options={options} onChange={onChange} />);
+    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('option', { name: 'Cherry' }));
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('button')).not.toHaveTextContent('Cherry');
+  });
+
+  it('closes on Escape key', async () => {
+    render(<Dropdown options={options} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('opens and navigates with ArrowDown', async () => {
+    render(<Dropdown options={options} />);
+    screen.getByRole('button').focus();
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Dropdown options={options} disabled />);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('renders helper text', () => {
+    render(<Dropdown options={options} helperText="Choose one" />);
+    expect(screen.getByText('Choose one')).toBeInTheDocument();
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<Dropdown options={options} error />);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-invalid');
+  });
+});

package/src/components/Input/Input.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Input } from './Input.tsx';
+
+describe('Input', () => {
+  it('renders a text input', () => {
+    render(<Input />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('renders label and links it to the input', () => {
+    render(<Input label="Email" />);
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+  });
+
+  it('renders helper text', () => {
+    render(<Input helperText="Enter your email" />);
+    expect(screen.getByText('Enter your email')).toBeInTheDocument();
+  });
+
+  it('links helper text via aria-describedby', () => {
+    render(<Input helperText="Hint" />);
+    const input = screen.getByRole('textbox');
+    const helperId = input.getAttribute('aria-describedby');
+    expect(helperId).toBeTruthy();
+    expect(document.getElementById(helperId!)).toHaveTextContent('Hint');
+  });
+
+  it('does not set aria-describedby when no helperText', () => {
+    render(<Input />);
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
+  });
+
+  it('passes placeholder through', () => {
+    render(<Input placeholder="Search..." />);
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Input disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('calls onChange when typing', async () => {
+    const onChange = vi.fn();
+    render(<Input onChange={onChange} />);
+    await userEvent.type(screen.getByRole('textbox'), 'hello');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<Input error />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid');
+  });
+
+  it('does not set aria-invalid without error', () => {
+    render(<Input />);
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid');
+  });
+});

package/src/components/List/List.module.css

@@ -5,12 +5,12 @@
 
 .unordered {
   list-style-type: disc;
-  padding-left: 1.5rem;
+  padding-left: var(--ds-space-6);
 }
 
 .ordered {
   list-style-type: decimal;
-  padding-left: 1.5rem;
+  padding-left: var(--ds-space-6);
 }
 
 .none {
@@ -22,34 +22,34 @@
   gap: 0;
 }
 .gap-1 {
-  gap: 0.25rem;
+  gap: var(--ds-space-1);
 }
 .gap-2 {
-  gap: 0.5rem;
+  gap: var(--ds-space-2);
 }
 .gap-3 {
-  gap: 0.75rem;
+  gap: var(--ds-space-3);
 }
 .gap-4 {
-  gap: 1rem;
+  gap: var(--ds-space-4);
 }
 .gap-5 {
-  gap: 1.25rem;
+  gap: var(--ds-space-5);
 }
 .gap-6 {
-  gap: 1.5rem;
+  gap: var(--ds-space-6);
 }
 .gap-8 {
-  gap: 2rem;
+  gap: var(--ds-space-8);
 }
 .gap-10 {
-  gap: 2.5rem;
+  gap: var(--ds-space-10);
 }
 .gap-12 {
-  gap: 3rem;
+  gap: var(--ds-space-12);
 }
 .gap-14 {
-  gap: 3.5rem;
+  gap: var(--ds-space-14);
 }
 
 /* Margin and Padding Utility classes - simplified for List if needed, 

package/src/components/List/List.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+
+import { List } from './List.tsx';
+
+describe('List', () => {
+  it('renders an unordered list by default', () => {
+    render(
+      <List>
+        <List.Item>Item</List.Item>
+      </List>
+    );
+    expect(screen.getByRole('list')).toBeInTheDocument();
+    // ul doesn't have a specific role query distinguishing ul/ol, check tagName
+    expect(screen.getByRole('list').tagName).toBe('UL');
+  });
+
+  it('renders an ordered list when variant is "ordered"', () => {
+    render(
+      <List variant="ordered">
+        <List.Item>Item</List.Item>
+      </List>
+    );
+    expect(screen.getByRole('list').tagName).toBe('OL');
+  });
+
+  it('renders children', () => {
+    render(
+      <List>
+        <List.Item>Alpha</List.Item>
+        <List.Item>Beta</List.Item>
+      </List>
+    );
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+  });
+
+  it('renders list items', () => {
+    render(
+      <List>
+        <List.Item>One</List.Item>
+        <List.Item>Two</List.Item>
+      </List>
+    );
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+  });
+});

package/src/components/Modal/Modal.module.css

@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--ds-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -70,16 +70,16 @@
 
 /* Sizes */
 .sm {
-  max-width: 25rem;
+  max-width: var(--ds-content-width-sm);
 }
 .md {
-  max-width: 37.5rem;
+  max-width: var(--ds-content-width-md);
 }
 .lg {
-  max-width: 50rem;
+  max-width: var(--ds-content-width-lg);
 }
 .xl {
-  max-width: 62.5rem;
+  max-width: var(--ds-content-width-xl);
 }
 .full {
   max-width: 100%;

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Modal } from './Modal.tsx';
+
+describe('Modal', () => {
+  it('renders nothing when closed', () => {
+    render(<Modal isOpen={false} onClose={vi.fn()} title="Test" />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('renders a dialog when open', () => {
+    render(<Modal isOpen onClose={vi.fn()} title="Test" />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('renders the title', () => {
+    render(<Modal isOpen onClose={vi.fn()} title="My Modal" />);
+    expect(screen.getByText('My Modal')).toBeInTheDocument();
+  });
+
+  it('sets aria-labelledby pointing to the title', () => {
+    render(<Modal isOpen onClose={vi.fn()} title="My Modal" />);
+    const dialog = screen.getByRole('dialog');
+    const titleId = dialog.getAttribute('aria-labelledby');
+    expect(titleId).toBeTruthy();
+    expect(document.getElementById(titleId!)).toHaveTextContent('My Modal');
+  });
+
+  it('renders children', () => {
+    render(
+      <Modal isOpen onClose={vi.fn()} title="Test">
+        <p>Modal body</p>
+      </Modal>
+    );
+    expect(screen.getByText('Modal body')).toBeInTheDocument();
+  });
+
+  it('renders footer when provided', () => {
+    render(
+      <Modal isOpen onClose={vi.fn()} title="Test" footer={<button>Confirm</button>}>
+        Body
+      </Modal>
+    );
+    expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', async () => {
+    const onClose = vi.fn();
+    render(<Modal isOpen onClose={onClose} title="Test" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Close modal' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when overlay is clicked', async () => {
+    const onClose = vi.fn();
+    const { container } = render(<Modal isOpen onClose={onClose} title="Test" />);
+    const overlay = container.ownerDocument.body.querySelector('[class*="overlay"]') as HTMLElement;
+    await userEvent.click(overlay);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when Escape key is pressed', async () => {
+    const onClose = vi.fn();
+    render(<Modal isOpen onClose={onClose} title="Test" />);
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClose on Escape when isLoading', async () => {
+    const onClose = vi.fn();
+    render(<Modal isOpen isLoading onClose={onClose} title="Test" />);
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('disables close button when isLoading', () => {
+    render(<Modal isOpen isLoading onClose={vi.fn()} title="Test" />);
+    expect(screen.getByRole('button', { name: 'Close modal' })).toBeDisabled();
+  });
+
+  it('has aria-modal="true"', () => {
+    render(<Modal isOpen onClose={vi.fn()} title="Test" />);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+  });
+});

package/src/components/NavBar/NavBar.module.css

@@ -5,12 +5,12 @@
 }
 
 .container {
-  max-width: 75rem;
+  max-width: var(--ds-content-width-2xl);
   margin: 0 auto;
   padding: 0 var(--ds-space-4);
   display: flex;
   align-items: stretch;
-  height: 4rem;
+  height: var(--ds-space-16);
 }
 
 .leftSection {
@@ -47,7 +47,7 @@
   text-decoration: none;
   font-size: var(--ds-font-size-sm);
   font-weight: var(--ds-font-weight-medium);
-  border-bottom: 0.125rem solid transparent;
+  border-bottom: var(--ds-border-width-2) solid transparent;
   background: none;
   border-top: none;
   border-left: none;

package/src/components/Notification/Notification.module.css

@@ -7,7 +7,7 @@
   font-family: var(--ds-font-family-base);
   gap: var(--ds-space-3);
   box-shadow: var(--ds-shadow-sm);
-  max-width: 25rem;
+  max-width: var(--ds-content-width-sm);
 }
 
 .content {
@@ -25,14 +25,14 @@
   line-height: var(--ds-line-height-base);
 }
 
-.closeButton {
+/* Double class increases specificity to (0,2,0) — wins over Button's single-class size rules */
+.closeButton.closeButton {
   flex-shrink: 0;
   margin-top: calc(var(--ds-space-1) * -1);
   margin-right: calc(var(--ds-space-2) * -1);
-  padding: 0 !important;
-  width: var(--ds-space-6) !important;
-  height: var(--ds-space-6) !important;
-  min-width: unset !important;
+  padding: 0;
+  width: var(--ds-space-6);
+  height: var(--ds-space-6);
   opacity: 0.6;
 }
 

package/src/components/Notification/Notification.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Notification } from './Notification.tsx';
+
+describe('Notification', () => {
+  it('renders with role="alert"', () => {
+    render(<Notification>Something happened</Notification>);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('renders children as the message', () => {
+    render(<Notification>File saved successfully</Notification>);
+    expect(screen.getByText('File saved successfully')).toBeInTheDocument();
+  });
+
+  it('renders a title when provided', () => {
+    render(<Notification title="Success">Done</Notification>);
+    expect(screen.getByText('Success')).toBeInTheDocument();
+  });
+
+  it('does not render a close button without onClose', () => {
+    render(<Notification>Message</Notification>);
+    expect(screen.queryByRole('button', { name: 'Close notification' })).not.toBeInTheDocument();
+  });
+
+  it('renders a close button when onClose is provided', () => {
+    render(<Notification onClose={vi.fn()}>Message</Notification>);
+    expect(screen.getByRole('button', { name: 'Close notification' })).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', async () => {
+    const onClose = vi.fn();
+    render(<Notification onClose={onClose}>Message</Notification>);
+    await userEvent.click(screen.getByRole('button', { name: 'Close notification' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Pagination } from './Pagination.tsx';
+
+describe('Pagination', () => {
+  it('renders nothing when count is 0', () => {
+    const { container } = render(<Pagination count={0} onPageChange={vi.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders a nav landmark', () => {
+    render(<Pagination count={5} onPageChange={vi.fn()} />);
+    expect(screen.getByRole('navigation')).toBeInTheDocument();
+  });
+
+  it('renders page buttons', () => {
+    render(<Pagination count={3} onPageChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Page 1, current page' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 2' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Page 3' })).toBeInTheDocument();
+  });
+
+  it('marks the current page with aria-current="page"', () => {
+    render(<Pagination count={5} defaultPage={2} onPageChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Page 2, current page' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+  });
+
+  it('calls onPageChange when a page is clicked', async () => {
+    const onPageChange = vi.fn();
+    render(<Pagination count={5} onPageChange={onPageChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Page 3' }));
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it('disables First and Prev buttons on first page', () => {
+    render(<Pagination count={5} defaultPage={1} onPageChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Go to first page' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Go to previous page' })).toBeDisabled();
+  });
+
+  it('disables Next and Last buttons on last page', () => {
+    render(<Pagination count={5} defaultPage={5} onPageChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Go to next page' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Go to last page' })).toBeDisabled();
+  });
+
+  it('advances page with Next button', async () => {
+    const onPageChange = vi.fn();
+    render(<Pagination count={5} defaultPage={2} onPageChange={onPageChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it('goes back with Prev button', async () => {
+    const onPageChange = vi.fn();
+    render(<Pagination count={5} defaultPage={3} onPageChange={onPageChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it('disables all buttons when disabled prop is set', () => {
+    render(<Pagination count={5} defaultPage={3} disabled onPageChange={vi.fn()} />);
+    const buttons = screen.getAllByRole('button');
+    buttons.forEach((btn) => expect(btn).toBeDisabled());
+  });
+});