@myelmut/design-system 0.1.47 → 0.1.49

package/src/components/Cards/RecetteCard/RecetteCard.tsx

@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+
+import { Button, ResponsiveImage, Text } from '../../../components';
+
+export interface RecetteCardProps {
+    variant?: 'violet' | 'pink' | 'beige' | 'lavender';
+    title: string;
+    description: string;
+    imageMobile: string;
+    imageDesktop: string;
+    imageMobile2x?: string;
+    imageDesktop2x?: string;
+    className?: string;
+    href: string;
+}
+
+const variantStyles = {
+    violet: 'bg-claret-violet-dark text-beige-light ',
+    pink: 'bg-pink-oyster-light text-claret-violet-dark ',
+    beige: 'bg-beige-light text-claret-violet-dark',
+    lavender: 'bg-lavender-blue-light text-claret-violet-dark ',
+};
+
+export const RecetteCard = ({ className, variant = 'violet', title, description, imageMobile, imageDesktop, imageMobile2x, imageDesktop2x, href = '' }: RecetteCardProps) => {
+    return (
+        <div tabIndex={0} className={clsx('group rounded-card outline-claret-violet-dark relative flex aspect-20/23 w-50 cursor-default flex-col justify-end overflow-hidden transition-colors duration-300 md:aspect-125/174 md:w-62.5', className)}>
+            <div className={clsx('absolute inset-0 z-0 overflow-hidden')}>
+                <ResponsiveImage alt={title} mobile={imageMobile} desktop={imageDesktop} mobile2x={imageMobile2x} desktop2x={imageDesktop2x} className="h-full object-cover" />
+            </div>
+            <div
+                className={clsx(
+                    'z-1 flex flex-col gap-4 p-4 transition-all duration-300 ease-in-out lg:translate-y-[calc(100%-72px)] lg:items-center lg:gap-7 lg:px-3 lg:py-6 lg:group-focus-within:translate-y-[0] lg:group-focus-within:gap-4 lg:group-hover:translate-y-[0] lg:group-hover:gap-4 xl:px-6',
+                    variantStyles[variant],
+                )}
+            >
+                <Text size="xl">{title}</Text>
+                <Text size="md" className="text-center max-lg:hidden">
+                    {description}
+                </Text>
+
+                <Button as="a" href={href} size="sm" variant={variant === 'violet' ? 'primary' : 'secondary'} className="inline-block shrink-0">
+                    Voir la recette
+                </Button>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { StatCard } from './StatCard';
+
+const meta = {
+    title: 'Components/Cards/StatCard',
+    component: StatCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: { control: 'select', options: ['primary', 'secondary', 'tertiary'] },
+        size: { control: 'select', options: ['small', 'large'] },
+        value: { control: 'text' },
+        metric: { control: 'text', description: 'Metric of the stat. % or fraction' },
+        description: { control: 'text' },
+        className: { control: 'text', description: 'Additional class names' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof StatCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Primary: Story = {
+    args: {
+        variant: 'primary',
+        size: 'large',
+        value: '9',
+        metric: '/10',
+        description: 'Ça fait 8 ans que nous imaginons les meilleurs repas pour votre poilus !',
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        variant: 'secondary',
+        size: 'large',
+        value: '98',
+        metric: '%',
+        description: 'Ça fait 8 ans que nous imaginons les meilleurs repas pour votre poilus !',
+    },
+};
+
+export const Tertiary: Story = {
+    args: {
+        variant: 'tertiary',
+        size: 'large',
+        value: '65',
+        metric: '%',
+        description: 'Ça fait 8 ans que nous imaginons les meilleurs repas pour votre poilus !',
+    },
+};
+
+export const Small: Story = {
+    args: {
+        variant: 'tertiary',
+        size: 'small',
+        value: '98',
+        metric: '%',
+        description: 'sont plus excité de manger !',
+        className: 'max-md:w-32.5',
+    },
+};

package/src/components/Cards/StatCard/StatCard.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+
+import { ParagraphTitle, SpanTitle, Text } from '../../../components';
+
+export interface StatCardProps {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'large';
+    value: string;
+    metric: string;
+    description: string;
+    className?: string;
+}
+
+const variantStyles = {
+    primary: 'bg-lavender-blue-light',
+    secondary: 'bg-pink-oyster-light',
+    tertiary: 'bg-beige-light',
+};
+
+const sizeStyles = {
+    small: 'px-3 py-8.5 md:py-6 md:px-8 2xl:px-10 justify-center items-center text-center gap-1 md:gap-2 rounded-input w-full',
+    large: 'p-6 h-80 md:h-112.5 justify-between rounded-card w-60',
+};
+
+export const StatCard = ({ variant = 'primary', size = 'large', value, metric, description, className }: StatCardProps) => {
+    return (
+        <div className={clsx('border-claret-violet-dark flex flex-col border', variantStyles[variant], sizeStyles[size], className)}>
+            <p className="leading-none">
+                <SpanTitle size="display-xl" className="inline md:hidden">
+                    {value}
+                </SpanTitle>
+                <SpanTitle size="display-lg" className="hidden md:inline">
+                    {value}
+                </SpanTitle>
+                <SpanTitle size="display-md">{metric}</SpanTitle>
+            </p>
+            <Text size="md" className="hidden md:block">
+                {description}
+            </Text>
+            <ParagraphTitle size="heading-md" className="block md:hidden">
+                {description}
+            </ParagraphTitle>
+        </div>
+    );
+};

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

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Testimonial } from './Testimonial';
+
+const meta = {
+    title: 'Components/Cards/Testimonial',
+    component: Testimonial,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: { control: 'select', options: ['primary', 'secondary'] },
+        quote: { control: 'text', description: 'Quote of the testimonial' },
+        author: { control: 'text', description: 'Author of the testimonial' },
+        role: { control: 'text', description: 'Role of the author' },
+        imageMobile: { control: 'text', description: 'Mobile image of the testimonial' },
+        imageDesktop: { control: 'text', description: 'Desktop image of the testimonial' },
+        imageMobile2x: { control: 'text', description: 'Mobile 2x image of the testimonial' },
+        imageDesktop2x: { control: 'text', description: 'Desktop 2x image of the testimonial' },
+        className: { control: 'text', description: 'Additional CSS classes' },
+    },
+} satisfies Meta<typeof Testimonial>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    args: {
+        variant: 'primary',
+        quote: 'Excellente nourriture. Valkiry valide les repas Elmut (et même le packaging). Les produits sont frais (se conservent au réfrigérateur)',
+        author: 'Lucie B.',
+        role: 'Papa de Valkiry',
+        imageMobile: '/images/trash/testimonial-1-mobile@2x.webp',
+        imageDesktop: '/images/trash/testimonial-1@2x.webp',
+        imageMobile2x: '/images/trash/testimonial-1-mobile@2x.webp',
+        imageDesktop2x: '/images/trash/testimonial-1@2x.webp',
+        className: 'md:w-[900px]',
+    },
+    globals: {
+        backgrounds: {
+            value: 'lavender',
+        },
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        variant: 'secondary',
+        quote: 'Excellente nourriture. Valkiry valide les repas Elmut (et même le packaging). Les produits sont frais (se conservent au réfrigérateur)',
+        author: 'Lucie B.',
+        role: 'Papa de Valkiry',
+        imageMobile: '/images/trash/testimonial-1-mobile@2x.webp',
+        imageDesktop: '/images/trash/testimonial-1@2x.webp',
+        imageMobile2x: '/images/trash/testimonial-1-mobile@2x.webp',
+        imageDesktop2x: '/images/trash/testimonial-1@2x.webp',
+        className: 'md:w-[744px]',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};

package/src/components/Cards/Testimonial/Testimonial.tsx

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { ParagraphTitle, QuoteIcon, ResponsiveImage, Text } from '../../../components';
+
+export interface TestimonialProps {
+    variant: 'primary' | 'secondary';
+    quote: string;
+    author: string;
+    role: string;
+    imageMobile: string;
+    imageDesktop: string;
+    imageMobile2x?: string;
+    imageDesktop2x?: string;
+    className?: string;
+}
+
+const variantStyles = {
+    primary: 'bg-beige-light gap-6',
+    secondary: 'bg-pink-oyster-light gap-10',
+};
+
+const imagesStyles = {
+    primary: 'w-22/100',
+    secondary: 'w-36/100',
+};
+
+export const Testimonial = forwardRef<HTMLDivElement, TestimonialProps>(({ variant, quote, author, role, imageMobile, imageDesktop, imageMobile2x, imageDesktop2x, className }, ref) => {
+    return (
+        <div ref={ref} className={clsx('rounded-card border-claret-violet-dark text-claret-violet-dark flex w-full items-stretch border p-3 max-md:flex-col md:p-6', variantStyles[variant], className)}>
+            <blockquote className="flex flex-1 flex-col gap-3 md:gap-5">
+                <QuoteIcon className="w-3.5 md:mb-14.5 md:w-8" />
+                <ParagraphTitle size="heading-md" italic={true} className="hidden md:block">
+                    {quote}
+                </ParagraphTitle>
+                <ParagraphTitle size="heading-lg" className="block md:hidden">
+                    {quote}
+                </ParagraphTitle>
+                <footer className="flex max-md:items-center max-md:gap-3 md:flex-col">
+                    <div className={clsx('block h-8 w-8 shrink-0 overflow-hidden rounded-sm md:hidden')}>
+                        <ResponsiveImage desktop={imageDesktop} mobile={imageMobile} desktop2x={imageDesktop2x} mobile2x={imageMobile2x} alt={author} className="object-cover" />
+                    </div>
+                    <div>
+                        <cite className="text-md-mobile md:text-md block leading-none lg:mb-2.5">{author}</cite>
+                        <Text variant="span" size="md" className="!leading-none !not-italic md:hidden">
+                            {role}
+                        </Text>
+                        <Text variant="span" size="legend" className="hidden !leading-none md:block">
+                            {role}
+                        </Text>
+                    </div>
+                </footer>
+            </blockquote>
+            <div className={clsx('rounded-card relative hidden shrink-0 overflow-hidden md:block', imagesStyles[variant])}>
+                <ResponsiveImage desktop={imageDesktop} mobile={imageMobile} desktop2x={imageDesktop2x} mobile2x={imageMobile2x} alt={author} className="absolute inset-0 h-full object-cover" />
+            </div>
+        </div>
+    );
+});
+
+Testimonial.displayName = 'Testimonial';

package/src/components/Cards/TestimonialSlider/TestimonialSlider.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TestimonialSliderCard } from './TestimonialSlider';
+
+const meta = {
+    title: 'Components/Cards/SliderTestimonial',
+    component: TestimonialSliderCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['dark', 'light'],
+            description: 'Variant of the component',
+        },
+        quote: {
+            control: 'text',
+        },
+        author: {
+            control: 'text',
+        },
+        role: {
+            control: 'text',
+        },
+        image: {
+            control: 'text',
+        },
+        score: {
+            control: 'number',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional class names to be applied to the component',
+        },
+    },
+    args: {
+        variant: 'dark',
+        quote: 'Je recommande Elmut à mes clients qui recherchent une alternative fraîche et naturelle pour leurs chiens et chats',
+        author: 'John Doe',
+        role: 'Vétérinaire',
+        image: '/images/trash/testimonial-1-mobile.webp',
+        score: 5,
+        className: 'max-w-80',
+    },
+} satisfies Meta<typeof TestimonialSliderCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Cards/TestimonialSlider/TestimonialSlider.tsx

