@myelmut/design-system 0.1.47 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "Design system for Elmut project",
   "repository": {
     "type": "git",
@@ -17,7 +17,8 @@
   "files": [
     "dist",
     "styles",
-    "assets"
+    "assets",
+    "src"
   ],
   "peerDependencies": {
     "i18next": "^25.0.0",

package/src/components/Accordions/FAQ/FaqItem.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FaqItem } from './FaqItem';
+
+const meta = {
+    title: 'Components/Accordions/FaqItem',
+    component: FaqItem,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+
+    decorators: [
+        (Story) => (
+            <div className="bg-beige-light flex h-[80vh] flex-col items-center justify-center gap-4 overflow-hidden p-6">
+                <Story />
+            </div>
+        ),
+    ],
+    argTypes: {
+        question: {
+            control: 'text',
+        },
+        answer: {
+            control: 'text',
+        },
+        className: {
+            control: 'text',
+        },
+    },
+} satisfies Meta<typeof FaqItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+    args: {
+        question: 'Combien coûte la solution Elmut ?',
+        answer: 'La solution Elmut est un service qui permet de gérer les demandes de service de manière efficace et transparente.',
+        className: '!w-80 md:!w-200',
+    },
+};
+
+export const FAQ: Story = {
+    args: {
+        question: 'Combien coûte la solution Elmut ?',
+        answer: 'La solution Elmut est un service qui permet de gérer les demandes de service de manière efficace et transparente.',
+        className: '!w-80 md:!w-200',
+    },
+    render: (args) => {
+        return (
+            <>
+                <FaqItem {...args} />
+                <FaqItem {...args} />
+                <FaqItem {...args} />
+            </>
+        );
+    },
+};

package/src/components/Accordions/FAQ/FaqItem.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import clsx from 'clsx';
+
+import { FAQButton, ParagraphTitle, Text } from '../../../components';
+import { accordionAnimation } from '../../../helpers';
+
+type FaqItemProps = {
+    question: string;
+    answer: string;
+    className?: string;
+};
+
+export const FaqItem = ({ question, answer, className }: FaqItemProps) => {
+    const detailsRef = useRef<HTMLDetailsElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const details = detailsRef.current;
+        const content = contentRef.current;
+        if (!details || !content) return;
+
+        const handleAnimation = (e: Event) => {
+            accordionAnimation(e, details, content);
+        };
+
+        details.addEventListener('click', handleAnimation);
+        return () => details.removeEventListener('click', handleAnimation);
+    }, []);
+
+    return (
+        <details data-accordion ref={detailsRef} className={clsx('bg-beige-dark group open:bg-beige-light hover:bg-beige-light rounded-input md:rounded-card border-claret-violet-dark w-full cursor-pointer border p-4 transition-colors duration-300 md:p-6', className)}>
+            <summary className="flex list-none items-center justify-between gap-2">
+                <ParagraphTitle size="heading-md" className="font-semibold md:hidden">
+                    {question}
+                </ParagraphTitle>
+                <Text size="xl" className="hidden md:block">
+                    {question}
+                </Text>
+                <FAQButton variant={'plus'} className="flex shrink-0 group-data-[open=true]:hidden" />
+                <FAQButton variant={'minus'} className="hidden shrink-0 group-data-[open=true]:flex" />
+            </summary>
+            <div data-accordion-content ref={contentRef} style={{ maxHeight: '0px', transitionDuration: '300ms' }} className="overflow-hidden transition-[max-height] will-change-[max-height]">
+                <ParagraphTitle size="heading-md" className="mt-2.5 md:hidden">
+                    {answer}
+                </ParagraphTitle>
+                <Text size="md" className="mt-2.5 hidden md:block">
+                    {answer}
+                </Text>
+            </div>
+        </details>
+    );
+};

