@myelmut/design-system 0.1.46 → 0.1.48

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

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IllustratedCard } from './IllustratedCard';
+
+const meta = {
+    title: 'Components/Cards/IllustratedCard',
+    component: IllustratedCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: { control: 'select', options: ['primary', 'secondary', 'tertiary'] },
+        title: { control: 'text' },
+        description: { control: 'text' },
+        illustration: { control: 'text', description: 'Illustration asset name without the .webp extension' },
+        className: { control: 'text', description: 'Additional class names' },
+        illustrationClassName: { control: 'text', description: 'Additional class names for the illustration' },
+    },
+} satisfies Meta<typeof IllustratedCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Primary: Story = {
+    args: {
+        variant: 'primary',
+        title: '70% de viande de porc',
+        description: 'pour les carnivores oportunistes !',
+        illustration: '/illustrations/plate.webp',
+        className: 'max-md:w-67.5',
+        illustrationClassName: 'translate-y-4',
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        variant: 'secondary',
+        title: 'Adapté à tous les chiens',
+        description: 'à partir de 4 mois',
+        illustration: '/illustrations/dog.webp',
+        illustrationClassName: 'md:!scale-120',
+    },
+};
+
+export const Tertiary: Story = {
+    args: {
+        variant: 'tertiary',
+        title: 'Adapté à tous les chats',
+        description: 'à parir de 4 mois',
+        illustration: '/illustrations/cat.webp',
+        illustrationClassName: '-rotate-12 -translate-x-6 md:!scale-138 -mt-4',
+    },
+};