@@ -0,0 +1,50 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { ParagraphTitle, StarIcon, Text } from '../..';
+
+interface TestimonialSliderCardProps {
+    variant?: 'dark' | 'light';
+    quote: string;
+    author: string;
+    role: string;
+    image: string;
+    score: number;
+    className?: string;
+}
+
+const variantStyles = {
+    dark: 'bg-claret-violet-light text-beige-light',
+    light: 'bg-beige-light text-claret-violet-light',
+};
+
+export const TestimonialSliderCard = forwardRef<HTMLQuoteElement, TestimonialSliderCardProps>(({ quote, author, role, image, score, className, variant = 'dark' }, ref) => {
+    return (
+        <blockquote ref={ref} className={clsx('border-beige-light rounded-card flex shrink-0 flex-col gap-5 border p-6 xl:w-full', className, variantStyles[variant])}>
+            <div className="flex items-center gap-0.5">
+                {Array.from({ length: score }).map((_, index) => (
+                    <div key={index}>
+                        <StarIcon className={clsx('w-5', variant === 'dark' ? 'text-lavender-blue-light' : 'text-claret-violet-light')} />
+                    </div>
+                ))}
+            </div>
+            <ParagraphTitle size="heading-md" className="text-left md:hidden">
+                {quote}
+            </ParagraphTitle>
+            <Text size="md" className="hidden text-left md:block">
+                {quote}
+            </Text>
+            <footer className="flex items-center gap-2 md:gap-3">
+                <div className="h-8 w-8 overflow-hidden rounded-full md:h-11 md:w-11">
+                    <img src={image} alt="Testimonial Card" width={44} height={44} className="h-full w-full object-cover" />
+                </div>
+                <div>
+                    <cite className="text-lg-mobile md:text-md block text-left leading-none font-semibold not-italic md:mb-2.5">{author}</cite>
+                    <p className="text-lg-mobile md:text-legend text-left leading-none md:italic">{role}</p>
+                </div>
+            </footer>
+        </blockquote>
+    );
+});
+TestimonialSliderCard.displayName = 'TestimonialCard';

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

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tips } from './Tips';
+
+const meta = {
+    title: 'Components/Cards/Tips',
+    component: Tips,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        content: { control: 'text', description: 'Tips content' },
+        className: { control: 'text' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Tips>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        content: "Moi Claudine, j'aime quand mon père ajoute une petite goutte d'eau dans mon repas.",
+        className: '!w-[300px] md:!w-[1118px]',
+    },
+};

