@cnamts/synapse 1.0.22 → 1.0.24

package/src/composantsVuetify/VBtn/VBtn.mdx

@@ -0,0 +1,72 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VBtnStories from './v-btn.stories'
+
+<Meta title="Composants/Composants Vuetify/VBtn" />
+
+<div className="header">
+    <h1>VBtn</h1>
+Ce composant utilise directement le composant natif `v-btn` 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-btn/#props).
+</div>
+
+## 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} />
+</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} />
+</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} />
+</div>
+
+## Variants disponibles
+
+- `elevated` – Bouton avec ombre (défaut)
+- `outlined` – Fond transparent avec bordure
+- `tonal` – Fond teinté de la couleur
+- `text` – Sans fond ni bordure
+- `plain` – Sans fond ni bordure, opacité réduite

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta = {
+	title: 'Composants/Composants Vuetify/VBtn',
+	tags: ['!dev'],
+	render: args => ({
+		setup() {
+			return { args }
+		},
+		template: `
+      <v-btn :color="args.color" :variant="args.variant" :disabled="args.disabled">
+        {{ args.label }}
+      </v-btn>
+    `,
+	}),
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Primary ---
+export const PrimaryElevated: Story = {
+	args: { label: 'Button primary elevated', 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 PrimaryElevatedDisabled: Story = {
+	args: { label: 'Button primary elevated 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 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 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>` } } },
+}
+
+// --- 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 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 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>` } } },
+}

package/src/composantsVuetify/VTooltip/VTooltip.mdx

@@ -0,0 +1,32 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VTooltipStories from './v-tooltip.stories'
+
+<Meta title="Composants/Composants Vuetify/VTooltip" />
+
+<div className="header">
+    <h1>VTooltip</h1>
+Ce composant utilise directement le composant natif `v-tooltip` 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-tooltip/#props).
+</div>
+
+## Positions
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '50px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VTooltipStories.Top} />
+  <Canvas of={VTooltipStories.Bottom} />
+  <Canvas of={VTooltipStories.Left} />
+  <Canvas of={VTooltipStories.Right} />
+</div>
+
+## Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VTooltipStories.Disabled} />
+</div>
+
+## Locations disponibles
+
+- `top` – Tooltip au dessus de l'élément (défaut)
+- `bottom` – Tooltip en dessous de l'élément
+- `left` – Tooltip à gauche de l'élément
+- `right` – Tooltip à droite de l'élément

package/src/composantsVuetify/VTooltip/v-tooltip.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta = {
+	title: 'Composants/Composants Vuetify/VTooltip',
+	tags: ['!dev'],
+	render: args => ({
+		setup() {
+			return { args }
+		},
+		template: `
+            <v-tooltip :text="args.text" :location="args.location" :disabled="args.disabled">
+                <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props" color="primary">{{ args.activator }}</v-btn>
+                </template>
+            </v-tooltip>
+        `,
+	}),
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Location ---
+export const Top: Story = {
+	args: { text: 'Tooltip top', activator: 'Hover me', location: 'top', disabled: false },
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-tooltip text="Tooltip top" location="top">
+    <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" color="primary">Hover me</v-btn>
+    </template>
+</v-tooltip>`,
+			},
+		},
+	},
+}
+export const Bottom: Story = {
+	args: { text: 'Tooltip bottom', activator: 'Hover me', location: 'bottom', disabled: false },
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-tooltip text="Tooltip bottom" location="bottom">
+    <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" color="primary">Hover me</v-btn>
+    </template>
+</v-tooltip>`,
+			},
+		},
+	},
+}
+export const Left: Story = {
+	args: { text: 'Tooltip left', activator: 'Hover me', location: 'left', disabled: false },
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-tooltip text="Tooltip left" location="left">
+    <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" color="primary">Hover me</v-btn>
+    </template>
+</v-tooltip>`,
+			},
+		},
+	},
+}
+export const Right: Story = {
+	args: { text: 'Tooltip right', activator: 'Hover me', location: 'right', disabled: false },
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-tooltip text="Tooltip right" location="right">
+    <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" color="primary">Hover me</v-btn>
+    </template>
+</v-tooltip>`,
+			},
+		},
+	},
+}
+
+// --- Disabled ---
+export const Disabled: Story = {
+	args: { text: 'Tooltip disabled', activator: 'Hover me', location: 'top', disabled: true },
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-tooltip text="Tooltip disabled" location="top" disabled>
+    <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" color="primary">Hover me</v-btn>
+    </template>
+</v-tooltip>`,
+			},
+		},
+	},
+}

package/src/designTokens/tokens/cnam/cnamContextual.ts

@@ -5,7 +5,12 @@ export const cnamContextualTokens = {
 		text: '#333333',
 		icon: '#666666',
 		overlay: 'rgba(0, 0, 0, 0.5)',
-		interactive: '#007bff',
+		interactive: '#fff',
+		interactiveHover: '#E7ECF5',
+		interactivePressed: '#CED9EB',
+		interactiveFocus: '#E7ECF5',
+		interactiveDisabled: '#fff',
+		interactiveHoverOnSelected: '#CED9EB',
 	},
 	gap: {
 		0: '0',

package/src/designTokens/tokens/cnam/cnamSemantic.ts

@@ -41,7 +41,7 @@ export const cnamSemanticTokens = {
 			accentSecondaryContrasted: cnamColorsTokens.cyan.darken40,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
-			warning: cnamColorsTokens.yellow.darken40,
+			warning: cnamColorsTokens.yellow.darken60,
 			error: cnamColorsTokens.orange.darken20,
 			onDark: cnamColorsTokens.white.lighten70,
 			disabled: cnamColorsTokens.grey.lighten80,
@@ -55,7 +55,7 @@ export const cnamSemanticTokens = {
 			subdued: cnamColorsTokens.grey.base,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
-			warning: cnamColorsTokens.yellow.darken40,
+			warning: cnamColorsTokens.yellow.darken60,
 			error: cnamColorsTokens.orange.darken20,
 			disabled: cnamColorsTokens.grey.lighten40,
 			onDark: cnamColorsTokens.white.base,

package/src/stories/Components/Components.stories.ts

@@ -1,5 +1,6 @@
 import { VCard, VCardText, VCardTitle, VRow, VCol, VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
+import { useTheme } from 'vuetify'
 
 export default {
 	title: 'Composants/Vue d\'ensemble',
@@ -24,12 +25,14 @@ export const ComponentsList: StoryObj = {
 		return {
 			components: { VCard, VCardText, VCardTitle, VRow, VCol, VIcon },
 			setup() {
+				const theme = useTheme()
+				const isAp = theme.global.name.value === 'ap'
 				const components = [
 					{
 						title: 'HeaderBar',
 						description: 'Utilisé pour afficher l’en-tête d’une page ainsi qu’une barre de navigation.',
 						link: '/?path=/docs/composants-structure-headerbar--docs',
-						img: '/components/header-bar.svg',
+						img: `/components/header-bar${isAp ? '-ap' : ''}.svg`,
 						category: 'Structure',
 					},
 					{
@@ -57,7 +60,7 @@ export const ComponentsList: StoryObj = {
 						title: 'FooterBar',
 						description: 'Utilisé pour afficher une barre de pied de page avec des liens et des informations supplémentaires.',
 						link: '/?path=/docs/composants-structure-footerbar--docs',
-						img: '/components/footer-bar.svg',
+						img: `/components/footer-bar${isAp ? '-ap' : ''}.svg`,
 						category: 'Structure',
 					},
 					{
@@ -92,7 +95,14 @@ export const ComponentsList: StoryObj = {
 						title: 'SkipLink',
 						description: 'Utilisé pour permettre à l\'utilisateur utilisant la navigation au clavier de passer directement à une section de contenu.',
 						link: '/?path=/docs/composants-navigation-skiplink--docs',
-						img: '/components/skip-link.svg',
+						img: `/components/skip-link${isAp ? '-ap' : ''}.svg`,
+						category: 'Navigation',
+					},
+					{
+						title: 'SyPagination',
+						description: 'Utilisé pour permettre la navigation entre plusieurs pages de contenu.',
+						link: '/?path=/docs/composants-navigation-sypagination--docs',
+						img: `/components/pagination${isAp ? '-ap' : ''}.svg`,
 						category: 'Navigation',
 					},
 					{
@@ -113,7 +123,7 @@ export const ComponentsList: StoryObj = {
 						title: 'CopyBtn',
 						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de copier du texte.',
 						link: '/?path=/docs/composants-boutons-copybtn--docs',
-						img: '/components/copy-btn.svg',
+						img: `/components/copy-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -127,7 +137,7 @@ export const ComponentsList: StoryObj = {
 						title: 'DownloadBtn',
 						description: 'Utilisé pour permettre à l’utilisateur de télécharger un document provenant d’une API.',
 						link: '/?path=/docs/composants-boutons-downloadbtn--docs',
-						img: '/components/download-btn.svg',
+						img: `/components/download-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -151,11 +161,18 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sy-text-field.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'SyAutocomplete',
+						description: 'Utilisé pour permettre à l’utilisateur de rechercher et sélectionner une valeur dans une liste d\'options (alternative au v-autocomplete de Vuetify).',
+						link: '/?path=/docs/composants-formulaires-selects-syautocomplete--docs',
+						img: `/components/sy-select${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						title: 'SySelect',
 						description: 'Utilisé pour proposer une alternative au v-select de Vuetify qui ne respecte pas les règles d\'accessibilité RGAA. Il est basé sur un v-textfield.',
 						link: '/?path=/docs/composants-formulaires-syselect--docs',
-						img: '/components/sy-select.svg',
+						img: `/components/sy-select${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -174,7 +191,7 @@ export const ComponentsList: StoryObj = {
 					},
 					{
 						title: 'DatePicker',
-						description: ' Utilisé pour permettre à l’utilisateur de sélectionner ou de saisir une date.',
+						description: 'Utilisé pour permettre à l’utilisateur de sélectionner ou de saisir une date.',
 						link: '/?path=/docs/composants-formulaires-datepicker--docs',
 						img: '/components/date-picker.svg',
 						category: 'Formulaires',
@@ -235,6 +252,27 @@ export const ComponentsList: StoryObj = {
 						img: '/components/select-btn-field.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'SyCheckBox',
+						description: 'Utilisé pour permettre à l’utilisateur de selectionner une option.',
+						link: '/?path=/docs/composants-formulaires-sycheckbox--docs',
+						img: `/components/sy-checkbox${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyCheckBoxGroup',
+						description: 'Utilisé pour permettre à l’utilisateur de selectionner plusieurs options.',
+						link: '/?path=/docs/composants-formulaires-sycheckboxgroup--docs',
+						img: `/components/sy-checkbox-group${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyRadioGroup',
+						description: 'Utilisé pour permettre à l\'utilisateur de choisir une option parmi plusieurs.',
+						link: '/?path=/docs/composants-formulaires-syradiogroup--docs',
+						img: `/components/sy-radiogroup${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						title: 'PaginatedTable',
 						description: 'Utilisé pour afficher une VDataTable de Vuetify avec une pagination persistante.',
@@ -353,10 +391,37 @@ export const ComponentsList: StoryObj = {
 					'Feedback',
 				]
 
+				const apComponents = [
+					'FooterBar',
+					'HeaderBar',
+					'HeaderLoading',
+					'PageContainer',
+					'CopyBtn',
+					'DownloadBtn',
+					'SyPagination',
+					'SkipLink',
+					'SyCheckBox',
+					'SyCheckBoxGroup',
+					'SyAutocomplete',
+					'SySelect',
+					'SyRadioGroup',
+				]
+
+				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {
+					if (isAp) {
+						return (
+							component.category === category
+							&& apComponents.some(apComponent => component.title.includes(apComponent))
+						)
+					}
+
+					return component.category === category
+				}
+
 				const groupedComponents = categoryOrder.map(category => ({
 					category,
-					components: components.filter(component => component.category === category),
-				}))
+					components: components.filter(component => shouldDisplayComponent(component, category)),
+				})).filter(group => group.components.length > 0)
 
 				return {
 					groupedComponents,

package/src/stories/Demarrer/Accueil.stories.ts

@@ -43,8 +43,8 @@ export const Header: StoryObj = {
 							<img alt="line" src="/home-line.svg" width="120" height="5" class="mb-5" />
 							<h2 style="font-family: Arial !important; font-size: 1.5rem !important; font-weight: 400 !important; line-height: 1.30 !important; letter-spacing: normal !important;" class="mb-5">Synapse : 
 								<span v-if="theme === 'pa'" class="text-h5">thème Portail Agent</span>
-                              <span v-if="theme === 'ap'">thème Amelipro New</span>
-                              <span v-if="theme === 'ap2026'">thème Amelipro</span>
+                              <span v-if="theme === 'ap'">thème Amelipro</span>
+                              <span v-if="theme === 'ap2026'">thème Amelipro 2026</span>
 								<span v-if="theme === 'cnam'" class="text-h5">thème CNAM</span></h2>
 							<p style="font-family: Arial !important; font-size: 1rem !important;" class="mb-5">Veuillez sélectionner dans la barre d’outil en haut de l’écran le thème graphique de votre produit avant de consulter la documentation, elle s’actualisera en conséquence avec les tokens et composants disponibles.
 								<br/>Si vous ne connaissez pas le thème auquel votre produit est soumis veuillez consulter le dossier d’architecture du produit.
@@ -153,7 +153,7 @@ export const DesignSystem: StoryObj = {
                           </VCard>
                       </VCol>
                       <VCol cols="12" md="4">
-						  <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/guide-du-dev-migration-depuis-bridge--docs">
+						  <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/guide-du-dev-installation--docs">
 							  <img src="/home-card-dev.svg" alt="Guide du dev" class="w-100" />
                               <VCardTitle><b>Guides du dev</b></VCardTitle>
                               <VCardText>Les Guides du Dev accompagnent les équipes techniques dans l'implémentation du Design System en garantissant une intégration fluide et efficace.</VCardText>

package/src/stories/GuideDuDev/Amelipro.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as AmeliproStories from './Amelipro.stories';
+import '../styles/shared.css';
+
+<Meta of={AmeliproStories}/>
+
+
+
+<div className="header">
+    <h1>Equivalence des composants Amelipro avec la stack front VueJs 3</h1>
+</div>
+
+Suite au besoin de migration de l'ensemble des applications du parc de Amelipro vers Vue.js 3, les composants graphiques ont été unifiés. Voici les composants Amelipro et leur équivalence dans la stack front Vue.js 3.
+
+<Story of={AmeliproStories.ApComponents}/>