paris 0.19.0 → 0.20.0

package/src/stories/select/Select.test.tsx

@@ -0,0 +1,233 @@
+import { useState } from 'react';
+import { render, screen, waitFor } from '../../test/render';
+import type { Option } from './Select';
+import { Select } from './Select';
+
+const options: Option[] = [
+    { id: '1', node: 'Single' },
+    { id: '2', node: 'EP' },
+    { id: '3', node: 'Album (LP)' },
+    { id: '4', node: 'Compilation' },
+];
+
+function ControlledSelect(props: Partial<React.ComponentProps<typeof Select>>) {
+    const [value, setValue] = useState<string | null>((props.value as string | null) ?? null);
+    return (
+        <Select
+            options={options}
+            value={value}
+            onChange={(v) => {
+                setValue(v);
+                (props.onChange as (v: string | null) => void)?.(v);
+            }}
+            {...props}
+        />
+    );
+}
+
+function ControlledMultiSelect(props: Partial<React.ComponentProps<typeof Select>> & { initialValue?: string[] }) {
+    const [value, setValue] = useState<string[]>(props.initialValue ?? []);
+    return (
+        <Select
+            options={options}
+            value={value}
+            onChange={(v) => {
+                setValue(v as string[]);
+                (props.onChange as (v: string[] | null) => void)?.(v as string[] | null);
+            }}
+            multiple
+            {...props}
+        />
+    );
+}
+
+describe('Select', () => {
+    describe('listbox kind (default)', () => {
+        it('renders with placeholder text', () => {
+            render(<Select options={options} placeholder="Pick one" />);
+            expect(screen.getByText('Pick one')).toBeInTheDocument();
+        });
+
+        it('renders default placeholder when none provided', () => {
+            render(<Select options={options} />);
+            expect(screen.getByText('Select an option')).toBeInTheDocument();
+        });
+
+        it('renders label and description via Field wrapper', () => {
+            render(<Select options={options} label="Release type" description="Choose a release type." />);
+            expect(screen.getByText('Release type')).toBeInTheDocument();
+            expect(screen.getByText('Choose a release type.')).toBeInTheDocument();
+        });
+
+        it('shows selected value text in the button', () => {
+            render(<Select options={options} value="2" />);
+            expect(screen.getByText('EP')).toBeInTheDocument();
+        });
+
+        it('opens the dropdown and displays options on click', async () => {
+            const { user } = render(<ControlledSelect />);
+            await user.click(screen.getByText('Select an option'));
+
+            await waitFor(() => {
+                expect(screen.getByText('Single')).toBeInTheDocument();
+                expect(screen.getByText('EP')).toBeInTheDocument();
+                expect(screen.getByText('Album (LP)')).toBeInTheDocument();
+                expect(screen.getByText('Compilation')).toBeInTheDocument();
+            });
+        });
+
+        it('selects an option and calls onChange', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(<ControlledSelect onChange={handleChange} />);
+
+            await user.click(screen.getByText('Select an option'));
+            await waitFor(() => {
+                expect(screen.getByText('EP')).toBeInTheDocument();
+            });
+
+            await user.click(screen.getByText('EP'));
+            expect(handleChange).toHaveBeenCalledWith('2');
+        });
+
+        it('displays selected option text after selection', async () => {
+            const { user } = render(<ControlledSelect />);
+
+            await user.click(screen.getByText('Select an option'));
+            await waitFor(() => {
+                expect(screen.getByText('Album (LP)')).toBeInTheDocument();
+            });
+
+            await user.click(screen.getByText('Album (LP)'));
+
+            await waitFor(() => {
+                const button = screen.getByRole('button', { expanded: false });
+                expect(button).toHaveTextContent('Album (LP)');
+            });
+        });
+
+        it('sets aria-disabled and status data attribute when disabled', () => {
+            render(<Select options={options} disabled placeholder="Pick one" />);
+            const button = screen.getByText('Pick one').closest('button');
+            expect(button).toHaveAttribute('aria-disabled', 'true');
+            expect(button).toHaveAttribute('data-status', 'disabled');
+        });
+
+        it('applies error status data attribute', () => {
+            render(<Select options={options} status="error" placeholder="Pick one" />);
+            const button = screen.getByText('Pick one').closest('button');
+            expect(button).toHaveAttribute('data-status', 'error');
+        });
+
+        it('applies success status data attribute', () => {
+            render(<Select options={options} status="success" placeholder="Pick one" />);
+            const button = screen.getByText('Pick one').closest('button');
+            expect(button).toHaveAttribute('data-status', 'success');
+        });
+    });
+
+    describe('multi-select', () => {
+        it('shows placeholder when no items selected', () => {
+            render(<Select options={options} multiple value={[]} placeholder="Select items" />);
+            expect(screen.getByText('Select items')).toBeInTheDocument();
+        });
+
+        it('shows single item text when one item selected', () => {
+            render(<Select options={options} multiple value={['1']} />);
+            expect(screen.getByText('Single')).toBeInTheDocument();
+        });
+
+        it('shows count when multiple items selected', () => {
+            render(<Select options={options} multiple value={['1', '2']} />);
+            expect(screen.getByText('2 items')).toBeInTheDocument();
+        });
+
+        it('shows "All" text when all items selected', () => {
+            render(<Select options={options} multiple value={['1', '2', '3', '4']} />);
+            expect(screen.getByText('All items')).toBeInTheDocument();
+        });
+
+        it('uses custom multipleItemsName', () => {
+            render(<Select options={options} multiple value={['1', '2']} multipleItemsName="releases" />);
+            expect(screen.getByText('2 releases')).toBeInTheDocument();
+        });
+
+        it('shows "All <custom>" when all selected with custom name', () => {
+            render(<Select options={options} multiple value={['1', '2', '3', '4']} multipleItemsName="releases" />);
+            expect(screen.getByText('All releases')).toBeInTheDocument();
+        });
+
+        it('calls onChange with updated array on selection', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(<ControlledMultiSelect onChange={handleChange} />);
+
+            await user.click(screen.getByText('Select an option'));
+            await waitFor(() => {
+                expect(screen.getByText('Single')).toBeInTheDocument();
+            });
+
+            await user.click(screen.getByText('Single'));
+            expect(handleChange).toHaveBeenCalled();
+        });
+    });
+
+    describe('radio kind', () => {
+        it('renders radio options', () => {
+            render(<Select options={options} kind="radio" />);
+            expect(screen.getByText('Single')).toBeInTheDocument();
+            expect(screen.getByText('EP')).toBeInTheDocument();
+            expect(screen.getByText('Album (LP)')).toBeInTheDocument();
+            expect(screen.getByText('Compilation')).toBeInTheDocument();
+        });
+
+        it('renders with a radiogroup role', () => {
+            render(<Select options={options} kind="radio" />);
+            expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+        });
+
+        it('renders radio items with radio role', () => {
+            render(<Select options={options} kind="radio" />);
+            const radios = screen.getAllByRole('radio');
+            expect(radios).toHaveLength(4);
+        });
+
+        it('calls onChange when a radio option is clicked', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(<ControlledSelect kind="radio" onChange={handleChange} />);
+
+            await user.click(screen.getByText('EP'));
+            expect(handleChange).toHaveBeenCalledWith('2');
+        });
+    });
+
+    describe('card kind', () => {
+        it('renders card options', () => {
+            render(<Select options={options} kind="card" />);
+            expect(screen.getByText('Single')).toBeInTheDocument();
+            expect(screen.getByText('EP')).toBeInTheDocument();
+        });
+
+        it('calls onChange when a card option is clicked', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(<ControlledSelect kind="card" onChange={handleChange} />);
+
+            await user.click(screen.getByText('EP'));
+            expect(handleChange).toHaveBeenCalledWith('2');
+        });
+    });
+
+    describe('segmented kind', () => {
+        it('renders segmented options', () => {
+            render(<Select options={options} kind="segmented" />);
+            expect(screen.getByText('Single')).toBeInTheDocument();
+            expect(screen.getByText('EP')).toBeInTheDocument();
+        });
+
+        it('calls onChange when a segmented option is clicked', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(<ControlledSelect kind="segmented" onChange={handleChange} />);
+
+            await user.click(screen.getByText('EP'));
+            expect(handleChange).toHaveBeenCalledWith('2');
+        });
+    });
+});

