@myelmut/design-system 0.1.46 → 0.1.48

package/src/components/Buttons/ClearButton/ClearButton.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ClearButton } from './ClearButton';
+
+const meta = {
+    title: 'Components/Buttons/ClearButton',
+    component: ClearButton,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        onClick: { action: 'onClick' },
+        className: { control: 'text', description: 'Additional class names' },
+    },
+} satisfies Meta<typeof ClearButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        onClick: () => {},
+    },
+};

package/src/components/Buttons/ClearButton/ClearButton.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+import clsx from 'clsx';
+
+import { CrossRoundedIcon } from '../../../components';
+
+export interface ClearButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const ClearButtonComponent = ({ className, onClick, ...props }: ClearButtonProps) => (
+    <button tabIndex={0} {...props} onClick={onClick} className={clsx('text-claret-violet-dark outline-beige-light hover:text-claret-violet-light disabled:pointer-none: h-5 w-5 cursor-pointer rounded-full transition-colors duration-300', className)}>
+        <CrossRoundedIcon className="h-full w-full" />
+    </button>
+);
+
+export const ClearButton = memo(ClearButtonComponent);

package/src/components/Buttons/FAQButton/FAQButton.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FAQButton } from './FAQButton';
+
+const meta = {
+    title: 'Components/Buttons/FAQButton',
+    component: FAQButton,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: { control: 'select', options: ['plus', 'minus'] },
+        disabled: { control: 'boolean', description: 'Whether the button is disabled' },
+        className: { control: 'text', description: 'Additional CSS classes' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof FAQButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        variant: 'plus',
+        disabled: false,
+    },
+};

package/src/components/Buttons/FAQButton/FAQButton.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+
+import { MinusIcon, PlusIcon } from '../../../components';
+
+export interface FAQButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant: 'plus' | 'minus';
+    disabled?: boolean;
+    className?: string;
+}
+
+export const FAQButton = ({ variant, disabled = false, className, ...props }: FAQButtonProps) => {
+    return (
+        <button
+            tabIndex={0}
+            type="button"
+            disabled={disabled}
+            className={clsx(
+                'border-claret-violet-dark text-claret-violet-dark text-md hover:text-beige-light hover:bg-claret-violet-dark focus-visible:bg-claret-violet-dark focus-visible:text-beige-light flex h-6.5 w-6.5 cursor-pointer items-center justify-center rounded-full border bg-transparent transition-all duration-300 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+                className,
+            )}
+            {...props}
+        >
+            {variant === 'plus' && <PlusIcon className="w-4" />}
+            {variant === 'minus' && <MinusIcon className="w-4" />}
+        </button>
+    );
+};

