paris 0.19.0 → 0.20.0

package/src/stories/tag/Tag.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../test/render';
+import { Tag } from './Tag';
+
+describe('Tag', () => {
+    it('renders children text', () => {
+        render(<Tag>Active</Tag>);
+        expect(screen.getByText('Active')).toBeInTheDocument();
+    });
+
+    it('renders as a div element', () => {
+        render(<Tag>Tag div</Tag>);
+        const el = screen.getByText('Tag div').closest('div');
+        expect(el).toBeInTheDocument();
+    });
+
+    it('applies the default kind class', () => {
+        const { container } = render(<Tag>Default</Tag>);
+        const root = container.firstElementChild;
+        expect(root?.className).toContain('default');
+    });
+
+    it('applies a custom kind class', () => {
+        const { container } = render(<Tag kind="positive">Success</Tag>);
+        const root = container.firstElementChild;
+        expect(root?.className).toContain('positive');
+    });
+
+    it('applies kind variants', () => {
+        const kinds = ['secondary', 'warning', 'negative', 'new', 'void', 'draft'] as const;
+        for (const kind of kinds) {
+            const { container, unmount } = render(<Tag kind={kind}>{kind}</Tag>);
+            const root = container.firstElementChild;
+            expect(root?.className).toContain(kind);
+            unmount();
+        }
+    });
+
+    it('applies the normal size by default', () => {
+        const { container } = render(<Tag>Normal</Tag>);
+        const root = container.firstElementChild;
+        expect(root?.className).toContain('normal');
+    });
+
+    it('applies the compact size', () => {
+        const { container } = render(<Tag size="compact">Compact</Tag>);
+        const root = container.firstElementChild;
+        expect(root?.className).toContain('compact');
+    });
+
+    it('applies rectangle shape by default (children visible)', () => {
+        render(<Tag>Rectangle</Tag>);
+        const textEl = screen.getByText('Rectangle');
+        expect(textEl).toBeVisible();
+    });
+
+    it('applies square shape and hides children visually', () => {
+        const { container } = render(<Tag shape="square">Hidden</Tag>);
+        const root = container.firstElementChild;
+        expect(root?.className).toContain('square');
+    });
+
+    it('applies corner preset classes', () => {
+        const { container } = render(<Tag corners="roundedXL">Rounded</Tag>);
+        const root = container.firstElementChild;
+        expect(root?.className).toContain('roundedXL');
+    });
+
+    it('applies custom border radius for non-preset corners', () => {
+        const { container } = render(<Tag corners="8px">Custom radius</Tag>);
+        const root = container.firstElementChild as HTMLElement;
+        expect(root?.style.borderRadius).toBe('8px');
+    });
+
+    it('sets data-status attribute for colorLevel', () => {
+        const { container } = render(
+            <Tag kind="positive" colorLevel="strong">
+                Strong
+            </Tag>,
+        );
+        const root = container.firstElementChild;
+        expect(root?.getAttribute('data-status')).toBe('strong');
+    });
+
+    it('forwards className prop', () => {
+        const { container } = render(<Tag className="my-tag">Custom</Tag>);
+        const root = container.firstElementChild;
+        expect(root?.className).toContain('my-tag');
+    });
+});

