paris 0.23.1 → 0.24.0

package/src/stories/accordion/Accordion.tsx

@@ -1,148 +0,0 @@
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { useState } from 'react';
-import { renderEnhancer } from '../../helpers/renderEnhancer';
-import type { Enhancer } from '../../types/Enhancer';
-import { ChevronRight, Icon } from '../icon';
-import { TextWhenString } from '../utility';
-import styles from './Accordion.module.scss';
-
-export type AccordionProps = {
-    /** The title of the Accordion. */
-    title?: ReactNode;
-    /**
-     * The style of the Accordion.
-     * @default default
-     */
-    kind?: 'default' | 'card';
-    /**
-     * The size of the Accordion. Only affects kind="card".
-     * @default small
-     */
-    size?: 'small' | 'large';
-    /**
-     * Overrides the toggle icon. Accepts any icon (an `Icon` element or a render
-     * function `({ size }) => ReactNode`). When set, it replaces the default
-     * plus/chevron and rotates on open/close like the built-in chevron.
-     */
-    icon?: Enhancer;
-    /** Whether the Accordion is open. If provided, the Accordion will be a controlled component. */
-    isOpen?: boolean;
-    /** A handler for when the Accordion state changes. */
-    onOpenChange?: (open: boolean) => void | Promise<void>;
-    /** The collapsible contents of the Accordion. */
-    children?: ReactNode;
-    overrides?: {
-        container?: ComponentPropsWithoutRef<'div'>;
-        titleContainer?: ComponentPropsWithoutRef<'div'>;
-        dropdownContainer?: ComponentPropsWithoutRef<'div'>;
-        dropdownContent?: ComponentPropsWithoutRef<'div'>;
-    };
-};
-
-/**
- * A Accordion component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Accordion } from 'paris/accordion';
- * ```
- * @constructor
- */
-export const Accordion: FC<AccordionProps> = ({
-    title,
-    kind = 'default',
-    size = 'small',
-    icon,
-    isOpen,
-    onOpenChange,
-    children,
-    overrides,
-}) => {
-    const [openState, setOpenState] = useState(isOpen ?? false);
-
-    // Determine if component is controlled or uncontrolled
-    const isControlled = isOpen !== undefined;
-    const open = isControlled ? isOpen : openState;
-
-    // Unified toggle handler that works for both controlled and uncontrolled modes
-    const handleToggle = () => {
-        const newOpen = !open;
-
-        // Update internal state only if uncontrolled
-        if (!isControlled) {
-            setOpenState(newOpen);
-        }
-
-        // Always call the callback if provided
-        onOpenChange?.(newOpen);
-    };
-
-    return (
-        <div
-            {...overrides?.container}
-            className={clsx(styles[kind], open && styles.open, overrides?.container?.className)}
-        >
-            <div
-                onClick={handleToggle}
-                onKeyDown={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        handleToggle();
-                    }
-                }}
-                role="button"
-                tabIndex={0}
-                {...overrides?.titleContainer}
-                data-state={open ? 'open' : 'closed'}
-                className={clsx(overrides?.titleContainer?.className, styles.title, styles[size], open && styles.open)}
-            >
-                <TextWhenString kind="paragraphSmall" weight="medium">
-                    {title}
-                </TextWhenString>
-                {icon ? (
-                    <span className={clsx(styles.toggleIcon, open && styles.open)}>{renderEnhancer(icon, 16)}</span>
-                ) : kind === 'default' ? (
-                    <div className={styles.plusIcon}>
-                        <FontAwesomeIcon icon={faPlus} className={clsx(open && styles.open)} />
-                    </div>
-                ) : (
-                    <Icon icon={ChevronRight} size={16} className={clsx(styles.chevron, open && styles.open)} />
-                )}
-            </div>
-            {/*
-             * Collapse uses the CSS grid-rows trick (`1fr` → `0fr`) instead of
-             * animating `height: auto` via JS. JS height-auto animations flash an
-             * intermediate layout state on open/close that causes scrollable
-             * ancestors to clamp `scrollTop` to 0 in the first paint frame — a
-             * visible scroll-snap before the animation starts.
-             */}
-            <div
-                aria-hidden={!open}
-                {...overrides?.dropdownContainer}
-                className={clsx(styles.dropdown, open && styles.open, overrides?.dropdownContainer?.className)}
-            >
-                {/*
-                 * dropdownClip is the grid item. It owns `min-height: 0` and
-                 * `overflow: hidden` so the parent's `grid-template-rows: 0fr`
-                 * can fully collapse to 0 height. Padding/background-color
-                 * stay on .dropdownContent (one level deeper) so they don't
-                 * extend the grid item's box when closed.
-                 */}
-                <div className={styles.dropdownClip}>
-                    <div
-                        {...overrides?.dropdownContent}
-                        className={clsx(styles.dropdownContent, styles[size], overrides?.dropdownContent?.className)}
-                    >
-                        <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/stories/accordionselect/AccordionSelect.module.scss

