paris 0.23.1 → 0.24.0

package/src/stories/tag/Tag.module.scss

@@ -1,189 +0,0 @@
-.tag {
-    width: fit-content;
-}
-
-.normal {
-    height: 26px;
-
-    &.rectangle {
-        padding: 7px 13px;
-
-        &.sharp {
-            padding: 6px 12px;
-        }
-
-        &.secondary, &.draft, &.new {
-            padding: 6px 12px;
-        }
-    }
-
-    &.square {
-        width: 26px;
-        padding: 4px;
-
-        &.sharp {
-            padding: 3px;
-        }
-
-        &.secondary, &.draft, &.new {
-            padding: 3px;
-        }
-    }
-}
-
-.compact {
-    height: 20px;
-
-    &.rectangle {
-        padding: 5px 10px;
-
-        &.sharp {
-            padding: 4px 9px;
-        }
-
-        &.secondary, &.draft, &.new {
-            padding: 4px 9px;
-        }
-    }
-
-    &.square {
-        width: 20px;
-        padding: 4px;
-
-        &.sharp {
-            padding: 3px;
-        }
-
-        &.secondary, &.draft, &.new {
-            padding: 3px;
-        }
-    }
-}
-
-.sharp {
-    border-radius: var(--pte-borders-radius-rectangle);
-    border: 1px solid;
-}
-
-.rounded {
-    border-radius: var(--pte-borders-radius-roundedSmall);
-}
-
-.roundedXL {
-    border-radius: var(--pte-borders-radius-pill);
-}
-
-.square {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-.icon {
-    width: 12px;
-    height: 12px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-
-    svg {
-        width: 10px !important;
-        height: 10px !important;
-    }
-}
-
-.default {
-    background-color: var(--pte-new-colors-overlayStrong);
-    color: var(--pte-new-colors-contentSecondary);
-    border-color: var(--pte-new-colors-contentSecondary);
-}
-
-.secondary {
-    background-color: transparent;
-    color: var(--pte-new-colors-contentSecondary);
-
-    border: 1px solid var(--pte-new-colors-borderMedium);
-}
-
-.positive {
-    color: var(--pte-new-colors-contentPositive);
-    background-color: var(--pte-new-colors-backgroundPositive);
-    border-color: var(--pte-new-colors-contentPositive);
-
-    &[data-status="medium"] {
-        background-color: var(--pte-new-colors-backgroundPositiveMedium);
-        border-color: var(--pte-new-colors-contentPositiveMedium);
-    }
-    &[data-status="strong"] {
-        background-color: var(--pte-new-colors-backgroundPositiveStrong);
-        border-color: var(--pte-new-colors-contentPositiveStrong);
-    }
-}
-
-.warning {
-    color: var(--pte-new-colors-contentWarning);
-    background-color: var(--pte-new-colors-backgroundWarning);
-    border-color: var(--pte-new-colors-contentWarning);
-
-    &[data-status="medium"] {
-        background-color: var(--pte-new-colors-backgroundWarningMedium);
-        border-color: var(--pte-new-colors-contentWarningMedium);
-    }
-    &[data-status="strong"] {
-        background-color: var(--pte-new-colors-backgroundWarningStrong);
-        border-color: var(--pte-new-colors-contentWarningStrong);
-    }
-}
-
-.negative {
-    color: var(--pte-new-colors-contentNegative);
-    background-color: var(--pte-new-colors-backgroundNegative);
-    border-color: var(--pte-new-colors-contentNegative);
-
-    &[data-status="medium"] {
-        background-color: var(--pte-new-colors-backgroundNegativeMedium);
-        border-color: var(--pte-new-colors-contentNegativeMedium);
-    }
-    &[data-status="strong"] {
-        background-color: var(--pte-new-colors-backgroundNegativeStrong);
-        border-color: var(--pte-new-colors-contentNegativeStrong);
-    }
-}
-
-.void {
-    background-color: var(--pte-new-colors-backgroundSecondary);
-    color: var(--pte-new-colors-contentDisabled);
-    border-color: var(--pte-new-colors-contentDisabled);
-}
-
-.draft {
-    background-color: transparent;
-    color: var(--pte-new-colors-contentTertiary);
-
-    border: 1px dashed var(--pte-new-colors-borderMedium);
-}
-
-.new {
-    color: var(--pte-new-colors-contentPrimary);
-    background-color: var(--pte-new-colors-backgroundAccentMedium);
-    animation: glow 2s infinite var(--pte-new-animations-timing-easeInOut);
-
-    border: 1px solid var(--pte-new-colors-contentAccent);
-}
-
-@keyframes glow {
-    0%, 100% {
-        box-shadow:
-                var(--pte-new-lighting-glowSubtle1),
-                var(--pte-new-lighting-glowSubtle2),
-                var(--pte-new-lighting-glowSubtle3);
-    }
-    50% {
-        box-shadow:
-                var(--pte-new-lighting-glowDeep1),
-                var(--pte-new-lighting-glowDeep2),
-                var(--pte-new-lighting-glowDeep3);
-    }
-}

package/src/stories/tag/Tag.stories.ts

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Tag } from './Tag';
-
-const meta: Meta<typeof Tag> = {
-    title: 'Content/Tag',
-    component: Tag,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tag>;
-
-export const Default: Story = {
-    args: {
-        children: 'Label',
-    },
-};
-
-export const Secondary: Story = {
-    args: {
-        children: 'Secondary',
-        kind: 'secondary',
-    },
-};
-
-export const Compact: Story = {
-    args: {
-        children: 'Compact',
-        size: 'compact',
-        kind: 'negative',
-    },
-};
-
-export const New: Story = {
-    args: {
-        children: 'New',
-        size: 'compact',
-        kind: 'new',
-    },
-};
-
-export const Square: Story = {
-    args: {
-        children: 'New',
-        size: 'compact',
-        shape: 'square',
-        kind: 'positive',
-    },
-};
-
-export const RoundedXL: Story = {
-    args: {
-        children: 'Label',
-        size: 'normal',
-        corners: 'roundedXL',
-        kind: 'default',
-    },
-};

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

@@ -1,90 +0,0 @@
-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/tag/Tag.tsx

@@ -1,84 +0,0 @@
-'use client';
-
-import type { CSSLength } from '@ssh/csstypes';
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
-import { useMemo } from 'react';
-import { Check, Icon } from '../icon';
-import typography from '../text/Typography.module.css';
-import { VisuallyHidden } from '../utility';
-import styles from './Tag.module.scss';
-
-export const CornerPresets = ['sharp', 'rounded', 'roundedXL'] as const;
-
-export type TagProps = {
-    /** The size of the Tag. */
-    size?: 'normal' | 'compact';
-    /** The shape of the Tag. `square` will display only the `icon`. */
-    shape?: 'rectangle' | 'square';
-    /**
-     * The radius of the corners of the Tag. 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
-     */
-    corners?: (typeof CornerPresets)[number] | CSSLength;
-    /** The kind of Tag. */
-    kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new' | 'void' | 'draft';
-    /** The color level of Tag background, applies to the colored states of `positive`, `warning`, and `negative`. */
-    colorLevel?: 'light' | 'medium' | 'strong';
-    /** An icon to display in the shape: `square` variant of the Tag. For best results, use an SVG icon with fill set to `currentColor`. */
-    icon?: ReactElement;
-    /** The contents of the Tag. */
-    children: ReactNode;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
-
-/**
- * A Tag component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Tag } from 'paris/tag';
- * ```
- * @constructor
- */
-export const Tag: FC<TagProps> = ({
-    size = 'normal',
-    shape = 'rectangle',
-    corners,
-    kind = 'default',
-    colorLevel,
-    icon = <Icon icon={Check} size={12} />,
-    children,
-    className,
-}) => {
-    const cornersIsPreset = useMemo(() => (CornerPresets as readonly string[]).includes(corners as string), [corners]);
-    return (
-        <div
-            className={clsx(
-                styles.tag,
-                styles[size],
-                styles[kind],
-                size === 'normal' && typography.labelXSmall,
-                size === 'compact' && typography.labelXXSmall,
-                styles[shape],
-                !corners && size === 'normal' && styles.sharp,
-                !corners && size === 'compact' && styles.rounded,
-                corners && cornersIsPreset && styles[corners],
-                className,
-            )}
-            data-status={colorLevel}
-            style={corners && !cornersIsPreset ? { borderRadius: corners } : {}}
-        >
-            {shape !== 'square' && <div>{children}</div>}
-            {shape === 'square' && (
-                <div className={styles.icon}>
-                    {icon}
-                    <VisuallyHidden>{children}</VisuallyHidden>
-                </div>
-            )}
-        </div>
-    );
-};

package/src/stories/text/Text.module.scss

@@ -1,39 +0,0 @@
-.text {
-    font-family: var(--pte-typography-fontFamily);
-    color: var(--text-color);
-}
-
-/* Font weight theme values */
-$text-weights: (
-    "thin": var(--pte-typography-fontWeights-thin),
-    "extralight": var(--pte-typography-fontWeights-extralight),
-    "light": var(--pte-typography-fontWeights-light),
-    "normal": var(--pte-typography-fontWeights-normal),
-    "medium": var(--pte-typography-fontWeights-medium),
-    "semibold": var(--pte-typography-fontWeights-semibold),
-    "bold": var(--pte-typography-fontWeights-bold),
-    "extrabold": var(--pte-typography-fontWeights-extrabold),
-    "black": var(--pte-typography-fontWeights-black),
-    "extrablack": var(--pte-typography-fontWeights-extrablack),
-);
-
-
-@each $weight-name,
-$weight-value in $text-weights {
-    .weight-#{$weight-name} {
-        font-weight: $weight-value !important;
-    }
-}
-
-/* Font style theme values */
-$font-styles: (
-    "normal": var(--pte-typography-fontStyles-normal),
-    "italic": var(--pte-typography-fontStyles-italic),
-);
-
-@each $style-name,
-$style-value in $font-styles {
-    .fontStyle-#{$style-name} {
-        font-style: $style-value !important;
-    }
-}