package/src/stories/styledlink/StyledLink.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../test/render';
+import { StyledLink } from './StyledLink';
+
+describe('StyledLink', () => {
+    it('renders children text', () => {
+        render(<StyledLink>Click me</StyledLink>);
+        expect(screen.getByText('Click me')).toBeInTheDocument();
+    });
+
+    it('renders as an anchor element by default', () => {
+        render(<StyledLink>Link</StyledLink>);
+        const el = screen.getByText('Link');
+        expect(el.tagName).toBe('A');
+    });
+
+    it('renders with href attribute', () => {
+        render(<StyledLink href="https://example.com">Example</StyledLink>);
+        const el = screen.getByText('Example');
+        expect(el.getAttribute('href')).toBe('https://example.com');
+    });
+
+    it('renders as a different element via the as prop', () => {
+        render(<StyledLink as="button">Button link</StyledLink>);
+        const el = screen.getByText('Button link');
+        expect(el.tagName).toBe('BUTTON');
+    });
+
+    it('applies the link style class', () => {
+        render(<StyledLink>Styled</StyledLink>);
+        const el = screen.getByText('Styled');
+        expect(el.className).toContain('link');
+    });
+
+    it('forwards className prop and merges with default class', () => {
+        render(<StyledLink className="custom-link">Custom</StyledLink>);
+        const el = screen.getByText('Custom');
+        expect(el.className).toContain('custom-link');
+        expect(el.className).toContain('link');
+    });
+
+    it('forwards additional HTML props', () => {
+        render(
+            <StyledLink target="_blank" rel="noopener noreferrer" data-testid="styled-link">
+                External
+            </StyledLink>,
+        );
+        const el = screen.getByTestId('styled-link');
+        expect(el.getAttribute('target')).toBe('_blank');
+        expect(el.getAttribute('rel')).toBe('noopener noreferrer');
+    });
+
+    it('renders without children', () => {
+        const { container } = render(<StyledLink href="/empty" />);
+        const anchor = container.querySelector('a');
+        expect(anchor).toBeInTheDocument();
+        expect(anchor?.getAttribute('href')).toBe('/empty');
+    });
+});

