paris 0.19.0 → 0.20.0

package/src/stories/field/Field.test.tsx

@@ -0,0 +1,146 @@
+import { render, screen } from '../../test/render';
+import { Field } from './Field';
+
+describe('Field', () => {
+    it('renders children', () => {
+        render(
+            <Field label="Name">
+                <input data-testid="child" />
+            </Field>,
+        );
+        expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+
+    it('renders a string label as a <label> element', () => {
+        render(
+            <Field label="Email" htmlFor="email-input">
+                <input id="email-input" />
+            </Field>,
+        );
+        const label = screen.getByText('Email');
+        expect(label.tagName).toBe('LABEL');
+        expect(label).toHaveAttribute('for', 'email-input');
+    });
+
+    it('renders a ReactNode label wrapped in a plain <label>', () => {
+        render(
+            <Field label={<span data-testid="custom-label">Custom</span>} htmlFor="input-id">
+                <input id="input-id" />
+            </Field>,
+        );
+        const customLabel = screen.getByTestId('custom-label');
+        expect(customLabel).toBeInTheDocument();
+        // The wrapping <label> should have the htmlFor
+        expect(customLabel.closest('label')).toHaveAttribute('for', 'input-id');
+    });
+
+    it('hides the label visually when hideLabel is true', () => {
+        render(
+            <Field label="Hidden Label" hideLabel>
+                <input />
+            </Field>,
+        );
+        const label = screen.getByText('Hidden Label');
+        expect(label).toHaveClass('hidden');
+    });
+
+    it('renders a string description', () => {
+        render(
+            <Field label="Name" description="Enter your full name" htmlFor="name">
+                <input id="name" />
+            </Field>,
+        );
+        expect(screen.getByText('Enter your full name')).toBeInTheDocument();
+    });
+
+    it('hides the description when hideDescription is true', () => {
+        render(
+            <Field label="Name" description="Helper text" hideDescription htmlFor="name">
+                <input id="name" />
+            </Field>,
+        );
+        const desc = screen.getByText('Helper text');
+        expect(desc).toHaveClass('hidden');
+    });
+
+    it('hides the description element when no description is provided', () => {
+        render(
+            <Field label="Name" htmlFor="test-id">
+                <input id="test-id" />
+            </Field>,
+        );
+        const descEl = document.getElementById('test-id-description');
+        expect(descEl).toBeInTheDocument();
+        expect(descEl).toHaveClass('hidden');
+    });
+
+    it('renders description at the bottom by default', () => {
+        const { container } = render(
+            <Field label="Name" description="Below input" htmlFor="name">
+                <input id="name" />
+            </Field>,
+        );
+        const rootDiv = container.firstElementChild!;
+        const children = Array.from(rootDiv.children);
+        // Order: label, children (input), description
+        const labelIdx = children.findIndex((el) => el.textContent === 'Name');
+        const descIdx = children.findIndex((el) => el.textContent === 'Below input');
+        expect(descIdx).toBeGreaterThan(labelIdx);
+    });
+
+    it('renders description above children when descriptionPosition is top', () => {
+        const { container } = render(
+            <Field label="Name" description="Above input" descriptionPosition="top" htmlFor="name">
+                <input id="name" data-testid="input" />
+            </Field>,
+        );
+        const rootDiv = container.firstElementChild!;
+        const children = Array.from(rootDiv.children);
+        // When top: label and description are in a labelContainer div, then children
+        const labelContainer = children[0];
+        expect(labelContainer).toHaveClass('labelContainer');
+        expect(labelContainer.textContent).toContain('Name');
+        expect(labelContainer.textContent).toContain('Above input');
+    });
+
+    it('focuses the input when the container is clicked', async () => {
+        const { user } = render(
+            <Field label="Click me" htmlFor="focusable">
+                <input id="focusable" data-testid="focusable" />
+            </Field>,
+        );
+        const label = screen.getByText('Click me');
+        await user.click(label);
+        expect(screen.getByTestId('focusable')).toHaveFocus();
+    });
+
+    it('does not focus the input when disabled', async () => {
+        const { user, container } = render(
+            <Field label="Disabled" htmlFor="disabled-input" disabled>
+                <input id="disabled-input" data-testid="disabled-input" />
+            </Field>,
+        );
+        await user.click(container.firstElementChild!);
+        expect(screen.getByTestId('disabled-input')).not.toHaveFocus();
+    });
+
+    it('applies overrides.container props', () => {
+        render(
+            <Field label="Test" overrides={{ container: { 'data-testid': 'custom-container' } }}>
+                <input />
+            </Field>,
+        );
+        expect(screen.getByTestId('custom-container')).toBeInTheDocument();
+    });
+
+    it('renders ReactNode description in a div', () => {
+        render(
+            <Field label="Name" description={<em data-testid="em-desc">Emphasized</em>} htmlFor="name">
+                <input id="name" />
+            </Field>,
+        );
+        const emDesc = screen.getByTestId('em-desc');
+        expect(emDesc).toBeInTheDocument();
+        expect(emDesc.closest('div')).toHaveAttribute('id', 'name-description');
+    });
+});

package/src/stories/icon/Icon.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../test/render';
+import { Close } from './Close';
+import { Icon } from './Icon';
+
+describe('Icon', () => {
+    it('renders with the icon prop', () => {
+        render(<Icon icon={Close} size={20} data-testid="icon" />);
+        const el = screen.getByTestId('icon');
+        expect(el).toBeInTheDocument();
+    });
+
+    it('renders as a span by default', () => {
+        render(<Icon icon={Close} size={20} data-testid="icon-span" />);
+        const el = screen.getByTestId('icon-span');
+        expect(el.tagName).toBe('SPAN');
+    });
+
+    it('renders as a different element via the as prop', () => {
+        render(<Icon icon={Close} size={20} as="div" data-testid="icon-div" />);
+        const el = screen.getByTestId('icon-div');
+        expect(el.tagName).toBe('DIV');
+    });
+
+    it('renders the SVG icon inside', () => {
+        render(<Icon icon={Close} size={20} data-testid="icon-svg" />);
+        const el = screen.getByTestId('icon-svg');
+        const svg = el.querySelector('svg');
+        expect(svg).toBeInTheDocument();
+    });
+
+    it('passes size to the icon definition', () => {
+        render(<Icon icon={Close} size={24} data-testid="icon-sized" />);
+        const el = screen.getByTestId('icon-sized');
+        const svg = el.querySelector('svg');
+        expect(svg?.getAttribute('width')).toBe('24');
+        expect(svg?.getAttribute('height')).toBe('24');
+    });
+
+    it('forwards className prop', () => {
+        render(<Icon icon={Close} size={20} className="custom-icon" data-testid="icon-class" />);
+        const el = screen.getByTestId('icon-class');
+        expect(el.className).toContain('custom-icon');
+    });
+
+    it('forwards additional HTML props', () => {
+        render(<Icon icon={Close} size={20} id="my-icon" data-testid="icon-props" />);
+        const el = screen.getByTestId('icon-props');
+        expect(el.id).toBe('my-icon');
+    });
+
+    it('renders correctly with overrides prop', () => {
+        render(<Icon icon={Close} size={16} overrides={{ icon: {} }} data-testid="icon-overrides" />);
+        const el = screen.getByTestId('icon-overrides');
+        const svg = el.querySelector('svg');
+        expect(svg).toBeInTheDocument();
+        expect(svg?.getAttribute('width')).toBe('16');
+    });
+});

package/src/stories/informationaltooltip/InformationalTooltip.test.tsx

@@ -0,0 +1,178 @@
+import { render, screen, waitFor } from '../../test/render';
+import { InformationalTooltip } from './InformationalTooltip';
+
+// Mock pget to return a valid CSS time value for animation duration
+vi.mock('../theme', () => ({
+    pvar: (path: string) => `var(--pte-${path.replace(/\./g, '-')})`,
+    pget: () => '100ms',
+}));
+
+/**
+ * Radix Tooltip duplicates content inside a visually-hidden `role="tooltip"` span
+ * for screen readers. This helper queries the *visible* tooltip content element,
+ * excluding the hidden aria-describedby clone.
+ */
+function getVisibleTooltipContent(): HTMLElement | null {
+    const wrapper = document.querySelector('[data-radix-popper-content-wrapper]');
+    if (!wrapper) return null;
+    // The direct child with data-side is the visible tooltip content
+    return wrapper.querySelector(':scope > [data-side]');
+}
+
+describe('InformationalTooltip', () => {
+    it('renders the default trigger icon', () => {
+        render(<InformationalTooltip>Tooltip content</InformationalTooltip>);
+        const trigger = screen.getByRole('button');
+        expect(trigger).toBeInTheDocument();
+    });
+
+    it('renders a custom trigger', () => {
+        render(
+            <InformationalTooltip trigger={<span data-testid="custom-trigger">?</span>}>
+                Tooltip body
+            </InformationalTooltip>,
+        );
+        expect(screen.getByTestId('custom-trigger')).toBeInTheDocument();
+    });
+
+    it('shows tooltip content on hover', async () => {
+        const { user } = render(<InformationalTooltip>Hover content</InformationalTooltip>);
+
+        const trigger = screen.getByRole('button');
+        await user.hover(trigger);
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toBeInTheDocument();
+            expect(tooltip).toHaveTextContent('Hover content');
+        });
+    });
+
+    it('does not show tooltip when closed', () => {
+        render(<InformationalTooltip>Hidden content</InformationalTooltip>);
+        expect(getVisibleTooltipContent()).not.toBeInTheDocument();
+    });
+
+    it('renders with a heading when provided', async () => {
+        const { user } = render(<InformationalTooltip heading="Info Title">Body text</InformationalTooltip>);
+
+        const trigger = screen.getByRole('button');
+        await user.hover(trigger);
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toHaveTextContent('Info Title');
+            expect(tooltip).toHaveTextContent('Body text');
+        });
+    });
+
+    it('does not render heading when heading is null', async () => {
+        const { user } = render(<InformationalTooltip heading={null}>Only body</InformationalTooltip>);
+
+        const trigger = screen.getByRole('button');
+        await user.hover(trigger);
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toHaveTextContent('Only body');
+        });
+
+        const headingEl = getVisibleTooltipContent()?.querySelector('[class*="heading"]');
+        expect(headingEl).toBeNull();
+    });
+
+    it('opens on click by default', async () => {
+        const { user } = render(<InformationalTooltip>Click content</InformationalTooltip>);
+
+        const trigger = screen.getByRole('button');
+        await user.click(trigger);
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toBeInTheDocument();
+            expect(tooltip).toHaveTextContent('Click content');
+        });
+    });
+
+    it('does not open on click when disableClick is true', async () => {
+        const { user } = render(<InformationalTooltip disableClick>No click</InformationalTooltip>);
+
+        const trigger = screen.getByRole('button');
+        await user.click(trigger);
+
+        expect(getVisibleTooltipContent()).not.toBeInTheDocument();
+    });
+
+    it('renders open by default when defaultOpen is true', async () => {
+        render(<InformationalTooltip defaultOpen>Default open content</InformationalTooltip>);
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toBeInTheDocument();
+            expect(tooltip).toHaveTextContent('Default open content');
+        });
+    });
+
+    it('applies the medium size class', async () => {
+        const { user } = render(<InformationalTooltip size="medium">Medium tip</InformationalTooltip>);
+
+        const trigger = screen.getByRole('button');
+        await user.hover(trigger);
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toHaveClass('medium');
+        });
+    });
+
+    it('applies the large size class by default', async () => {
+        const { user } = render(<InformationalTooltip>Large tip</InformationalTooltip>);
+
+        const trigger = screen.getByRole('button');
+        await user.hover(trigger);
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toHaveClass('large');
+        });
+    });
+
+    it('accepts override props for the tooltip element', async () => {
+        render(
+            <InformationalTooltip
+                defaultOpen
+                overrides={{
+                    tooltip: { 'data-testid': 'overridden-tooltip' } as any,
+                }}
+            >
+                Overridden
+            </InformationalTooltip>,
+        );
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            expect(tooltip).toHaveAttribute('data-testid', 'overridden-tooltip');
+        });
+    });
+
+    it('accepts override props for the heading element', async () => {
+        render(
+            <InformationalTooltip
+                defaultOpen
+                heading="Title"
+                overrides={{
+                    heading: { 'data-testid': 'overridden-heading' },
+                }}
+            >
+                Body
+            </InformationalTooltip>,
+        );
+
+        await waitFor(() => {
+            const tooltip = getVisibleTooltipContent();
+            // Query only direct children to avoid the duplicated aria-describedby copy
+            const heading = tooltip?.querySelector(':scope > [data-testid="overridden-heading"]');
+            expect(heading).toBeInTheDocument();
+        });
+    });
+});

