@fragments-sdk/ui 0.7.4 → 0.7.5

package/src/components/Field/Field.test.tsx

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Field } from './index';
+
+describe('Field', () => {
+  it('renders children inside the field root', () => {
+    render(
+      <Field>
+        <Field.Label>Username</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    expect(screen.getByText('Username')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('associates label with control', () => {
+    render(
+      <Field>
+        <Field.Label>Username</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    expect(screen.getByRole('textbox')).toHaveAccessibleName('Username');
+  });
+
+  it('renders description text', () => {
+    render(
+      <Field>
+        <Field.Label>Email</Field.Label>
+        <Field.Control><input /></Field.Control>
+        <Field.Description>We will never share your email.</Field.Description>
+      </Field>
+    );
+    expect(screen.getByText('We will never share your email.')).toBeInTheDocument();
+  });
+
+  it('sets aria-invalid on control when invalid', () => {
+    render(
+      <Field invalid>
+        <Field.Label>Email</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('exposes compound component pattern', () => {
+    expect(Field.Label).toBeDefined();
+    expect(Field.Control).toBeDefined();
+    expect(Field.Description).toBeDefined();
+    expect(Field.Error).toBeDefined();
+    expect(Field.Validity).toBeDefined();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Field>
+        <Field.Label>Accessible field</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Fieldset/Fieldset.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Fieldset } from './index';
+
+describe('Fieldset', () => {
+  it('renders a fieldset element', () => {
+    render(
+      <Fieldset>
+        <Fieldset.Legend>Personal Info</Fieldset.Legend>
+        <input aria-label="Name" />
+      </Fieldset>
+    );
+    // Base UI renders a fieldset element
+    const fieldset = screen.getByRole('group');
+    expect(fieldset).toBeInTheDocument();
+  });
+
+  it('renders a legend', () => {
+    render(
+      <Fieldset>
+        <Fieldset.Legend>Contact Details</Fieldset.Legend>
+      </Fieldset>
+    );
+    expect(screen.getByText('Contact Details')).toBeInTheDocument();
+  });
+
+  it('passes disabled prop to fieldset element', () => {
+    const { container } = render(
+      <Fieldset disabled>
+        <Fieldset.Legend>Settings</Fieldset.Legend>
+        <input aria-label="Option" />
+      </Fieldset>
+    );
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset).toBeInTheDocument();
+    expect(fieldset).toHaveAttribute('data-disabled', '');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Fieldset>
+        <Fieldset.Legend>Accessible fieldset</Fieldset.Legend>
+        <input aria-label="Field" />
+      </Fieldset>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Form/Form.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Form } from './index';
+
+describe('Form', () => {
+  it('renders a form element', () => {
+    const { container } = render(<Form>content</Form>);
+    expect(container.querySelector('form')).toBeInTheDocument();
+  });
+
+  it('calls onFormSubmit when submitted', async () => {
+    const handleSubmit = vi.fn((e: React.FormEvent) => e.preventDefault());
+    const user = userEvent.setup();
+    render(
+      <Form onFormSubmit={handleSubmit} aria-label="Test form">
+        <button type="submit">Submit</button>
+      </Form>
+    );
+    await user.click(screen.getByRole('button', { name: 'Submit' }));
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children', () => {
+    render(
+      <Form aria-label="Test form">
+        <span>Child content</span>
+      </Form>
+    );
+    expect(screen.getByText('Child content')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Form aria-label="Accessible form">
+        <label htmlFor="f">Name</label>
+        <input id="f" />
+      </Form>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Grid/Grid.test.tsx

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Grid } from './index';
+
+describe('Grid', () => {
+  it('renders children', () => {
+    render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('applies fixed column class', () => {
+    const { container } = render(<Grid columns={3}>Content</Grid>);
+    expect(container.firstChild).toHaveClass('columns3');
+  });
+
+  it('applies responsive column CSS variables', () => {
+    const { container } = render(
+      <Grid columns={{ base: 1, md: 2, lg: 3 }}>Content</Grid>
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveClass('columnsResponsive');
+    expect(el.style.getPropertyValue('--fui-grid-cols')).toBe('1');
+    expect(el.style.getPropertyValue('--fui-grid-cols-md')).toBe('2');
+    expect(el.style.getPropertyValue('--fui-grid-cols-lg')).toBe('3');
+  });
+
+  it('applies gap classes', () => {
+    const { container } = render(<Grid gap="lg">Content</Grid>);
+    expect(container.firstChild).toHaveClass('gapLg');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Grid ref={ref}>Content</Grid>);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  it('renders Grid.Item with colSpan', () => {
+    const { container } = render(
+      <Grid columns={3}>
+        <Grid.Item colSpan={2}>Wide</Grid.Item>
+        <Grid.Item>Normal</Grid.Item>
+      </Grid>
+    );
+    const wideItem = screen.getByText('Wide').parentElement ?? screen.getByText('Wide');
+    // The item that contains "Wide" should have colSpan class
+    expect(container.querySelector('.colSpan2')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Grid columns={2}>
+        <Grid.Item>A</Grid.Item>
+        <Grid.Item>B</Grid.Item>
+      </Grid>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Header/Header.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Header } from './index';
+
+describe('Header', () => {
+  it('renders as a banner landmark (header element)', () => {
+    render(
+      <Header>
+        <Header.Brand>Logo</Header.Brand>
+      </Header>
+    );
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
+
+  it('renders Brand slot content', () => {
+    render(
+      <Header>
+        <Header.Brand>My App</Header.Brand>
+      </Header>
+    );
+    expect(screen.getByText('My App')).toBeInTheDocument();
+  });
+
+  it('renders Brand as a link when href is provided', () => {
+    render(
+      <Header>
+        <Header.Brand href="/">Home</Header.Brand>
+      </Header>
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toHaveAttribute('href', '/');
+  });
+
+  it('renders navigation with accessible label', () => {
+    render(
+      <Header>
+        <Header.Nav aria-label="Primary navigation">
+          <Header.NavItem href="/about">About</Header.NavItem>
+          <Header.NavItem href="/contact">Contact</Header.NavItem>
+        </Header.Nav>
+      </Header>
+    );
+    expect(screen.getByRole('navigation', { name: 'Primary navigation' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'About' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Contact' })).toBeInTheDocument();
+  });
+
+  it('marks active NavItem with aria-current="page"', () => {
+    render(
+      <Header>
+        <Header.Nav>
+          <Header.NavItem href="/about" active>About</Header.NavItem>
+          <Header.NavItem href="/contact">Contact</Header.NavItem>
+        </Header.Nav>
+      </Header>
+    );
+    expect(screen.getByRole('link', { name: 'About' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('link', { name: 'Contact' })).not.toHaveAttribute('aria-current');
+  });
+
+  it('renders Actions slot', () => {
+    render(
+      <Header>
+        <Header.Actions>
+          <button>Sign In</button>
+        </Header.Actions>
+      </Header>
+    );
+    expect(screen.getByRole('button', { name: 'Sign In' })).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Header>
+        <Header.Brand>Logo</Header.Brand>
+        <Header.Nav aria-label="Main">
+          <Header.NavItem href="/home">Home</Header.NavItem>
+        </Header.Nav>
+      </Header>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { render, expectNoA11yViolations } from '../../test/utils';
+import { Icon } from './index';
+
+// Mock Phosphor icon component
+function MockIcon(props: { size?: number; weight?: string }) {
+  return <svg data-testid="mock-icon" data-size={props.size} data-weight={props.weight} />;
+}
+
+describe('Icon', () => {
+  it('renders the icon component inside a span', () => {
+    const { container } = render(<Icon icon={MockIcon} />);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.tagName).toBe('SPAN');
+    expect(wrapper.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('passes the correct pixel size to the icon', () => {
+    const { container } = render(<Icon icon={MockIcon} size="lg" />);
+    const svg = container.querySelector('[data-testid="mock-icon"]');
+    expect(svg).toHaveAttribute('data-size', '24');
+  });
+
+  it('applies variant color class', () => {
+    const { container } = render(<Icon icon={MockIcon} variant="error" />);
+    expect(container.firstChild).toHaveClass('error');
+  });
+
+  it('does not add aria-hidden by default (wrapping span is presentational)', () => {
+    const { container } = render(<Icon icon={MockIcon} aria-hidden="true" />);
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Icon icon={MockIcon} aria-hidden="true" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Image/Image.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, act, expectNoA11yViolations } from '../../test/utils';
+import { Image } from './index';
+
+describe('Image', () => {
+  it('renders an img element with src and alt', () => {
+    render(<Image src="/photo.jpg" alt="A photo" />);
+    const img = screen.getByRole('img', { name: 'A photo' });
+    expect(img).toHaveAttribute('src', '/photo.jpg');
+  });
+
+  it('shows fallback while loading', () => {
+    render(<Image src="/photo.jpg" alt="Photo" fallback={<span>Loading...</span>} />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    // Image should be present but hidden (opacity 0)
+    const img = screen.getByRole('img');
+    expect(img.style.opacity).toBe('0');
+  });
+
+  it('shows fallback on error', () => {
+    render(<Image src="/broken.jpg" alt="Broken" fallback={<span>Error</span>} />);
+    const img = screen.getByRole('img');
+    // Simulate error
+    act(() => {
+      img.dispatchEvent(new Event('error', { bubbles: false }));
+    });
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('applies aspect ratio class', () => {
+    const { container } = render(<Image src="/photo.jpg" alt="Photo" aspectRatio="16:9" />);
+    expect(container.firstChild).toHaveClass('aspect-16-9');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Image src="/photo.jpg" alt="Accessible photo" />);
+    await expectNoA11yViolations(container);
+  });
+});

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Input } from './index';
+
+describe('Input', () => {
+  it('renders a textbox', () => {
+    render(<Input aria-label="Name" />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('renders label via Field.Label when label prop is provided', () => {
+    render(<Input label="Email" />);
+    const input = screen.getByRole('textbox');
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    // Field.Label associates via htmlFor — input should be labelled
+    expect(input).toHaveAccessibleName('Email');
+  });
+
+  it('associates helperText via aria-describedby', () => {
+    render(<Input label="Password" helperText="Must be 8+ characters" />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAccessibleDescription('Must be 8+ characters');
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<Input label="Email" error />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('disables the input when disabled prop is true', () => {
+    render(<Input label="Name" disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('renders a controlled value', () => {
+    render(<Input label="Name" value="hello" onChange={() => {}} />);
+    expect(screen.getByRole('textbox')).toHaveValue('hello');
+  });
+
+  it('renders shortcut as a kbd element', () => {
+    const { container } = render(<Input aria-label="Search" shortcut="⌘K" />);
+    const kbd = container.querySelector('kbd');
+    expect(kbd).toBeInTheDocument();
+    expect(kbd).toHaveTextContent('⌘K');
+  });
+
+  it('applies size class', () => {
+    render(<Input aria-label="Name" size="sm" />);
+    const input = screen.getByRole('textbox');
+    expect(input.className).toContain('sm');
+  });
+
+  it('forwards ref to the input element', () => {
+    const ref = vi.fn<(el: HTMLInputElement | null) => void>();
+    render(<Input aria-label="Name" ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLInputElement));
+  });
+
+  it('calls onChange with the string value', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Input label="Name" onChange={handleChange} />);
+    await user.type(screen.getByRole('textbox'), 'a');
+    expect(handleChange).toHaveBeenCalledWith('a');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Input label="Accessible input" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Link } from './index';
+
+describe('Link', () => {
+  it('renders an anchor element', () => {
+    render(<Link href="/page">Go</Link>);
+    const link = screen.getByRole('link', { name: 'Go' });
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/page');
+  });
+
+  it('applies variant and underline classes', () => {
+    render(<Link href="#" variant="subtle" underline="always">Styled</Link>);
+    const link = screen.getByRole('link');
+    expect(link).toHaveClass('subtle');
+    expect(link).toHaveClass('underline-always');
+  });
+
+  it('adds external link attributes', () => {
+    render(<Link href="https://example.com" external>External</Link>);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Link ref={ref} href="#">Ref</Link>);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Link href="/page">Accessible link</Link>);
+    await expectNoA11yViolations(container);
+  });
+});

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

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { List } from './index';
+
+describe('List', () => {
+  it('renders as <ul> by default', () => {
+    render(
+      <List>
+        <List.Item>Item 1</List.Item>
+        <List.Item>Item 2</List.Item>
+      </List>
+    );
+    expect(screen.getByRole('list').tagName).toBe('UL');
+  });
+
+  it('renders as <ol> when as="ol"', () => {
+    render(
+      <List as="ol">
+        <List.Item>First</List.Item>
+      </List>
+    );
+    expect(screen.getByRole('list').tagName).toBe('OL');
+  });
+
+  it('renders list items', () => {
+    render(
+      <List>
+        <List.Item>Alpha</List.Item>
+        <List.Item>Beta</List.Item>
+        <List.Item>Gamma</List.Item>
+      </List>
+    );
+    const items = screen.getAllByRole('listitem');
+    expect(items).toHaveLength(3);
+    expect(items[0]).toHaveTextContent('Alpha');
+  });
+
+  it('renders icon items when variant is "icon"', () => {
+    render(
+      <List variant="icon">
+        <List.Item icon={<span data-testid="star">*</span>}>Starred</List.Item>
+      </List>
+    );
+    expect(screen.getByTestId('star')).toBeInTheDocument();
+    expect(screen.getByText('Starred')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <List>
+        <List.Item>Item A</List.Item>
+        <List.Item>Item B</List.Item>
+      </List>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Listbox/Listbox.module.scss

@@ -100,7 +100,8 @@
     border-width: 2px;
   }
 
-  .itemSelected {
+  .itemSelected,
+  .itemActive {
     outline: 2px solid var(--fui-color-accent);
     outline-offset: -2px;
   }

package/src/components/Listbox/Listbox.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Listbox } from './index';
+
+describe('Listbox', () => {
+  it('renders with listbox role', () => {
+    render(
+      <Listbox aria-label="Fruits">
+        <Listbox.Item>Apple</Listbox.Item>
+        <Listbox.Item>Banana</Listbox.Item>
+      </Listbox>
+    );
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('renders items with option role', () => {
+    render(
+      <Listbox aria-label="Fruits">
+        <Listbox.Item>Apple</Listbox.Item>
+        <Listbox.Item>Banana</Listbox.Item>
+      </Listbox>
+    );
+    const options = screen.getAllByRole('option');
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveTextContent('Apple');
+  });
+
+  it('reflects selected state with aria-selected', () => {
+    render(
+      <Listbox aria-label="Fruits">
+        <Listbox.Item selected>Apple</Listbox.Item>
+        <Listbox.Item>Banana</Listbox.Item>
+      </Listbox>
+    );
+    expect(screen.getByText('Apple').closest('[role="option"]')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByText('Banana').closest('[role="option"]')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('marks disabled items with aria-disabled', () => {
+    render(
+      <Listbox aria-label="Fruits">
+        <Listbox.Item disabled>Apple</Listbox.Item>
+        <Listbox.Item>Banana</Listbox.Item>
+      </Listbox>
+    );
+    expect(screen.getByText('Apple').closest('[role="option"]')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('calls onClick when an item is clicked', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <Listbox aria-label="Fruits">
+        <Listbox.Item onClick={handleClick}>Apple</Listbox.Item>
+      </Listbox>
+    );
+    await user.click(screen.getByRole('option'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClick on disabled items', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <Listbox aria-label="Fruits">
+        <Listbox.Item disabled onClick={handleClick}>Apple</Listbox.Item>
+      </Listbox>
+    );
+    await user.click(screen.getByRole('option'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('renders groups with a label', () => {
+    render(
+      <Listbox aria-label="Food">
+        <Listbox.Group label="Fruits">
+          <Listbox.Item>Apple</Listbox.Item>
+        </Listbox.Group>
+        <Listbox.Group label="Vegetables">
+          <Listbox.Item>Carrot</Listbox.Item>
+        </Listbox.Group>
+      </Listbox>
+    );
+    expect(screen.getByText('Fruits')).toBeInTheDocument();
+    expect(screen.getByText('Vegetables')).toBeInTheDocument();
+    const groups = screen.getAllByRole('group');
+    expect(groups).toHaveLength(2);
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Listbox aria-label="Fruits">
+        <Listbox.Item>Apple</Listbox.Item>
+        <Listbox.Item selected>Banana</Listbox.Item>
+        <Listbox.Item disabled>Cherry</Listbox.Item>
+      </Listbox>
+    );
+    await expectNoA11yViolations(container);
+  });
+});