tharaday 0.7.1 → 0.7.3

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;
@@ -39,15 +39,14 @@
   color: var(--ds-text-1);
 }
 
-.closeButton {
-  margin: 0;
-  padding: 0 !important;
-  width: var(--ds-space-8) !important;
-  height: var(--ds-space-8) !important;
-  min-width: unset !important;
-  font-size: var(--ds-font-size-lg) !important;
+/* Double class increases specificity to (0,2,0) — wins over Button's single-class size rules */
+.closeButton.closeButton {
+  padding: 0;
+  width: var(--ds-space-8);
+  height: var(--ds-space-8);
+  font-size: var(--ds-font-size-lg);
   font-weight: var(--ds-font-weight-semibold);
-  line-height: 1 !important;
+  line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,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/Modal/Modal.tsx

@@ -61,15 +61,14 @@ export const Modal = ({
       document.body.style.overflow = 'hidden';
       window.addEventListener('keydown', handleKeyDown);
 
-      // Focus the first element or the close button after a small delay to ensure it's rendered
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
         if (focusableElements && focusableElements.length > 0) {
           focusableElements[0].focus();
         }
-      }, 0);
+      });
     }
 
     return () => {
@@ -108,7 +107,14 @@ export const Modal = ({
             aria-label="Close modal"
             disabled={isLoading}
           >
-            ✕
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+              <path
+                d="M1 1L9 9M9 1L1 9"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
           </Button>
         </div>
         <div className={styles.content}>{children}</div>

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/Notification/Notification.tsx

@@ -26,7 +26,14 @@ export const Notification = ({
           className={styles.closeButton}
           aria-label="Close notification"
         >
-          ✕
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path
+              d="M1 1L9 9M9 1L1 9"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
         </Button>
       )}
     </div>

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

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