package/src/stories/input/Input.test.tsx

@@ -0,0 +1,174 @@
+import { createRef } from 'react';
+import { render, screen } from '../../test/render';
+import { Input } from './Input';
+
+describe('Input', () => {
+    it('renders with a label', () => {
+        render(<Input label="Username" />);
+        expect(screen.getByLabelText('Username')).toBeInTheDocument();
+    });
+
+    it('renders an input element with type text by default', () => {
+        render(<Input label="Name" />);
+        const input = screen.getByLabelText('Name');
+        expect(input.tagName).toBe('INPUT');
+        expect(input).toHaveAttribute('type', 'text');
+    });
+
+    it('allows typing into the input', async () => {
+        const { user } = render(<Input label="Email" />);
+        const input = screen.getByLabelText('Email');
+        await user.type(input, 'test@example.com');
+        expect(input).toHaveValue('test@example.com');
+    });
+
+    it('displays placeholder text', () => {
+        render(<Input label="Search" placeholder="Type to search..." />);
+        expect(screen.getByPlaceholderText('Type to search...')).toBeInTheDocument();
+    });
+
+    it('sets data-status to default when no status is provided', () => {
+        render(<Input label="Default" />);
+        const input = screen.getByLabelText('Default');
+        expect(input).toHaveAttribute('data-status', 'default');
+    });
+
+    it('sets data-status to error', () => {
+        render(<Input label="Error field" status="error" />);
+        const input = screen.getByLabelText('Error field');
+        expect(input).toHaveAttribute('data-status', 'error');
+    });
+
+    it('sets data-status to success', () => {
+        render(<Input label="Success field" status="success" />);
+        const input = screen.getByLabelText('Success field');
+        expect(input).toHaveAttribute('data-status', 'success');
+    });
+
+    it('sets data-status to disabled when disabled', () => {
+        render(<Input label="Disabled" disabled />);
+        const input = screen.getByLabelText('Disabled');
+        expect(input).toHaveAttribute('data-status', 'disabled');
+        expect(input).toHaveAttribute('aria-disabled', 'true');
+        expect(input).toHaveAttribute('readonly');
+    });
+
+    it('overrides status with disabled when both are provided', () => {
+        render(<Input label="Both" status="error" disabled />);
+        const input = screen.getByLabelText('Both');
+        expect(input).toHaveAttribute('data-status', 'disabled');
+    });
+
+    it('forwards ref to the input element', () => {
+        const ref = createRef<HTMLInputElement>();
+        render(<Input label="Ref test" ref={ref} />);
+        expect(ref.current).toBeInstanceOf(HTMLInputElement);
+        expect(ref.current).toBe(screen.getByLabelText('Ref test'));
+    });
+
+    it('renders with different input types', () => {
+        render(<Input label="Password" type="password" />);
+        expect(screen.getByLabelText('Password')).toHaveAttribute('type', 'password');
+    });
+
+    it('renders type email', () => {
+        render(<Input label="Email" type="email" />);
+        expect(screen.getByLabelText('Email')).toHaveAttribute('type', 'email');
+    });
+
+    it('renders type number', () => {
+        render(<Input label="Age" type="number" />);
+        expect(screen.getByLabelText('Age')).toHaveAttribute('type', 'number');
+    });
+
+    it('renders a start enhancer', () => {
+        render(<Input label="With start" startEnhancer={<span data-testid="start-icon">$</span>} />);
+        expect(screen.getByTestId('start-icon')).toBeInTheDocument();
+    });
+
+    it('renders an end enhancer', () => {
+        render(<Input label="With end" endEnhancer={<span data-testid="end-icon">%</span>} />);
+        expect(screen.getByTestId('end-icon')).toBeInTheDocument();
+    });
+
+    it('renders both start and end enhancers', () => {
+        render(
+            <Input
+                label="Both enhancers"
+                startEnhancer={<span data-testid="start">S</span>}
+                endEnhancer={<span data-testid="end">E</span>}
+            />,
+        );
+        expect(screen.getByTestId('start')).toBeInTheDocument();
+        expect(screen.getByTestId('end')).toBeInTheDocument();
+    });
+
+    it('renders a function enhancer', () => {
+        render(
+            <Input label="Fn enhancer" startEnhancer={({ size }) => <span data-testid="fn-enhancer">{size}</span>} />,
+        );
+        expect(screen.getByTestId('fn-enhancer')).toBeInTheDocument();
+    });
+
+    it('forwards className to the input element', () => {
+        render(<Input label="Classy" className="my-custom-class" />);
+        const input = screen.getByLabelText('Classy');
+        expect(input).toHaveClass('my-custom-class');
+    });
+
+    it('sets aria-describedby linking to the description', () => {
+        render(<Input label="Described" description="Some helper text" />);
+        const input = screen.getByLabelText('Described');
+        const describedBy = input.getAttribute('aria-describedby');
+        expect(describedBy).toBeTruthy();
+        const descriptionEl = document.getElementById(describedBy!);
+        expect(descriptionEl).toBeInTheDocument();
+        expect(descriptionEl).toHaveTextContent('Some helper text');
+    });
+
+    it('renders description text', () => {
+        render(<Input label="With desc" description="Helpful description" />);
+        expect(screen.getByText('Helpful description')).toBeInTheDocument();
+    });
+
+    it('hides label when hideLabel is true', () => {
+        render(<Input label="Hidden" hideLabel />);
+        const label = screen.getByText('Hidden');
+        expect(label).toHaveClass('hidden');
+    });
+
+    it('calls onChange handler', async () => {
+        const handleChange = vi.fn();
+        const { user } = render(<Input label="Change test" onChange={handleChange} />);
+        await user.type(screen.getByLabelText('Change test'), 'a');
+        expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('calls onFocus and onBlur handlers', async () => {
+        const handleFocus = vi.fn();
+        const handleBlur = vi.fn();
+        const { user } = render(<Input label="Focus test" onFocus={handleFocus} onBlur={handleBlur} />);
+        const input = screen.getByLabelText('Focus test');
+        await user.click(input);
+        expect(handleFocus).toHaveBeenCalled();
+        await user.tab();
+        expect(handleBlur).toHaveBeenCalled();
+    });
+
+    it('uses aria-label prop when label is not a string', () => {
+        render(<Input label={<span>Complex label</span>} aria-label="accessible label" />);
+        expect(screen.getByRole('textbox', { name: 'accessible label' })).toBeInTheDocument();
+    });
+
+    it('applies container override className', () => {
+        render(<Input label="Override test" overrides={{ container: { 'data-testid': 'wrapper' } }} />);
+        expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    });
+
+    it('spreads additional HTML input props', () => {
+        render(<Input label="Extra" maxLength={10} autoComplete="off" />);
+        const input = screen.getByLabelText('Extra');
+        expect(input).toHaveAttribute('maxlength', '10');
+        expect(input).toHaveAttribute('autocomplete', 'off');
+    });
+});