@@ -1,119 +0,0 @@
-.root {
-    color: var(--pte-new-colors-contentPrimary);
-    border: 1px solid var(--pte-new-colors-borderStrong);
-    border-radius: var(--pte-new-borders-radius-roundedMedium);
-    background: var(--pte-new-colors-surfacePrimary);
-    overflow: hidden;
-    transition: var(--pte-animations-interaction);
-
-    &.open {
-        border-color: var(--pte-new-colors-borderUltrastrong);
-    }
-}
-
-.header {
-    padding: 10px 12px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    background-color: var(--pte-new-colors-overlayWhiteSubtle);
-    cursor: pointer;
-    transition: var(--pte-animations-interaction);
-
-    &.open {
-        background-color: var(--pte-new-colors-overlayMedium);
-        border-bottom: 1px solid var(--pte-new-colors-borderStrong);
-    }
-
-    &:hover {
-        background-color: var(--pte-new-colors-overlayStrong);
-    }
-}
-
-.headerContent {
-    flex: 1;
-    min-width: 0;
-}
-
-.headerEnd {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-}
-
-.chevron {
-    transition: transform var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
-    transform: rotate(90deg);
-
-    &.open {
-        transform: rotate(-90deg);
-    }
-}
-
-.dropdown {
-    display: grid;
-    grid-template-rows: 0fr;
-    opacity: 0;
-    transition:
-        grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
-        opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
-
-    &.open {
-        grid-template-rows: 1fr;
-        opacity: 1;
-    }
-}
-
-.dropdownContent {
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    gap: 0;
-}
-
-.option {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 14px;
-    border-bottom: 0.5px solid var(--pte-new-colors-borderMedium);
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    transition: background var(--pte-animations-duration-instant) var(--pte-animations-timing-easeInOutExpo);
-
-    &:last-of-type {
-        border-bottom: none;
-    }
-
-    &[data-selected='true'] {
-        background: var(--pte-new-colors-overlaySubtle);
-    }
-
-    &:hover {
-        background: var(--pte-new-colors-overlayMedium);
-    }
-
-    &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-
-        &:hover {
-            background: transparent;
-        }
-    }
-
-    .check {
-        padding: 4px;
-    }
-}
-
-.optionContent {
-    flex: 1;
-    text-align: left;
-    min-width: 0;
-}

