@cnamts/synapse 1.0.26 → 1.1.0

package/src/composantsVuetify/VBtn/VBtn.mdx

@@ -12,55 +12,25 @@ Pour l'API complète du composant, consulter la [documentation Vuetify](https://
 ## Primary
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.PrimaryElevated} />
-  <Canvas of={VBtnStories.PrimaryOutlined} />
-  <Canvas of={VBtnStories.PrimaryTonal} />
-  <Canvas of={VBtnStories.PrimaryText} />
-</div>
-
-## Primary – Désactivé
-
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.PrimaryElevatedDisabled} />
-  <Canvas of={VBtnStories.PrimaryOutlinedDisabled} />
-  <Canvas of={VBtnStories.PrimaryTonalDisabled} />
-  <Canvas of={VBtnStories.PrimaryTextDisabled} />
+  <Canvas of={VBtnStories.Primary} />
+  <Canvas of={VBtnStories.PrimaryLoading} />
+  <Canvas of={VBtnStories.PrimaryDisabled} />
 </div>
 
 ## Secondary
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.SecondaryElevated} />
-  <Canvas of={VBtnStories.SecondaryOutlined} />
-  <Canvas of={VBtnStories.SecondaryTonal} />
-  <Canvas of={VBtnStories.SecondaryText} />
-</div>
-
-## Secondary – Désactivé
-
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.SecondaryElevatedDisabled} />
-  <Canvas of={VBtnStories.SecondaryOutlinedDisabled} />
-  <Canvas of={VBtnStories.SecondaryTonalDisabled} />
-  <Canvas of={VBtnStories.SecondaryTextDisabled} />
+  <Canvas of={VBtnStories.Secondary} />
+  <Canvas of={VBtnStories.SecondaryLoading} />
+  <Canvas of={VBtnStories.SecondaryDisabled} />
 </div>
 
 ## Tertiary
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.TertiaryElevated} />
-  <Canvas of={VBtnStories.TertiaryOutlined} />
-  <Canvas of={VBtnStories.TertiaryTonal} />
-  <Canvas of={VBtnStories.TertiaryText} />
-</div>
-
-## Tertiary – Désactivé
-
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.TertiaryElevatedDisabled} />
-  <Canvas of={VBtnStories.TertiaryOutlinedDisabled} />
-  <Canvas of={VBtnStories.TertiaryTonalDisabled} />
-  <Canvas of={VBtnStories.TertiaryTextDisabled} />
+  <Canvas of={VBtnStories.Tertiary} />
+  <Canvas of={VBtnStories.TertiaryLoading} />
+  <Canvas of={VBtnStories.TertiaryDisabled} />
 </div>
 
 ## Variants disponibles

package/src/composantsVuetify/VBtn/v-btn.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta = {
 			return { args }
 		},
 		template: `
-      <v-btn :color="args.color" :variant="args.variant" :disabled="args.disabled">
+      <v-btn :color="args.color" :variant="args.variant" :disabled="args.disabled" :loading="args.loading">
         {{ args.label }}
       </v-btn>
     `,