package/src/stories/text/Text.stories.ts

@@ -1,195 +0,0 @@
-// noinspection JSUnusedGlobalSymbols
-
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Text } from './Text';
-
-const meta: Meta<typeof Text> = {
-    title: 'Content/Text',
-    component: Text,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Text>;
-
-/**
- * By default, the Text component renders a `<span>` element with Paragraph Medium styling.
- */
-export const Default: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-    },
-};
-
-// The following stories are auto-generated with `pnpm generate:text`.
-// Do not edit them manually; instead, edit the `generateTextStories` function in `scripts/text.ts` and run `pnpm generate:text -s`.
-
-// @auto-generated-start
-
-export const DisplayLarge: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'displayLarge',
-    },
-};
-
-export const DisplayMedium: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'displayMedium',
-    },
-};
-
-export const DisplaySmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'displaySmall',
-    },
-};
-
-export const HeadingLarge: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'headingLarge',
-    },
-};
-
-export const HeadingMedium: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'headingMedium',
-    },
-};
-
-export const HeadingSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'headingSmall',
-    },
-};
-
-export const HeadingXSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'headingXSmall',
-    },
-};
-
-export const HeadingXXSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'headingXXSmall',
-    },
-};
-
-export const LabelXLarge: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'labelXLarge',
-    },
-};
-
-export const LabelLarge: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'labelLarge',
-    },
-};
-
-export const LabelMedium: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'labelMedium',
-    },
-};
-
-export const LabelSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'labelSmall',
-    },
-};
-
-export const LabelXSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'labelXSmall',
-    },
-};
-
-export const ParagraphLarge: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphLarge',
-    },
-};
-
-export const ParagraphMedium: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphMedium',
-    },
-};
-
-export const ParagraphSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphSmall',
-    },
-};
-
-export const ParagraphXSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphXSmall',
-    },
-};
-
-export const ParagraphXXSmall: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphXXSmall',
-    },
-};
-
-export const ParagraphLargeBold: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphLarge',
-        weight: 'medium',
-    },
-};
-
-export const ParagraphMediumBold: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphMedium',
-        weight: 'medium',
-    },
-};
-
-export const ParagraphSmallBold: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphSmall',
-        weight: 'medium',
-    },
-};
-
-export const ParagraphXSmallBold: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphXSmall',
-        weight: 'medium',
-    },
-};
-
-export const ParagraphLargeItalic: Story = {
-    args: {
-        children: 'In an alleyway, drinking champagne',
-        kind: 'paragraphLarge',
-        fontStyle: 'italic',
-    },
-};
-
-// @auto-generated-end