@myelmut/design-system 0.1.46 → 0.1.48

package/dist/types/index.d.ts

@@ -335,7 +335,7 @@ export declare const frDesign: {
     }
 };
 
-export declare const FrequencySelectorCard: ({ title, description, priceLabel, isSelected, badgeLabel, onClick, className }: FrequencySelectorCardProps) => JSX.Element;
+export declare const FrequencySelectorCard: ({ title, description, priceLabel, isSelected, badgeLabel, onClick, className, mobileImage, desktopImage, mobile2xImage, desktop2xImage, imageAlt }: FrequencySelectorCardProps) => JSX.Element;
 
 declare interface FrequencySelectorCardProps {
     title: string;
@@ -345,6 +345,11 @@ declare interface FrequencySelectorCardProps {
     badgeLabel?: string;
     onClick?: () => void;
     className?: string;
+    mobileImage: string;
+    desktopImage: string;
+    mobile2xImage: string;
+    desktop2xImage: string;
+    imageAlt: string;
 }
 
 export declare const H1: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.46",
+  "version": "0.1.48",
   "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 = {};