@@ -19,103 +19,43 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // --- Primary ---
-export const PrimaryElevated: Story = {
-	args: { label: 'Button primary elevated', color: 'primary', variant: 'elevated', disabled: false },
+export const Primary: Story = {
+	args: { label: 'Button primary', color: 'primary', variant: 'elevated', disabled: false },
 	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated">Button</v-btn>` } } },
 }
-export const PrimaryOutlined: Story = {
-	args: { label: 'Button primary outlined', color: 'primary', variant: 'outlined', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined">Button</v-btn>` } } },
-}
-export const PrimaryTonal: Story = {
-	args: { label: 'Button primary tonal', color: 'primary', variant: 'tonal', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="tonal">Button</v-btn>` } } },
-}
-export const PrimaryText: Story = {
-	args: { label: 'Button primary text', color: 'primary', variant: 'text', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text">Button</v-btn>` } } },
+export const PrimaryLoading: Story = {
+	args: { label: 'Button primary loading', color: 'primary', variant: 'elevated', disabled: false, loading: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated" loading>Button</v-btn>` } } },
 }
-export const PrimaryElevatedDisabled: Story = {
-	args: { label: 'Button primary elevated disabled', color: 'primary', variant: 'elevated', disabled: true },
+export const PrimaryDisabled: Story = {
+	args: { label: 'Button primary disabled', color: 'primary', variant: 'elevated', disabled: true },
 	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated" disabled>Button</v-btn>` } } },
 }
-export const PrimaryOutlinedDisabled: Story = {
-	args: { label: 'Button primary outlined disabled', color: 'primary', variant: 'outlined', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined" disabled>Button</v-btn>` } } },
-}
-export const PrimaryTonalDisabled: Story = {
-	args: { label: 'Button primary tonal disabled', color: 'primary', variant: 'tonal', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="tonal" disabled>Button</v-btn>` } } },
-}
-export const PrimaryTextDisabled: Story = {
-	args: { label: 'Button primary text disabled', color: 'primary', variant: 'text', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text" disabled>Button</v-btn>` } } },
-}
 
 // --- Secondary ---
-export const SecondaryElevated: Story = {
-	args: { label: 'Button secondary elevated', color: 'secondary', variant: 'elevated', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="elevated">Button</v-btn>` } } },
-}
-export const SecondaryOutlined: Story = {
-	args: { label: 'Button secondary outlined', color: 'secondary', variant: 'outlined', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="outlined">Button</v-btn>` } } },
-}
-export const SecondaryTonal: Story = {
-	args: { label: 'Button secondary tonal', color: 'secondary', variant: 'tonal', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="tonal">Button</v-btn>` } } },
-}
-export const SecondaryText: Story = {
-	args: { label: 'Button secondary text', color: 'secondary', variant: 'text', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="text">Button</v-btn>` } } },
-}
-export const SecondaryElevatedDisabled: Story = {
-	args: { label: 'Button secondary elevated disabled', color: 'secondary', variant: 'elevated', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="elevated" disabled>Button</v-btn>` } } },
-}
-export const SecondaryOutlinedDisabled: Story = {
-	args: { label: 'Button secondary outlined disabled', color: 'secondary', variant: 'outlined', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="outlined" disabled>Button</v-btn>` } } },
+export const Secondary: Story = {
+	args: { label: 'Button secondary ', color: 'primary', variant: 'outlined', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined">Button</v-btn>` } } },
 }
-export const SecondaryTonalDisabled: Story = {
-	args: { label: 'Button secondary tonal disabled', color: 'secondary', variant: 'tonal', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="tonal" disabled>Button</v-btn>` } } },
+export const SecondaryLoading: Story = {
+	args: { label: 'Button secondary loading', color: 'primary', variant: 'outlined', disabled: false, loading: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined" loading>Button</v-btn>` } } },
 }
-export const SecondaryTextDisabled: Story = {
-	args: { label: 'Button secondary text disabled', color: 'secondary', variant: 'text', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="text" disabled>Button</v-btn>` } } },
+export const SecondaryDisabled: Story = {
+	args: { label: 'Button secondary disabled', color: 'primary', variant: 'outlined', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined" disabled>Button</v-btn>` } } },
 }
 
 // --- Tertiary ---
-export const TertiaryElevated: Story = {
-	args: { label: 'Button tertiary elevated', color: 'tertiary', variant: 'elevated', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="elevated">Button</v-btn>` } } },
-}
-export const TertiaryOutlined: Story = {
-	args: { label: 'Button tertiary outlined', color: 'tertiary', variant: 'outlined', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="outlined">Button</v-btn>` } } },
-}
-export const TertiaryTonal: Story = {
-	args: { label: 'Button tertiary tonal', color: 'tertiary', variant: 'tonal', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="tonal">Button</v-btn>` } } },
-}
-export const TertiaryText: Story = {
-	args: { label: 'Button tertiary text', color: 'tertiary', variant: 'text', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="text">Button</v-btn>` } } },
-}
-export const TertiaryElevatedDisabled: Story = {
-	args: { label: 'Button tertiary elevated disabled', color: 'tertiary', variant: 'elevated', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="elevated" disabled>Button</v-btn>` } } },
-}
-export const TertiaryOutlinedDisabled: Story = {
-	args: { label: 'Button tertiary outlined disabled', color: 'tertiary', variant: 'outlined', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="outlined" disabled>Button</v-btn>` } } },
+export const Tertiary: Story = {
+	args: { label: 'Button tertiary', color: 'primary', variant: 'text', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text">Button</v-btn>` } } },
 }
-export const TertiaryTonalDisabled: Story = {
-	args: { label: 'Button tertiary tonal disabled', color: 'tertiary', variant: 'tonal', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="tonal" disabled>Button</v-btn>` } } },
+export const TertiaryLoading: Story = {
+	args: { label: 'Button tertiary loading', color: 'primary', variant: 'text', disabled: false, loading: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text" loading>Button</v-btn>` } } },
 }