package/src/components/Accordions/Ingredient/Ingredient.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Ingredient } from './Ingredient';
+
+const meta = {
+    title: 'Components/Accordions/Ingredient',
+    component: Ingredient,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        label: { control: 'text' },
+        description: { control: 'text' },
+        image: {
+            control: 'select',
+            options: ['carrot', 'quinoa', 'potato', 'dry-apple', 'dry-carrot', 'beef', 'chicken', 'courgette', 'duck', 'fish', 'liquid', 'oil', 'pork', 'turkey', 'vitamins', 'seaweed', 'rice', 'beer-yeast', 'calcium'],
+            description: 'Name of the ingredient image. Same as the name in the API one',
+        },
+        className: { control: 'text', description: 'Additional class names' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'white',
+        },
+    },
+    args: {
+        image: 'carrot',
+        label: 'Carotte',
+        description: 'Légume digestible par nos chiens, les carottes apportent des fibres essentielles pour des crottes impeccables et des caroténoïdes idéales pour la santé oculaire.',
+        className: 'max-md:w-80',
+    },
+} satisfies Meta<typeof Ingredient>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/components/Accordions/Ingredient/Ingredient.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import clsx from 'clsx';
+
+import BeefImage from '../../../assets/images/ingredients/beef.webp';
+import BeerYeastImage from '../../../assets/images/ingredients/beer-yeast.webp';
+import CalciumImage from '../../../assets/images/ingredients/calcium.webp';
+import CarrotImage from '../../../assets/images/ingredients/carrot.webp';
+import ChickenImage from '../../../assets/images/ingredients/chicken.webp';
+import CourgetteImage from '../../../assets/images/ingredients/courgette.webp';
+import DryAppleImage from '../../../assets/images/ingredients/dry-apple.webp';
+import DryCarrotImage from '../../../assets/images/ingredients/dry-carrot.webp';
+import DuckImage from '../../../assets/images/ingredients/duck.webp';
+import FishImage from '../../../assets/images/ingredients/fish.webp';
+import LiquidImage from '../../../assets/images/ingredients/liquid.webp';
+import OilImage from '../../../assets/images/ingredients/oil.webp';
+import PorkImage from '../../../assets/images/ingredients/pork.webp';
+import PotatoImage from '../../../assets/images/ingredients/potato.webp';
+import QuinoaImage from '../../../assets/images/ingredients/quinoa.webp';
+import RiceImage from '../../../assets/images/ingredients/rice.webp';
+import SeaweedImage from '../../../assets/images/ingredients/seaweed.webp';
+import TurkeyImage from '../../../assets/images/ingredients/turkey.webp';
+import VitaminsImage from '../../../assets/images/ingredients/vitamins.webp';
+import { ArrowIcon, Text } from '../../../components';
+import { accordionAnimation } from '../../../helpers';
+
+export interface IngredientProps {
+    label: string;
+    description: string;
+    image: 'carrot' | 'quinoa' | 'potato' | 'dry-apple' | 'dry-carrot' | 'beef' | 'chicken' | 'courgette' | 'duck' | 'fish' | 'liquid' | 'oil' | 'pork' | 'turkey' | 'vitamins' | 'seaweed' | 'rice' | 'beer-yeast' | 'calcium';
+    className?: string;
+}
+
+const imageMap = {
+    beef: BeefImage,
+    'beer-yeast': BeerYeastImage,
+    calcium: CalciumImage,
+    carrot: CarrotImage,
+    chicken: ChickenImage,
+    courgette: CourgetteImage,
+    'dry-apple': DryAppleImage,
+    'dry-carrot': DryCarrotImage,
+    duck: DuckImage,
+    fish: FishImage,
+    liquid: LiquidImage,
+    oil: OilImage,
+    pork: PorkImage,
+    potato: PotatoImage,
+    quinoa: QuinoaImage,
+    rice: RiceImage,
+    seaweed: SeaweedImage,
+    turkey: TurkeyImage,
+    vitamins: VitaminsImage,
+};
+
+export const Ingredient = ({ label, description, image, className }: IngredientProps) => {
+    const detailsRef = useRef<HTMLDetailsElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const details = detailsRef.current;
+        const content = contentRef.current;
+        if (!details || !content) return;
+
+        const handleAnimation = (e: Event) => {
+            accordionAnimation(e, details, content);
+        };
+
+        details.addEventListener('click', handleAnimation);
+        return () => details.removeEventListener('click', handleAnimation);
+    }, []);
+
+    return (
+        <details data-accordion ref={detailsRef} className={clsx('bg-beige-light group hover:bg-beige-dark rounded-input min-h-15 cursor-pointer px-3 transition-colors duration-300 max-md:py-3 md:min-h-18 md:px-6', className)}>
+            <summary className="flex list-none items-center justify-between gap-2">
+                <div className="flex items-center gap-4">
+                    <img src={imageMap[image]} alt={label} className="w-14 object-contain md:w-25" loading="lazy" decoding="async" />
+                    <Text size="button">{label}</Text>
+                </div>
+                <div className={clsx('group-hover:bg-claret-violet-dark group-hover:text-beige-light flex h-5 w-5 items-center justify-center rounded-sm transition-colors duration-300', 'bg-claret-violet-dark/50 text-claret-violet-dark group-open:bg-claret-violet-dark group-open:text-beige-light')}>
+                    <ArrowIcon className={clsx('w-2 rotate-0 transition-transform duration-300 group-data-[open=true]:rotate-180')} />
+                </div>
+            </summary>
+            <div data-accordion-content ref={contentRef} style={{ maxHeight: '0px', transitionDuration: '300ms' }} className="transition-height overflow-hidden">
+                <Text size="md" className="mt-3 md:pb-6">
+                    {description}
+                </Text>
+            </div>
+        </details>
+    );
+};

package/src/components/Accordions/index.tsx

@@ -0,0 +1,4 @@
+import { FaqItem } from './FAQ/FaqItem';
+import { Ingredient } from './Ingredient/Ingredient';
+
+export { FaqItem, Ingredient };