package/src/components/Cards/IllustratedCard/IllustratedCard.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { ParagraphTitle, Text } from '../../../components';
+
+export interface IllustratedCardProps {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    title: string;
+    description: string;
+    illustration: string;
+    className?: string;
+    illustrationClassName?: string;
+    value?: string;
+}
+
+const variantStyles = {
+    primary: 'bg-lavender-blue-light',
+    secondary: 'bg-pink-oyster-light',
+    tertiary: 'bg-beige-light',
+};
+
+export const IllustratedCard = forwardRef<HTMLDivElement, IllustratedCardProps>(({ variant = 'primary', title, description, illustration, className, illustrationClassName, value = '' }: IllustratedCardProps, ref) => {
+    return (
+        <div ref={ref} className={clsx('border-claret-violet-dark text-claret-violet-dark rounded-card flex w-full flex-col justify-between gap-2 overflow-hidden border pt-6 max-md:aspect-17/15 max-md:max-w-68 md:h-75 md:max-h-75 md:w-51.25 md:pt-8', variantStyles[variant], className)}>
+            <div key={`card-text-${value}`} className="flex animate-[fade-in_600ms_ease-in] flex-col items-center gap-3">
+                <Text size="xl" className="px-6 text-center">
+                    {title}
+                </Text>
+                <ParagraphTitle size="heading-md" className="px-6 text-center md:hidden">
+                    {description}
+                </ParagraphTitle>
+                <Text size="md" className="hidden px-6 text-center md:block">
+                    {description}
+                </Text>
+            </div>
+            <div key={`card-img-${value}`} className="h-full max-h-3/4 w-full animate-[fade-in_600ms_ease-in] overflow-visible md:max-h-55/100">
+                <img src={illustration} alt={title} className={clsx('origin-top md:scale-132', illustrationClassName)} />
+            </div>
+        </div>
+    );
+});
+
+IllustratedCard.displayName = 'IllustratedCard';

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

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PaymentCard } from './PaymentCard';
+
+const meta = {
+    title: 'Components/Cards/PaymentCard',
+    component: PaymentCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional classes to apply to the component',
+        },
+    },
+    args: {
+        content: "Bonne nouvelle : x% de nos clients qui ont un poilu bien portant constate une perte de gras depuis qu'ils se nourrissent avec Elmut !",
+        className: 'w-full md:w-165.5',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof PaymentCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/components/Cards/PaymentCard/PaymentCard.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+
+import PaymentMobileImage from '../../../assets/images/tips/payment-mobile.webp';
+import PaymentMobile2xImage from '../../../assets/images/tips/payment-mobile@2x.webp';
+import PaymentImage from '../../../assets/images/tips/payment.webp';
+import Payment2xImage from '../../../assets/images/tips/payment@2x.webp';
+import { QuoteIcon, ResponsiveImage, Text } from '../../../components';
+
+interface PaymentCardProps {
+    content: string;
+    className?: string;
+}
+
+export const PaymentCard = ({ content, className }: PaymentCardProps) => {
+    return (
+        <div className={clsx('rounded-input md:rounded-card bg-pink-oyster-light border-claret-violet-dark flex gap-3 border p-4 max-md:flex-row-reverse md:h-69 md:gap-10 md:p-6', className)}>
+            <div className="flex flex-col justify-between gap-4">
+                <QuoteIcon className="hidden w-8 md:block" />
+                <Text size="xl" className="hidden md:block">
+                    {content}
+                </Text>
+                <Text size="lg" className="block not-italic md:hidden">
+                    “{content}“
+                </Text>
+            </div>
+            <div className={clsx('md:rounded-card rounded-input relative h-10 w-10 shrink-0 overflow-hidden md:aspect-89/115 md:h-full md:w-auto')}>
+                <ResponsiveImage desktop={PaymentImage} mobile={PaymentMobileImage} mobile2x={PaymentMobile2xImage} desktop2x={Payment2xImage} alt="Client" className="absolute inset-0 object-cover" />
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,140 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PlanCard } from './PlanCard';
+
+const meta = {
+    title: 'Components/Cards/PlanCard',
+    component: PlanCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Plan title',
+        },
+        description: {
+            control: 'text',
+            description: 'Plan description',
+        },
+        dailyAmount: {
+            control: 'text',
+            description: 'Daily amount of food',
+        },
+        price: {
+            control: 'text',
+            description: 'Current price',
+        },
+        originalPrice: {
+            control: 'text',
+            description: 'Original price (crossed out)',
+        },
+        discountPercentage: {
+            control: 'text',
+            description: 'Discount percentage badge',
+        },
+        planImage: {
+            control: 'text',
+            description: 'URL of the plan image',
+        },
+        planImageAlt: {
+            control: 'text',
+            description: 'Alt text for the plan image',
+        },
+        pricePrefix: {
+            control: 'text',
+            description: 'Text before the price',
+        },
+        priceSuffix: {
+            control: 'text',
+            description: 'Text after the price',
+        },
+        originalPriceSuffix: {
+            control: 'text',
+            description: 'Text after the original price',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional classes to apply to the component',
+        },
+    },
+    args: {
+        title: 'Formule complète',
+        description: "Uniquement du Elmut pour couvrir l'intégralité des besoins caloriques de Jackie la Fripouille, Shalvah, Max.",
+        dailyAmount: '300g/jour',
+        price: '2,69€',
+        originalPrice: '3,85€',
+        discountPercentage: '-30%',
+        planImage: '/images/trash/full-cat.png',
+        planImageAlt: 'Bol de nourriture pour chien',
+        pricePrefix: 'A partir de',
+        priceSuffix: '/jour',
+        originalPriceSuffix: '/jour',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof PlanCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const CompleteFormula: Story = {
+    args: {
+        title: 'Formule complète',
+        description: "Uniquement du Elmut pour couvrir l'intégralité des besoins caloriques de $prénom.",
+        dailyAmount: '300g/jour',
+        price: '2,69€',
+        originalPrice: '3,85€',
+        discountPercentage: '-30%',
+    },
+};
+
+export const HalfPension: Story = {
+    args: {
+        title: 'Demi pension',
+        description: 'Du Elmut pour couvrir 50% des besoins caloriques de votre animal, complété par vos croquettes habituelles.',
+        dailyAmount: '150g/jour',
+        price: '1,35€',
+        originalPrice: '1,93€',
+        discountPercentage: '-30%',
+    },
+};
+
+export const WithoutDiscount: Story = {
+    args: {
+        title: 'Formule standard',
+        description: 'Une formule équilibrée pour votre compagnon.',
+        dailyAmount: '250g/jour',
+        price: '3,20€',
+        originalPrice: undefined,
+        discountPercentage: undefined,
+    },
+};
+
+export const WithoutPetInfo: Story = {
+    args: {
+        title: 'Formule découverte',
+        description: 'Découvrez notre gamme de produits premium pour animaux.',
+        dailyAmount: undefined,
+        price: '2,99€',
+        originalPrice: '4,50€',
+        discountPercentage: '-34%',
+    },
+};
+
+export const LongDescription: Story = {
+    args: {
+        title: 'Formule premium',
+        description: 'Une formule complète et équilibrée, spécialement conçue pour répondre aux besoins nutritionnels spécifiques de votre animal. Nos ingrédients sont soigneusement sélectionnés pour garantir une alimentation saine et savoureuse.',
+        dailyAmount: '400g/jour',
+        price: '4,15€',
+        originalPrice: '5,99€',
+        discountPercentage: '-31%',
+    },
+};

package/src/components/Cards/PlanCard/PlanCard.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import React from 'react';
+
+import clsx from 'clsx';
+
+import { Text, Title, ResponsiveImage } from '../../Base';
+import { HatCookIcon, SubtractIcon } from '../../../components';
+
+
+export interface PlanCardProps {
+    title: string;
+    description: string;
+    dailyAmount?: string;
+    price: string;
+    originalPrice?: string;
+    discountPercentage?: string;
+    planImage: string;
+    planImageAlt?: string;
+    className?: string;
+    pricePrefix?: string;
+    priceSuffix?: string;
+    originalPriceSuffix?: string;
+}
+
+export const PlanCard = ({
+    title,
+    description,
+    dailyAmount,
+    price,
+    originalPrice,
+    discountPercentage,
+    planImage,
+    planImageAlt,
+    className = '',
+    pricePrefix = 'A partir de',
+    priceSuffix = '/jour',
+    originalPriceSuffix = '/jour',
+}: PlanCardProps) => {
+    return (
+        <div className={clsx(
+            'bg-beige-dark rounded-tr-2xl rounded-br-2xl rounded-bl-2xl border-2 border-beige-dark p-6 flex flex-col md:flex-row gap-6 relative overflow-visible',
+            className
+        )}>
+            {/* Product Image */}
+            <div className="flex-shrink-0 relative">
+                <div className="w-15 h-15 md:w-66 md:h-66 rounded-full overflow-hidden bg-gray-50 border-4 border-white shadow-lg transform md:-translate-x-16">
+                    <ResponsiveImage 
+                        mobile={planImage} 
+                        desktop={planImage}
+                        mobile2x={planImage}
+                        desktop2x={planImage}
+                        alt={planImageAlt || title}
+                        className="w-full h-full object-cover"
+                    />
+                </div>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 flex flex-col justify-center">
+                {/* Title */}
+                <Title variant="h2" size="heading-lg" className="text-claret-violet-dark mb-4">
+                    {title}
+                </Title>
+
+                {/* Description */}
+                <Text size="lg" className="text-claret-violet-dark mb-6 leading-relaxed">
+                    {description}
+                </Text>
+
+                {/* Pet Info */}
+                {dailyAmount ? (
+                    <>
+                        <div className="flex items-center gap-2 mb-4">
+                            <div className="w-6">
+                                <HatCookIcon />
+                            </div>
+                            <Text size="md" className="font-semibold text-claret-violet-dark">
+                                {dailyAmount}
+                            </Text>
+                        </div>
+                        <hr className="border-claret-violet-dark mb-6" />
+                    </>
+                ): null}
+
+                {/* Pricing */}
+                <div className="flex items-center justify-between">
+                    <div className="flex flex-col">
+                        <Text size="sm" className="text-claret-violet-dark mb-1">
+                            {pricePrefix}
+                        </Text>
+                        <div className="flex items-baseline gap-3">
+                            <Text size="xl" className="font-bold text-claret-violet-dark">
+                                {price}
+                                <span className="text-sm font-normal ml-1">{priceSuffix}</span>
+                            </Text>
+                            {originalPrice && (
+                                <Text size="md" className="text-claret-violet-dark line-through opacity-50">
+                                    {originalPrice}
+                                    <span className="text-sm ml-1">{originalPriceSuffix}</span>
+                                </Text>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Discount Badge */}
+                    {discountPercentage ? (
+                        <div className="bg-lavender-blue-light text-claret-violet-dark px-3 py-2 rounded-lg flex items-center gap-1">
+                            <SubtractIcon className="w-4 h-4" />
+                            <Text size="sm" className="font-semibold">
+                                {discountPercentage}
+                            </Text>
+                        </div>
+                    ): null}
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,118 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Polaroid } from './Polaroid';
+
+const meta = {
+    title: 'Components/Cards/Polaroid',
+    component: Polaroid,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+        },
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary'],
+        },
+        title: {
+            control: 'text',
+            description: 'The title of the polaroid',
+        },
+        mobileImage: {
+            control: 'text',
+            description: 'The mobile image of the polaroid',
+        },
+        desktopImage: {
+            control: 'text',
+            description: 'The desktop image of the polaroid',
+        },
+        mobileImage2x: {
+            control: 'text',
+            description: 'The mobile image 2x of the polaroid',
+        },
+        desktopImage2x: {
+            control: 'text',
+            description: 'The desktop image 2x of the polaroid',
+        },
+        overflow: {
+            control: 'select',
+            options: ['hidden', 'visible'],
+            description: 'The overflow of the polaroid image',
+        },
+        showThread: {
+            control: 'boolean',
+            description: 'Whether to show the thread svg of the polaroid',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional classes to apply to the component',
+        },
+        imageClassName: {
+            control: 'text',
+            description: 'Additional classes to apply to the image',
+        },
+    },
+    args: {
+        title: 'Prénom du chien',
+        overflow: 'hidden',
+    },
+    globals: {
+        backgrounds: {
+            value: 'lavender',
+        },
+    },
+} satisfies Meta<typeof Polaroid>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const PrimarySmall: Story = {
+    args: {
+        size: 'sm',
+        variant: 'primary',
+        mobileImage: 'images/trash/dog-product-mobile.webp',
+        desktopImage: 'images/trash/dog-product.webp',
+    },
+};
+
+export const PrimaryMedium: Story = {
+    args: {
+        size: 'md',
+        variant: 'primary',
+        mobileImage: 'images/cat.webp',
+        desktopImage: 'images/cat.webp',
+    },
+};
+
+export const PrimaryLarge: Story = {
+    args: {
+        size: 'lg',
+        variant: 'primary',
+        mobileImage: 'images/cat.webp',
+        desktopImage: 'images/cat.webp',
+    },
+};
+
+export const SecondaryMedium: Story = {
+    args: {
+        size: 'md',
+        variant: 'secondary',
+        mobileImage: 'images/cat.webp',
+        desktopImage: 'images/cat.webp',
+    },
+};
+
+export const TertiaryMedium: Story = {
+    args: {
+        size: 'md',
+        variant: 'tertiary',
+        mobileImage: 'images/cat.webp',
+        desktopImage: 'images/cat.webp',
+        overflow: 'visible',
+    },
+};

package/src/components/Cards/Polaroid/Polaroid.tsx

@@ -0,0 +1,66 @@
+import clsx from 'clsx';
+
+import { Emblem, PolaroidThreadIcon, ResponsiveImage } from '../../../components';
+
+export interface PolaroidProps {
+    size: 'sm' | 'md' | 'lg';
+    variant?: 'neutral' | 'primary' | 'secondary' | 'tertiary';
+    title: string;
+    mobileImage: string;
+    desktopImage: string;
+    mobileImage2x?: string;
+    desktopImage2x?: string;
+    overflow?: 'hidden' | 'visible';
+    className?: string;
+    showThread?: boolean;
+    imageClassName?: string;
+}
+
+const variantStyles = {
+    primary: 'bg-claret-violet-dark',
+    secondary: 'bg-pink-oyster-light',
+    tertiary: 'bg-lavender-blue-light',
+    neutral: 'bg-beige-dark',
+};
+
+const sizeStyles = {
+    sm: 'w-30 h-36.5 px-2 pt-2 md:w-62 md:pb-3.5 md:pt-4.5 md:px-3.75 md:h-76 gap-0 md:gap-3.5',
+    md: 'w-53.5 md:w-111 h-65 md:h-135.5 px-3 pt-4 md:pt-8 md:px-6.5 md:pb-6 gap-1 md:gap-5',
+    lg: 'w-53.5 h-65 px-3 pt-4 gap-1 md:w-152 md:h-185 md:px-9 md:pt-11 md:pb-9.5 md:gap-7',
+};
+
+const imageStyles = {
+    sm: 'h-27 md:h-56',
+    md: 'h-48 md:h-99.5',
+    lg: 'h-48 md:h-136',
+};
+
+const titleStyles = {
+    sm: 'text-heading-lg-mobile max-md:opacity-0 max-md:h-0',
+    md: 'md-mobile md:text-display-md-mobile md:mt-2.5',
+    lg: 'md-mobile md:text-heading-md md:mt-2.5',
+};
+
+const svgStyles = {
+    sm: 'w-2.5 top-[-7px] left-[-5px] md:w-8 md:top-[-23px] md:left-[-21px]',
+    md: 'w-5 top-[-15px] left-[-11px] md:w-10 md:top-[-29px] md:left-[-21px]',
+    lg: 'w-5 top-[-15px] left-[-11px] md:w-13.5 md:top-[-39px] md:left-[-31px]',
+};
+const emblemStyles = {
+    sm: 'w-3.5 max-md:opacity-0 max-md:h-0',
+    md: 'w-2.5 md:w-5.5',
+    lg: 'w-2.5 md:w-7.5',
+};
+
+export const Polaroid = ({ size = 'sm', overflow = 'hidden', variant = 'neutral', title, mobileImage, desktopImage, mobileImage2x, desktopImage2x, showThread = true, className, imageClassName }: PolaroidProps) => {
+    return (
+        <div className={clsx('bg-beige-dark ext-claret-violet-dark relative flex flex-col items-center justify-start', sizeStyles[size], className)}>
+            {showThread && <PolaroidThreadIcon className={clsx('absolute z-10', svgStyles[size])} />}
+            <div className={clsx('bg-claret-violet-dark relative w-full', imageStyles[size], variantStyles[variant], overflow === 'hidden' && 'overflow-hidden', imageClassName)}>
+                <ResponsiveImage alt={title} mobile={mobileImage} desktop={desktopImage} mobile2x={mobileImage2x} desktop2x={desktopImage2x} className={clsx('absolute', overflow === 'hidden' ? 'inset-0 object-cover' : 'right-0 bottom-0 left-0 object-contain')} />
+            </div>
+            <p className={clsx('font-pangaia font-semibold italic', titleStyles[size])}>{title}</p>
+            <Emblem className={emblemStyles[size]} />
+        </div>
+    );
+};