@myelmut/design-system 0.1.47 → 0.1.49

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

@@ -0,0 +1,96 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FeatureCard } from './FeatureCard';
+
+const meta = {
+    title: 'Components/Cards/FeatureCard',
+    component: FeatureCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        features: {
+            control: 'object',
+            description: 'Array of features to display',
+        },
+        backgroundColor: {
+            control: 'select',
+            options: ['lavender', 'beige', 'white'],
+            description: 'Background color theme',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional classes to apply to the component',
+        },
+    },
+    args: {
+        features: [
+            { id: '1', text: 'Complet et équilibré pour les [Race de chien/chat]' },
+            { id: '2', text: 'Ingrédients de qualité humaine' },
+            { id: '3', text: "Jusqu'à 70% de viande" }
+        ],
+        backgroundColor: 'lavender',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof FeatureCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const BeigeBackground: Story = {
+    args: {
+        backgroundColor: 'beige',
+    },
+};
+
+export const WhiteBackground: Story = {
+    args: {
+        backgroundColor: 'white',
+    },
+};
+
+export const TwoFeatures: Story = {
+    args: {
+        features: [
+            { id: '1', text: 'Nutrition complète et équilibrée' },
+            { id: '2', text: 'Ingrédients premium sélectionnés' }
+        ],
+    },
+};
+
+export const FourFeatures: Story = {
+    args: {
+        features: [
+            { id: '1', text: 'Complet et équilibré pour les [Race de chien/chat]' },
+            { id: '2', text: 'Ingrédients de qualité humaine' },
+            { id: '3', text: "Jusqu'à 70% de viande" },
+            { id: '4', text: 'Sans céréales ni conservateurs artificiels' }
+        ],
+    },
+};
+
+export const LongFeatureText: Story = {
+    args: {
+        features: [
+            { 
+                id: '1', 
+                text: 'Une formule complète et équilibrée spécialement conçue pour répondre aux besoins nutritionnels de votre animal de compagnie' 
+            },
+            { 
+                id: '2', 
+                text: 'Des ingrédients de qualité humaine soigneusement sélectionnés par nos vétérinaires nutritionnistes' 
+            },
+            { 
+                id: '3', 
+                text: "Jusqu'à 70% de viande fraîche pour un apport protéique optimal et un goût irrésistible" 
+            }
+        ],
+    },
+};

package/src/components/Cards/FeatureCard/FeatureCard.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+
+import clsx from 'clsx';
+
+import ClaudineTipsMobileImage from '../../../assets/images/tips/claudine-tips-mobile.webp';
+import ClaudineTipsMobile2xImage from '../../../assets/images/tips/claudine-tips-mobile@2x.webp';
+import ClaudineTipsImage from '../../../assets/images/tips/claudine-tips.webp';
+import ClaudineTips2xImage from '../../../assets/images/tips/claudine-tips@2x.webp';
+import { CheckRoundedIcon } from '../../../components';
+import { ResponsiveImage, Text } from '../../Base';
+
+export interface FeatureItem {
+    id: string;
+    text: string;
+    icon?: React.ReactNode;
+}
+
+export interface FeatureCardProps {
+    features: FeatureItem[];
+    className?: string;
+    backgroundColor?: 'lavender' | 'beige' | 'white';
+}
+
+const backgroundStyles = {
+    lavender: 'bg-lavender-blue-light',
+    beige: 'bg-beige-light',
+    white: 'bg-white',
+};
+
+export const FeatureCard = ({ features, className = '', backgroundColor = 'lavender' }: FeatureCardProps) => {
+    return (
+        <div className={clsx('relative flex w-full items-center gap-[16px] overflow-hidden p-6 md:p-10 lg:gap-[32px] lg:rounded-2xl lg:p-[40px]', backgroundStyles[backgroundColor], 'flex-col md:flex-row', className)}>
+            {/* Features List */}
+            <div className={clsx('flex-1 space-y-4', 'md:pr-4')}>
+                {features.map((feature) => (
+                    <div key={feature.id} className="flex items-start gap-[8px]">
+                        {feature.icon || <CheckRoundedIcon className="text-claret-violet-light w-6 shrink-0" />}
+                        <Text size="xl">{feature.text}</Text>
+                    </div>
+                ))}
+            </div>
+
+            <div className={clsx('relative flex-shrink-0', 'h-32 w-32 md:h-40 md:w-40', 'self-end', 'hidden md:block')}>
+                <ResponsiveImage mobile={ClaudineTipsMobileImage} desktop={ClaudineTipsImage} mobile2x={ClaudineTipsMobile2xImage} desktop2x={ClaudineTips2xImage} alt="Claudine" className="absolute right-0 -bottom-6 h-full w-full object-cover object-bottom" />
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FeatureIllustration } from './FeatureIllustration';
+
+import BoxIllustration from '../../../assets/illustrations/box.webp';
+import FranceIllustration from '../../../assets/illustrations/france.webp';
+import PawIllustration from '../../../assets/illustrations/paws.webp';
+import PotIllustration from '../../../assets/illustrations/pot.webp';
+
+const meta: Meta<typeof FeatureIllustration> = {
+    title: 'Components/Cards/FeatureIllustration',
+    component: FeatureIllustration,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A component that displays an illustration with descriptive text below it. Perfect for feature highlights or service descriptions.',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        src: {
+            description: 'The source URL of the image to display',
+            control: { type: 'text' },
+        },
+        alt: {
+            description: 'Alternative text for the image (accessibility)',
+            control: { type: 'text' },
+        },
+        title: {
+            description: 'The text to display below the illustration',
+            control: { type: 'text' },
+        },
+        className: {
+            description: 'Additional CSS classes for the container',
+            control: { type: 'text' },
+        },
+        illustrationClassName: {
+            description: 'Additional CSS classes for the illustration container',
+            control: { type: 'text' },
+        },
+        titleClassName: {
+            description: 'Additional CSS classes for the title text',
+            control: { type: 'text' },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        src: BoxIllustration,
+        alt: 'Box illustration',
+        title: 'Interrompez vos futures livraisons quand vous le souhaitez',
+    },
+};
+
+export const ThreeFeatures: Story = {
+    render: () => (
+        <div className="flex max-w-4xl flex-col gap-[23px] md:flex-row">
+            <FeatureIllustration src={BoxIllustration} alt="Box illustration" title="Interrompez vos futures livraisons quand vous le souhaitez" />
+            <FeatureIllustration src={FranceIllustration} alt="France illustration" title="Reprogrammez vos dates de livraison à tout moment" />
+            <FeatureIllustration src={PawIllustration} alt="Paws illustration" title="Modifiez vos produits ou les quantités dans votre espace personnel" />
+        </div>
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Example showing three feature illustrations together as they would appear in the actual design.',
+            },
+        },
+    },
+};
+
+export const CustomStyling: Story = {
+    args: {
+        src: PotIllustration,
+        alt: 'Pot illustration',
+        title: 'Custom styled feature',
+        className: 'bg-lavender-blue-light rounded-lg p-6',
+        illustrationClassName: 'scale-75',
+        titleClassName: 'text-purple-800 font-bold',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Example showing how to customize the styling with additional CSS classes.',
+            },
+        },
+    },
+};

