@myelmut/design-system 0.1.46 → 0.1.48

package/src/components/Base/Title/Title.stories.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { H1, H2, H3, H4, H5, H6, Title } from './Title';
+
+const meta = {
+    title: 'Components/Base/Title',
+    component: Title,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        children: 'Heading',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            description: 'Title html tag variant',
+            table: { defaultValue: { summary: 'h2' } },
+        },
+        size: {
+            control: 'select',
+            options: ['display-md', 'display-lg', 'display-xl', 'heading-md', 'heading-lg', 'heading-xl'],
+            description: 'Title size style variant',
+            table: { defaultValue: { summary: 'lg' } },
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+    globals: {
+        backgrounds: { value: 'light' },
+    },
+} satisfies Meta<typeof Title>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DisplayXL: Story = {
+    name: 'Display XL (H1)',
+    args: {
+        variant: 'h1',
+        size: 'display-xl',
+    },
+};
+
+export const DisplayLG: Story = {
+    name: 'Display LG (H2)',
+    args: {
+        variant: 'h2',
+        size: 'display-lg',
+    },
+};
+
+export const DisplayMD: Story = {
+    name: 'Display MD (H3)',
+    args: {
+        variant: 'h3',
+        size: 'display-md',
+    },
+};
+
+export const HeadingXL: Story = {
+    name: 'Heading XL (H4)',
+    args: {
+        variant: 'h4',
+        size: 'heading-xl',
+    },
+};
+
+export const HeadingLG: Story = {
+    name: 'Heading LG (H5)',
+    args: {
+        variant: 'h5',
+        size: 'heading-lg',
+    },
+};
+
+export const HeadingMD: Story = {
+    name: 'Heading MD (H6)',
+    args: {
+        variant: 'h6',
+        size: 'heading-md',
+    },
+};
+// Styleguide: display all variants
+export const Styleguide: Story = {
+    argTypes: {
+        variant: { control: false, table: { disable: true } },
+    },
+
+    render: () => (
+        <div className="space-y-4">
+            <H1 size="display-xl">{'Display 01-XL'}</H1>
+            <H2 size="display-lg">{'Display 02-LG'}</H2>
+            <H3 size="display-md">{'Display 03-MD'}</H3>
+            <H4 size="heading-xl">{'Heading 01-XL'}</H4>
+            <H4 size="heading-xl" italic>
+                {'Heading 01-XL'}
+            </H4>
+            <H5 size="heading-lg">{'Heading 02-LG'}</H5>
+            <H5 size="heading-lg" italic>
+                {'Heading 02-LG'}
+            </H5>
+            <H6 size="heading-md">{'Heading 03-MD'}</H6>
+            <H6 size="heading-md" italic>
+                {'Heading 03-MD'}
+            </H6>
+        </div>
+    ),
+};
+
+export const StyleguideMobile: Story = {
+    argTypes: {
+        variant: { control: false, table: { disable: true } },
+    },
+    globals: {
+        viewport: { value: 'mobile', isRotated: false },
+    },
+
+    render: () => (
+        <div className="space-y-4">
+            <H1 size="display-xl">{'Display 01-XL'}</H1>
+            <H2 size="display-lg">{'Display 02-LG'}</H2>
+            <H3 size="display-md">{'Display 03-MD'}</H3>
+            <H4 size="heading-xl">{'Heading 01-XL'}</H4>
+            <H4 size="heading-xl" italic>
+                {'Heading 01-XL'}
+            </H4>
+            <H5 size="heading-lg">{'Heading 02-LG'}</H5>
+            <H5 size="heading-lg" italic>
+                {'Heading 02-LG'}
+            </H5>
+            <H6 size="heading-md">{'Heading 03-MD'}</H6>
+            <H6 size="heading-md" italic>
+                {'Heading 03-MD'}
+            </H6>
+        </div>
+    ),
+};