package/src/components/Cards/Tips/Tips.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import CrownImage from '../../../assets/illustrations/crown.webp';
+import ClaudineTipsHeadMobileImage from '../../../assets/images/tips/claudine-tips-head-mobile.webp';
+import ClaudineTipsHeadMobile2xImage from '../../../assets/images/tips/claudine-tips-head-mobile@2x.webp';
+import ClaudineTipsHeadImage from '../../../assets/images/tips/claudine-tips-head.webp';
+import ClaudineTipsHead2xImage from '../../../assets/images/tips/claudine-tips-head@2x.webp';
+import { ParagraphTitle, ResponsiveImage, Text } from '../../../components';
+
+export interface TipsProps {
+    content: string;
+    className?: string;
+}
+
+export const Tips = forwardRef<HTMLDivElement, TipsProps>(({ content, className }, ref) => {
+    return (
+        <div ref={ref} className={clsx('text-claret-violet-dark bg-lavender-blue-light rounded-card flex w-full items-stretch justify-center gap-4 max-md:ps-3.5 md:h-95 md:items-center md:gap-21.5', className)}>
+            <div className="relative flex w-26 shrink-0 items-end justify-center object-contain md:h-full md:w-88.5">
+                <img id="crown-illustration" src={CrownImage} alt="Crown illustration" className="absolute top-3 w-7 -translate-x-1/4 max-md:scale-x-[-1] md:top-6 md:w-23 md:translate-x-1/4" />
+                <ResponsiveImage mobile={ClaudineTipsHeadMobileImage} desktop={ClaudineTipsHeadImage} mobile2x={ClaudineTipsHeadMobile2xImage} desktop2x={ClaudineTipsHead2xImage} alt="Claudine" />
+            </div>
+            <div className="me-2.5 flex h-full flex-col justify-center gap-3 max-md:py-3.5 md:me-16 md:max-w-120">
+                <p className="font-md hidden font-semibold uppercase md:block">Les conseils de Claudine</p>
+                <Text size="sm" className="block md:hidden">
+                    Les conseils de Claudine
+                </Text>
+                <ParagraphTitle size="heading-md" italic={true} className="hidden md:block">
+                    "&nbsp;{content}&nbsp;"
+                </ParagraphTitle>
+                <ParagraphTitle size="heading-lg" className="block md:hidden">
+                    "&nbsp;{content}&nbsp;"
+                </ParagraphTitle>
+            </div>
+        </div>
+    );
+});
+
+Tips.displayName = 'Tips';

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

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TransitionCard } from './TransitionCard';
+
+const meta = {
+    title: 'Components/Cards/TransitionCard',
+    component: TransitionCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        id: { control: 'text' },
+        active: { control: 'boolean' },
+        className: { control: 'text' },
+    },
+    args: {
+        id: 'transition-card',
+        className: 'max-md:w-80',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+} satisfies Meta<typeof TransitionCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Day1: Story = {
+    args: {
+        variant: '25%',
+    },
+};
+export const Day3: Story = {
+    args: {
+        variant: '50%',
+    },
+};
+export const Day5: Story = {
+    args: {
+        variant: '75%',
+    },
+};
+export const Day7: Story = {
+    args: {
+        variant: '100%',
+    },
+};

