paris 0.23.0 → 0.24.0

package/src/stories/callout/Callout.tsx

@@ -1,43 +0,0 @@
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
-import { ArrowRight, Icon } from '../icon';
-import { RemoveFromDOM, TextWhenString } from '../utility';
-import styles from './Callout.module.scss';
-
-export type CalloutProps = {
-    /** The variant of the Callout. */
-    variant?: 'default' | 'warning' | 'positive' | 'negative';
-    /** An icon to display in the Callout. To hide icon, set `icon={null}`. For best results, use an SVG icon with fill set to `currentColor`. */
-    icon?: ReactElement | null;
-    /** The contents of the Callout. */
-    children?: ReactNode;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
-
-/**
- * A Callout component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Callout } from 'paris/callout';
- * ```
- * @constructor
- */
-export const Callout: FC<CalloutProps> = ({
-    variant = 'default',
-    icon = <Icon icon={ArrowRight} size={16} className={styles.icon} />,
-    children,
-    className,
-    ...props
-}) => (
-    <div className={clsx(styles.content, styles[variant], className)} {...props}>
-        <RemoveFromDOM when={!icon}>
-            <div className={styles.icon}>{icon}</div>
-        </RemoveFromDOM>
-        <TextWhenString as="p" kind="paragraphXSmall">
-            {children}
-        </TextWhenString>
-    </div>
-);

package/src/stories/card/Card.module.scss

@@ -1,42 +0,0 @@
-.container {
-    user-select: var(--pte-utils-defaultUserSelect);
-    width: auto;
-}
-
-.raised {
-    border-radius: var(--pte-borders-radius-rounded);
-    background-color: var(--pte-new-colors-surfacePrimary);
-    box-shadow: var(--pte-new-lighting-subtlePopup);
-    border: 1px solid var(--pte-new-colors-surfacePrimary);
-
-    &.pending {
-        border: 1px dashed var(--pte-new-colors-borderMedium);
-        background-color: var(--pte-new-colors-surfaceSecondary);
-    }
-}
-
-.surface {
-    border-radius: var(--pte-new-borders-radius-roundedMedium);
-    border: 1px solid var(--pte-new-colors-borderMedium);
-    background-color: var(--pte-new-colors-overlaySubtle);
-
-    &.pending {
-        border: 1px dashed var(--pte-new-colors-borderMedium);
-        background-color: transparent;
-    }
-}
-
-.flat {
-    border-radius: var(--pte-new-borders-radius-roundedMedium);
-    border: 1px solid var(--pte-new-colors-borderStrong);
-    background: var(--pte-new-colors-overlayWhiteSubtle);
-
-    &.pending {
-        border: 1px dashed var(--pte-new-colors-borderStrong);
-    }
-}
-
-.text {
-    padding: 10px 12px;
-    color: var(--pte-new-colors-contentPrimary);
-}

package/src/stories/card/Card.stories.ts

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Card } from './Card';
-
-const meta: Meta<typeof Card> = {
-    title: 'Surfaces/Card',
-    component: Card,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-export const Raised: Story = {
-    args: {
-        children: 'Hello world!',
-    },
-};
-
-export const Surface: Story = {
-    args: {
-        kind: 'surface',
-        children: 'Hello world!',
-    },
-};
-
-export const Flat: Story = {
-    args: {
-        kind: 'flat',
-        children: 'Hello world!',
-    },
-};
-
-export const Pending: Story = {
-    args: {
-        children: 'Hello world!',
-        status: 'pending',
-    },
-};

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

@@ -1,81 +0,0 @@
-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/card/Card.tsx

@@ -1,54 +0,0 @@
-import { clsx } from 'clsx';
-import type { FC, HTMLAttributes, ReactNode } from 'react';
-import { TextWhenString } from '../utility';
-import styles from './Card.module.scss';
-
-export type CardProps = {
-    /**
-     * The visual variant of the Card. `raised` is the default variant with a drop shadow, `surface` is a variant with a border and overlay, `flat` is a variant with a border.
-     *
-     * @default "raised"
-     */
-    kind?: 'raised' | 'surface' | 'flat';
-    /**
-     * The status of the Card. `pending` adds a dashed border.
-     *
-     * @default "default"
-     */
-    status?: 'default' | 'pending';
-    /** The contents of the Card. */
-    children?: ReactNode | ReactNode[];
-    // /**
-    //  * Overrides for nested components.
-    //  */
-    // overrides?: {
-    //     tilt?: TiltProps;
-    // }
-} & HTMLAttributes<HTMLDivElement>;
-
-/**
- * A Card component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Card } from 'paris/card';
- * ```
- * @constructor
- */
-export const Card: FC<CardProps> = ({ kind = 'raised', status = 'default', children, ...props }) => (
-    <div
-        {...props}
-        className={clsx(
-            styles.container,
-            styles[kind],
-            styles[status],
-            typeof children === 'string' && styles.text,
-            props?.className,
-        )}
-    >
-        <TextWhenString kind="paragraphMedium">{children}</TextWhenString>
-    </div>
-);

package/src/stories/cardbutton/CardButton.module.scss

@@ -1,88 +0,0 @@
-.container {
-    user-select: var(--pte-utils-defaultUserSelect);
-    width: auto;
-}
-
-.card {
-    padding: 10px 12px;
-    transition: var(--pte-animations-interaction);
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    &[aria-disabled=true] {
-        pointer-events: none;
-
-        &.text {
-            color: var(--pte-new-colors-contentDisabled);
-        }
-    }
-}
-
-.raised {
-    border-radius: var(--pte-borders-radius-rounded);
-    background-color: var(--pte-new-colors-surfacePrimary);
-    box-shadow: var(--pte-new-lighting-subtlePopup);
-    border: 1px solid var(--pte-new-colors-surfacePrimary);
-
-    &:hover {
-        background-color: var(--pte-new-colors-overlayStrong);
-        cursor: default;
-    }
-
-    &[aria-disabled=false]:active {
-        background-color: var(--pte-new-colors-overlayMedium);
-        transform: scale(0.996);
-    }
-
-    &.pending {
-        border: 1px dashed var(--pte-new-colors-borderMedium);
-        background-color: var(--pte-new-colors-surfaceSecondary);
-    }
-}
-
-.surface {
-    border-radius: var(--pte-new-borders-radius-roundedMedium);
-    border: 1px solid var(--pte-new-colors-borderMedium);
-    background-color: var(--pte-new-colors-overlaySubtle);
-
-    &:hover {
-        background-color: var(--pte-new-colors-overlayStrong);
-        cursor: default;
-    }
-
-    &[aria-disabled=false]:active {
-        background-color: var(--pte-new-colors-overlayMedium);
-        transform: scale(0.996);
-    }
-
-    &.pending {
-        border: 1px dashed var(--pte-new-colors-borderMedium);
-        background-color: transparent;
-    }
-}
-
-.flat {
-    border-radius: var(--pte-new-borders-radius-roundedMedium);
-    border: 1px solid var(--pte-new-colors-borderStrong);
-    background: var(--pte-new-colors-overlayWhiteSubtle);
-
-    &:hover {
-        background-color: var(--pte-new-colors-overlayStrong);
-        cursor: default;
-    }
-
-    &[aria-disabled=false]:active {
-        background-color: var(--pte-new-colors-overlayMedium);
-        transform: scale(0.996);
-    }
-
-    &.pending {
-        border: 1px dashed var(--pte-new-colors-borderStrong);
-    }
-}
-
-.text {
-    color: var(--pte-new-colors-contentPrimary);
-}

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

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { CardButton } from './CardButton';
-
-const meta: Meta<typeof CardButton> = {
-    title: 'Inputs/CardButton',
-    component: CardButton,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof CardButton>;
-
-export const Default: Story = {
-    args: {
-        children: 'Hello world!',
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        children: 'Hello world!',
-        disabled: true,
-    },
-};

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

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

package/src/stories/cardbutton/CardButton.tsx

@@ -1,100 +0,0 @@
-'use client';
-
-import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
-import { Button as AriaButton } from '@ariakit/react';
-import { clsx } from 'clsx';
-import type { FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
-import { TextWhenString } from '../utility';
-import styles from './CardButton.module.scss';
-
-export type CardButtonProps = {
-    /**
-     * The visual variant of the CardButton. `raised` is the default variant with a drop shadow, `surface` is a variant with a border and overlay, `flat` is a variant with a border.
-     *
-     * @default "raised"
-     */
-    kind?: 'raised' | 'surface' | 'flat';
-    /**
-     * The status of the CardButton. `pending` adds a dashed border.
-     *
-     * @default "default"
-     */
-    status?: 'default' | 'pending';
-    /**
-     * Disables the Button, disallowing user interaction.
-     * @default false
-     */
-    disabled?: 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.
-     */
-    children?: ReactNode | ReactNode[];
-} & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
-
-/**
- * A CardButton component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { CardButton } from 'paris/cardbutton';
- * ```
- * @constructor
- */
-export const CardButton: FC<CardButtonProps> = ({
-    kind = 'raised',
-    status = 'default',
-    type = 'button',
-    onClick,
-    children,
-    disabled,
-    href,
-    ...props
-}) => (
-    <div className={styles.container}>
-        <AriaButton
-            {...props}
-            className={clsx(
-                styles.card,
-                styles[kind],
-                styles[status],
-                typeof children === 'string' && styles.text,
-                props?.className,
-            )}
-            aria-disabled={disabled ?? false}
-            type={type}
-            aria-details={typeof children === 'string' ? children : undefined}
-            onClick={!disabled && !href ? 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'}
-                          />
-                      ),
-                  }
-                : {})}
-        >
-            <TextWhenString kind="paragraphMedium">{children}</TextWhenString>
-        </AriaButton>
-    </div>
-);