package/src/components/Base/Title/Title.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+
+import clsx from 'clsx';
+import { Trans } from 'react-i18next';
+
+type TitleProps = {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    size?: 'display-md' | 'display-lg' | 'display-xl' | 'heading-md' | 'heading-lg' | 'heading-xl';
+    italic?: boolean;
+    children: React.ReactNode;
+    className?: string;
+};
+
+const sizeStyles = {
+    'display-xl': 'font-pangaia text-display-xl-mobile md:text-display-lg xl:text-display-xl font-medium md:font-light leading-none md:leading-[0.9]',
+    'display-lg': 'font-pangaia text-display-lg-mobile md:text-display-md xl:text-display-lg font-medium leading-none',
+    'display-md': 'font-pangaia text-display-md-mobile md:text-heading-lg xl:text-display-md font-medium max-md:italic leading-none',
+    'heading-xl': 'font-pangaia text-heading-xl-mobile md:text-heading-lg xl:text-heading-xl font-medium leading-none',
+    'heading-lg': 'max-md:leading-[1.2] max-md:italic font-pangaia text-heading-lg-mobile md:text-heading-md xl:text-heading-lg font-semibold leading-[1.2] md:font-medium md:leading-none',
+    'heading-md': 'md:font-pangaia text-heading-md-mobile md:text-heading-md font-regular xl:font-medium leading-[1.5] md:leading-none',
+};
+
+export const Title = forwardRef<HTMLElement, TitleProps>(({ variant = 'h1', size = 'display-lg', italic = false, children, className = '' }: TitleProps, ref) => {
+    const isString = typeof children === 'string';
+    const classes = clsx(
+        sizeStyles[size],
+        {
+            italic: italic && size === 'heading-xl',
+            'max-md:font-mori max-md:normal font-medium italic max-md:leading-[1.5]': italic && size === 'heading-lg',
+            'max-md:font-semibold md:leading-[1.2] md:italic': italic && (size === 'display-md' || size === 'heading-md'),
+        },
+        className,
+    );
+
+    const content = isString ? (
+        <Trans
+            i18nKey={children}
+            components={{
+                br: <br />,
+                b: <b />,
+                i: <i />,
+                highlight: <span className="text-lavender-blue-light italic" />,
+            }}
+        />
+    ) : (
+        children
+    );
+
+    return React.createElement(variant, { ref, className: classes }, content);
+});
+Title.displayName = 'Title';
+
+export const H1 = forwardRef<HTMLHeadingElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="h1" ref={ref} {...props} />);
+H1.displayName = 'H1';
+
+export const H2 = forwardRef<HTMLHeadingElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="h2" ref={ref} {...props} />);
+H2.displayName = 'H2';
+
+export const H3 = forwardRef<HTMLHeadingElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="h3" ref={ref} {...props} />);
+H3.displayName = 'H3';
+
+export const H4 = forwardRef<HTMLHeadingElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="h4" ref={ref} {...props} />);
+H4.displayName = 'H4';
+
+export const H5 = forwardRef<HTMLHeadingElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="h5" ref={ref} {...props} />);
+H5.displayName = 'H5';
+
+export const H6 = forwardRef<HTMLHeadingElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="h6" ref={ref} {...props} />);
+H6.displayName = 'H6';
+
+export const SpanTitle = forwardRef<HTMLSpanElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="span" ref={ref} {...props} />);
+SpanTitle.displayName = 'SpanTitle';
+
+export const ParagraphTitle = forwardRef<HTMLParagraphElement, Omit<TitleProps, 'variant'>>((props, ref) => <Title variant="p" ref={ref} {...props} />);
+ParagraphTitle.displayName = 'ParagraphTitle';

package/src/components/Base/VideoPlayer/VideoPlayer.stories.tsx