package/src/components/Cards/TransitionCard/TransitionCard.tsx

@@ -0,0 +1,66 @@
+import { Fragment } from 'react';
+
+import clsx from 'clsx';
+
+import { CheckIcon, ParagraphTitle, Text } from '../../../components';
+
+export interface TransitionCardProps {
+    id: string;
+    variant: '25%' | '50%' | '75%' | '100%';
+    active?: boolean;
+    className?: string;
+}
+
+const variantsContent = {
+    '25%': {
+        title: 'Jour 1 & 2',
+        description: ['75% de l’ancienne alimentation', '25% de Elmut. '],
+    },
+    '50%': {
+        title: 'Jour 3 & 4',
+        description: ['50% de l’ancienne alimentation', '50% de Elmut. '],
+    },
+    '75%': {
+        title: 'Jour 5 & 6',
+        description: ['25% de l’ancienne alimentation', '75% de Elmut. '],
+    },
+    '100%': {
+        title: 'Jour 7 et +',
+        description: ['100% de Elmut. '],
+    },
+};
+export const TransitionCard = ({ id, variant = '25%', active, className }: TransitionCardProps) => {
+    const { title, description } = variantsContent[variant];
+
+    return (
+        <div
+            className={clsx(
+                'bg-claret-violet-light text-beige-light rounded-card border-claret-violet-light flex h-86 w-full flex-col gap-3 border p-4 transition-all duration-300 max-md:items-center md:h-29 md:w-80 md:gap-4',
+                !active && 'text-beige-light/10 border-claret-violet-light border-dashed bg-transparent',
+                className,
+            )}
+        >
+            <div className="flex items-center gap-4 max-md:justify-center">
+                <div className={clsx('bg-beige-light/50 flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-opacity duration-300 max-md:hidden', !active && 'text-beige-light opacity-10')}>
+                    <CheckIcon className="w-2" />
+                </div>
+                <ParagraphTitle size="heading-lg" italic={true} className="leading-none !not-italic md:hidden">
+                    {title}
+                </ParagraphTitle>
+                <Text size="xl" className="hidden leading-none md:block">
+                    {title}
+                </Text>
+            </div>
+            {description.map((item) => (
+                <Fragment key={`${id}-${item}`}>
+                    <ParagraphTitle size="heading-md" className="leading-none md:hidden">
+                        {item}
+                    </ParagraphTitle>
+                    <Text size="md" className="hidden leading-none md:block">
+                        {item}
+                    </Text>
+                </Fragment>
+            ))}
+        </div>
+    );
+};