paris 0.19.0 → 0.21.0

package/src/stories/button/Button.test.tsx

@@ -0,0 +1,266 @@
+import { fireEvent } from '@testing-library/react';
+import { render, screen } from '../../test/render';
+import { Button } from './Button';
+
+describe('Button', () => {
+    it('renders with default props', () => {
+        render(<Button>Click me</Button>);
+        expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+    });
+
+    it('renders default text when no children provided', () => {
+        render(<Button />);
+        expect(screen.getByRole('button')).toHaveTextContent('Button');
+    });
+
+    describe('kind variants', () => {
+        it.each(['primary', 'secondary', 'tertiary'] as const)('renders %s kind', (kind) => {
+            render(<Button kind={kind}>Label</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass(kind);
+        });
+
+        it('defaults to primary kind', () => {
+            render(<Button>Label</Button>);
+            expect(screen.getByRole('button')).toHaveClass('primary');
+        });
+    });
+
+    describe('size variants', () => {
+        it.each(['large', 'medium', 'small', 'xs'] as const)('renders %s size', (size) => {
+            render(<Button size={size}>Label</Button>);
+            expect(screen.getByRole('button')).toHaveClass(size);
+        });
+
+        it('defaults to large size', () => {
+            render(<Button>Label</Button>);
+            expect(screen.getByRole('button')).toHaveClass('large');
+        });
+    });
+
+    describe('shape variants', () => {
+        it.each(['pill', 'circle', 'rectangle', 'square'] as const)('renders %s shape', (shape) => {
+            render(<Button shape={shape}>Label</Button>);
+            expect(screen.getByRole('button')).toHaveClass(shape);
+        });
+
+        it('defaults to pill shape', () => {
+            render(<Button>Label</Button>);
+            expect(screen.getByRole('button')).toHaveClass('pill');
+        });
+
+        it('hides text content for circle shape but keeps it for accessibility', () => {
+            render(<Button shape="circle">Action</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-details', 'Action');
+        });
+
+        it('hides text content for square shape but keeps it for accessibility', () => {
+            render(<Button shape="square">Action</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-details', 'Action');
+        });
+    });
+
+    describe('disabled state', () => {
+        it('sets aria-disabled when disabled', () => {
+            render(<Button disabled>Label</Button>);
+            expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        });
+
+        it('does not fire onClick when disabled', () => {
+            const onClick = vi.fn();
+            render(
+                <Button disabled onClick={onClick}>
+                    Label
+                </Button>,
+            );
+            fireEvent.click(screen.getByRole('button'));
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('sets aria-disabled to false when not disabled', () => {
+            render(<Button>Label</Button>);
+            expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'false');
+        });
+    });
+
+    describe('loading state', () => {
+        it('does not fire onClick when loading', async () => {
+            const onClick = vi.fn();
+            const { user } = render(
+                <Button loading onClick={onClick}>
+                    Label
+                </Button>,
+            );
+            await user.click(screen.getByRole('button'));
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('hides children text when loading', () => {
+            render(<Button loading>Label</Button>);
+            expect(screen.getByRole('button')).not.toHaveTextContent('Label');
+        });
+
+        it('hides enhancers when loading', () => {
+            render(
+                <Button loading startEnhancer={<span data-testid="start">S</span>}>
+                    Label
+                </Button>,
+            );
+            expect(screen.queryByTestId('start')).not.toBeInTheDocument();
+        });
+    });
+
+    describe('onClick', () => {
+        it('fires onClick when clicked', async () => {
+            const onClick = vi.fn();
+            const { user } = render(<Button onClick={onClick}>Label</Button>);
+            await user.click(screen.getByRole('button'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe('href rendering', () => {
+        it('renders as an anchor when href is provided', () => {
+            render(<Button href="https://example.com">Link</Button>);
+            const anchor = screen.getByRole('link', { name: /link/i });
+            expect(anchor).toBeInTheDocument();
+            expect(anchor).toHaveAttribute('href', 'https://example.com');
+        });
+
+        it('defaults target to _self', () => {
+            render(<Button href="https://example.com">Link</Button>);
+            expect(screen.getByRole('link')).toHaveAttribute('target', '_self');
+        });
+
+        it('applies hreftarget when provided', () => {
+            render(
+                <Button href="https://example.com" hreftarget="_blank">
+                    Link
+                </Button>,
+            );
+            const anchor = screen.getByRole('link');
+            expect(anchor).toHaveAttribute('target', '_blank');
+            expect(anchor).toHaveAttribute('rel', 'noreferrer');
+        });
+
+        it('does not fire onClick when href is set', async () => {
+            const onClick = vi.fn();
+            const { user } = render(
+                <Button href="https://example.com" onClick={onClick}>
+                    Link
+                </Button>,
+            );
+            await user.click(screen.getByRole('link'));
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('enhancers', () => {
+        it('renders startEnhancer as ReactNode', () => {
+            render(<Button startEnhancer={<span data-testid="start-icon">icon</span>}>Label</Button>);
+            expect(screen.getByTestId('start-icon')).toBeInTheDocument();
+        });
+
+        it('renders endEnhancer as ReactNode', () => {
+            render(<Button endEnhancer={<span data-testid="end-icon">icon</span>}>Label</Button>);
+            expect(screen.getByTestId('end-icon')).toBeInTheDocument();
+        });
+
+        it('renders startEnhancer as function', () => {
+            render(<Button startEnhancer={({ size }) => <span data-testid="fn-icon">{size}</span>}>Label</Button>);
+            expect(screen.getByTestId('fn-icon')).toBeInTheDocument();
+            expect(screen.getByTestId('fn-icon')).toHaveTextContent('13');
+        });
+
+        it('passes correct size to enhancer based on button size', () => {
+            render(
+                <Button size="xs" startEnhancer={({ size }) => <span data-testid="fn-icon">{size}</span>}>
+                    Label
+                </Button>,
+            );
+            expect(screen.getByTestId('fn-icon')).toHaveTextContent('9');
+        });
+    });
+
+    describe('notification dot', () => {
+        it('renders notification dot when displayNotificationDot is true', () => {
+            const { container } = render(<Button displayNotificationDot>Label</Button>);
+            const dotWrapper = container.querySelector('.absolute');
+            expect(dotWrapper).toBeInTheDocument();
+        });
+
+        it('does not render notification dot by default', () => {
+            const { container } = render(<Button>Label</Button>);
+            const dotWrapper = container.querySelector('.absolute');
+            expect(dotWrapper).not.toBeInTheDocument();
+        });
+    });
+
+    describe('custom colors and theme', () => {
+        it('applies custom colors as CSS variables', () => {
+            render(<Button colors={{ primary: '#ff0000', secondary: '#00ff00' }}>Label</Button>);
+            const button = screen.getByRole('button');
+            expect(button.style.getPropertyValue('--pte-new-colors-buttonFill')).toBe('#ff0000');
+            expect(button.style.getPropertyValue('--pte-new-colors-buttonFillHover')).toBe('#00ff00');
+        });
+
+        it('applies theme preset', () => {
+            render(<Button theme="negative">Label</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toHaveAttribute('style');
+        });
+    });
+
+    describe('className forwarding', () => {
+        it('forwards custom className', () => {
+            render(<Button className="custom-class">Label</Button>);
+            expect(screen.getByRole('button')).toHaveClass('custom-class');
+        });
+
+        it('preserves internal classes when custom className is added', () => {
+            render(<Button className="custom-class">Label</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass('button');
+            expect(button).toHaveClass('primary');
+            expect(button).toHaveClass('pill');
+            expect(button).toHaveClass('large');
+            expect(button).toHaveClass('custom-class');
+        });
+    });
+
+    describe('corners', () => {
+        it('applies corner preset class', () => {
+            render(
+                <Button shape="rectangle" corners="sharp">
+                    Label
+                </Button>,
+            );
+            expect(screen.getByRole('button')).toHaveClass('sharp');
+        });
+
+        it('applies custom corner radius as inline style', () => {
+            render(
+                <Button shape="rectangle" corners="8px">
+                    Label
+                </Button>,
+            );
+            expect(screen.getByRole('button').style.borderRadius).toBe('8px');
+        });
+    });
+
+    describe('type attribute', () => {
+        it('defaults to button type', () => {
+            render(<Button>Label</Button>);
+            expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+        });
+
+        it('allows submit type', () => {
+            render(<Button type="submit">Label</Button>);
+            expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+        });
+    });
+});

package/src/stories/callout/Callout.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '../../test/render';
+import { Callout } from './Callout';
+
+describe('Callout', () => {
+    it('renders children text', () => {
+        render(<Callout>Important message</Callout>);
+        expect(screen.getByText('Important message')).toBeInTheDocument();
+    });
+
+    it('renders non-string children', () => {
+        render(
+            <Callout>
+                <strong>Bold message</strong>
+            </Callout>,
+        );
+        expect(screen.getByText('Bold message')).toBeInTheDocument();
+    });
+
+    it('applies default variant class', () => {
+        const { container } = render(<Callout>Message</Callout>);
+        expect(container.firstElementChild).toHaveClass('content', 'default');
+    });
+
+    it('applies warning variant', () => {
+        const { container } = render(<Callout variant="warning">Warning!</Callout>);
+        expect(container.firstElementChild).toHaveClass('content', 'warning');
+    });
+
+    it('applies positive variant', () => {
+        const { container } = render(<Callout variant="positive">Success!</Callout>);
+        expect(container.firstElementChild).toHaveClass('content', 'positive');
+    });
+
+    it('applies negative variant', () => {
+        const { container } = render(<Callout variant="negative">Error!</Callout>);
+        expect(container.firstElementChild).toHaveClass('content', 'negative');
+    });
+
+    it('renders default icon when no icon prop is provided', () => {
+        const { container } = render(<Callout>With icon</Callout>);
+        const iconWrapper = container.querySelector('.icon');
+        expect(iconWrapper).toBeInTheDocument();
+    });
+
+    it('renders a custom icon', () => {
+        render(<Callout icon={<svg data-testid="custom-icon" />}>With custom icon</Callout>);
+        expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+    });
+
+    it('hides the icon when icon is null', () => {
+        const { container } = render(<Callout icon={null}>No icon</Callout>);
+        const iconWrapper = container.querySelector('.icon');
+        expect(iconWrapper).not.toBeInTheDocument();
+    });
+
+    it('forwards className', () => {
+        const { container } = render(<Callout className="extra">Message</Callout>);
+        expect(container.firstElementChild).toHaveClass('extra');
+    });
+
+    it('forwards HTML div attributes', () => {
+        render(
+            <Callout data-testid="my-callout" role="alert">
+                Alert!
+            </Callout>,
+        );
+        const callout = screen.getByTestId('my-callout');
+        expect(callout).toHaveAttribute('role', 'alert');
+    });
+
+    it('combines variant and custom className', () => {
+        const { container } = render(
+            <Callout variant="negative" className="custom">
+                Error
+            </Callout>,
+        );
+        expect(container.firstElementChild).toHaveClass('content', 'negative', 'custom');
+    });
+});

package/src/stories/card/Card.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '../../test/render';
+import { Card } from './Card';
+
+describe('Card', () => {
+    it('renders children', () => {
+        render(<Card>Hello world</Card>);
+        expect(screen.getByText('Hello world')).toBeInTheDocument();
+    });
+
+    it('renders non-string children without Text wrapper', () => {
+        render(
+            <Card>
+                <button type="button">Click me</button>
+            </Card>,
+        );
+        expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+
+    it('forwards className', () => {
+        const { container } = render(<Card className="custom-class">Content</Card>);
+        expect(container.firstElementChild).toHaveClass('custom-class');
+    });
+
+    it('applies raised kind by default', () => {
+        const { container } = render(<Card>Content</Card>);
+        expect(container.firstElementChild).toHaveClass('container', 'raised');
+    });
+
+    it('applies surface kind', () => {
+        const { container } = render(<Card kind="surface">Content</Card>);
+        expect(container.firstElementChild).toHaveClass('container', 'surface');
+    });
+
+    it('applies flat kind', () => {
+        const { container } = render(<Card kind="flat">Content</Card>);
+        expect(container.firstElementChild).toHaveClass('container', 'flat');
+    });
+
+    it('applies default status by default', () => {
+        const { container } = render(<Card>Content</Card>);
+        expect(container.firstElementChild).toHaveClass('default');
+    });
+
+    it('applies pending status', () => {
+        const { container } = render(<Card status="pending">Content</Card>);
+        expect(container.firstElementChild).toHaveClass('pending');
+    });
+
+    it('applies text class when children is a string', () => {
+        const { container } = render(<Card>Plain text</Card>);
+        expect(container.firstElementChild).toHaveClass('text');
+    });
+
+    it('does not apply text class when children is not a string', () => {
+        const { container } = render(
+            <Card>
+                <span>Not a string</span>
+            </Card>,
+        );
+        expect(container.firstElementChild).not.toHaveClass('text');
+    });
+
+    it('forwards HTML div attributes', () => {
+        render(
+            <Card data-testid="my-card" id="card-1">
+                Content
+            </Card>,
+        );
+        const card = screen.getByTestId('my-card');
+        expect(card).toHaveAttribute('id', 'card-1');
+    });
+
+    it('combines kind and status classes', () => {
+        const { container } = render(
+            <Card kind="flat" status="pending">
+                Content
+            </Card>,
+        );
+        expect(container.firstElementChild).toHaveClass('container', 'flat', 'pending');
+    });
+});

package/src/stories/cardbutton/CardButton.test.tsx

@@ -0,0 +1,174 @@
+import { fireEvent } from '@testing-library/react';
+import { render, screen } from '../../test/render';
+import { CardButton } from './CardButton';
+
+describe('CardButton', () => {
+    it('renders children', () => {
+        render(<CardButton>Card Content</CardButton>);
+        expect(screen.getByRole('button')).toHaveTextContent('Card Content');
+    });
+
+    it('renders non-string children', () => {
+        render(
+            <CardButton>
+                <div data-testid="child">Complex child</div>
+            </CardButton>,
+        );
+        expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+
+    describe('kind variants', () => {
+        it.each(['raised', 'surface', 'flat'] as const)('renders %s kind', (kind) => {
+            render(<CardButton kind={kind}>Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveClass(kind);
+        });
+
+        it('defaults to raised kind', () => {
+            render(<CardButton>Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveClass('raised');
+        });
+    });
+
+    describe('status variants', () => {
+        it.each(['default', 'pending'] as const)('renders %s status', (status) => {
+            render(<CardButton status={status}>Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveClass(status);
+        });
+
+        it('defaults to default status', () => {
+            render(<CardButton>Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveClass('default');
+        });
+    });
+
+    describe('onClick', () => {
+        it('fires onClick when clicked', async () => {
+            const onClick = vi.fn();
+            const { user } = render(<CardButton onClick={onClick}>Label</CardButton>);
+            await user.click(screen.getByRole('button'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe('disabled state', () => {
+        it('sets aria-disabled when disabled', () => {
+            render(<CardButton disabled>Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        });
+
+        it('does not fire onClick when disabled', () => {
+            const onClick = vi.fn();
+            render(
+                <CardButton disabled onClick={onClick}>
+                    Label
+                </CardButton>,
+            );
+            fireEvent.click(screen.getByRole('button'));
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('sets aria-disabled to false when not disabled', () => {
+            render(<CardButton>Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'false');
+        });
+    });
+
+    describe('className forwarding', () => {
+        it('forwards custom className', () => {
+            render(<CardButton className="custom-class">Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveClass('custom-class');
+        });
+
+        it('preserves internal classes when custom className is added', () => {
+            render(<CardButton className="custom-class">Label</CardButton>);
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass('card');
+            expect(button).toHaveClass('raised');
+            expect(button).toHaveClass('custom-class');
+        });
+    });
+
+    describe('href rendering', () => {
+        it('renders as an anchor when href is provided', () => {
+            render(<CardButton href="https://example.com">Link</CardButton>);
+            const anchor = screen.getByRole('link', { name: /link/i });
+            expect(anchor).toBeInTheDocument();
+            expect(anchor).toHaveAttribute('href', 'https://example.com');
+        });
+
+        it('defaults target to _self', () => {
+            render(<CardButton href="https://example.com">Link</CardButton>);
+            expect(screen.getByRole('link')).toHaveAttribute('target', '_self');
+        });
+
+        it('applies hreftarget when provided', () => {
+            render(
+                <CardButton href="https://example.com" hreftarget="_blank">
+                    Link
+                </CardButton>,
+            );
+            const anchor = screen.getByRole('link');
+            expect(anchor).toHaveAttribute('target', '_blank');
+            expect(anchor).toHaveAttribute('rel', 'noreferrer');
+        });
+
+        it('does not fire onClick when href is set', async () => {
+            const onClick = vi.fn();
+            const { user } = render(
+                <CardButton href="https://example.com" onClick={onClick}>
+                    Link
+                </CardButton>,
+            );
+            await user.click(screen.getByRole('link'));
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('text class for string children', () => {
+        it('applies text class when children is a string', () => {
+            render(<CardButton>Text content</CardButton>);
+            expect(screen.getByRole('button')).toHaveClass('text');
+        });
+
+        it('does not apply text class when children is not a string', () => {
+            render(
+                <CardButton>
+                    <span>JSX content</span>
+                </CardButton>,
+            );
+            expect(screen.getByRole('button')).not.toHaveClass('text');
+        });
+    });
+
+    describe('aria-details', () => {
+        it('sets aria-details when children is a string', () => {
+            render(<CardButton>Description</CardButton>);
+            expect(screen.getByRole('button')).toHaveAttribute('aria-details', 'Description');
+        });
+
+        it('does not set aria-details when children is not a string', () => {
+            render(
+                <CardButton>
+                    <span>JSX</span>
+                </CardButton>,
+            );
+            expect(screen.getByRole('button')).not.toHaveAttribute('aria-details');
+        });
+    });
+
+    describe('container', () => {
+        it('wraps button in a container div', () => {
+            const { container } = render(<CardButton>Label</CardButton>);
+            const wrapper = container.firstElementChild;
+            expect(wrapper).toHaveClass('container');
+            expect(wrapper?.querySelector('button')).toBeInTheDocument();
+        });
+    });
+
+    describe('type attribute', () => {
+        it('defaults to button type', () => {
+            render(<CardButton>Label</CardButton>);
+            expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+        });
+    });
+});