package/src/components/Buttons/IllustratedCardButton/IllustratedCardButton.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IllustratedCardButton } from './IllustratedCardButton';
+
+const meta = {
+    title: 'Components/Buttons/IllustratedCardButton',
+    component: IllustratedCardButton,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        layout: {
+            control: 'select',
+            options: ['vertical', 'horizontal'],
+            description: 'Layout orientation on mobile.',
+        },
+        disabled: {
+            control: 'boolean',
+        },
+        onClick: {
+            action: 'clicked',
+        },
+        illustration: {
+            control: 'text',
+            description: 'Illustration URL',
+        },
+        description: {
+            control: 'text',
+            description: 'Description',
+        },
+        label: {
+            control: 'text',
+            description: 'Label',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional class name',
+        },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof IllustratedCardButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Vertical: Story = {
+    args: {
+        layout: 'vertical',
+        label: 'A la cool !',
+        description: 'Sort moins de 1h30. On ne va pas se mentir, il est plus canapé que treck en fôret.',
+        illustration: '/illustrations/sofa.webp',
+    },
+};
+
+export const Horizontal: Story = {
+    args: {
+        layout: 'horizontal',
+        label: 'A la cool !',
+        description: 'Sort moins de 1h30. On ne va pas se mentir, il est plus canapé que treck en fôret.',
+        illustration: '/illustrations/sofa.webp',
+    },
+    globals: {
+        viewport: { value: 'mobile', isRotated: false },
+    },
+};

package/src/components/Buttons/IllustratedCardButton/IllustratedCardButton.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+
+export type IllustratedCardButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    illustration: string;
+    description: string;
+    layout?: 'vertical' | 'horizontal';
+    className?: string;
+};
+
+const layoutStyles = {
+    vertical: 'max-md:w-38 px-2.5 py-4 max-md:flex-col items-center',
+    horizontal: 'p-3 gap-4',
+};
+
+const textLayoutStyles = {
+    vertical: '',
+    horizontal: 'max-md:gap-2 max-md:text-start',
+};
+
+const illustrationLayoutStyles = {
+    vertical: 'mb-2 w-18',
+    horizontal: 'w-15',
+};
+
+export const IllustratedCardButton = ({ label, layout = 'vertical', description, illustration, disabled, className = '', ...props }: IllustratedCardButtonProps) => {
+    // prettier-ignore
+    const buttonClasses = clsx(
+        "relative md:px-5 md:py-6 flex md:flex-col items-center overflow-hidden rounded-input bg-beige-dark text-claret-violet-dark transition-all duration-300 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50", 
+        "after:absolute after:content-[''] after:border after:rounded-input after:border-beige-ultra-dark after:inset-0 after:z-0 hover:after:border-claret-violet-dark after:transition-colors after:duration-300 focus-visible:after:border-claret-violet-dark",
+        "md:rounded-card md:after:rounded-card gap-3 md:p-6 justify-center md:aspect-5/6 md:w-70.5",
+        layoutStyles[layout],
+        className,
+    );
+
+    return (
+        <button className={buttonClasses} disabled={disabled} {...props} tabIndex={disabled ? -1 : 0}>
+            <img src={illustration} alt={label} className={clsx('md:mb-6 md:w-25', illustrationLayoutStyles[layout])} loading="lazy" decoding="async" />
+            <span className={clsx('flex flex-col gap-2.5', textLayoutStyles[layout])}>
+                <span className="text-sm-mobile w-full font-semibold md:text-xl">{label}</span>
+                <span className="text-sm-mobile md:text-md w-full">{description}</span>
+            </span>
+        </button>
+    );
+};

package/src/components/Buttons/SimpleIllustratedCardButton/SimpleIllustratedCardButton.stories.tsx