package/src/components/Cards/FeatureIllustration/FeatureIllustration.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import clsx from 'clsx';
+import { Text } from '../../Base';
+
+export interface FeatureIllustrationProps {
+    src: string;
+    alt: string;
+    title: string;
+    className?: string;
+    illustrationClassName?: string;
+    titleClassName?: string;
+}
+
+export const FeatureIllustration = ({
+    src,
+    alt,
+    title,
+    className = '',
+    illustrationClassName = '',
+    titleClassName = '',
+}: FeatureIllustrationProps) => {
+    return (
+        <div className={clsx(
+            'flex flex-col items-center text-center gap-[24px]',
+            'p-4',
+            className
+        )}>
+            {/* Illustration */}
+            <div className={clsx(
+                'flex items-center justify-center',
+                illustrationClassName
+            )}>
+                <img 
+                    src={src}
+                    alt={alt}
+                    className='w-16 h-16 object-contain'
+                />
+            </div>
+
+            {/* Title */}
+            <Text
+                variant="p"
+                size="md"
+                className={clsx(
+                    'text-claret-violet leading-relaxed',
+                    'max-w-xs',
+                    titleClassName
+                )}
+            >
+                {title}
+            </Text>
+        </div>
+    );
+};

package/src/components/Cards/FeatureIllustration/index.ts

