paris 0.23.1 → 0.24.0

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

@@ -1,266 +0,0 @@
-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/button/Button.tsx

@@ -1,226 +0,0 @@
-'use client';
-
-import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
-import { Button as AriaButton } from '@ariakit/react';
-import type { CSSLength } from '@ssh/csstypes';
-import { clsx } from 'clsx';
-import fontColorContrast from 'font-color-contrast';
-import type { CSSProperties, FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
-import { useMemo } from 'react';
-import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
-import type { Enhancer } from '../../types/Enhancer';
-import { NotificationDot, Spinner } from '../icon';
-import { Text } from '../text';
-import { pvar } from '../theme';
-import styles from './Button.module.scss';
-
-const EnhancerSizes = {
-    large: 13,
-    medium: 12,
-    small: 11,
-    xs: 9,
-};
-
-export const CornerPresets = ['sharp', 'rounded', 'roundedXL'] as const;
-
-export const ButtonThemes = {
-    negative: {
-        primary: pvar('new.colors.buttonBorderNegative'),
-        secondary: pvar('new.colors.buttonFillHoverNegative'),
-        primaryAlt: pvar('new.colors.contentNegative'),
-        secondaryAlt: pvar('new.colors.backgroundNegativeStrong'),
-    },
-    positive: {
-        primary: pvar('new.colors.contentPositive'),
-        secondary: pvar('new.colors.backgroundPositive'),
-        primaryAlt: pvar('new.colors.contentPositive'),
-        secondaryAlt: pvar('new.colors.backgroundPositiveStrong'),
-    },
-    warning: {
-        primary: pvar('new.colors.contentWarning'),
-        secondary: pvar('new.colors.backgroundWarning'),
-        primaryAlt: pvar('new.colors.contentWarning'),
-        secondaryAlt: pvar('new.colors.backgroundWarningStrong'),
-    },
-} as const;
-
-export type ButtonProps = {
-    /**
-     * The appearance of the Button.
-     * @default primary
-     */
-    kind?: 'primary' | 'secondary' | 'tertiary';
-    /**
-     * The size of the Button.
-     * @default large
-     */
-    size?: 'large' | 'medium' | 'small' | 'xs';
-    /**
-     * The shape of the Button.
-     * @default pill
-     */
-    shape?: 'pill' | 'circle' | 'rectangle' | 'square';
-    /**
-     * The radius of the corners for the `rectangle` and `square` Button shapes. Either a preset or a valid {@link CSSLength} string.
-     * `sharp` will have no rounding, `rounded` will have a slight rounding, and `roundedXL` will have a large rounding.
-     * @see CornerPresets
-     * @default rounded
-     */
-    corners?: (typeof CornerPresets)[number] | CSSLength;
-    /**
-     * A color to apply for the Button. Provide an object with `primary` and `secondary` properties to set the primary and hover colors.
-     */
-    colors?: {
-        /** The primary color of the Button. Primary buttons will use this as the background color, and secondary/tertiary buttons will use it for the text and border. */
-        primary: string;
-        /**
-         * The secondary color of the Button, used for hover/active states.
-         */
-        secondary: string;
-    };
-    /**
-     * Preset themes for coloring the button. Overrides the `colors` prop.
-     */
-    theme?: keyof typeof ButtonThemes;
-    /**
-     * An icon or other element to render before the Button's text. A `size` argument is passed that should be used to determine the width & height of the content displayed.
-     *
-     * When Button shape is `circle` or `square`, this element will be the only visible content.
-     */
-    startEnhancer?: Enhancer;
-    /**
-     * An icon or other element to render after the Button's text. A `size` argument is passed that should be used to determine the width & height of the content displayed.
-     */
-    endEnhancer?: Enhancer;
-    /**
-     * Disables the Button, disallowing user interaction.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Displays a loading indicator inside the Button and disables user interaction.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * The interaction handler for the Button.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Optionally, the Button can be rendered as an anchor element by passing an `href` prop. To use a Next.js Link component, use the `render` prop directly.
-     */
-    href?: string;
-    /**
-     * Optionally, the target of the anchor element can be specified (defaults to `_self`).
-     */
-    hreftarget?: HTMLAttributeAnchorTarget;
-    /**
-     * The contents of the Button.
-     *
-     * This should be text. When Button shape is `circle` or `square`, the action description should still be passed here for screen readers.
-     */
-    children?: ReactNode | ReactNode[];
-    /**
-     * Displays a notification dot.
-     */
-    displayNotificationDot?: boolean;
-} & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
-
-/**
- * A `Button` is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
- *
- * <hr />
- *
- * To use the `Button` component, import it as follows:
- *
- * ```js
- * import { Button } from 'paris/button';
- * ```
- *
- * @constructor
- */
-export const Button: FC<ButtonProps> = ({
-    kind = 'primary',
-    size = 'large',
-    shape = 'pill',
-    corners = 'rounded',
-    colors,
-    theme,
-    type = 'button',
-    startEnhancer,
-    endEnhancer,
-    onClick,
-    children,
-    disabled,
-    loading,
-    href,
-    displayNotificationDot = false,
-    style,
-    ...props
-}) => {
-    const cornersIsPreset = useMemo(() => (CornerPresets as readonly string[]).includes(corners), [corners]);
-    return (
-        <AriaButton
-            {...props}
-            style={
-                theme || colors
-                    ? ({
-                          '--pte-new-colors-contentInversePrimary': fontColorContrast(
-                              theme
-                                  ? ButtonThemes[theme].primary
-                                  : colors?.primary || pvar('new.colors.contentPrimary'),
-                          ), // text for primary
-                          '--pte-new-colors-buttonFill': theme ? ButtonThemes[theme].primaryAlt : colors?.primary, // background for primary
-                          '--pte-new-colors-buttonFillHover': theme
-                              ? ButtonThemes[theme].secondaryAlt
-                              : colors?.secondary, // hover background for primary
-                          '--pte-new-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary, // text for secondary/tertiary
-                          '--pte-new-colors-buttonBorder': theme ? ButtonThemes[theme].primary : colors?.primary, // border for secondary/tertiary
-                          '--pte-new-colors-overlayMedium': theme ? ButtonThemes[theme].secondary : colors?.secondary, // hover background for secondary/tertiary
-                          borderRadius: !cornersIsPreset ? corners : '',
-                          ...style,
-                      } as CSSProperties)
-                    : { borderRadius: !cornersIsPreset ? corners : '', ...style }
-            }
-            className={clsx(
-                styles.button,
-                styles[kind],
-                styles[shape],
-                styles[size],
-                cornersIsPreset && styles[corners],
-                props?.className,
-            )}
-            aria-disabled={disabled ?? false}
-            type={type}
-            aria-details={typeof children === 'string' ? children : undefined}
-            onClick={!disabled && !href && !loading ? onClick : () => {}}
-            disabled={false}
-            {...(href
-                ? {
-                      render: (properties) => (
-                          // eslint-disable-next-line jsx-a11y/anchor-has-content
-                          <a
-                              {...properties}
-                              href={href}
-                              target={props.hreftarget ?? '_self'}
-                              rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
-                          />
-                      ),
-                  }
-                : {})}
-        >
-            {!!(startEnhancer && !loading) && <MemoizedEnhancer enhancer={startEnhancer} size={EnhancerSizes[size]} />}
-            {!['circle', 'square'].includes(shape) && (
-                <Text kind="labelXSmall">
-                    {!loading ? children || 'Button' : <Spinner size={EnhancerSizes[size]} />}
-                </Text>
-            )}
-            {!!(endEnhancer && !loading) && <MemoizedEnhancer enhancer={endEnhancer} size={EnhancerSizes[size]} />}
-            {!!displayNotificationDot && (
-                <div className="absolute top-0 right-0">
-                    <NotificationDot size={8} />
-                </div>
-            )}
-        </AriaButton>
-    );
-};

package/src/stories/callout/Callout.module.scss

@@ -1,43 +0,0 @@
-.content {
-    background-color: var(--pte-new-colors-overlayMedium);
-    border-radius: 6px;
-    width: 100%;
-    padding: 8px 10px;
-    color: var(--pte-new-colors-contentSecondary);
-
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-
-    .icon {
-        width: 16px;
-        height: 16px;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-
-        svg {
-            width: 13px !important;
-            height: 13px !important;
-        }
-    }
-
-    &.warning {
-        background-color: var(--pte-new-colors-backgroundWarning);
-        color: var(--pte-new-colors-contentWarning);
-    }
-
-    &.negative {
-        background-color: var(--pte-new-colors-overlayRed);
-        color: var(--pte-new-colors-contentNegative);
-    }
-
-    &.positive {
-        .icon {
-            color: var(--pte-new-colors-contentPositive);
-        }
-    }
-}

package/src/stories/callout/Callout.stories.ts

@@ -1,52 +0,0 @@
-import { faCancel, faCheck, faWarning } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement } from 'react';
-import { Callout } from './Callout';
-
-const meta: Meta<typeof Callout> = {
-    title: 'Surfaces/Callout',
-    component: Callout,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Callout>;
-
-export const Default: Story = {
-    args: {
-        children: 'Receipts required for transactions over $25',
-    },
-};
-
-export const Negative: Story = {
-    args: {
-        variant: 'negative',
-        children: 'Please upload a receipt',
-        icon: createElement(FontAwesomeIcon, { icon: faCancel }),
-    },
-};
-
-export const Warning: Story = {
-    args: {
-        variant: 'warning',
-        children: 'Receipt does not match transaction',
-        icon: createElement(FontAwesomeIcon, { icon: faWarning }),
-    },
-};
-
-export const Positive: Story = {
-    args: {
-        variant: 'positive',
-        children: 'Receipt saved',
-        icon: createElement(FontAwesomeIcon, { icon: faCheck }),
-    },
-};
-
-export const IconHidden: Story = {
-    args: {
-        variant: 'default',
-        children: 'Please upload a receipt',
-        icon: null,
-    },
-};

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

@@ -1,79 +0,0 @@
-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');
-    });
-});