-export const TertiaryTextDisabled: Story = {
-	args: { label: 'Button tertiary text disabled', color: 'tertiary', variant: 'text', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="text" disabled>Button</v-btn>` } } },
+export const TertiaryDisabled: Story = {
+	args: { label: 'Button tertiary disabled', color: 'primary', variant: 'text', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text" disabled>Button</v-btn>` } } },
 }

package/src/composantsVuetify/VCard/VCard.mdx

@@ -51,6 +51,14 @@ Le composant `v-card` propose plusieurs variantes de style :
 
 <Canvas of={VCardStories.Disabled} />
 
+### Avec Image
+
+<Canvas of={VCardStories.WithImage} />
+
+### Customization
+
+<Canvas of={VCardStories.WithCustomActions} />
+
 ## Accessibilité
 
 - Utilisez des titres descriptifs pour les cartes

package/src/composantsVuetify/VCard/v-card.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { VCard, VCardTitle, VCardText, VCardActions } from 'vuetify/components'
+import { VCard, VCardTitle, VCardText, VCardActions, VDivider } from 'vuetify/components'
 import { VBtn } from 'vuetify/components'
 
 const meta: Meta<typeof VCard> = {
@@ -277,3 +277,193 @@ export const Disabled: Story = {
 		},
 	},
 }