@@ -0,0 +1,2 @@
+export { FeatureIllustration } from './FeatureIllustration';
+export type { FeatureIllustrationProps } from './FeatureIllustration';

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

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FoodCard } from './FoodCard';
+
+const meta = {
+    title: 'Components/Cards/FoodCard',
+    component: FoodCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        title: {
+            control: 'text',
+        },
+        description: {
+            control: 'text',
+        },
+        illustration: {
+            control: 'text',
+            description: 'Name of the illustration asset',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional classes to apply to the component',
+        },
+    },
+    args: {
+        title: 'Le légume',
+        description: 'soutiennent le métabolisme énergétique et le système nerveux.',
+        illustration: '/illustrations/carrot.webp',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof FoodCard>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Cards/FoodCard/FoodCard.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { Text } from '../../../components';
+
+export interface FoodCardProps {
+    title: string;
+    description: string;
+    illustration: string;
+    className?: string;
+}
+
+export const FoodCard = forwardRef<HTMLDivElement, FoodCardProps>(({ title, description, illustration, className }, ref) => {
+    return (
+        <div ref={ref} className={clsx('bg-lavender-blue-light text-claret-violet-dark rounded-food-card min-h-25 w-68 p-4', className)}>
+            <div key={`food-card-${title}`} className="flex animate-[fade-in_600ms_ease-in] gap-2.5">
+                <div className="w-12 shrink-0">
+                    <img src={illustration} alt={title} className="object-contain" />
+                </div>
+                <div>
+                    <Text size="sm" className="mb-2 font-semibold">
+                        {title}
+                    </Text>
+                    <Text size="sm" className="hidden md:block">
+                        {description}
+                    </Text>
+                    <Text size="md" className="block md:hidden">
+                        {description}
+                    </Text>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+FoodCard.displayName = 'FoodCard';

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

@@ -0,0 +1,140 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FrequencySelectorCard } from './FrequencySelectorCard';
+
+import FridgeImage from '../../../assets/images/frequency/food-in-fridge.webp';
+
+const meta: Meta<typeof FrequencySelectorCard> = {
+    title: 'Components/Cards/FrequencySelectorCard',
+    component: FrequencySelectorCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        isSelected: {
+            control: 'boolean',
+        },
+        badgeLabel: {
+            control: 'text',
+        },
+        mobileImage: {
+            control: 'text',
+        },
+        desktopImage: {
+            control: 'text',
+        },
+        mobile2xImage: {
+            control: 'text',
+        },
+        desktop2xImage: {
+            control: 'text',
+        },
+        imageAlt: {
+            control: 'text',
+        },
+        onClick: { action: 'clicked' },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Livraison toutes les 2 semaines',
+        description: 'Ne prends pas de place dans le frigo',
+        priceLabel: 'Un poil plus cher',
+        isSelected: false,
+        mobileImage: FridgeImage,
+        desktopImage: FridgeImage,
+        mobile2xImage: FridgeImage,
+        desktop2xImage: FridgeImage,
+        imageAlt: 'Nourriture dans le frigo',
+    },
+};
+
+export const Selected: Story = {
+    args: {
+        title: 'Livraison toutes les 3 semaines',
+        description: 'Convient à la majorité des frigos',
+        priceLabel: 'Tarifs abordables',
+        isSelected: true,
+        mobileImage: FridgeImage,
+        desktopImage: FridgeImage,
+        mobile2xImage: FridgeImage,
+        desktop2xImage: FridgeImage,
+        imageAlt: 'Nourriture dans le frigo',
+    },
+};
+
+export const WithBadge: Story = {
+    args: {
+        title: 'Livraison toutes les 6 semaines',
+        description: 'Va falloir faire de la place dans le frigo',
+        priceLabel: 'la bonne affaire',
+        isSelected: false,
+        badgeLabel: 'Le plus populaire',
+        mobileImage: FridgeImage,
+        desktopImage: FridgeImage,
+        mobile2xImage: FridgeImage,
+        desktop2xImage: FridgeImage,
+        imageAlt: 'Nourriture dans le frigo',
+    },
+};
+
+export const WithBadgeAndSelected: Story = {
+    args: {
+        title: 'Livraison toutes les 6 semaines',
+        description: 'Va falloir faire de la place dans le frigo',
+        priceLabel: 'la bonne affaire',
+        isSelected: true,
+        badgeLabel: 'Le plus populaire',
+        mobileImage: FridgeImage,
+        desktopImage: FridgeImage,
+        mobile2xImage: FridgeImage,
+        desktop2xImage: FridgeImage,
+        imageAlt: 'Nourriture dans le frigo',
+    },
+};
+
+export const AllVariants: Story = {
+    render: () => (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl">
+            <FrequencySelectorCard
+                title="Livraison toutes les 6 semaines"
+                description="Va falloir faire de la place dans le frigo"
+                priceLabel="la bonne affaire"
+                isSelected={false}
+                badgeLabel="Le plus populaire"
+                mobileImage={FridgeImage}
+                desktopImage={FridgeImage}
+                mobile2xImage={FridgeImage}
+                desktop2xImage={FridgeImage}
+                imageAlt="Nourriture dans le frigo"
+            />
+            <FrequencySelectorCard
+                title="Livraison toutes les 3 semaines"
+                description="Convient à la majorité des frigos"
+                priceLabel="Tarifs abordables"
+                isSelected={true}
+                mobileImage={FridgeImage}
+                desktopImage={FridgeImage}
+                mobile2xImage={FridgeImage}
+                desktop2xImage={FridgeImage}
+                imageAlt="Nourriture dans le frigo"
+            />
+            <FrequencySelectorCard
+                title="Livraison toutes les 2 semaines"
+                description="Ne prends pas de place dans le frigo"
+                priceLabel="Un poil plus cher"
+                isSelected={false}
+                mobileImage={FridgeImage}
+                desktopImage={FridgeImage}
+                mobile2xImage={FridgeImage}
+                desktop2xImage={FridgeImage}
+                imageAlt="Nourriture dans le frigo"
+            />
+        </div>
+    ),
+};

package/src/components/Cards/FrequencySelectorCard/FrequencySelectorCard.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import clsx from 'clsx';
+import { ResponsiveImage, Text } from '../../Base';
+import { CheckIcon, DollarRoundedIcon } from '../../SVG';
+
+export interface FrequencySelectorCardProps {
+    title: string;
+    description: string;
+    priceLabel: string;
+    isSelected?: boolean;
+    badgeLabel?: string;
+    onClick?: () => void;
+    className?: string;
+    // Image props
+    mobileImage: string;
+    desktopImage: string;
+    mobile2xImage: string;
+    desktop2xImage: string;
+    imageAlt: string;
+}
+
+export const FrequencySelectorCard = ({ 
+    title, 
+    description, 
+    priceLabel, 
+    isSelected = false, 
+    badgeLabel, 
+    onClick, 
+    className = '',
+    mobileImage,
+    desktopImage,
+    mobile2xImage,
+    desktop2xImage,
+    imageAlt
+}: FrequencySelectorCardProps) => {
+    return (
+        <div className={clsx('relative cursor-pointer rounded-2xl transition-all duration-200 hover:shadow-lg', 'bg-beige-light', isSelected && 'ring-claret-violet-dark bg-lavender-blue-light ring-[3px]', className)} onClick={onClick}>
+            {/* Fridge Image - Full Width */}
+            <div className="relative h-40 w-full overflow-hidden rounded-t-2xl">
+                <ResponsiveImage 
+                    mobile={mobileImage} 
+                    desktop={desktopImage} 
+                    mobile2x={mobile2xImage}
+                    desktop2x={desktop2xImage}
+                    alt={imageAlt} 
+                    className="h-full w-full object-cover" 
+                />
+
+                {/* Badge - Overlaid on Image */}
+                {badgeLabel ? (
+                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 z-10">
+                        <div className="bg-claret-violet-dark rounded-b-[20px] px-6 py-3 text-sm font-medium text-white whitespace-nowrap">
+                            {badgeLabel}
+                        </div>
+                    </div>
+                ) : null}
+            </div>
+
+            {/* Content Container */}
+            <div className="gap-[24px] p-[24px] md:gap-[12px] md:p-[12px]">
+                <div className="gap-[24px] md:gap-[4.61px]">
+                    {/* Title */}
+                    <Text size="xl" className="text-claret-violet-dark mb-3">
+                        {title}
+                    </Text>
+                    {/* Description */}
+                    <Text size="md" className="text-claret-violet-dark mb-4 leading-relaxed">
+                        {description}
+                    </Text>
+                </div>
+
+                {/* Price Label with Icon */}
+                <div className="flex items-center gap-[10px] md:gap-[4.61px]">
+                    <DollarRoundedIcon className="w-6" />
+                    <Text size="md" className="text-claret-violet-dark font-medium italic">
+                        {priceLabel}
+                    </Text>
+                </div>
+
+                {/* Selected Check Icon */}
+                {isSelected ? (
+                    <div className="bg-beige-light border-claret-violet-dark absolute -bottom-4 left-1/2 flex h-8 w-8 -translate-x-1/2 transform items-center justify-center rounded-full border-[2px]">
+                        <CheckIcon className="w-4" />
+                    </div>
+                ) : null}
+            </div>
+        </div>
+    );
+};

package/src/components/Cards/FrequencySelectorCard/index.ts

@@ -0,0 +1,2 @@
+export { FrequencySelectorCard } from './FrequencySelectorCard';
+export type { FrequencySelectorCardProps } from './FrequencySelectorCard';

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',
+    },
+};