@@ -0,0 +1,74 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SimpleIllustratedCardButton } from './SimpleIllustratedCardButton';
+
+const meta = {
+    title: 'Components/Buttons/SimpleIllustratedCardButton',
+    component: SimpleIllustratedCardButton,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        layout: {
+            control: 'select',
+            options: ['vertical', 'horizontal'],
+            description: 'Layout orientation on mobile.',
+        },
+        disabled: {
+            control: 'boolean',
+        },
+        onClick: {
+            action: 'clicked',
+        },
+        illustration: {
+            control: 'text',
+            description: 'Illustration URL',
+        },
+        label: {
+            control: 'text',
+            description: 'Label',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional class name',
+        },
+        illustrationClassName: {
+            control: 'text',
+            description: 'Additional class name for illustration',
+        },
+        isActive: {
+            control: 'boolean',
+            description: 'Whether the button is active',
+        },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof SimpleIllustratedCardButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Vertical: Story = {
+    args: {
+        layout: 'vertical',
+        label: 'Chien',
+        illustration: '/illustrations/dog.webp',
+    },
+};
+
+export const Horizontal: Story = {
+    args: {
+        layout: 'horizontal',
+        label: 'Chien',
+        illustration: '/illustrations/puppy.webp',
+        className: 'max-md:w-80',
+    },
+    globals: {
+        viewport: { value: 'mobile', isRotated: false },
+    },
+};

package/src/components/Buttons/SimpleIllustratedCardButton/SimpleIllustratedCardButton.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+
+export type SimpleIllustratedCardButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    illustration: string;
+    layout?: 'vertical' | 'horizontal';
+    className?: string;
+    illustrationClassName?: string;
+    isActive?: boolean;
+};
+
+const layoutStyles = {
+    vertical: 'px-2.5 py-4 max-md:flex-col w-32 aspect-4/5',
+    horizontal: 'max-md:pt-1 max-md:ps-1 max-md:h-14 max-md:flex-row-reverse max-md:justify-end max-md:gap-9.5',
+};
+
+const illustrationLayoutStyles = {
+    vertical: 'absolute right-0 bottom-0 left-0 z-1 max-h-34 w-full',
+    horizontal: 'max-md:h-full max-md:w-19 md:w-full',
+};
+
+export const SimpleIllustratedCardButton = ({ label, layout = 'vertical', illustration, disabled, className = '', illustrationClassName = '', isActive = false, ...props }: SimpleIllustratedCardButtonProps) => {
+    // prettier-ignore
+    const buttonClasses = clsx(
+        "relative md:px-5 md:py-6 flex md:flex-col items-center overflow-hidden rounded-input bg-beige-dark text-claret-violet-dark transition-all duration-300 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50", 
+        "after:absolute after:content-[''] after:border after:rounded-input after:border-beige-ultra-dark after:inset-0 after:z-0 hover:after:border-claret-violet-dark after:transition-colors after:duration-300 focus-visible:after:border-claret-violet-dark",
+        "md:rounded-illustrated-card-button md:after:rounded-illustrated-card-button md:w-51.25 md:aspect-4/5",
+        layoutStyles[layout],
+        isActive && 'after:border-claret-violet-dark',
+        className,
+    );
+
+    return (
+        <button className={buttonClasses} disabled={disabled} {...props} tabIndex={disabled ? -1 : 0}>
+            <span className="flex flex-col gap-2.5">
+                <span className="text-sm-mobile w-full font-semibold md:text-xl">{label}</span>
+            </span>
+            <div className={clsx('md:absolute md:right-0 md:bottom-0 md:left-0 md:z-1 md:h-34 md:w-full', illustrationLayoutStyles[layout])}>
+                <img src={illustration} alt={label} className={clsx('w-full origin-top object-contain md:absolute md:top-0 md:right-0 md:left-0 md:z-1 md:scale-120', illustrationLayoutStyles[layout], illustrationClassName)} loading="lazy" decoding="async" />
+            </div>
+        </button>
+    );
+};