@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { VideoPlayer } from './VideoPlayer';
+
+const meta = {
+    title: 'Components/Base/VideoPlayer',
+    component: VideoPlayer,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        videoId: {
+            control: 'text',
+            description: 'The Vimeo ID of the video',
+        },
+        alt: {
+            control: 'text',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes for the component',
+        },
+        placeholderImageMobile: {
+            control: 'text',
+            description: 'The mobile placeholder image',
+        },
+        placeholderImageDesktop: {
+            control: 'text',
+            description: 'The desktop placeholder image',
+        },
+        placeholderImageMobile2x: {
+            control: 'text',
+            description: 'The mobile placeholder image (2x)',
+        },
+        placeholderImageDesktop2x: {
+            control: 'text',
+            description: 'The desktop placeholder image (2x)',
+        },
+        hasSound: {
+            control: 'boolean',
+            description: 'Whether the video has sound',
+        },
+    },
+    args: {
+        videoId: '1128149382',
+        alt: 'How it works video',
+        placeholderImageMobile: '/images/home-video-placeholder-mobile.webp',
+        placeholderImageDesktop: '/images/home-video-placeholder.webp',
+        placeholderImageMobile2x: '/images/home-video-placeholder-mobile@2x.webp',
+        placeholderImageDesktop2x: '/images/home-video-placeholder@2x.webp',
+        className: 'w-full md:w-200 aspect-video',
+    },
+} satisfies Meta<typeof VideoPlayer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Base/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useCallback, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+import { MuteIcon, PauseIcon, PlayIcon, ResponsiveImage, UnmuteIcon } from '../../../components';
+import { useIntersectionObserver } from '../../../helpers';
+
+interface VideoPlayerProps {
+    videoId: string;
+    className?: string;
+    hasSound?: boolean;
+}
+
+export const VideoPlayer = ({ videoId, className, hasSound = true }: VideoPlayerProps) => {
+    const iframeRef = useRef<HTMLIFrameElement | null>(null);
+    const [isMuted, setIsMuted] = useState(true);
+    const [isPlaying, setIsPlaying] = useState(false);
+
+    const post = useCallback(
+        (method: string, value?: number) => {
+            iframeRef.current?.contentWindow?.postMessage(JSON.stringify({ method, value }), '*');
+        },
+        [iframeRef],
+    );
+
+    const onAppear = useCallback(() => {
+        post('play');
+        setIsPlaying(true);
+    }, [post]);
+
+    const onDisappear = useCallback(() => {
+        post('pause');
+        setIsPlaying(false);
+    }, [post]);
+
+    useIntersectionObserver({ ref: iframeRef as React.RefObject<HTMLIFrameElement>, onAppear, onDisappear });
+    const toggleMute = useCallback(() => {
+        if (isMuted) {
+            post('setVolume', 1);
+        } else {
+            post('setVolume', 0);
+        }
+        setIsMuted(!isMuted);
+    }, [post, isMuted]);
+
+    const togglePlay = useCallback(() => {
+        post(isPlaying ? 'pause' : 'play');
+        setIsPlaying(!isPlaying);
+    }, [post, isPlaying]);
+
+    const iconClass = 'text-beige-light z-10 w-10 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100';
+
+    return (
+        <div className={clsx('border-claret-violet-dark rounded-input md:rounded-card relative z-0 col-span-full mb-7.5 flex aspect-video cursor-pointer items-center justify-center overflow-hidden border md:mb-15 xl:col-span-10 xl:col-start-2', className)}>
+            <iframe
+                ref={iframeRef}
+                src={`https://player.vimeo.com/video/${videoId}?h=b729df6122&badge=0&autoplay=1&muted=1&loop=1&background=1&title=0&byline=0&player_id=0&app_id=58479`}
+                className="absolute top-0 left-0 h-full w-full"
+                frameBorder="0"
+                allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
+                allowFullScreen
+                title="Vimeo player"
+                referrerPolicy="strict-origin-when-cross-origin"
+            />
+            <div onClick={togglePlay} onKeyDown={(e) => e.key === 'Enter' && togglePlay()} tabIndex={0} className="group absolute inset-0 z-10 flex items-center justify-center">
+                {isPlaying ? <PauseIcon className={iconClass} /> : <PlayIcon className={iconClass} />}
+            </div>
+
+            {hasSound && (
+                <button className="bg-beige-light text-claret-violet-dark hover:bg-beige-light/80 absolute right-4 bottom-4 z-10 cursor-pointer rounded-full p-1 transition-colors duration-300 md:p-2" onClick={toggleMute}>
+                    {isMuted ? <MuteIcon className="w-4 md:w-6" /> : <UnmuteIcon className="w-4 md:w-6" />}
+                </button>
+            )}
+        </div>
+    );
+};