package/src/stories/accordionselect/AccordionSelect.stories.ts

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { AccordionSelect } from './AccordionSelect';
-
-const meta: Meta<typeof AccordionSelect> = {
-    title: 'Inputs/AccordionSelect',
-    component: AccordionSelect,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof AccordionSelect>;
-
-const options = [
-    { id: 'champagne', node: 'In an alleyway, drinking champagne' },
-    { id: 'rooftop', node: 'On a rooftop, watching the sunset' },
-    { id: 'garden', node: 'In a garden, under the stars' },
-];
-
-export const Default: Story = {
-    args: {
-        options,
-        value: 'champagne',
-    },
-};
-
-export const NoSelection: Story = {
-    args: {
-        options,
-        placeholder: 'Where were we?',
-    },
-};
-
-export const WithDisabledOption: Story = {
-    args: {
-        options: [...options, { id: 'nowhere', node: 'Nowhere, it was all a dream', disabled: true }],
-        value: 'champagne',
-    },
-};

package/src/stories/accordionselect/AccordionSelect.test.tsx

@@ -1,327 +0,0 @@
-import { useState } from 'react';
-import { render, screen, waitFor, within } from '../../test/render';
-import type { AccordionSelectOption } from './AccordionSelect';
-import { AccordionSelect } from './AccordionSelect';
-
-const options: AccordionSelectOption[] = [
-    { id: 'champagne', node: 'In an alleyway, drinking champagne' },
-    { id: 'rooftop', node: 'On a rooftop, watching the sunset' },
-    { id: 'garden', node: 'In a garden, under the stars' },
-];
-
-function ControlledAccordionSelect(props: Partial<React.ComponentProps<typeof AccordionSelect>>) {
-    const [value, setValue] = useState<string | null>((props.value as string | null) ?? null);
-
-    return (
-        <AccordionSelect
-            options={options}
-            value={value}
-            onChange={(opt) => {
-                setValue(opt.id);
-                props.onChange?.(opt);
-            }}
-            {...props}
-        />
-    );
-}
-
-describe('AccordionSelect', () => {
-    it('renders with placeholder when no value is selected', () => {
-        render(<AccordionSelect options={options} placeholder="Where were we?" />);
-        expect(screen.getByText('Where were we?')).toBeInTheDocument();
-    });
-
-    it('renders default placeholder when none is provided', () => {
-        render(<AccordionSelect options={options} />);
-        expect(screen.getByText('Select an option')).toBeInTheDocument();
-    });
-
-    it('displays the selected option in the header', () => {
-        render(<AccordionSelect options={options} value="champagne" />);
-        // Option text also appears in the collapsed-but-mounted dropdown list, so scope to the header
-        expect(within(screen.getByRole('button')).getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
-    });
-
-    it('expands to show all options when header is clicked', async () => {
-        const { user } = render(<AccordionSelect options={options} value="champagne" />);
-
-        await user.click(screen.getByRole('button'));
-
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-            expect(screen.getByText('In a garden, under the stars')).toBeInTheDocument();
-        });
-    });
-
-    it('calls onChange when an option is selected', async () => {
-        const handleChange = vi.fn();
-        const { user } = render(<ControlledAccordionSelect value="champagne" onChange={handleChange} />);
-
-        await user.click(screen.getByRole('button', { name: /champagne/i }));
-
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        });
-
-        await user.click(screen.getByText('On a rooftop, watching the sunset'));
-
-        expect(handleChange).toHaveBeenCalledWith(
-            expect.objectContaining({ id: 'rooftop', node: 'On a rooftop, watching the sunset' }),
-        );
-    });
-
-    it('closes the accordion after selection when closeOnSelect is true (default)', async () => {
-        const { user } = render(<ControlledAccordionSelect value="champagne" />);
-
-        await user.click(screen.getByRole('button', { name: /champagne/i }));
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        });
-
-        await user.click(screen.getByText('On a rooftop, watching the sunset'));
-
-        await waitFor(() => {
-            expect(screen.queryByRole('button', { name: /garden/i })).not.toBeInTheDocument();
-        });
-    });
-
-    it('keeps the accordion open after selection when closeOnSelect is false', async () => {
-        const { user } = render(<ControlledAccordionSelect value="champagne" closeOnSelect={false} />);
-
-        await user.click(screen.getByRole('button', { name: /champagne/i }));
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        });
-
-        await user.click(screen.getByText('On a rooftop, watching the sunset'));
-
-        expect(screen.getByText('In a garden, under the stars')).toBeInTheDocument();
-    });
-
-    it('toggles open and closed on header click', async () => {
-        const { user } = render(<AccordionSelect options={options} value="champagne" />);
-
-        const header = screen.getByRole('button');
-
-        // Open
-        await user.click(header);
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        });
-
-        // Close
-        await user.click(header);
-        await waitFor(() => {
-            expect(screen.queryByRole('button', { name: /rooftop/i })).not.toBeInTheDocument();
-        });
-    });
-
-    it('supports keyboard interaction on the header (Enter)', async () => {
-        const { user } = render(<AccordionSelect options={options} value="champagne" />);
-
-        const header = screen.getByRole('button');
-        header.focus();
-        await user.keyboard('{Enter}');
-
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        });
-    });
-
-    it('supports keyboard interaction on the header (Space)', async () => {
-        const { user } = render(<AccordionSelect options={options} value="champagne" />);
-
-        const header = screen.getByRole('button');
-        header.focus();
-        await user.keyboard(' ');
-
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        });
-    });
-
-    it('renders disabled options as disabled buttons', async () => {
-        const disabledOptions = [...options, { id: 'nowhere', node: 'Nowhere, it was all a dream', disabled: true }];
-        const { user } = render(<AccordionSelect options={disabledOptions} value="champagne" />);
-
-        await user.click(screen.getByRole('button', { name: /champagne/i }));
-
-        await waitFor(() => {
-            const disabledButton = screen.getByText('Nowhere, it was all a dream').closest('button');
-            expect(disabledButton).toBeDisabled();
-        });
-    });
-
-    it('calls onOpenChange when the accordion opens or closes', async () => {
-        const handleOpenChange = vi.fn();
-        const { user, container } = render(
-            <AccordionSelect options={options} value="champagne" onOpenChange={handleOpenChange} />,
-        );
-
-        // Click the header (the div[role=button][tabindex=0]) to open
-        const header = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement;
-        await user.click(header);
-        expect(handleOpenChange).toHaveBeenCalledWith(true);
-
-        // Click the header again to close
-        await user.click(header);
-        expect(handleOpenChange).toHaveBeenCalledWith(false);
-    });
-
-    it('renders custom content via renderSelected', () => {
-        render(
-            <AccordionSelect
-                options={options}
-                value="champagne"
-                renderSelected={(opt) => <span data-testid="custom-selected">{opt.id}</span>}
-            />,
-        );
-        expect(screen.getByTestId('custom-selected')).toHaveTextContent('champagne');
-    });
-
-    it('renders custom content via renderOption', async () => {
-        const { user } = render(
-            <AccordionSelect
-                options={options}
-                value="champagne"
-                renderOption={(opt, isSelected) => (
-                    <span data-testid={`custom-opt-${opt.id}`}>
-                        {opt.id} {isSelected ? '(selected)' : ''}
-                    </span>
-                )}
-            />,
-        );
-
-        await user.click(screen.getByRole('button'));
-
-        await waitFor(() => {
-            expect(screen.getByTestId('custom-opt-champagne')).toHaveTextContent('champagne (selected)');
-            expect(screen.getByTestId('custom-opt-rooftop')).toHaveTextContent('rooftop');
-        });
-    });
-
-    it('renders an action at the bottom of the dropdown', async () => {
-        const { user } = render(
-            <AccordionSelect options={options} value="champagne" action={<button type="button">Add new</button>} />,
-        );
-
-        await user.click(screen.getByRole('button', { name: /champagne/i }));
-
-        await waitFor(() => {
-            expect(screen.getByText('Add new')).toBeInTheDocument();
-        });
-    });
-
-    it('renders a label in the header', () => {
-        render(
-            <AccordionSelect
-                options={options}
-                value="champagne"
-                label={<span data-testid="header-label">Active</span>}
-            />,
-        );
-        expect(screen.getByTestId('header-label')).toHaveTextContent('Active');
-    });
-
-    it('closes on outside click when closeOnClickOutside is true (default)', async () => {
-        const { user } = render(
-            <div>
-                <AccordionSelect options={options} value="champagne" />
-                <button type="button">Outside</button>
-            </div>,
-        );
-
-        // Open
-        await user.click(screen.getByRole('button', { name: /champagne/i }));
-        await waitFor(() => {
-            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        });
-
-        // Click outside
-        await user.click(screen.getByText('Outside'));
-        await waitFor(() => {
-            expect(screen.queryByRole('button', { name: /rooftop/i })).not.toBeInTheDocument();
-        });
-    });
-
-    it('respects controlled isOpen prop', () => {
-        render(<AccordionSelect options={options} value="champagne" isOpen />);
-        // When isOpen=true, dropdown content should be rendered
-        expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-        expect(screen.getByText('In a garden, under the stars')).toBeInTheDocument();
-    });
-
-    describe('uncontrolled selection', () => {
-        it('renders with defaultValue', () => {
-            render(<AccordionSelect options={options} defaultValue="champagne" />);
-            expect(
-                within(screen.getByRole('button')).getByText('In an alleyway, drinking champagne'),
-            ).toBeInTheDocument();
-        });
-
-        it('renders with placeholder when no defaultValue', () => {
-            render(<AccordionSelect options={options} placeholder="Where were we?" />);
-            expect(screen.getByText('Where were we?')).toBeInTheDocument();
-        });
-
-        it('updates selection without external state', async () => {
-            const { user, container } = render(<AccordionSelect options={options} defaultValue="champagne" />);
-
-            const header = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement;
-            await user.click(header);
-
-            await waitFor(() => {
-                expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-            });
-
-            await user.click(screen.getByText('On a rooftop, watching the sunset'));
-
-            await waitFor(() => {
-                expect(header).toHaveTextContent('On a rooftop, watching the sunset');
-            });
-        });
-
-        it('calls onChange in uncontrolled mode', async () => {
-            const handleChange = vi.fn();
-            const { user, container } = render(
-                <AccordionSelect options={options} defaultValue="champagne" onChange={handleChange} />,
-            );
-
-            const header = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement;
-            await user.click(header);
-
-            await waitFor(() => {
-                expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
-            });
-
-            await user.click(screen.getByText('On a rooftop, watching the sunset'));
-
-            expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ id: 'rooftop' }));
-        });
-
-        it('renders disabled option as selected when defaultValue points to it', async () => {
-            const disabledOptions = [
-                ...options,
-                { id: 'nowhere', node: 'Nowhere, it was all a dream', disabled: true },
-            ];
-            const { user, container } = render(<AccordionSelect options={disabledOptions} defaultValue="nowhere" />);
-
-            // Header shows the disabled option's text
-            const allMatches = screen.getAllByText('Nowhere, it was all a dream');
-            expect(allMatches.length).toBeGreaterThanOrEqual(1);
-
-            // Open and verify the option button is disabled
-            const header = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement;
-            await user.click(header);
-
-            await waitFor(() => {
-                // Find the option button (not the header text)
-                const optionButtons = container.querySelectorAll('button[data-selected]');
-                const disabledButton = Array.from(optionButtons).find((btn) => btn.textContent?.includes('Nowhere'));
-                expect(disabledButton).toBeTruthy();
-                expect(disabledButton).toBeDisabled();
-                expect(disabledButton).toHaveAttribute('data-selected', 'true');
-            });
-        });
-    });
-});