tharaday 0.7.1 → 0.7.3

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Accordion } from './Accordion.tsx';
+
+const items = [
+  { id: 'a', title: 'First', content: 'Content A' },
+  { id: 'b', title: 'Second', content: 'Content B' },
+  { id: 'c', title: 'Third', content: 'Content C', isDisabled: true },
+];
+
+describe('Accordion', () => {
+  it('renders all item headers', () => {
+    render(<Accordion items={items} />);
+    expect(screen.getByRole('button', { name: 'First' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Second' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Third' })).toBeInTheDocument();
+  });
+
+  it('collapses all items by default', () => {
+    render(<Accordion items={items} />);
+    expect(screen.getByRole('button', { name: 'First' })).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('expands defaultExpanded items on mount', () => {
+    render(<Accordion items={items} defaultExpanded={['a']} />);
+    expect(screen.getByRole('button', { name: 'First' })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('button', { name: 'Second' })).toHaveAttribute(
+      'aria-expanded',
+      'false'
+    );
+  });
+
+  it('expands an item on click', async () => {
+    render(<Accordion items={items} />);
+    await userEvent.click(screen.getByRole('button', { name: 'First' }));
+    expect(screen.getByRole('button', { name: 'First' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('collapses an expanded item on click', async () => {
+    render(<Accordion items={items} defaultExpanded={['a']} />);
+    await userEvent.click(screen.getByRole('button', { name: 'First' }));
+    expect(screen.getByRole('button', { name: 'First' })).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('closes previously open item when allowMultiple is false', async () => {
+    render(<Accordion items={items} />);
+    await userEvent.click(screen.getByRole('button', { name: 'First' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Second' }));
+    expect(screen.getByRole('button', { name: 'First' })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByRole('button', { name: 'Second' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('allows multiple expanded items when allowMultiple is true', async () => {
+    render(<Accordion items={items} allowMultiple />);
+    await userEvent.click(screen.getByRole('button', { name: 'First' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Second' }));
+    expect(screen.getByRole('button', { name: 'First' })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('button', { name: 'Second' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('does not expand a disabled item', async () => {
+    render(<Accordion items={items} />);
+    expect(screen.getByRole('button', { name: 'Third' })).toBeDisabled();
+    await userEvent.click(screen.getByRole('button', { name: 'Third' }));
+    expect(screen.getByRole('button', { name: 'Third' })).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('sets aria-controls pointing to the content region', () => {
+    render(<Accordion items={items} id="acc" />);
+    const btn = screen.getByRole('button', { name: 'First' });
+    const contentId = btn.getAttribute('aria-controls');
+    expect(document.getElementById(contentId!)).toBeInTheDocument();
+  });
+
+  it('sets aria-labelledby on the content region pointing to the button', () => {
+    render(<Accordion items={items} id="acc" />);
+    const btn = screen.getByRole('button', { name: 'First' });
+    const region = document.getElementById(btn.getAttribute('aria-controls')!);
+    expect(region).toHaveAttribute('aria-labelledby', btn.id);
+  });
+});

package/src/components/Accordion/Accordion.tsx

@@ -46,7 +46,20 @@ export const Accordion = ({
               aria-controls={`${componentId}-content-${item.id}`}
             >
               <span>{item.title}</span>
-              <span className={clsx(styles.icon, isExpanded && styles.iconExpanded)}>▼</span>
+              <span
+                className={clsx(styles.icon, isExpanded && styles.iconExpanded)}
+                aria-hidden="true"
+              >
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <path
+                    d="M2.5 4.5L6 8L9.5 4.5"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </span>
             </button>
             <div
               id={`${componentId}-content-${item.id}`}

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Avatar } from './Avatar.tsx';
+
+describe('Avatar', () => {
+  it('renders an image when src is provided', () => {
+    render(<Avatar src="photo.jpg" alt="Alice" />);
+    expect(screen.getByRole('img', { name: 'Alice' })).toBeInTheDocument();
+  });
+
+  it('shows initials from name when no src', () => {
+    render(<Avatar name="Alice Doe" />);
+    expect(screen.getByText('AD')).toBeInTheDocument();
+  });
+
+  it('shows only two initials for multi-word names', () => {
+    render(<Avatar name="First Middle Last" />);
+    expect(screen.getByText('FM')).toBeInTheDocument();
+  });
+
+  it('renders custom fallback when provided', () => {
+    render(<Avatar fallback="AB" />);
+    expect(screen.getByText('AB')).toBeInTheDocument();
+  });
+
+  it('renders a default icon svg when no src, name, or fallback', () => {
+    const { container } = render(<Avatar />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('falls back to initials when image fails to load', () => {
+    render(<Avatar src="broken.jpg" name="Bob Smith" />);
+    fireEvent.error(screen.getByRole('img'));
+    expect(screen.getByText('BS')).toBeInTheDocument();
+  });
+});

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+
+import { Badge } from './Badge.tsx';
+
+describe('Badge', () => {
+  it('renders children', () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText('New')).toBeInTheDocument();
+  });
+
+  it('forwards extra props', () => {
+    render(<Badge data-testid="badge">Label</Badge>);
+    expect(screen.getByTestId('badge')).toBeInTheDocument();
+  });
+});

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+
+import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs.tsx';
+
+describe('Breadcrumbs', () => {
+  it('renders a navigation landmark with label "Breadcrumbs"', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem href="/home">Home</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getByRole('navigation', { name: 'Breadcrumbs' })).toBeInTheDocument();
+  });
+
+  it('renders an ordered list', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem>Home</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getByRole('list')).toBeInTheDocument();
+  });
+
+  it('renders all items', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem href="/home">Home</BreadcrumbItem>
+        <BreadcrumbItem href="/blog">Blog</BreadcrumbItem>
+        <BreadcrumbItem isCurrent>Post</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Blog')).toBeInTheDocument();
+    expect(screen.getByText('Post')).toBeInTheDocument();
+  });
+
+  it('renders a link for items with href', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem href="/home">Home</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('href', '/home');
+  });
+
+  it('renders a span (not a link) for the current item', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem href="/page" isCurrent>
+          Current
+        </BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.queryByRole('link', { name: 'Current' })).not.toBeInTheDocument();
+    expect(screen.getByText('Current')).toBeInTheDocument();
+  });
+
+  it('sets aria-current="page" on the current item', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem isCurrent>Now</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getByText('Now')).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders default separator between items', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem>A</BreadcrumbItem>
+        <BreadcrumbItem>B</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getByText('/')).toBeInTheDocument();
+  });
+
+  it('renders custom separator', () => {
+    render(
+      <Breadcrumbs separator=">">
+        <BreadcrumbItem>A</BreadcrumbItem>
+        <BreadcrumbItem>B</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getByText('>')).toBeInTheDocument();
+  });
+
+  it('does not render a separator after the last item', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem>A</BreadcrumbItem>
+        <BreadcrumbItem>B</BreadcrumbItem>
+      </Breadcrumbs>
+    );
+    expect(screen.getAllByText('/')).toHaveLength(1);
+  });
+});

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);
+  });
+});