@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

package/src/components/UserMenuBtn/Accessibilite.stories.ts

@@ -0,0 +1,189 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Boutons/UserMenuBtn/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										<v-expansion-panel >
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels v-if="AccessibiliteItemsValidated.length > 0" value="opened" multiple>
+							<v-expansion-panel 
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/UserMenuBtn/AccessibiliteItems.ts

@@ -0,0 +1,155 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+
+		items2: [
+			{
+				subtitle: '3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				precision: '3.1.2 Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.1.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ?'
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;',
+					info2: '2. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+
+		items: [
+			{
+				precision: '3.2.2 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?  Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;  Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée inférieure à 18,5px qui pourraient poser des problèmes de contraste ; ',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: ' 7.1.3 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il ces conditions : '
+					+ 'Le composant possède un nom pertinent ;'
+					+ 'Le nom accessible du composant contient au moins l’intitulé visible ;'
+					+ 'Le composant possède un rôle pertinent.',
+
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.3',
+				solution: [{
+					info1: '1. Pour chacun des composants d’interface ayant validé le test 7.1.1, vérifier que le composant d’interface possède : ',
+					info2: '2. Un nom pertinent (intitulé visible) et un rôle pertinent',
+					info3: '3. Si le composant d’interface possède un nom accessible, vérifier que ce nom est pertinent et contient au moins l’intitulé visible.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

package/src/components/UserMenuBtn/UserMenuBtn.mdx

@@ -5,7 +5,7 @@ import * as UserMenuBtnStories from './UserMenuBtn.stories';
 
 # UserMenuBtn
 
-The `UserMenuBtn` component is used to display a user menu button with a dropdown menu.
+Le composant `UserMenuBtn` est utilisé pour afficher un bouton de menu utilisateur avec un menu déroulant.
 
 <Canvas of={UserMenuBtnStories.Default}/>
 
@@ -13,23 +13,23 @@ The `UserMenuBtn` component is used to display a user menu button with a dropdow
 
 <Controls of={UserMenuBtnStories.Default}/>
 
-# Usage Example
+# Example d'utilisation
 
 <Source dark code={`
-    <script setup lang="ts">
-    import UserMenuBtn from './UserMenuBtn.vue';
-
-    const menuItems = [
-                { text: 'Administration', value: 'Administration' },
-                { text: 'Profil', value: 'Profil' },
-                { text: 'Paramètres', value: 'Paramètres' },
-    ];
-    </script>
-
-    <template>
-      <UserMenuBtn
-        :items="menuItems"
-      />
-    </template>
+  <script setup lang="ts">
+  import { UserMenuBtn } from '@cnamts/synapse';
+
+  const menuItems = [
+    { text: 'Administration', value: 'Administration' },
+    { text: 'Profil', value: 'Profil' },
+    { text: 'Paramètres', value: 'Paramètres' },
+  ];
+  </script>
+
+  <template>
+    <UserMenuBtn
+      :items="menuItems"
+    />
+  </template>
 `}
 />

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -5,15 +5,121 @@ const meta = {
 	title: 'Composants/Boutons/UserMenuBtn',
 	component: UserMenuBtn,
 	parameters: {
-		layout: 'fullscreen',
-		controls: { exclude: ['modelValue', 'label', 'icon', 'logoutIcon'] },
+		controls: { exclude: ['logout'] },
 	},
 	argTypes: {
-		hideLogoutBtn: { control: 'boolean' },
-		hideUserIcon: { control: 'boolean' },
-		isMobileView: { control: 'boolean' },
-		fullName: { control: 'text' },
-		additionalInformation: { control: 'text' },
+		'modelValue': {
+			control: false,
+			description: 'Élément sélectionné dans le menu',
+			table: {
+				category: 'props',
+				type: { summary: '{ text: string, value: string } | null | undefined' },
+			},
+		},
+		'hideLogoutBtn': {
+			control: 'boolean',
+			description: 'Masque le bouton de déconnexion',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		'hideUserIcon': {
+			control: 'boolean',
+			description: 'Masque l\'icône utilisateur',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		'isMobileView': {
+			control: 'boolean',
+			description: 'Affiche le menu en version mobile',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		'fullName': {
+			control: 'text',
+			description: 'Nom complet de l\'utilisateur',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		'additionalInformation': {
+			control: 'text',
+			description: 'Informations supplémentaires sur l\'utilisateur (ex: rôle, service, etc.)',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		'menuItems': {
+			control: 'object',
+			description: 'Liste des éléments du menu utilisateur',
+			table: {
+				type: {
+					summary: '{ text: string, value: string, link?: string }[]',
+				},
+			},
+		},
+		'vuetifyOptions': {
+			control: 'object',
+			description: 'Options de personnalisation des éléments Vuetify',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'object',
+					detail: `{
+	menu: Record<string, any>,
+	btn: Record<string, any>,
+	icon: Record<string, any>,
+	logoutListItem: Record<string, any>,
+	logoutIcon: Record<string, any>,
+}`,
+				},
+				defaultValue: {
+					summary: 'object',
+					detail: `{
+	menu: {
+		offsetY: true,
+		zIndex: 4,
+		minWidth: '198px',
+		maxWidth: 'auto',
+		nudgeRight: 0,
+	},
+	btn: {
+		variant: 'text',
+		height: 'auto',
+	},
+	icon: {
+		color: 'avatar',
+	},
+	logoutListItem: {
+		class: 'text-primary',
+		minWidth: '198px',
+	},
+	logoutIcon: {
+		color: 'primary',
+		class: 'mr-4',
+	},
+}`,
+				},
+			},
+		},
+		'onLogout': {
+			action: 'logout',
+			description: 'Événement déclenché lors de la déconnexion de l\'utilisateur',
+			table: {
+				category: 'events',
+				type: { summary: 'void' },
+			},
+		},
+		'onUpdate:modelValue': {
+			action: 'update:modelValue',
+			description: 'Événement déclenché lors de la selection d\'un élément du menu',
+			table: {
+				category: 'events',
+				type: { summary: '{ text: string, value: string }' },
+			},
+		},
 	},
 } satisfies Meta<typeof UserMenuBtn>
 
@@ -37,7 +143,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([
@@ -91,7 +197,7 @@ export const HideLogoutButton: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([
@@ -140,7 +246,7 @@ export const HideUserIcon: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([
@@ -189,7 +295,7 @@ export const MobileVersion: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([
@@ -238,7 +344,7 @@ export const CustomFullName: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([
@@ -287,7 +393,7 @@ export const CustomAdditionalInformation: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([
@@ -336,7 +442,7 @@ export const WithVuetifyOptions: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([
@@ -345,10 +451,6 @@ export const WithVuetifyOptions: Story = {
   { text: 'Paramètres', value: 'Paramètres' },
  ])
 
- const handleLogout = () => {
-  alert('User logged out')
- }
-
  const vuetifyOptions = ref({
   menu: { minWidth: '250px' },
   btn: { variant: 'outlined' },
@@ -401,7 +503,7 @@ export const LogoutEvent: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
  import { ref } from 'vue'
- import UserMenuBtn from '@cnamts/synapse'
+ import { UserMenuBtn } from '@cnamts/synapse'
 
  const selected = ref(null)
  const menuItems = ref([