package/src/components/Buttons/SocialButton/SocialButton.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SocialButton } from './SocialButton';
+
+const meta = {
+    title: 'Components/Buttons/SocialButton',
+    component: SocialButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['Facebook', 'Instagram', 'LinkedIn', 'Tiktok'],
+            description: 'The variant of the social button',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof SocialButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const facebook: Story = {
+    args: {
+        variant: 'Facebook',
+    },
+};
+
+export const instagram: Story = {
+    args: {
+        variant: 'Instagram',
+    },
+};
+
+export const linkedin: Story = {
+    args: {
+        variant: 'LinkedIn',
+    },
+};
+
+export const tiktok: Story = {
+    args: {
+        variant: 'Tiktok',
+    },
+};

package/src/components/Buttons/SocialButton/SocialButton.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+
+import { FacebookIcon, InstagramIcon, LinkedinIcon, TiktokIcon } from '../../../components';
+
+export type SocialButtonProps = {
+    variant: 'Facebook' | 'Instagram' | 'LinkedIn' | 'Tiktok';
+    labelVisible?: boolean;
+    className?: string;
+};
+
+const variantUrls = {
+    Facebook: 'https://www.facebook.com/myelmut/',
+    Instagram: 'https://instagram.com/myelmut',
+    LinkedIn: 'https://www.linkedin.com/company/elmut/',
+    Tiktok: 'https://www.tiktok.com/@myelmut',
+};
+
+export const SocialButton = ({ variant, labelVisible = false, className }: SocialButtonProps) => (
+    <a tabIndex={0} href={variantUrls[variant]} target="_blank" rel="noopener noreferrer" className={clsx('group flex items-center gap-2', className)}>
+        <span className="bg-claret-violet-dark text-beige-light group-hover:bg-claret-violet-light flex h-6 w-6 cursor-pointer items-center justify-center rounded-md transition-colors duration-300">
+            {variant === 'Facebook' && <FacebookIcon className="h-3" />}
+            {variant === 'Instagram' && <InstagramIcon className="h-3" />}
+            {variant === 'LinkedIn' && <LinkedinIcon className="h-3" />}
+            {variant === 'Tiktok' && <TiktokIcon className="h-3" />}
+        </span>
+        {labelVisible && <span className="text-claret-violet-dark text-button-mobile md:text-button font-semibold max-md:hidden">{variant}</span>}
+    </a>
+);

package/src/components/Buttons/Toggle/Toggle.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+
+import { Text } from '../../../components';
+
+interface ToggleData {
+    label: string;
+    labelMobile?: string;
+    value: string;
+    image?: string;
+}
+
+interface ToggleProps {
+    data: ToggleData[];
+    onChange: (value: string) => void;
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+}
+
+export const Toggle = ({ data = [], onChange, value = '', disabled = false, className = '', 'aria-label': ariaLabel = 'Toggle selection' }: ToggleProps) => {
+    // Validation
+    if (data.length !== 2) {
+        console.warn('Toggle component expects exactly 2 items in data array');
+        return null;
+    }
+
+    const handleClick = (selectedValue: string) => {
+        if (disabled || selectedValue === value) return;
+        onChange(selectedValue);
+    };
+
+    const containerClasses = clsx('bg-beige-dark relative z-0 flex h-11.25 items-center rounded-full md:h-20', disabled && 'pointer-events-none cursor-not-allowed opacity-30', className);
+    const activeIndicatorClasses = clsx('bg-claret-violet-dark absolute top-0 -z-1 h-11.25 w-1/2 rounded-full transition-transform duration-600 ease-in-out will-change-transform md:h-20', value === data[0]?.value ? 'translate-x-0' : 'translate-x-full');
+    const labelClasses = 'min-w-fit font-semibold';
+
+    return (
+        <div className={containerClasses} aria-label={ariaLabel}>
+            <div className={activeIndicatorClasses} aria-hidden="true" />
+            {data.map((item, index) => (
+                <button
+                    tabIndex={0}
+                    key={item.value}
+                    type="button"
+                    disabled={disabled}
+                    className={clsx(
+                        'focus-visible:outline-claret-violet-dark relative z-1 flex h-full flex-1 cursor-pointer items-center gap-3 rounded-full p-1 transition-colors duration-600 ease-in-out focus-visible:outline-2 md:gap-6 md:py-1.5',
+                        index === 0 ? 'pe-6 md:pe-11' : 'flex-row-reverse ps-6 md:ps-11',
+                        value === item.value && 'text-beige-dark',
+                    )}
+                    onClick={() => handleClick(item.value)}
+                >
+                    <span className="bg-lavender-blue-dark block h-9 w-9 shrink-0 overflow-hidden rounded-full md:h-17 md:w-17">{item.image && <img src={item.image} alt={item.label} className="h-full w-full object-cover" loading="lazy" decoding="async" />}</span>
+                    <Text size="button" variant="span" className={clsx(labelClasses, item.labelMobile && 'hidden md:block')}>
+                        {item.label}
+                    </Text>
+                    <Text size="button" variant="span" className={clsx(labelClasses, item.labelMobile && 'block md:hidden')}>
+                        {item.labelMobile}
+                    </Text>
+                </button>
+            ))}
+        </div>
+    );
+};

package/src/components/Buttons/Toggle/Toogle.stories.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Toggle } from './Toggle';
+
+const meta = {
+    title: 'Components/Buttons/Toggle',
+    component: Toggle,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        data: {
+            control: 'object',
+            description: 'Array of toggle options (exactly 2 items required)',
+        },
+        onChange: {
+            action: 'onChange',
+            description: 'Callback function called when toggle value changes',
+        },
+        value: {
+            control: 'text',
+            description: 'Currently selected value',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the toggle is disabled',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+        'aria-label': {
+            control: 'text',
+            description: 'Accessibility label for screen readers',
+        },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        data: [
+            { label: 'Pour mon chien', labelMobile: 'Chien', value: 'dog', image: '/images/dog.webp' },
+            { label: 'Pour mon chat', labelMobile: 'Chat', value: 'cat', image: '/images/cat.webp' },
+        ],
+        onChange: () => {},
+        value: 'dog',
+        className: '',
+        'aria-label': 'Pet selection toggle',
+    },
+    render: (arg) => {
+        const [value, setValue] = useState('dog');
+
+        return <Toggle data={arg.data} value={value} onChange={setValue} aria-label={arg['aria-label']} disabled={arg.disabled} />;
+    },
+};

