@myelmut/design-system 0.1.51 → 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';
 }
 
@@ -871,13 +870,14 @@ declare interface WizardDropdownProps {
     searchable?: boolean;
 }
 
-export declare const WizardNavbar: ({ variant, totalSteps, currentStep, className }: WizardNavbarProps) => JSX.Element;
+export declare const WizardNavbar: ({ variant, totalSteps, currentStep, className, backToPreviousStep }: WizardNavbarProps) => JSX.Element;
 
 declare type WizardNavbarProps = {
     variant: 'default' | 'form' | 'payment';
     totalSteps?: number;
     currentStep?: number;
     className?: string;
+    backToPreviousStep?: () => void;
 };
 
 export declare const WizardTextInput: ({ placeholder, name, disabled, className, hasError, error, ...props }: WizardTextInputProps) => JSX.Element;
@@ -885,7 +885,7 @@ export declare const WizardTextInput: ({ placeholder, name, disabled, className,
 declare interface WizardTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder: string;
     name: string;
-    disabled: boolean;
+    disabled?: boolean;
     error: string;
     hasError: boolean;
     className?: string;

package/package.json

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

package/src/components/Base/Text/Text.tsx

@@ -31,6 +31,7 @@ export const Text = ({ variant = 'p', size = 'md', children, className = '', ...
                             br: <br />,
                             b: <b />,
                             i: <i />,
+                            u: <u />,
                         }}
                     />
                 ) : (
@@ -49,6 +50,7 @@ export const Text = ({ variant = 'p', size = 'md', children, className = '', ...
                             br: <br />,
                             b: <b />,
                             i: <i />,
+                            u: <u />,
                         }}
                     />
                 ) : (

package/src/components/Base/Title/Title.tsx

@@ -42,6 +42,7 @@ export const Title = forwardRef<HTMLElement, TitleProps>(({ variant = 'h1', size
                 b: <b />,
                 i: <i />,
                 highlight: <span className="text-lavender-blue-light italic" />,
+                u: <u />,
             }}
         />
     ) : (

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/Inputs/WizardTextInput/WizardTextInput.tsx

@@ -5,7 +5,7 @@ import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 export interface WizardTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder: string;
     name: string;
-    disabled: boolean;
+    disabled?: boolean;
     error: string;
     hasError: boolean;
     className?: string;

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>
     );
 };

package/src/components/Navigation/WizardNavbar/WizardNavbar.tsx

@@ -10,6 +10,7 @@ export type WizardNavbarProps = {
     totalSteps?: number;
     currentStep?: number;
     className?: string;
+    backToPreviousStep?: () => void;
 };
 
 const variantStyles = {
@@ -59,20 +60,22 @@ const TagMobile = ({ variant, totalSteps, currentStep, className }: { variant: W
 };
 
 //todo update button actions or links
-export const WizardNavbar = ({ variant = 'default', totalSteps = 8, currentStep = 1, className }: WizardNavbarProps) => {
+export const WizardNavbar = ({ variant = 'default', totalSteps = 8, currentStep = 1, className, backToPreviousStep = () => {} }: WizardNavbarProps) => {
     const { t } = useTranslation('design');
 
     return (
-        <nav className={clsx('fixed top-0 right-0 left-0 z-10', variantStyles[variant], className)}>
-            <div className={clsx('container mx-auto flex items-center', containerStyles[variant])}>
-                <Button as="a" href="/" variant="terciary" color={variant === 'payment' ? 'light' : 'dark'} className={clsx(variant === 'default' && 'hidden')}>
+        <nav className={clsx('fixed top-0 right-0 left-0 z-20', variantStyles[variant], className)}>
+            <div className={clsx('container flex items-center', containerStyles[variant])}>
+                <Button onClick={backToPreviousStep} as="button" variant="terciary" color={variant === 'payment' ? 'light' : 'dark'} className={clsx(variant === 'default' && 'hidden')}>
                     {t('navigation.back')}
                 </Button>
-                <Logo variant={variant === 'payment' ? 'secondary' : 'primary'} className="mx-auto w-28" />
+                <a href="/" className="mx-auto w-28">
+                    <Logo variant={variant === 'payment' ? 'secondary' : 'primary'} />
+                </a>
                 {variant != 'default' && <TagDesktop variant={variant} totalSteps={totalSteps} currentStep={currentStep} />}
             </div>
             {variant != 'default' && (
-                <div className="container mx-auto px-6 pb-5 md:px-0">
+                <div className="container">
                     <TagMobile variant={variant} totalSteps={totalSteps} currentStep={currentStep} />
                     {variant === 'form' && <Stepper totalSteps={totalSteps} currentStep={currentStep} className="mx-auto mt-6 w-full md:mt-3.5 md:w-3/4" />}
                 </div>