@myelmut/design-system 0.1.52 → 0.1.53

package/dist/types/index.d.ts

@@ -640,7 +640,7 @@ declare interface TabItem {
     disabled?: boolean;
 }
 
-export declare const Tabs: ({ tabs, defaultActiveTab, onTabChange, className, tabClassName, activeTabClassName, contentClassName, variant }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ tabs, defaultActiveTab, onTabChange, className, tabClassName, activeTabClassName, variant }: TabsProps) => JSX.Element;
 
 declare interface TabsProps {
     tabs: TabItem[];
@@ -649,7 +649,6 @@ declare interface TabsProps {
     className?: string;
     tabClassName?: string;
     activeTabClassName?: string;
-    contentClassName?: string;
     variant?: 'default';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "description": "Design system for Elmut project",
   "repository": {
     "type": "git",

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

@@ -39,7 +39,7 @@ export const PlanCard = ({
 }: 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',
+            'bg-beige-dark 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 */}

package/src/components/Navigation/Tabs/Tabs.stories.tsx

@@ -35,10 +35,6 @@ const meta = {
             control: 'text',
             description: 'Additional classes to apply to the active tab button',
         },
-        contentClassName: {
-            control: 'text',
-            description: 'Additional classes to apply to the content area',
-        },
     },
 
     globals: {
@@ -85,6 +81,22 @@ const sampleTabs = [
             />
         ),
     },
+    {
+        id: 'quarter',
+        label: 'Elmut quart pension',
+        content: (
+            <PlanCard
+                title="Quart pension"
+                description="Du Elmut pour couvrir 25% des besoins caloriques de votre animal, complété par vos croquettes habituelles."
+                dailyAmount="150g/jour"
+                price="1,35€"
+                originalPrice="1,93€"
+                discountPercentage="-30%"
+                planImage="/images/trash/full-cat.png"
+                planImageAlt="Demi-bol de nourriture pour chien"
+            />
+        ),
+    },
 ];
 
 export const Default: Story = {

package/src/components/Navigation/Tabs/Tabs.tsx

@@ -20,11 +20,10 @@ export interface TabsProps {
     className?: string;
     tabClassName?: string;
     activeTabClassName?: string;
-    contentClassName?: string;
     variant?: 'default';
 }
 
-export const Tabs = ({ tabs, defaultActiveTab, onTabChange, className = '', tabClassName = '', activeTabClassName = '', contentClassName = '', variant = 'default' }: TabsProps) => {
+export const Tabs = ({ tabs, defaultActiveTab, onTabChange, className = '', tabClassName = '', activeTabClassName = '', variant = 'default' }: TabsProps) => {
     const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]?.id);
 
     const handleTabClick = (e: React.MouseEvent<HTMLButtonElement>, tabId: string) => {
@@ -49,45 +48,110 @@ export const Tabs = ({ tabs, defaultActiveTab, onTabChange, className = '', tabC
         default: `bg-claret-violet-dark/30 text-claret-violet-dark `,
     };
 
+    const firstTabShape = `shape(
+        from bottom left,
+
+        /* 1) go a bit OUTSIDE below the card */
+        curve to 12px calc(100% + 12px) with 0 calc(100% + 0px),
+
+        /* 2) come back to the normal bottom edge */
+        curve to 0px calc(100% - 0px) with 0 100%,
+
+        /* 3) original path resumes */
+        vline to 12px,
+        curve to 24px 0 with 12px 0,
+        hline to calc(100% - calc(12px * 2)),
+        curve to calc(100% - 12px) 12px with calc(100% - 12px) 0,
+        vline to calc(100% - 12px),
+        curve to 100% 100% with calc(100% - 12px) 100%
+    )`;
+
+    const middleTabShape = `shape(
+        from bottom left,
+        curve to 12px calc(100% - 12px) with
+        12px 100%,
+        vline to 12px,
+        curve to 24px 0 with 12px 0,
+        hline to calc(100% - calc(12px * 2)),
+        curve to calc(100% - 12px) 12px with
+        calc(100% - 12px) 0,
+        vline to calc(100% - 12px),
+        curve to 100% 100% with calc(100% - 12px) 100%
+    )`;
+    
+    const lastTabShape = `shape(
+        from bottom left,
+        curve to 12px calc(100% - 12px) with
+        12px 100%,
+        vline to 12px,
+        curve to 24px 0 with 12px 0,
+        hline to calc(100%),
+        curve to calc(100%) 12px with
+        calc(100%) 0,
+        vline to calc(100% - 12px),
+        curve to calc(100%) 100% with calc(100%) 100%
+    )`;
+
 
     return (
         <div className={clsx('w-full', className)}>
             {/* Tab Navigation */}
-            <div className={clsx('flex', variant === 'default' ? 'border-b border-gray-200' : 'gap-1')}>
+            <div className={clsx('flex gap-2')}>
                 {tabs.map((tab, index) => {
                     const isActive = activeTab === tab.id;
                     const isDisabled = tab.disabled;
+                    const isFirstIndex = index === 0;
                     const isLastIndex = index === tabs.length - 1;
+                    const clipPathStyle = isFirstIndex ? firstTabShape : isLastIndex ? lastTabShape : middleTabShape;
 
                     return (
-                        <button
+                        <div
                             key={tab.id}
-                            onClick={(e) => handleTabClick(e, tab.id)}
-                            disabled={isDisabled}
                             className={clsx(
                                 "w-full",
-                                baseTabStyles[variant],
-                                {
-                                    [activeTabStyles[variant]]: isActive,
-                                    [inactiveTabStyles[variant]]: !isActive,
-                                },
-                                tabClassName,
-                                {
-                                    [activeTabClassName]: isActive,
-                                },
+                                "relative",
+                                // Z-index pour l'onglet actif
+                                isActive && "z-20",
+                                // Chevauchement des tabs (sauf le premier)
+                                !isFirstIndex && "-ml-6",
                             )}
                         >
-                            <div className="flex items-center gap-[16px]">
-                                <div className="w-6">{isActive ? <CheckRoundedIcon className="w-6" /> : null}</div>
-                                <Text size="xl">{tab.label}</Text>
-                            </div>
-                        </button>
+                            <button
+                                onClick={(e) => handleTabClick(e, tab.id)}
+                                disabled={isDisabled}
+                                className={clsx(
+                                    "relative w-full inline-block whitespace-nowrap font-bold text-decoration-none transition-transform duration-100",
+                                    baseTabStyles[variant],
+                                    {
+                                        [activeTabStyles[variant]]: isActive,
+                                        [inactiveTabStyles[variant]]: !isActive,
+                                    },
+                                    tabClassName,
+                                    {
+                                        [activeTabClassName]: isActive,
+                                    },
+                                )}
+                                style={{
+                                    clipPath: clipPathStyle,
+                                }}
+                            >
+                                <div className="flex items-center gap-[16px]">
+                                    <div className="w-6">{isActive ? <CheckRoundedIcon className="w-6" /> : null}</div>
+                                    <Text size="xl">{tab.label}</Text>
+                                </div>
+                            </button>
+                        </div>
                     );
                 })}
             </div>
 
             {/* Tab Content */}
-            {activeTabContent ? <div className={clsx(contentClassName)}>{activeTabContent}</div> : null}
+            {activeTabContent ? (
+                <div 
+                >
+                    {activeTabContent}
+                </div>
+            ) : null}
         </div>
     );
 };