+
+export const WithImage: Story = {
+	render: args => ({
+		components: { VCard, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard 
+                v-bind="args" 
+                variant="outlined"
+                style="max-width: 250px; border: 2px solid #E0E0E0; padding: 2rem 1rem; cursor: pointer; transition: transform 0.2s ease-in-out;"
+                class="d-flex flex-column align-center text-center"
+                @mouseenter="$event.currentTarget.style.transform = 'translateY(-8px)'"
+                @mouseleave="$event.currentTarget.style.transform = 'translateY(0)'"
+            >
+                <div 
+                    style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;"
+                >
+                    <svg 
+                        xmlns="http://www.w3.org/2000/svg" 
+                        viewBox="0 0 24 24" 
+                        width="60" 
+                        height="60"
+                        style="fill: #757575;"
+                        aria-hidden="true"
+                    >
+                        <path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8Z" />
+                    </svg>
+                </div>
+                
+                <VCardText class="pa-0">
+                    <p class="mb-2 text-body-2 font-weight-bold" style="color: #424242;">
+                        Label 1
+                    </p>
+                    <p class="mb-0 text-caption text-uppercase" style="color: #757575; letter-spacing: 0.5px;">
+                        Label 2
+                    </p>
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		elevation: 0,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-card 
+        variant="outlined"
+        :elevation="0"
+        style="max-width: 250px; border: 2px solid #E0E0E0; padding: 2rem 1rem; cursor: pointer; transition: transform 0.2s ease-in-out;"
+        class="d-flex flex-column align-center text-center"
+        @mouseenter="$event.currentTarget.style.transform = 'translateY(-8px)'"
+        @mouseleave="$event.currentTarget.style.transform = 'translateY(0)'"
+    >
+        <div 
+            style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;"
+        >
+            <svg 
+                xmlns="http://www.w3.org/2000/svg" 
+                viewBox="0 0 24 24" 
+                width="60" 
+                height="60"
+                style="fill: #757575;"
+                aria-hidden="true"
+            >
+                <path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8Z" />
+            </svg>
+        </div>
+        
+        <v-card-text class="pa-0">
+            <p class="mb-2 text-body-2 font-weight-bold" style="color: #424242;">
+                Label 1
+            </p>
+            <p class="mb-0 text-caption text-uppercase" style="color: #757575; letter-spacing: 0.5px;">
+                Label 2
+            </p>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { VCard, VCardText } from 'vuetify/components'
+</script>`,
+			},
+		},
+	},
+}
+
+export const WithCustomActions: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn, VDivider },
+		setup() {
+			return { args }
+		},
+		template: `
+            <div class="w-100">
+                <VCard v-bind="args" variant="outlined" class="mb-6" style="max-width: 100%; border-color: #BDBDBD;">
+                    <VCardTitle style="color: #000000;">Titre de la carte</VCardTitle>
+                    <VDivider color="#BDBDBD" thickness="2" style="width: 96%; margin: 0 auto;"/>
+                    <VCardText style="color: #000000;">
+                        Contenu principal
+                    </VCardText>
+                </VCard>
+
+                <div class="d-flex align-center justify-space-between">
+                    <div>
+                        <VBtn 
+                            variant="text" 
+                            color="primary"
+                            class="text-none"
+                        >
+                            Action personnalisée
+                        </VBtn>
+                    </div>
+
+                    <div class="d-flex justify-end">
+                        <VBtn
+                            variant="outlined"
+                            color="primary"
+                            class="mr-2"
+                        >
+                            Annuler
+                        </VBtn>
+
+                        <VBtn
+                            variant="tonal"
+                            color="primary"
+                        >
+                            Confirmer
+                        </VBtn>
+                    </div>
+                </div>
+            </div>
+        `,
+	}),
+	args: {},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <div class="w-100">
+        <v-card class="mb-6" variant="outlined" style="max-width: 100%; border-color: #BDBDBD;">
+            <v-card-title style="color: #000000;">Titre de la carte</v-card-title>
+            <v-divider color="#BDBDBD" :thickness="2" style="width: 96%; margin: 0 auto;"/>
+            <v-card-text style="color: #000000;">
+                Contenu principal
+            </v-card-text>
+        </v-card>
+
+        <div class="d-flex align-center justify-space-between">
+            <div>
+                <v-btn 
+                    variant="text" 
+                    color="primary"
+                    class="text-none"
+                >
+                    Action personnalisée
+                </v-btn>
+            </div>
+
+            <div class="d-flex justify-end">
+                <v-btn
+                    variant="outlined"
+                    color="primary"
+                    class="mr-2"
+                >
+                    Annuler
+                </v-btn>
+
+                <v-btn
+                    variant="tonal"
+                    color="primary"
+                >
+                    Confirmer
+                </v-btn>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VCard, VCardTitle, VCardText, VDivider, VBtn } from 'vuetify/components'
+</script>`,
+			},
+		},
+	},
+}

package/src/composantsVuetify/VStepper/VStepper.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VStepperStories from './v-stepper.stories'
+
+<Meta title="Composants/Composants Vuetify/VStepper" />
+
+<div className="header">
+    <h1>VStepper</h1>
+Ce composant utilise directement le composant natif `v-stepper` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-stepper/#props).
+</div>
+
+## Primary
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.Primary} />
+</div>
+
+## Primary – Alt Labels
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryAltLabels} />
+</div>
+
+## Primary – Flat
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryFlat} />
+</div>
+
+## Primary – Désactivé
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryDisabled} />
+</div>
+
+## Primary – Avec icônes
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryWithIcons} />
+</div>
+
+## Primary – Avec erreur
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryWithError} />
+</div>
+
+## Options disponibles
+
+- `alt-labels` – Affiche les labels en dessous des étapes
+- `flat` – Supprime l'élévation du stepper
+- `disabled` – Désactive toutes les interactions
+- `icon` – Icône personnalisée pour chaque étape
+- `complete` – Marque une étape comme complétée
+- `error` – Marque une étape en erreur
+- Personnalisation avec slots (actions, item, etc.)