paris 0.23.0 → 0.24.0

package/src/stories/informationaltooltip/InformationalTooltip.tsx

@@ -1,170 +0,0 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { clsx } from 'clsx';
-import type { HTMLMotionProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { useState } from 'react';
-import { Icon, Info } from '../icon';
-import { pget, pvar } from '../theme';
-import { TextWhenString } from '../utility';
-import styles from './InformationalTooltip.module.scss';
-
-export type InformationalTooltipProps = {
-    /**
-     * The size of the tooltip.
-     *
-     * @default 'large'
-     */
-    size?: 'medium' | 'large';
-    /** The element that toggles the tooltip. If none provided, it will default to an info icon */
-    trigger?: ReactNode;
-    /** The heading text in the tooltip. If null, the heading will be hidden. */
-    heading?: string | null;
-    /** The contents of the tooltip. */
-    children?: ReactNode;
-    /**
-     * The side of the trigger that will render the tooltip, though is able to move to avoid collisions.
-     *
-     * @default 'bottom'
-     */
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    /**
-     * Distance in pixels from the trigger
-     *
-     * @default '6'
-     */
-    sideOffset?: number;
-    /**
-     * The alignment against the trigger, if there are no collisions
-     *
-     * @default 'start'
-     */
-    align?: 'start' | 'center' | 'end';
-    /**
-     * Whether the tooltip should be open by default.
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * By default, tooltip opens on hover and on click (for mobile support). If you want to disable the click event, set this to true.
-     * @default false
-     */
-    disableClick?: boolean;
-    /**
-     * Optional overrides for props of each tooltip element.
-     *
-     * Valid keys are: `tooltip`, `heading`.
-     */
-    overrides?: {
-        /** The main tooltip element  */
-        tooltip?: HTMLMotionProps<'div'>;
-        /** The heading element */
-        heading?: ComponentPropsWithoutRef<'div'>;
-    };
-};
-
-/**
- * An InformationalTooltip component, based on [`radix-ui/react-tooltip`](https://www.radix-ui.com/primitives/docs/components/tooltip).
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { InformationalTooltip } from 'paris/informationaltooltip';
- * ```
- * @constructor
- */
-export const InformationalTooltip: FC<InformationalTooltipProps> = ({
-    size = 'large',
-    trigger,
-    heading,
-    children,
-    side = 'bottom',
-    sideOffset = 6,
-    align = 'start',
-    defaultOpen = false,
-    disableClick = false,
-    overrides,
-}) => {
-    const [isOpen, setOpen] = useState(defaultOpen);
-
-    /**
-     * Converts a CSS time value string to milliseconds
-     * @param timeValue - The CSS time value (e.g. '100ms', '0.5s')
-     * @returns The time value in milliseconds
-     * @throws Error if the time value format is invalid
-     */
-    const parseCSSTime = (timeValue: string): number => {
-        // Match the value and unit
-        const match = timeValue.match(/^([\d.]+)(ms|s)$/);
-
-        if (!match) {
-            console.warn('Invalid CSS time format. Expected formats: "100ms", "0.5s"');
-            return 0;
-        }
-
-        const [, value, unit] = match;
-        const numValue = parseFloat(value);
-
-        // Convert to milliseconds based on the unit
-        return unit === 's' ? numValue * 1000 : numValue;
-    };
-
-    return (
-        <RadixTooltip.Provider delayDuration={parseCSSTime(pget('new.animations.duration.normal'))}>
-            <RadixTooltip.Root open={isOpen} onOpenChange={setOpen}>
-                <RadixTooltip.Trigger
-                    onClick={() => {
-                        if (!disableClick) {
-                            setOpen(!isOpen);
-                        }
-                    }}
-                >
-                    {!trigger ? (
-                        <Icon
-                            icon={Info}
-                            size={14}
-                            className={styles.icon}
-                            style={{ color: pvar('new.colors.contentSecondary') }}
-                        />
-                    ) : (
-                        trigger
-                    )}
-                </RadixTooltip.Trigger>
-                <AnimatePresence>
-                    {isOpen && (
-                        <RadixTooltip.Portal forceMount>
-                            <RadixTooltip.Content side={side} sideOffset={sideOffset} align={align} asChild>
-                                <motion.div
-                                    initial={{ opacity: 0, y: 3 }}
-                                    animate={{ opacity: 1, y: 0 }}
-                                    exit={{ opacity: 0, y: 3 }}
-                                    transition={{
-                                        duration: parseCSSTime(pget('new.animations.duration.normal')) / 1000,
-                                    }}
-                                    {...overrides?.tooltip}
-                                    className={clsx(styles.tooltip, styles[size], overrides?.tooltip?.className)}
-                                >
-                                    {heading && (
-                                        <div
-                                            {...overrides?.heading}
-                                            className={clsx(styles.heading, overrides?.heading?.className)}
-                                        >
-                                            <TextWhenString as="p" kind="paragraphXSmall" weight="medium">
-                                                {heading}
-                                            </TextWhenString>
-                                        </div>
-                                    )}
-                                    <TextWhenString as="p" kind="paragraphXSmall">
-                                        {children}
-                                    </TextWhenString>
-                                </motion.div>
-                            </RadixTooltip.Content>
-                        </RadixTooltip.Portal>
-                    )}
-                </AnimatePresence>
-            </RadixTooltip.Root>
-        </RadixTooltip.Provider>
-    );
-};

package/src/stories/input/Input.module.scss

@@ -1,217 +0,0 @@
-.inputContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-    min-height: 34px;
-
-    background-color: var(--pte-new-colors-inputFill);
-
-    //height: 36px;
-    width: 100%;
-    padding: calc(6px - var(--pte-typography-verticalMetricsAdjust)) 13px 6px;
-
-    font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
-    font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
-    font-weight: var(--pte-typography-styles-paragraphSmall-fontWeight);
-    letter-spacing: var(--pte-typography-styles-paragraphSmall-letterSpacing);
-    line-height: var(--pte-typography-styles-paragraphSmall-lineHeight);
-    text-transform: var(--pte-typography-styles-paragraphSmall-textTransform);
-
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--pte-new-colors-inputFill);
-    border-radius: var(--pte-borders-radius-rectangle);
-
-    transition: var(--pte-animations-interaction);
-
-    &:focus-within {
-        outline: none;
-        border-color: var(--pte-new-colors-inputBorderFocus);
-        background-color: var(--pte-new-colors-inputFillFocus);
-    }
-
-    &[data-status="disabled"] {
-        border-color: var(--pte-new-colors-inputFillDisabled);
-        background-color: var(--pte-new-colors-inputFillDisabled);
-        color: var(--pte-new-colors-contentDisabled);
-        pointer-events: none;
-        cursor: default;
-
-        &:focus-within {
-            border-color: var(--pte-new-colors-inputFillDisabled) !important;
-        }
-    }
-
-    &[data-status="error"] {
-        border-color: var(--pte-new-colors-inputBorderNegative);
-        background-color: var(--pte-new-colors-inputFillNegative);
-        color: var(--pte-new-colors-contentNegative);
-
-        &:focus-within {
-            color: var(--pte-new-colors-contentPrimary);
-        }
-    }
-
-    &[data-status="success"] {
-        border-color: var(--pte-new-colors-contentPositive);
-        background-color: var(--pte-new-colors-backgroundPositive);
-        color: var(--pte-new-colors-contentPositive);
-
-        &:focus-within {
-            color: var(--pte-new-colors-contentPrimary);
-        }
-    }
-
-    & input[type="color"],
-    & input[type="date"],
-    & input[type="datetime"],
-    & input[type="datetime-local"],
-    & input[type="email"],
-    & input[type="month"],
-    & input[type="number"],
-    & input[type="password"],
-    & input[type="search"],
-    & input[type="tel"],
-    & input[type="text"],
-    & input[type="time"],
-    & input[type="url"],
-    & input[type="week"],
-    & select:focus,
-    & textarea {
-        // Workaround to avoid iOS Safari auto-zooming
-        font-size: 16px;
-        transform: scale(0.875);
-        transform-origin: left center;
-        width: calc(100% / 0.875);
-    }
-
-
-    & input,
-    & textarea {
-        background-color: transparent;
-        padding: 0;
-        margin: 0;
-        border: none;
-        outline: none;
-
-        &::placeholder {
-            color: var(--pte-new-colors-contentTertiary);
-        }
-
-        &[aria-disabled=true] {
-            color: var(--pte-new-colors-contentDisabled);
-            cursor: default;
-
-            &::placeholder {
-                color: var(--pte-new-colors-contentDisabled);
-            }
-        }
-
-        &[type="color"]::-webkit-color-swatch {
-            border: 1px solid var(--pte-new-colors-inputBorderFocus);
-            border-radius: var(--pte-borders-radius-circle);
-        }
-
-        &[type="color"]::-webkit-color-swatch-wrapper {
-            width: 16px;
-            height: 100%;
-        }
-
-        &[type="file"]::-webkit-file-upload-button {
-            display: none;
-        }
-
-        &[data-status="disabled"] {
-            color: var(--pte-new-colors-contentDisabled);
-
-            &::placeholder {
-                color: var(--pte-new-colors-contentDisabled);
-            }
-        }
-
-        &[data-status="error"] {
-            color: var(--pte-new-colors-contentNegative);
-
-            &::placeholder {
-                color: var(--pte-new-colors-contentNegative);
-            }
-        }
-
-        &[data-status="success"] {
-            color: var(--pte-new-colors-contentPositive);
-
-            &::placeholder {
-                color: var(--pte-new-colors-contentPositive);
-            }
-        }
-    }
-}
-
-.inputScaleWrapper {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-}
-
-.enhancer {
-    display: flex;
-    color: var(--pte-new-colors-contentSecondary);
-    margin-block-start: -0.5px;
-    font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
-    font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
-    font-weight: var(--pte-typography-styles-paragraphSmall-fontWeight);
-    letter-spacing: var(--pte-typography-styles-paragraphSmall-letterSpacing);
-    line-height: var(--pte-typography-styles-paragraphSmall-lineHeight);
-    text-transform: var(--pte-typography-styles-paragraphSmall-textTransform);
-
-    &[data-status="disabled"] {
-        color: var(--pte-new-colors-contentDisabled);
-    }
-
-    &[data-status="error"] {
-        color: var(--pte-new-colors-contentNegative);
-    }
-
-    &[data-status="success"] {
-        color: var(--pte-new-colors-contentPositive);
-    }
-}
-
-.container {
-    width: 100%;
-    user-select: var(--pte-utils-defaultUserSelect);
-    cursor: default;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.labelContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-// Use double selector to ensure specificity is higher than the default styles
-.label.label {
-    color: var(--pte-new-colors-contentPrimary);
-    font-weight: var(--pte-typography-fontWeights-medium);
-}
-
-// Use double selector to ensure specificity is higher than the default styles
-.description.description {
-    color: var(--pte-new-colors-contentTertiary);
-}
-
-.hidden {
-    display: none;
-}
-
-.input {
-    &::-webkit-calendar-picker-indicator {
-        display: none;
-    }
-}

package/src/stories/input/Input.stories.ts

@@ -1,110 +0,0 @@
-import { faSearch } 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 { Input } from './Input';
-
-const meta: Meta<typeof Input> = {
-    title: 'Inputs/Input',
-    component: Input,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-    args: {
-        placeholder: 'Mia Dolan',
-        label: 'Name',
-        description: 'Type your full name here.',
-    },
-};
-
-export const Password: Story = {
-    args: {
-        type: 'password',
-        placeholder: 'Password',
-        label: 'Password',
-        hideLabel: true,
-    },
-};
-
-export const Success: Story = {
-    args: {
-        placeholder: 'mia@slingshot.fm',
-        value: 'valid@email.com',
-        onChange: () => {},
-        type: 'email',
-        label: 'Email',
-        description: 'Enter your email address.',
-        status: 'success',
-    },
-};
-
-export const Error: Story = {
-    args: {
-        placeholder: 'mia@slingshot.fm',
-        value: 'notavalid@email',
-        onChange: () => {},
-        type: 'email',
-        label: 'Email',
-        description: 'Enter your email address.',
-        status: 'error',
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        placeholder: 'mia@slingshot.fm',
-        type: 'email',
-        label: 'Email',
-        description: 'Enter your email address.',
-        disabled: true,
-    },
-};
-
-export const WithEnhancer: Story = {
-    args: {
-        placeholder: 'Mia Dolan',
-        label: 'Name',
-        description: 'Type your full name here.',
-        startEnhancer: ({ size }) =>
-            createElement(FontAwesomeIcon, {
-                icon: faSearch,
-                width: `${size}px`,
-            }),
-    },
-};
-
-export const WithEndEnhancer: Story = {
-    args: {
-        placeholder: 'Mia Dolan',
-        label: 'Name',
-        description: 'Type your full name here.',
-        endEnhancer: ({ size }) =>
-            createElement(FontAwesomeIcon, {
-                icon: faSearch,
-                width: `${size}px`,
-            }),
-    },
-};
-
-export const WithCustomLabel: Story = {
-    args: {
-        placeholder: 'Mia Dolan',
-        label: createElement('span', null, [createElement('b', null, 'Name'), createElement('i', null, ' (optional)')]),
-        'aria-label': 'Name (optional)',
-        description: createElement('span', null, [
-            createElement(
-                'b',
-                {
-                    style: {
-                        color: 'red',
-                    },
-                },
-                'My custom description',
-            ),
-        ]),
-    },
-};

package/src/stories/input/Input.test.tsx

@@ -1,174 +0,0 @@
-import { createRef } from 'react';
-import { render, screen } from '../../test/render';
-import { Input } from './Input';
-
-describe('Input', () => {
-    it('renders with a label', () => {
-        render(<Input label="Username" />);
-        expect(screen.getByLabelText('Username')).toBeInTheDocument();
-    });
-
-    it('renders an input element with type text by default', () => {
-        render(<Input label="Name" />);
-        const input = screen.getByLabelText('Name');
-        expect(input.tagName).toBe('INPUT');
-        expect(input).toHaveAttribute('type', 'text');
-    });
-
-    it('allows typing into the input', async () => {
-        const { user } = render(<Input label="Email" />);
-        const input = screen.getByLabelText('Email');
-        await user.type(input, 'test@example.com');
-        expect(input).toHaveValue('test@example.com');
-    });
-
-    it('displays placeholder text', () => {
-        render(<Input label="Search" placeholder="Type to search..." />);
-        expect(screen.getByPlaceholderText('Type to search...')).toBeInTheDocument();
-    });
-
-    it('sets data-status to default when no status is provided', () => {
-        render(<Input label="Default" />);
-        const input = screen.getByLabelText('Default');
-        expect(input).toHaveAttribute('data-status', 'default');
-    });
-
-    it('sets data-status to error', () => {
-        render(<Input label="Error field" status="error" />);
-        const input = screen.getByLabelText('Error field');
-        expect(input).toHaveAttribute('data-status', 'error');
-    });
-
-    it('sets data-status to success', () => {
-        render(<Input label="Success field" status="success" />);
-        const input = screen.getByLabelText('Success field');
-        expect(input).toHaveAttribute('data-status', 'success');
-    });
-
-    it('sets data-status to disabled when disabled', () => {
-        render(<Input label="Disabled" disabled />);
-        const input = screen.getByLabelText('Disabled');
-        expect(input).toHaveAttribute('data-status', 'disabled');
-        expect(input).toHaveAttribute('aria-disabled', 'true');
-        expect(input).toHaveAttribute('readonly');
-    });
-
-    it('overrides status with disabled when both are provided', () => {
-        render(<Input label="Both" status="error" disabled />);
-        const input = screen.getByLabelText('Both');
-        expect(input).toHaveAttribute('data-status', 'disabled');
-    });
-
-    it('forwards ref to the input element', () => {
-        const ref = createRef<HTMLInputElement>();
-        render(<Input label="Ref test" ref={ref} />);
-        expect(ref.current).toBeInstanceOf(HTMLInputElement);
-        expect(ref.current).toBe(screen.getByLabelText('Ref test'));
-    });
-
-    it('renders with different input types', () => {
-        render(<Input label="Password" type="password" />);
-        expect(screen.getByLabelText('Password')).toHaveAttribute('type', 'password');
-    });
-
-    it('renders type email', () => {
-        render(<Input label="Email" type="email" />);
-        expect(screen.getByLabelText('Email')).toHaveAttribute('type', 'email');
-    });
-
-    it('renders type number', () => {
-        render(<Input label="Age" type="number" />);
-        expect(screen.getByLabelText('Age')).toHaveAttribute('type', 'number');
-    });
-
-    it('renders a start enhancer', () => {
-        render(<Input label="With start" startEnhancer={<span data-testid="start-icon">$</span>} />);
-        expect(screen.getByTestId('start-icon')).toBeInTheDocument();
-    });
-
-    it('renders an end enhancer', () => {
-        render(<Input label="With end" endEnhancer={<span data-testid="end-icon">%</span>} />);
-        expect(screen.getByTestId('end-icon')).toBeInTheDocument();
-    });
-
-    it('renders both start and end enhancers', () => {
-        render(
-            <Input
-                label="Both enhancers"
-                startEnhancer={<span data-testid="start">S</span>}
-                endEnhancer={<span data-testid="end">E</span>}
-            />,
-        );
-        expect(screen.getByTestId('start')).toBeInTheDocument();
-        expect(screen.getByTestId('end')).toBeInTheDocument();
-    });
-
-    it('renders a function enhancer', () => {
-        render(
-            <Input label="Fn enhancer" startEnhancer={({ size }) => <span data-testid="fn-enhancer">{size}</span>} />,
-        );
-        expect(screen.getByTestId('fn-enhancer')).toBeInTheDocument();
-    });
-
-    it('forwards className to the input element', () => {
-        render(<Input label="Classy" className="my-custom-class" />);
-        const input = screen.getByLabelText('Classy');
-        expect(input).toHaveClass('my-custom-class');
-    });
-
-    it('sets aria-describedby linking to the description', () => {
-        render(<Input label="Described" description="Some helper text" />);
-        const input = screen.getByLabelText('Described');
-        const describedBy = input.getAttribute('aria-describedby');
-        expect(describedBy).toBeTruthy();
-        const descriptionEl = document.getElementById(describedBy!);
-        expect(descriptionEl).toBeInTheDocument();
-        expect(descriptionEl).toHaveTextContent('Some helper text');
-    });
-
-    it('renders description text', () => {
-        render(<Input label="With desc" description="Helpful description" />);
-        expect(screen.getByText('Helpful description')).toBeInTheDocument();
-    });
-
-    it('hides label when hideLabel is true', () => {
-        render(<Input label="Hidden" hideLabel />);
-        const label = screen.getByText('Hidden');
-        expect(label).toHaveClass('hidden');
-    });
-
-    it('calls onChange handler', async () => {
-        const handleChange = vi.fn();
-        const { user } = render(<Input label="Change test" onChange={handleChange} />);
-        await user.type(screen.getByLabelText('Change test'), 'a');
-        expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('calls onFocus and onBlur handlers', async () => {
-        const handleFocus = vi.fn();
-        const handleBlur = vi.fn();
-        const { user } = render(<Input label="Focus test" onFocus={handleFocus} onBlur={handleBlur} />);
-        const input = screen.getByLabelText('Focus test');
-        await user.click(input);
-        expect(handleFocus).toHaveBeenCalled();
-        await user.tab();
-        expect(handleBlur).toHaveBeenCalled();
-    });
-
-    it('uses aria-label prop when label is not a string', () => {
-        render(<Input label={<span>Complex label</span>} aria-label="accessible label" />);
-        expect(screen.getByRole('textbox', { name: 'accessible label' })).toBeInTheDocument();
-    });
-
-    it('applies container override className', () => {
-        render(<Input label="Override test" overrides={{ container: { 'data-testid': 'wrapper' } }} />);
-        expect(screen.getByTestId('wrapper')).toBeInTheDocument();
-    });
-
-    it('spreads additional HTML input props', () => {
-        render(<Input label="Extra" maxLength={10} autoComplete="off" />);
-        const input = screen.getByLabelText('Extra');
-        expect(input).toHaveAttribute('maxlength', '10');
-        expect(input).toHaveAttribute('autocomplete', 'off');
-    });
-});