package/src/components/Base/index.tsx

@@ -0,0 +1,9 @@
+import { Banner } from './Banner/Banner';
+import { Emblem } from './Emblem/Emblem';
+import { Logo } from './Logo/Logo';
+import { ResponsiveImage } from './ResponsiveImage/ResponsiveImage';
+import { Text } from './Text/Text';
+import { H1, H2, H3, H4, H5, H6, ParagraphTitle, SpanTitle, Title } from './Title/Title';
+import { VideoPlayer } from './VideoPlayer/VideoPlayer';
+
+export { Emblem, ResponsiveImage, Title, H1, H2, H3, H4, H5, H6, SpanTitle, ParagraphTitle, Logo, Text, Banner, VideoPlayer };

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

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './Button';
+
+const meta = {
+    title: 'Components/Buttons/Button',
+    component: Button,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        as: {
+            control: 'radio',
+            options: ['button', 'a'],
+            description: 'HTML element to render (button or a)',
+        },
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'terciary'],
+            description: 'Button variant',
+        },
+        color: {
+            control: 'select',
+            options: ['light', 'dark'],
+            description: 'Button style',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md'],
+            description: 'Button size',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+        href: {
+            control: 'text',
+            description: 'Target URL (only for `as="a"`)',
+            if: { arg: 'as', eq: 'a' },
+            table: { category: 'Link' },
+        },
+        target: {
+            control: 'select',
+            options: ['_blank', '_self'],
+            description: 'Target of the link (only for `as="a"`)',
+            if: { arg: 'as', eq: 'a' },
+            table: { category: 'Link' },
+        },
+        rel: {
+            control: 'select',
+            options: ['noopener', 'noreferrer'],
+            description: 'Rel of the link (only for `as="a"`)',
+            if: { arg: 'as', eq: 'a' },
+            table: { category: 'Link' },
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Callback function (only for `as="button"`)',
+            if: { arg: 'as', eq: 'button' },
+            table: { category: 'Button' },
+        },
+        type: {
+            control: 'select',
+            options: ['button', 'submit', 'reset'],
+            description: 'Type of the button (only for `as="button"`)',
+            if: { arg: 'as', eq: 'button' },
+            table: { category: 'Button' },
+        },
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    args: {
+        variant: 'primary',
+        color: 'dark',
+        children: 'Button',
+        as: 'button',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        variant: 'secondary',
+        color: 'dark',
+        children: 'Button',
+        as: 'button',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};
+
+export const Terciary: Story = {
+    args: {
+        variant: 'terciary',
+        color: 'dark',
+        children: 'Button',
+        as: 'button',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};
+
+export const PrimaryLight: Story = {
+    args: {
+        variant: 'primary',
+        color: 'light',
+        children: 'Button',
+        as: 'button',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+};
+
+export const SecondaryLight: Story = {
+    args: {
+        variant: 'secondary',
+        color: 'light',
+        children: 'Button',
+        as: 'button',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+};
+
+export const TerciaryLight: Story = {
+    args: {
+        variant: 'terciary',
+        color: 'light',
+        children: 'Button',
+        as: 'button',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+};

package/src/components/Buttons/Button/Button.tsx

@@ -0,0 +1,68 @@
+import { memo } from 'react';
+
+import clsx from 'clsx';
+
+type CommonProps = {
+    variant?: 'primary' | 'secondary' | 'terciary';
+    color?: 'light' | 'dark';
+    size?: 'sm' | 'md';
+    children: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    active?: boolean;
+};
+
+type ButtonAsButtonProps = CommonProps &
+    React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        as?: 'button';
+    };
+
+type ButtonAsLinkProps = CommonProps &
+    React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        as: 'a';
+        href: string;
+    };
+
+type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
+
+const ButtonComponent = ({ as = 'button', variant = 'primary', color = 'light', active = false, children, disabled = false, className = '', size = 'md', ...props }: ButtonProps) => {
+    const containedVariants = variant === 'primary' || variant === 'secondary';
+
+    // prettier-ignore
+    const classes = clsx(
+        'text-button-mobile md:text-button font-semibold cursor-pointer transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-30 w-fit',
+        {   
+            'inline-flex min-w-18 md:min-w-26.5 px-6 md:px-8 flex items-center justify-center rounded-full border': containedVariants,
+            'relative leading-none flex items-center p-2.5 pe-7.5 hover:pe-2.5 hover:ps-7.5': variant === 'terciary',
+            'before:content-[""] before:inline-flex before:absolute before:left-2.5 before:w-2.75 before:h-2.75 before:rounded-full before:opacity-0 before:transition-opacity hover:before:opacity-100 before:duration-200': variant === 'terciary',
+            'before:opacity-100 ps-7.5 pe-2.5': variant === 'terciary' && active, 
+            'bg-claret-violet-dark hover:bg-claret-violet-light text-beige-light border-claret-violet-dark hover:border-claret-violet-light': variant === 'primary' && color === 'dark',
+            'bg-beige-light text-claret-violet-dark hover:bg-beige-dark border-beige-light hover:border-beige-dark': variant === 'primary' && color === 'light',
+            'bg-beige-light text-claret-violet-dark hover:bg-beige-dark border-claret-violet-dark': variant === 'secondary' && color === 'dark',
+            'bg-claret-violet-dark text-beige-light hover:bg-claret-violet-light border-beige-light': variant === 'secondary' && color === 'light',
+            "h-8.5 md:h-10": size === 'sm' && containedVariants,
+            "h-10.5 md:h-13": size === 'md' && containedVariants,
+            'text-claret-violet-dark before:bg-claret-violet-dark': variant === 'terciary' && color === 'dark',
+            'text-beige-light before:bg-beige-light': variant === 'terciary' && color === 'light',
+            'pointer-events-none': disabled,
+
+        },
+        className,
+    );
+
+    if (as === 'a') {
+        const { href, ...rest } = props as ButtonAsLinkProps;
+        return (
+            <a href={disabled ? undefined : href} {...rest} className={classes} aria-current={active} aria-disabled={disabled || undefined} tabIndex={disabled ? -1 : 0}>
+                {children}
+            </a>
+        );
+    }
+    return (
+        <button tabIndex={0} className={classes} {...(props as ButtonAsButtonProps)} disabled={disabled}>
+            {children}
+        </button>
+    );
+};
+
+export const Button = memo(ButtonComponent);

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

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CardButton } from './CardButton';
+
+const meta = {
+    title: 'Components/Buttons/CardButton',
+    component: CardButton,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+        },
+        onClick: {
+            action: 'clicked',
+        },
+        description: {
+            control: 'text',
+            description: 'Description',
+        },
+        label: {
+            control: 'text',
+            description: 'Label',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional class name',
+        },
+    },
+    args: {
+        label: 'Maigre',
+        description: "Ses côtes sont visibles à l'oeil nu",
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof CardButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Buttons/CardButton/CardButton.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+
+export type CardButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    description: string;
+    className?: string;
+};
+
+export const CardButton = ({ label, description, disabled, className = '', ...props }: CardButtonProps) => {
+    // prettier-ignore
+    const buttonClasses = clsx(
+        "relative flex flex-col w-32 md:w-51.25 aspect-32/25 md:aspect-41/30 px-2.5 py-4 md:px-5 md:py-6 items-center overflow-hidden rounded-input md:rounded-card 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 md:after:rounded-card 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",
+        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 className="text-sm-mobile md:text-md w-full">{description}</span>
+            </span>
+        </button>
+    );
+};