package/src/components/Buttons/index.ts

@@ -0,0 +1,10 @@
+import { Button } from './Button/Button';
+import { CardButton } from './CardButton/CardButton';
+import { ClearButton } from './ClearButton/ClearButton';
+import { FAQButton } from './FAQButton/FAQButton';
+import { IllustratedCardButton } from './IllustratedCardButton/IllustratedCardButton';
+import { SimpleIllustratedCardButton } from './SimpleIllustratedCardButton/SimpleIllustratedCardButton';
+import { SocialButton } from './SocialButton/SocialButton';
+import { Toggle } from './Toggle/Toggle';
+
+export { Button, FAQButton, ClearButton, CardButton, IllustratedCardButton, SimpleIllustratedCardButton, SocialButton, Toggle };

package/src/components/Cards/CTACard/CTACard.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CTACard } from './CTACard';
+
+const meta = {
+    title: 'Components/Cards/CTACard',
+    component: CTACard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'The title of the card',
+        },
+        description: {
+            control: 'text',
+            description: 'The description of the card',
+        },
+        ctaText: {
+            control: 'text',
+            description: 'The text of the CTA button',
+        },
+        variant: {
+            control: 'select',
+            options: ['light', 'dark'],
+        },
+        onClick: {
+            action: 'clicked',
+        },
+        secondaryCtaText: {
+            control: 'text',
+            description: 'The text of the secondary CTA button',
+        },
+        secondaryCtaOnClick: {
+            action: 'clicked',
+        },
+        illustration: {
+            control: 'text',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional class names to add to the component',
+        },
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+} satisfies Meta<typeof CTACard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+    args: {
+        title: 'Commandez<br/> la <i>box</i> d’essai',
+        description: 'Et ajoutez ces friandises juste après la création de votre box personnalisée',
+        ctaText: 'Créer mon plan personnalisé',
+        onClick: () => {},
+        illustration: '/assets/illustrations/box-2.webp',
+        variant: 'light',
+        secondaryCtaText: 'Vous êtes déja client ?',
+        secondaryCtaOnClick: () => {},
+        className: 'lg:w-137',
+    },
+};
+
+export const Dark: Story = {
+    args: {
+        title: 'Vous êtes<br/>déjà <highlight>client</highlight> ?',
+        description: 'Rendez-vous dans votre espace personnel pour ajouter ces friandises à vos prochaines commandes.',
+        ctaText: 'Voir mon profil',
+        onClick: () => {},
+        illustration: '/assets/illustrations/box-light.webp',
+        variant: 'dark',
+        className: 'lg:w-137',
+        secondaryCtaText: 'Vous êtes déja client ?',
+        secondaryCtaOnClick: () => {},
+    },
+};