package/src/stories/table/Table.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen } from '../../test/render';
+import { Table } from './Table';
+
+const columns = [{ title: 'Name' }, { title: 'Age' }, { title: 'Email' }];
+
+const rows = [
+    { name: 'Alice', age: 30, email: 'alice@example.com' },
+    { name: 'Bob', age: 25, email: 'bob@example.com' },
+    { name: 'Charlie', age: 35, email: 'charlie@example.com' },
+];
+
+describe('Table', () => {
+    it('renders column headers', () => {
+        render(<Table columns={columns} rows={rows} />);
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Age')).toBeInTheDocument();
+        expect(screen.getByText('Email')).toBeInTheDocument();
+    });
+
+    it('renders row data using Object.values by default', () => {
+        render(<Table columns={columns} rows={rows} />);
+        expect(screen.getByText('Alice')).toBeInTheDocument();
+        expect(screen.getByText('30')).toBeInTheDocument();
+        expect(screen.getByText('alice@example.com')).toBeInTheDocument();
+    });
+
+    it('renders all rows', () => {
+        render(<Table columns={columns} rows={rows} />);
+        expect(screen.getByText('Alice')).toBeInTheDocument();
+        expect(screen.getByText('Bob')).toBeInTheDocument();
+        expect(screen.getByText('Charlie')).toBeInTheDocument();
+    });
+
+    it('uses custom rowRenderFn', () => {
+        render(
+            <Table
+                columns={[{ title: 'Full Info' }]}
+                rows={rows}
+                rowRenderFn={(row) => ({
+                    key: row.name,
+                    cells: [`${row.name} (${row.age})`],
+                })}
+            />,
+        );
+        expect(screen.getByText('Alice (30)')).toBeInTheDocument();
+        expect(screen.getByText('Bob (25)')).toBeInTheDocument();
+    });
+
+    it('renders the table element', () => {
+        const { container } = render(<Table columns={columns} rows={rows} />);
+        expect(container.querySelector('table')).toBeInTheDocument();
+    });
+
+    it('renders thead and tbody', () => {
+        const { container } = render(<Table columns={columns} rows={rows} />);
+        expect(container.querySelector('thead')).toBeInTheDocument();
+        expect(container.querySelector('tbody')).toBeInTheDocument();
+    });
+
+    it('calls onRowClick when a row is clicked', async () => {
+        const onRowClick = vi.fn();
+        const { user } = render(<Table columns={columns} rows={rows} onRowClick={onRowClick} />);
+        const aliceCell = screen.getByText('Alice');
+        await user.click(aliceCell.closest('tr')!);
+        expect(onRowClick).toHaveBeenCalledWith(rows[0]);
+    });
+
+    it('does not call onRowClick when clickableRows is false', async () => {
+        const onRowClick = vi.fn();
+        const { user } = render(<Table columns={columns} rows={rows} onRowClick={onRowClick} clickableRows={false} />);
+        const aliceCell = screen.getByText('Alice');
+        await user.click(aliceCell.closest('tr')!);
+        expect(onRowClick).not.toHaveBeenCalled();
+    });
+
+    it('displays empty state when rows are empty', () => {
+        render(<Table columns={columns} rows={[]} emptyState="No data available" />);
+        expect(screen.getByText('No data available')).toBeInTheDocument();
+    });
+
+    it('does not display empty state when there are rows', () => {
+        render(<Table columns={columns} rows={rows} emptyState="No data available" />);
+        expect(screen.queryByText('No data available')).not.toBeInTheDocument();
+    });
+
+    it('applies table className via overrides', () => {
+        const { container } = render(
+            <Table columns={columns} rows={rows} overrides={{ table: { className: 'custom-table' } }} />,
+        );
+        expect(container.querySelector('table')).toHaveClass('custom-table');
+    });
+
+    it('applies thead className via overrides', () => {
+        const { container } = render(
+            <Table columns={columns} rows={rows} overrides={{ thead: { className: 'custom-thead' } }} />,
+        );
+        expect(container.querySelector('thead')).toHaveClass('custom-thead');
+    });
+
+    it('applies tbody className via overrides', () => {
+        const { container } = render(
+            <Table columns={columns} rows={rows} overrides={{ tbody: { className: 'custom-tbody' } }} />,
+        );
+        expect(container.querySelector('tbody')).toHaveClass('custom-tbody');
+    });
+
+    it('applies clickable class to rows when clickableRows is true', () => {
+        render(<Table columns={columns} rows={rows} clickableRows={true} />);
+        const aliceRow = screen.getByText('Alice').closest('tr')!;
+        expect(aliceRow).toHaveClass('clickable');
+    });
+
+    it('does not apply clickable class when clickableRows is false', () => {
+        render(<Table columns={columns} rows={rows} clickableRows={false} />);
+        const aliceRow = screen.getByText('Alice').closest('tr')!;
+        expect(aliceRow).not.toHaveClass('clickable');
+    });
+
+    it('supports keyboard navigation on clickable rows', async () => {
+        const onRowClick = vi.fn();
+        const { user } = render(<Table columns={columns} rows={rows} onRowClick={onRowClick} />);
+        const aliceRow = screen.getByText('Alice').closest('tr')!;
+        aliceRow.focus();
+        await user.keyboard('{Enter}');
+        expect(onRowClick).toHaveBeenCalledWith(rows[0]);
+    });
+
+    it('handles hideBelow column property', () => {
+        const columnsWithHide = [{ title: 'Name' }, { title: 'Age', hideBelow: 'md' as const }, { title: 'Email' }];
+        const { container } = render(<Table columns={columnsWithHide} rows={rows} />);
+        const ageHeader = screen.getByText('Age').closest('th');
+        expect(ageHeader).toHaveClass('md');
+    });
+
+    it('renders empty state with colSpan matching column count', () => {
+        const { container } = render(<Table columns={columns} rows={[]} emptyState="Empty" />);
+        const td = container.querySelector('td[colspan]');
+        expect(td).toHaveAttribute('colspan', String(columns.length));
+    });
+
+    it('renders ReactNode content in cells', () => {
+        const richRows = [{ name: 'Alice', age: 30, email: 'alice@example.com' }];
+        render(
+            <Table
+                columns={columns}
+                rows={richRows}
+                rowRenderFn={(row) => ({
+                    key: row.name,
+                    cells: [<strong key="name">{row.name}</strong>, String(row.age), row.email],
+                })}
+            />,
+        );
+        const strong = screen.getByText('Alice');
+        expect(strong.tagName).toBe('STRONG');
+    });
+});