package/src/stories/text/Text.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../test/render';
+import { Text } from './Text';
+
+describe('Text', () => {
+    it('renders children as text', () => {
+        render(<Text>Hello World</Text>);
+        expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+
+    it('renders as a span by default', () => {
+        render(<Text>Default span</Text>);
+        const el = screen.getByText('Default span');
+        expect(el.tagName).toBe('SPAN');
+    });
+
+    it('renders as different elements via the as prop', () => {
+        const { unmount } = render(<Text as="h1">Heading</Text>);
+        expect(screen.getByText('Heading').tagName).toBe('H1');
+        unmount();
+
+        const { unmount: unmount2 } = render(<Text as="p">Paragraph</Text>);
+        expect(screen.getByText('Paragraph').tagName).toBe('P');
+        unmount2();
+
+        render(<Text as="label">Label</Text>);
+        expect(screen.getByText('Label').tagName).toBe('LABEL');
+    });
+
+    it('applies the paragraphMedium kind class by default', () => {
+        render(<Text>Styled text</Text>);
+        const el = screen.getByText('Styled text');
+        expect(el.className).toContain('paragraphMedium');
+    });
+
+    it('applies a custom kind class', () => {
+        render(<Text kind="headingLarge">Big heading</Text>);
+        const el = screen.getByText('Big heading');
+        expect(el.className).toContain('headingLarge');
+    });
+
+    it('applies weight class when weight is provided', () => {
+        render(<Text weight="bold">Bold text</Text>);
+        const el = screen.getByText('Bold text');
+        expect(el.className).toContain('weight-bold');
+    });
+
+    it('applies fontStyle class when fontStyle is provided', () => {
+        render(<Text fontStyle="italic">Italic text</Text>);
+        const el = screen.getByText('Italic text');
+        expect(el.className).toContain('fontStyle-italic');
+    });
+
+    it('sets --text-color CSS variable when color is provided', () => {
+        render(<Text color="red">Red text</Text>);
+        const el = screen.getByText('Red text');
+        expect(el.style.getPropertyValue('--text-color')).toBe('red');
+    });
+
+    it('does not set style when no color is provided', () => {
+        render(<Text>No color</Text>);
+        const el = screen.getByText('No color');
+        expect(el.style.getPropertyValue('--text-color')).toBe('');
+    });
+
+    it('forwards className prop', () => {
+        render(<Text className="custom-class">Custom</Text>);
+        const el = screen.getByText('Custom');
+        expect(el.className).toContain('custom-class');
+    });
+
+    it('forwards additional HTML props', () => {
+        render(
+            <Text data-testid="text-element" id="my-text">
+                Props test
+            </Text>,
+        );
+        const el = screen.getByTestId('text-element');
+        expect(el.id).toBe('my-text');
+    });
+});

package/src/stories/textarea/TextArea.test.tsx

@@ -0,0 +1,147 @@
+import { createRef } from 'react';
+import { render, screen } from '../../test/render';
+import { TextArea } from './TextArea';
+
+describe('TextArea', () => {
+    it('renders with a label', () => {
+        render(<TextArea label="Message" />);
+        expect(screen.getByLabelText('Message')).toBeInTheDocument();
+    });
+
+    it('renders a textarea element', () => {
+        render(<TextArea label="Bio" />);
+        const textarea = screen.getByLabelText('Bio');
+        expect(textarea.tagName).toBe('TEXTAREA');
+    });
+
+    it('allows typing into the textarea', async () => {
+        const { user } = render(<TextArea label="Notes" />);
+        const textarea = screen.getByLabelText('Notes');
+        await user.type(textarea, 'Hello world');
+        expect(textarea).toHaveValue('Hello world');
+    });
+
+    it('displays placeholder text', () => {
+        render(<TextArea label="Comment" placeholder="Write a comment..." />);
+        expect(screen.getByPlaceholderText('Write a comment...')).toBeInTheDocument();
+    });
+
+    it('defaults to 3 rows', () => {
+        render(<TextArea label="Default rows" />);
+        expect(screen.getByLabelText('Default rows')).toHaveAttribute('rows', '3');
+    });
+
+    it('accepts a custom rows value', () => {
+        render(<TextArea label="Custom rows" rows={6} />);
+        expect(screen.getByLabelText('Custom rows')).toHaveAttribute('rows', '6');
+    });
+
+    it('sets data-status to default when no status is provided', () => {
+        render(<TextArea label="Default status" />);
+        expect(screen.getByLabelText('Default status')).toHaveAttribute('data-status', 'default');
+    });
+
+    it('sets data-status to error', () => {
+        render(<TextArea label="Error" status="error" />);
+        expect(screen.getByLabelText('Error')).toHaveAttribute('data-status', 'error');
+    });
+
+    it('sets data-status to success', () => {
+        render(<TextArea label="Success" status="success" />);
+        expect(screen.getByLabelText('Success')).toHaveAttribute('data-status', 'success');
+    });
+
+    it('sets data-status to disabled when disabled', () => {
+        render(<TextArea label="Disabled" disabled />);
+        const textarea = screen.getByLabelText('Disabled');
+        expect(textarea).toHaveAttribute('data-status', 'disabled');
+        expect(textarea).toHaveAttribute('aria-disabled', 'true');
+        expect(textarea).toHaveAttribute('readonly');
+    });
+
+    it('overrides status with disabled when both are provided', () => {
+        render(<TextArea label="Both" status="error" disabled />);
+        expect(screen.getByLabelText('Both')).toHaveAttribute('data-status', 'disabled');
+    });
+
+    it('forwards ref to the textarea element', () => {
+        const ref = createRef<HTMLTextAreaElement>();
+        render(<TextArea label="Ref test" ref={ref} />);
+        expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+        expect(ref.current).toBe(screen.getByLabelText('Ref test'));
+    });
+
+    it('renders a start enhancer', () => {
+        render(<TextArea label="With start" startEnhancer={<span data-testid="start-icon">S</span>} />);
+        expect(screen.getByTestId('start-icon')).toBeInTheDocument();
+    });
+
+    it('renders an end enhancer', () => {
+        render(<TextArea label="With end" endEnhancer={<span data-testid="end-icon">E</span>} />);
+        expect(screen.getByTestId('end-icon')).toBeInTheDocument();
+    });
+
+    it('forwards className to the textarea element', () => {
+        render(<TextArea label="Classy" className="my-custom-class" />);
+        expect(screen.getByLabelText('Classy')).toHaveClass('my-custom-class');
+    });
+
+    it('sets aria-describedby linking to the description', () => {
+        render(<TextArea label="Described" description="Helper text" />);
+        const textarea = screen.getByLabelText('Described');
+        const describedBy = textarea.getAttribute('aria-describedby');
+        expect(describedBy).toBeTruthy();
+        const descriptionEl = document.getElementById(describedBy!);
+        expect(descriptionEl).toBeInTheDocument();
+        expect(descriptionEl).toHaveTextContent('Helper text');
+    });
+
+    it('renders description text', () => {
+        render(<TextArea label="With desc" description="A helpful note" />);
+        expect(screen.getByText('A helpful note')).toBeInTheDocument();
+    });
+
+    it('hides label when hideLabel is true', () => {
+        render(<TextArea label="Hidden" hideLabel />);
+        expect(screen.getByText('Hidden')).toHaveClass('hidden');
+    });
+
+    it('calls onChange handler', async () => {
+        const handleChange = vi.fn();
+        const { user } = render(<TextArea label="Change" onChange={handleChange} />);
+        await user.type(screen.getByLabelText('Change'), 'x');
+        expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('calls onFocus and onBlur handlers', async () => {
+        const handleFocus = vi.fn();
+        const handleBlur = vi.fn();
+        const { user } = render(<TextArea label="Focus" onFocus={handleFocus} onBlur={handleBlur} />);
+        await user.click(screen.getByLabelText('Focus'));
+        expect(handleFocus).toHaveBeenCalled();
+        await user.tab();
+        expect(handleBlur).toHaveBeenCalled();
+    });
+
+    it('uses aria-label prop when label is not a string', () => {
+        render(<TextArea label={<span>Complex</span>} aria-label="accessible label" />);
+        expect(screen.getByRole('textbox', { name: 'accessible label' })).toBeInTheDocument();
+    });
+
+    it('applies container override props', () => {
+        render(<TextArea label="Override" overrides={{ container: { 'data-testid': 'wrapper' } }} />);
+        expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    });
+
+    it('spreads additional HTML textarea props', () => {
+        render(<TextArea label="Extra" maxLength={500} />);
+        expect(screen.getByLabelText('Extra')).toHaveAttribute('maxlength', '500');
+    });
+
+    it('renders a function enhancer', () => {
+        render(
+            <TextArea label="Fn enhancer" endEnhancer={({ size }) => <span data-testid="fn-enhancer">{size}</span>} />,
+        );
+        expect(screen.getByTestId('fn-enhancer')).toBeInTheDocument();
+    });
+});

package/src/stories/theme/themes.ts

@@ -432,6 +432,14 @@ export type Theme = {
             lg: `${number}px`;
             xl: `${number}px`;
         };
+        layers: {
+            below: number;
+            sticky: number;
+            dropdown: number;
+            overlay: number;
+            popover: number;
+            menu: number;
+        };
     };
     tokens: TokensT;
     utils: {
@@ -1054,6 +1062,14 @@ export const LightTheme: Theme = {
             lg: '768px',
             xl: '1024px',
         },
+        layers: {
+            below: -1,
+            sticky: 100,
+            dropdown: 200,
+            overlay: 300,
+            popover: 400,
+            menu: 500,
+        },
     },
     tokens: T,
     utils: {

package/src/stories/tilt/Tilt.test.tsx

@@ -0,0 +1,203 @@
+import { fireEvent } from '@testing-library/react';
+import { render, screen } from '../../test/render';
+import { Tilt } from './Tilt';
+
+describe('Tilt', () => {
+    it('renders children', () => {
+        render(
+            <Tilt>
+                <div data-testid="child">Content</div>
+            </Tilt>,
+        );
+        expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+
+    it('renders multiple children', () => {
+        render(
+            <Tilt>
+                <div data-testid="child-1">First</div>
+                <div data-testid="child-2">Second</div>
+            </Tilt>,
+        );
+        expect(screen.getByTestId('child-1')).toBeInTheDocument();
+        expect(screen.getByTestId('child-2')).toBeInTheDocument();
+    });
+
+    describe('className forwarding', () => {
+        it('forwards custom className', () => {
+            const { container } = render(<Tilt className="custom-class">Content</Tilt>);
+            expect(container.firstElementChild).toHaveClass('custom-class');
+        });
+
+        it('preserves container class when custom className is added', () => {
+            const { container } = render(<Tilt className="custom-class">Content</Tilt>);
+            expect(container.firstElementChild).toHaveClass('container');
+            expect(container.firstElementChild).toHaveClass('custom-class');
+        });
+    });
+
+    describe('style forwarding', () => {
+        it('applies custom styles', () => {
+            const { container } = render(<Tilt style={{ backgroundColor: 'red' }}>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.backgroundColor).toBe('red');
+        });
+    });
+
+    describe('transform', () => {
+        it('applies initial transform with default perspective and scale', () => {
+            const { container } = render(<Tilt>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.transform).toContain('perspective(1000px)');
+            expect(el.style.transform).toContain('rotateX(0deg)');
+            expect(el.style.transform).toContain('rotateY(0deg)');
+            expect(el.style.transform).toContain('scale3d(1,1,1)');
+        });
+
+        it('applies custom perspective', () => {
+            const { container } = render(<Tilt perspective={500}>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.transform).toContain('perspective(500px)');
+        });
+    });
+
+    describe('glare', () => {
+        it('renders glare overlay by default', () => {
+            const { container } = render(<Tilt>Content</Tilt>);
+            const glareWrapper = container.querySelector('.glareWrapper');
+            expect(glareWrapper).toBeInTheDocument();
+        });
+
+        it('does not render glare when glareEnable is false', () => {
+            const { container } = render(<Tilt glareEnable={false}>Content</Tilt>);
+            const glareWrapper = container.querySelector('.glareWrapper');
+            expect(glareWrapper).not.toBeInTheDocument();
+        });
+
+        it('does not render glare when tilt is disabled', () => {
+            const { container } = render(<Tilt disableTilt>Content</Tilt>);
+            const glareWrapper = container.querySelector('.glareWrapper');
+            expect(glareWrapper).not.toBeInTheDocument();
+        });
+    });
+
+    describe('disableTilt', () => {
+        it('uses scale of 1 when tilt is disabled', () => {
+            const { container } = render(<Tilt disableTilt>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.transform).toContain('scale3d(1,1,1)');
+        });
+    });
+
+    describe('mouse events', () => {
+        it('calls onEnter on mouse enter', () => {
+            const onEnter = vi.fn();
+            const { container } = render(<Tilt onEnter={onEnter}>Content</Tilt>);
+            fireEvent.mouseEnter(container.firstElementChild!);
+            expect(onEnter).toHaveBeenCalledTimes(1);
+            expect(onEnter).toHaveBeenCalledWith(expect.objectContaining({ event: expect.anything() }));
+        });
+
+        it('calls onLeave on mouse leave', () => {
+            const onLeave = vi.fn();
+            const { container } = render(<Tilt onLeave={onLeave}>Content</Tilt>);
+            const el = container.firstElementChild!;
+            fireEvent.mouseEnter(el);
+            fireEvent.mouseLeave(el);
+            expect(onLeave).toHaveBeenCalledTimes(1);
+        });
+
+        it('calls onMove on mouse move', () => {
+            const onMove = vi.fn();
+            const { container } = render(<Tilt onMove={onMove}>Content</Tilt>);
+            const el = container.firstElementChild!;
+            fireEvent.mouseEnter(el);
+            fireEvent.mouseMove(el, { pageX: 50, pageY: 50 });
+            expect(onMove).toHaveBeenCalled();
+        });
+
+        it('resets transform on mouse leave when reset is true', () => {
+            const { container } = render(<Tilt reset>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            fireEvent.mouseEnter(el);
+            fireEvent.mouseLeave(el);
+            expect(el.style.transform).toContain('rotateX(0deg)');
+            expect(el.style.transform).toContain('rotateY(0deg)');
+        });
+    });
+
+    describe('touch events', () => {
+        it('calls onEnter on touch start', () => {
+            const onEnter = vi.fn();
+            const { container } = render(<Tilt onEnter={onEnter}>Content</Tilt>);
+            fireEvent.touchStart(container.firstElementChild!, {
+                touches: [{ pageX: 50, pageY: 50 }],
+            });
+            expect(onEnter).toHaveBeenCalledTimes(1);
+        });
+
+        it('calls onLeave on touch end', () => {
+            const onLeave = vi.fn();
+            const { container } = render(<Tilt onLeave={onLeave}>Content</Tilt>);
+            const el = container.firstElementChild!;
+            fireEvent.touchStart(el, { touches: [{ pageX: 50, pageY: 50 }] });
+            fireEvent.touchEnd(el);
+            expect(onLeave).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe('manual tilt angles', () => {
+        it('applies manual tilt angle X', () => {
+            const { container } = render(<Tilt tiltAngleXManual={10}>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.transform).toContain('rotateX(10deg)');
+        });
+
+        it('applies manual tilt angle Y', () => {
+            const { container } = render(<Tilt tiltAngleYManual={15}>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.transform).toContain('rotateY(15deg)');
+        });
+
+        it('applies transition when manual angles are set', () => {
+            const { container } = render(
+                <Tilt tiltAngleXManual={10} transitionSpeed={300}>
+                    Content
+                </Tilt>,
+            );
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.transition).toContain('300ms');
+        });
+    });
+
+    describe('transition', () => {
+        it('applies transition on mouse enter', () => {
+            const { container } = render(<Tilt transitionSpeed={500}>Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            fireEvent.mouseEnter(el);
+            expect(el.style.transition).toContain('500ms');
+        });
+
+        it('applies custom easing function', () => {
+            const { container } = render(<Tilt transitionEasing="ease-in-out">Content</Tilt>);
+            const el = container.firstElementChild as HTMLElement;
+            fireEvent.mouseEnter(el);
+            expect(el.style.transition).toContain('ease-in-out');
+        });
+    });
+
+    describe('glare border radius', () => {
+        it('uses custom glareBorderRadius when provided', () => {
+            const { container } = render(<Tilt glareBorderRadius="10px">Content</Tilt>);
+            const glareWrapper = container.querySelector('.glareWrapper') as HTMLElement;
+            expect(glareWrapper.style.borderRadius).toBe('10px');
+        });
+
+        it('derives glare border radius from style.borderRadius', () => {
+            const { container } = render(<Tilt style={{ borderRadius: '20px' }}>Content</Tilt>);
+            const glareWrapper = container.querySelector('.glareWrapper') as HTMLElement;
+            // jsdom may simplify calc(20px - 1px) to calc(19px)
+            expect(glareWrapper.style.borderRadius).toMatch(/calc\((?:20px - 1px|19px)\)/);
+        });
+    });
+});

package/src/stories/toast/Toast.test.tsx

@@ -0,0 +1,86 @@
+import { act, render, screen, waitFor } from '../../test/render';
+import { Toast, toast } from './Toast';
+
+describe('Toast', () => {
+    it('renders the Toaster container without crashing', () => {
+        const { container } = render(<Toast />);
+        expect(container).toBeInTheDocument();
+    });
+
+    it('displays a toast message when toast() is called', async () => {
+        render(<Toast />);
+
+        act(() => {
+            toast('Hello from Paris');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Hello from Paris')).toBeInTheDocument();
+        });
+    });
+
+    it('displays a success toast', async () => {
+        render(<Toast />);
+
+        act(() => {
+            toast.success('Operation succeeded');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Operation succeeded')).toBeInTheDocument();
+        });
+    });
+
+    it('displays an error toast', async () => {
+        render(<Toast />);
+
+        act(() => {
+            toast.error('Something went wrong');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+        });
+    });
+
+    it('displays a loading toast', async () => {
+        render(<Toast />);
+
+        act(() => {
+            toast.loading('Please wait...');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Please wait...')).toBeInTheDocument();
+        });
+    });
+
+    it('displays a custom JSX toast', async () => {
+        render(<Toast />);
+
+        act(() => {
+            toast(<span data-testid="custom-toast">Custom content</span>);
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('custom-toast')).toBeInTheDocument();
+        });
+    });
+
+    it('applies toast styling className', async () => {
+        render(<Toast />);
+
+        act(() => {
+            toast('Styled toast');
+        });
+
+        await waitFor(() => {
+            const toastEl = screen.getByText('Styled toast').closest('[class*="toast"]');
+            expect(toastEl).toBeInTheDocument();
+        });
+    });
+
+    it('passes additional Toaster props through', () => {
+        render(<Toast position="bottom-left" />);
+    });
+});

package/src/stories/utility/Dropdown.module.scss

@@ -1,6 +1,6 @@
 .transitionContainer {
     position: relative;
-    z-index: 10;
+    z-index: var(--pte-new-layers-dropdown);
 }
 
 .transition {