package/src/stories/tabs/Tabs.module.scss

@@ -35,7 +35,7 @@
         position: sticky;
         top: 0;
         width: 100%;
-        z-index: 1;
+        z-index: var(--pte-new-layers-sticky);
         background: var(--pte-new-materials-primaryThin-background);
     }
 }

package/src/stories/tabs/Tabs.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen, waitFor } from '../../test/render';
+import { Tabs } from './Tabs';
+
+// Mock framer-motion to avoid layout animation issues in tests
+vi.mock('framer-motion', () => ({
+    motion: {
+        div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+    },
+    AnimatePresence: ({ children }: any) => <>{children}</>,
+    cubicBezier: (..._args: number[]) => [0, 0, 1, 1],
+}));
+
+const defaultTabs = [
+    { title: 'Transactions', content: 'Transactions content' },
+    { title: 'Cards', content: 'Cards content' },
+    { title: 'Documents', content: 'Documents content' },
+];
+
+describe('Tabs', () => {
+    it('renders all tab titles', () => {
+        render(<Tabs tabs={defaultTabs} />);
+
+        expect(screen.getByText('Transactions')).toBeInTheDocument();
+        expect(screen.getByText('Cards')).toBeInTheDocument();
+        expect(screen.getByText('Documents')).toBeInTheDocument();
+    });
+
+    it('renders the first tab panel content by default', () => {
+        render(<Tabs tabs={defaultTabs} />);
+
+        expect(screen.getByText('Transactions content')).toBeInTheDocument();
+    });
+
+    it('renders tab elements with correct roles', () => {
+        render(<Tabs tabs={defaultTabs} />);
+
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs).toHaveLength(3);
+        expect(screen.getByRole('tablist')).toBeInTheDocument();
+        expect(screen.getByRole('tabpanel')).toBeInTheDocument();
+    });
+
+    it('marks the first tab as selected by default', () => {
+        render(<Tabs tabs={defaultTabs} />);
+
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
+        expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('switches active panel when clicking a different tab', async () => {
+        const { user } = render(<Tabs tabs={defaultTabs} />);
+
+        const tabs = screen.getAllByRole('tab');
+        await user.click(tabs[1]);
+
+        await waitFor(() => {
+            expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+        });
+
+        expect(screen.getByText('Cards content')).toBeInTheDocument();
+    });
+
+    it('calls onTabChange when a tab is clicked', async () => {
+        const onTabChange = vi.fn();
+        const { user } = render(<Tabs tabs={defaultTabs} onTabChange={onTabChange} />);
+
+        const tabs = screen.getAllByRole('tab');
+        await user.click(tabs[2]);
+
+        await waitFor(() => {
+            expect(onTabChange).toHaveBeenCalledWith(2);
+        });
+    });
+
+    it('respects defaultIndex prop', () => {
+        render(<Tabs tabs={defaultTabs} defaultIndex={1} />);
+
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+        expect(screen.getByText('Cards content')).toBeInTheDocument();
+    });
+
+    it('supports controlled index', () => {
+        const { rerender } = render(<Tabs tabs={defaultTabs} index={0} />);
+
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+
+        rerender(<Tabs tabs={defaultTabs} index={2} />);
+
+        expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
+        expect(screen.getByText('Documents content')).toBeInTheDocument();
+    });
+
+    it('navigates tabs with keyboard arrow keys', async () => {
+        const { user } = render(<Tabs tabs={defaultTabs} />);
+
+        const tabs = screen.getAllByRole('tab');
+        await user.click(tabs[0]);
+        await user.keyboard('{ArrowRight}');
+
+        await waitFor(() => {
+            expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+        });
+    });
+
+    it('renders with compact kind', () => {
+        render(<Tabs tabs={defaultTabs} kind="compact" />);
+
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs).toHaveLength(3);
+    });
+
+    it('renders with full kind', () => {
+        render(<Tabs tabs={defaultTabs} kind="full" />);
+
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs).toHaveLength(3);
+    });
+
+    it('renders with thin barStyle', () => {
+        render(<Tabs tabs={defaultTabs} barStyle="thin" />);
+
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs).toHaveLength(3);
+    });
+
+    it('renders with glass backgroundStyle', () => {
+        render(<Tabs tabs={defaultTabs} backgroundStyle="glass" />);
+
+        expect(screen.getAllByRole('tab')).toHaveLength(3);
+    });
+
+    it('renders ReactNode content in tab panels', async () => {
+        const tabsWithJsx = [
+            { title: 'Tab 1', content: <div data-testid="custom-content">Custom JSX</div> },
+            { title: 'Tab 2', content: 'Plain text' },
+        ];
+
+        render(<Tabs tabs={tabsWithJsx} />);
+
+        expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+        expect(screen.getByText('Custom JSX')).toBeInTheDocument();
+    });
+
+    it('handles a single tab', () => {
+        const singleTab = [{ title: 'Only Tab', content: 'Only content' }];
+        render(<Tabs tabs={singleTab} />);
+
+        expect(screen.getAllByRole('tab')).toHaveLength(1);
+        expect(screen.getByText('Only content')).toBeInTheDocument();
+    });
+
+    it('does not call onTabChange when clicking the already-selected tab', async () => {
+        const onTabChange = vi.fn();
+        const { user } = render(<Tabs tabs={defaultTabs} onTabChange={onTabChange} />);
+
+        const tabs = screen.getAllByRole('tab');
+        await user.click(tabs[0]);
+
+        // HeadlessUI may or may not call onChange for same-tab clicks.
+        // The important thing is it doesn't crash.
+        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+    });
+});