@cnamts/synapse 1.0.2 → 1.0.3

package/src/designTokens/tokens/amelipro/apContextual.ts

@@ -0,0 +1,58 @@
+export const apContextualTokens = {
+	colors: {
+		background: '#ffffff',
+		border: '#dddddd',
+		text: '#333333',
+		icon: '#666666',
+		overlay: 'rgba(0, 0, 0, 0.5)',
+		interactive: '#007bff',
+	},
+	gap: {
+		0: '0',
+		1: '4px',
+		2: '8px',
+		3: '122px',
+		4: '16px',
+		5: '20px',
+		6: '24px',
+		7: '28px',
+		8: '32px',
+		9: '36px',
+		10: '40px',
+		11: '44px',
+		12: '48px',
+		13: '52px',
+		14: '56px',
+		15: '60px',
+		16: '64px',
+	},
+	iconSize: {
+		xsmall: '8px',
+		small: '16px',
+		default: '24px',
+		large: '32px',
+	},
+	radius: {
+		rounded0: '0',
+		rounded: '4px',
+		roundedLg: '8px',
+		roundedPill: '64px',
+	},
+	padding: {
+		0: '0',
+		2: '8px',
+		3: '12px',
+		4: '16px',
+		6: '24px',
+		8: '32px',
+		10: '40px',
+		14: '56px',
+		16: '64px',
+	},
+	fontSize: {
+		titres: '24px',
+		titresAlternatifs: '20px',
+		corpsDeTexte: '16px',
+		liensEtLibelles: '14px',
+	},
+}

package/src/designTokens/tokens/amelipro/apDarkTheme.ts

@@ -0,0 +1,5 @@
+// import { apColorsTokens } from '../amelipro/apColors'
+
+export const apDarkTheme = {
+	// backgroundSurface: apColorsTokens.parma.darken60,
+}

package/src/designTokens/tokens/amelipro/apLightTheme.ts

@@ -0,0 +1,13 @@
+import { apColorsTokens } from './apColors'
+// import { apSemanticTokens } from '../amelipro/apSemantic'
+import { apColorClasses } from './apColors'
+
+export const apLightTheme = {
+	...apColorClasses,
+	error: apColorsTokens.apRed.base,
+	info: apColorsTokens.apParme.darken1 as string,
+	primary: apColorsTokens.apBlue.darken1 as string,
+	secondary: apColorsTokens.apBlue.darken2 as string,
+	success: apColorsTokens.apTurquoise.darken1 as string,
+	warning: apColorsTokens.apYellow.darken4 as string,
+}

package/src/designTokens/tokens/amelipro/apSemantic.ts

@@ -0,0 +1,87 @@
+export const apSemanticTokens = {
+	colors: {
+		background: {
+			main: '#e7ecf5',
+			surface: '#ffffff',
+			mainAlt: '#ffffff',
+			surfaceAlt: '#e7ecf5',
+			raised: '#f8f9fc',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentAlt: '#111212',
+			info: '#ced9eb',
+			infoSubdued: '#e7ecf5',
+			infoContrasted: '#0c419a',
+			success: '#cceee8',
+			successSubdued: '#e5f7f4',
+			successContrasted: '#56c271',
+			warning: '#fcf0d3',
+			warningSubdued: '#fdf7e9',
+			warningContrasted: '#f0b323',
+			error: '#f9dcd7',
+			errorSubdued: '#fcedeb',
+			errorContrasted: '#b33f2e',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			assure: '#ed76b3',
+			professionnel: '#66c9ec',
+			entreprise: '#f0b323',
+		},
+		border: {
+			darker: '#222324',
+			base: '#989b9b',
+			subdued: '#dddede',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentOnDark: '#ffffff',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: 'rgba(255, 255, 255, 0.7)',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		text: {
+			base: '#222324',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			subdued: '#545859',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			disabled: '#989b9b',
+			onDark: '#ffffff',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		icon: {
+			base: '#222324',
+			subdued: '#545859',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: '#ffffff',
+			disabled: '#989b9b',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		overlay: {
+			fullpage: '#989b9b',
+			onDark: '#ffffff',
+			onLight: '#0c419a',
+		},
+		interactive: {
+			default: 'rgba(255, 255, 255, 0.0000)',
+			hover: '#e7ecf5',
+			pressed: '#ced9eb',
+			focus: '#e7ecf5',
+			disabled: 'rgba(255, 255, 255, 0.0000)',
+			hoverOnSelected: '#ced9eb',
+		},
+	},
+}

package/src/directives/rgaaSvgFix.ts

@@ -0,0 +1,279 @@
+/**
+ * Directive Vue pour corriger les attributs d'accessibilité des SVG dans les icônes
+ *
+ * ## Pourquoi ce fichier a été créé
+ *
+ * Les icônes SVG nécessitent des attributs d'accessibilité spécifiques pour être correctement
+ * interprétées par les technologies d'assistance (lecteurs d'écran, etc.).
+ *
+ * Cette directive applique automatiquement les bonnes pratiques d'accessibilité aux icônes SVG
+ * en fonction de leur type (décorative, fonctionnelle ou interactive).
+ *
+ * ## Comment utiliser ce fichier
+ *
+ * ### Utilisation simple (booléen)
+ * ```vue
+ * <template>
+ *   <!-- Icône décorative -->
+ *   <div v-rgaa-svg-fix="true">
+ *     <svg>...</svg>
+ *   </div>
+ *
+ *   <!-- Icône fonctionnelle (img) -->
+ *   <div
+ *     v-rgaa-svg-fix="false"
+ *     aria-label="Description de l'icône"
+ *   >
+ *     <svg>...</svg>
+ *   </div>
+ * </template>
+ * ```
+ *
+ * ### Utilisation avancée (objet de configuration)
+ * ```vue
+ * <template>
+ *   <!-- Icône décorative -->
+ *   <div v-rgaa-svg-fix="{ isDecorative: true }">
+ *     <svg>...</svg>
+ *   </div>
+ *
+ *   <!-- Icône fonctionnelle avec rôle spécifique -->
+ *   <div
+ *     v-rgaa-svg-fix="{ isDecorative: false, role: 'img' }"
+ *     aria-label="Description de l'icône"
+ *   >
+ *     <svg>...</svg>
+ *   </div>
+ *
+ *   <!-- Icône interactive (bouton) -->
+ *   <div
+ *     v-rgaa-svg-fix="{ isDecorative: false, role: 'button' }"
+ *     aria-label="Action du bouton"
+ *     @click="handleClick"
+ *   >
+ *     <svg>...</svg>
+ *   </div>
+ *
+ *   <!-- Icône avec détection automatique du rôle bouton -->
+ *   <div
+ *     v-rgaa-svg-fix="{ isDecorative: false, autoDetectButton: true }"
+ *     aria-label="Action du bouton"
+ *     @click="handleClick"
+ *   >
+ *     <svg>...</svg>
+ *   </div>
+ * </template>
+ * ```
+ *
+ * Cette directive respecte les normes RGAA (Référentiel Général d'Amélioration de l'Accessibilité).
+ *
+ * ## Comment fonctionne cette directive
+ *
+ * 1. La directive prend un paramètre qui peut être :
+ *    - Un booléen indiquant si l'icône est décorative (true) ou fonctionnelle (false)
+ *    - Un objet de configuration avec des options avancées (isDecorative, role, autoDetectButton)
+ *
+ * 2. Elle recherche tous les éléments SVG à l'intérieur de l'élément auquel elle est appliquée
+ *
+ * 3. Pour chaque SVG trouvé, elle corrige les attributs :
+ *
+ *    - Pour tous les éléments SVG, indépendamment du type d'icône :
+ *      - Supprime systématiquement l'attribut `role="img"` du SVG
+ *      - Ajoute systématiquement `aria-hidden="true"` au SVG
+ *
+ *    - Pour le conteneur parent, selon le type d'icône et la configuration :
+ *      - Icônes décoratives :
+ *        - Ajoute `role="presentation"` et `aria-hidden="true"` au conteneur parent
+ *
+ *      - Icônes fonctionnelles (non décoratives) :
+ *        - Détermine le rôle approprié (img, button) selon la configuration ou la détection automatique
+ *        - Ajoute le rôle approprié au conteneur parent
+ *        - Ajoute un aria-label par défaut si aucun n'est présent
+ *        - Supprime `aria-hidden="true"` du conteneur parent
+ *
+ * 4. La directive s'applique au montage du composant et à chaque mise à jour
+ *
+ * ## Utilisation
+ *
+ * ```vue
+ * <!-- Pour une icône décorative (par défaut) -->
+ * <v-icon v-rgaa-svg-fix>mdi-account</v-icon>
+ *
+ * <!-- Pour une icône fonctionnelle sans label spécifique -->
+ * <v-icon v-rgaa-svg-fix="false">mdi-account</v-icon>
+ *
+ * <!-- Pour une icône fonctionnelle avec un rôle spécifique -->
+ * <v-icon
+ *   v-rgaa-svg-fix="{ isDecorative: false, role: 'button' }"
+ *   aria-label="Supprimer"
+ * >
+ *   mdi-delete
+ * </v-icon>
+ *
+ * <!-- Pour une icône avec détection automatique du rôle bouton -->
+ * <v-icon
+ *   v-rgaa-svg-fix="{ autoDetectButton: true }"
+ *   aria-label="Fermer"
+ *   @click="close"
+ * >
+ *   mdi-close
+ * </v-icon>
+ * ```
+ *
+ * ## Recommandation
+ *
+ * Il est recommandé d'utiliser le composant `SyIcon` qui intègre déjà cette directive,
+ * plutôt que d'appliquer manuellement la directive sur des `v-icon`.
+ */
+import type { Directive, DirectiveBinding } from 'vue'
+
+/**
+ * Type pour la configuration de la directive rgaaSvgFix
+ */
+interface RgaaSvgFixConfig {
+	isDecorative?: boolean
+	role?: 'presentation' | 'img' | 'button'
+	autoDetectButton?: boolean
+}
+
+/**
+ * Extrait et normalise la configuration à partir de la valeur de binding
+ */
+function parseConfig(binding: DirectiveBinding): RgaaSvgFixConfig {
+	let config: RgaaSvgFixConfig = {
+		isDecorative: true,
+		autoDetectButton: false,
+	}
+
+	if (typeof binding.value === 'boolean') {
+		config.isDecorative = binding.value
+	}
+	else if (typeof binding.value === 'object' && binding.value !== null) {
+		config = { ...config, ...binding.value }
+	}
+
+	return config
+}
+
+/**
+ * Détecte si un élément a des attributs ou événements interactifs
+ */
+function detectInteractivity(element: HTMLElement): boolean {
+	// Détection des attributs d'interactivité
+	const hasTabindex = element.hasAttribute('tabindex')
+	const hasClickHandler = element.hasAttribute('onclick')
+		|| element.onclick !== null
+	const hasKeyHandlers = element.hasAttribute('onkeydown')
+		|| element.hasAttribute('onkeyup')
+		|| element.hasAttribute('onkeypress')
+		|| element.hasAttribute('@keydown')
+		|| element.hasAttribute('@keyup')
+		|| element.hasAttribute('@keypress')
+		|| element.hasAttribute('v-on:keydown')
+		|| element.hasAttribute('v-on:keyup')
+		|| element.hasAttribute('v-on:keypress')
+		|| element.onkeydown !== null
+		|| element.onkeyup !== null
+		|| element.onkeypress !== null
+
+	// Vérifier si l'élément a des attributs data-* liés à des événements Vue
+	const hasVueEvents = Array.from(element.attributes)
+		.some(attr => attr.name.startsWith('data-v-on:')
+			|| attr.name.startsWith('@')
+			|| attr.name.startsWith('v-on:'))
+
+	return hasTabindex || hasClickHandler || hasKeyHandlers || hasVueEvents
+}
+
+/**
+ * Corrige les attributs d'accessibilité des SVG en fonction de la configuration
+ */
+function fixSvgAttributes(el: HTMLElement, config: RgaaSvgFixConfig) {
+	// Trouver tous les SVG dans l'élément
+	const svgs = el.getElementsByTagName('svg')
+
+	if (svgs.length > 0) {
+		// Déterminer le rôle approprié pour l'élément
+		let role = 'presentation'
+		let needsLabel = false
+
+		if (!config.isDecorative) {
+			// Si un rôle spécifique est fourni, l'utiliser
+			if (config.role) {
+				role = config.role
+				needsLabel = true
+			}
+			else if (config.autoDetectButton && detectInteractivity(el)) {
+				// Détection automatique du rôle bouton
+				role = 'button'
+				needsLabel = true
+			}
+			else {
+				// Par défaut, une icône non décorative est une image
+				role = 'img'
+				needsLabel = true
+			}
+		}
+
+		// Configurer le conteneur parent selon le rôle déterminé
+		if (role === 'presentation') {
+			// Pour les icônes décoratives, le conteneur doit être ignoré
+			el.setAttribute('role', 'presentation')
+			el.setAttribute('aria-hidden', 'true')
+		}
+		else {
+			// Pour les icônes fonctionnelles, configurer selon le rôle
+			el.setAttribute('role', role)
+
+			// Ajouter un aria-label par défaut si aucun n'est présent
+			if (needsLabel && !el.hasAttribute('aria-label')) {
+				const defaultLabel = role === 'button' ? 'Cet élément est un bouton' : 'Cet élément est une icône'
+				el.setAttribute('aria-label', defaultLabel)
+			}
+
+			// Supprimer aria-hidden s'il est présent
+			el.removeAttribute('aria-hidden')
+
+			// Si c'est un bouton, s'assurer qu'il est focusable
+			if (role === 'button' && !el.hasAttribute('tabindex')) {
+				el.setAttribute('tabindex', '0')
+			}
+		}
+
+		// Corriger les attributs de chaque SVG
+		for (let i = 0; i < svgs.length; i++) {
+			const svg = svgs[i]
+
+			// Pour tous les SVG:
+			// 1. Toujours supprimer role="img"
+			svg.removeAttribute('role')
+			// 2. Toujours s'assurer que aria-hidden="true" est présent
+			if (config.isDecorative) {
+				svg.setAttribute('aria-hidden', 'true')
+			}
+			else {
+				svg.removeAttribute('aria-hidden')
+			}
+		}
+	}
+}
+
+/**
+ * Corrige les attributs d'accessibilité des SVG en fonction du type d'icône (décorative ou fonctionnelle)
+ */
+export const vRgaaSvgFix: Directive = {
+	mounted(el: HTMLElement, binding: DirectiveBinding) {
+		// Extraire la configuration
+		const config = parseConfig(binding)
+
+		// Appliquer les corrections au montage
+		fixSvgAttributes(el, config)
+	},
+	updated(el: HTMLElement, binding: DirectiveBinding) {
+		// Extraire la configuration (identique au montage)
+		const config = parseConfig(binding)
+
+		// Appliquer les corrections à la mise à jour
+		fixSvgAttributes(el, config)
+	},
+}

package/src/main.ts

@@ -5,3 +5,4 @@ export * from './components'
 export * from './services'
 export * from './composables'
 export * from './utils/rules'
+export * from './utils'

package/src/stories/Accessibilite/Avancement/Avancement.mdx

@@ -513,7 +513,7 @@ import * as AvancementStories from './Avancement.stories';
         <p className="stat-label">Progression dans l'audit des composants du Design System</p>
         <div className="progress-stats">
           <div className="stat-item">
-            <span className="stat-value stat-success">11</span>
+            <span className="stat-value stat-success">15</span>
             <span className="stat-label">Composants audités</span>
           </div>
           <div className="stat-item">
@@ -521,7 +521,7 @@ import * as AvancementStories from './Avancement.stories';
             <span className="stat-label">Composants en attente</span>
           </div>
           <div className="stat-item">
-            <span className="stat-value stat-info">59</span>
+            <span className="stat-value stat-info">60</span>
             <span className="stat-label">Total des composants</span>
           </div>
         </div>

package/src/stories/Accessibilite/Avancement/Avancement.stories.ts

@@ -16,7 +16,7 @@ export const PreAudit: StoryObj = {
 					color="success"
 					variant="elevated"
 				>
-					59/59 Composants
+					60/60 Composants
 				</v-chip>
 			`,
 		}
@@ -42,9 +42,9 @@ export const Manuel: StoryObj = {
 					{ composant: 'PageContainer', status: 'Audité' },
 					{ composant: 'SkipLink', status: 'Audité' },
 					{ composant: 'Alerts', status: 'Audité' },
-					{ composant: 'NotificationBar', status: 'Non audité' },
+					{ composant: 'NotificationBar', status: 'Audité' },
 					{ composant: 'BackBtn', status: 'Audité' },
-					{ composant: 'BackToTopBtn', status: 'Audité' },
+					{ composant: 'BackToTopBtn', status: 'Non audité' },
 					{ composant: 'CopyBtn', status: 'Audité' },
 					{ composant: 'LangBtn', status: 'Audité' },
 					{ composant: 'DownloadBtn', status: 'Audité' },
@@ -56,7 +56,7 @@ export const Manuel: StoryObj = {
 					{ composant: 'SubHeader', status: 'Non audité' },
 					{ composant: 'HeaderLoading', status: 'Non audité' },
 					{ composant: 'HeaderToolbar', status: 'Non audité' },
-					{ composant: 'Footer', status: 'Non audité' },
+					{ composant: 'Footer', status: 'En cours' },
 					{ composant: 'SySelect', status: 'En cours' },
 					{ composant: 'SyInputSelect', status: 'Non audité' },
 					{ composant: 'Logo', status: 'Audité' },
@@ -64,10 +64,10 @@ export const Manuel: StoryObj = {
 					{ composant: 'DataList', status: 'Non audité' },
 					{ composant: 'DataListItem', status: 'Non audité' },
 					{ composant: 'DataListLoading', status: 'Non audité' },
-					{ composant: 'ErrorPage', status: 'Non audité' },
+					{ composant: 'ErrorPage', status: 'Audité' },
 					{ composant: 'CookieBanner', status: 'Non audité' },
 					{ composant: 'ExternalLinks', status: 'Non audité' },
-					{ composant: 'ContextualMenu', status: 'Non audité' },
+					{ composant: 'ContextualMenu', status: 'En cours' },
 					{ composant: 'DialogBox', status: 'Non audité' },
 					{ composant: 'PasswordField', status: 'Non audité' },
 					{ composant: 'PhoneField', status: 'Non audité' },
@@ -90,10 +90,11 @@ export const Manuel: StoryObj = {
 					{ composant: 'PaginatedTable', status: 'Non audité' },
 					{ composant: 'TableToolbar', status: 'Non audité' },
 					{ composant: 'ErrorPage', status: 'Audité' },
-					{ composant: 'NotFoundPage', status: 'En cours' },
-					{ composant: 'MaintenancePage', status: 'En cours' },
+					{ composant: 'NotFoundPage', status: 'Audité' },
+					{ composant: 'MaintenancePage', status: 'Audité' },
 					{ composant: 'ContextualMenu', status: 'En cours' },
 					{ composant: 'ExternalLinks', status: 'En cours' },
+					{ composant: 'SyIcon', status: 'Non audité' },
 				]
 
 				// Options de filtrage par statut
@@ -224,7 +225,7 @@ export const Manuel: StoryObj = {
 						</div>
 
 						<div class="pa-2 text-caption text-right">
-							Dernière mise à jour: 20/06/2025
+							Dernière mise à jour: 11/07/2025
 						</div>
 					</div>
 				</div>

package/src/stories/Accessibilite/Vuetify/Vuetify.mdx

@@ -62,6 +62,29 @@ import * as AccessStories from './Vuetify.stories';
       margin-top: 0;
     }
     
+    .accessibility-issues {
+      border-left: 4px solid var(--primary-color);
+      background-color: rgba(24, 103, 192, 0.05);
+    }
+    
+    .issues-link {
+      color: var(--accent-color);
+      text-decoration: none;
+      padding: 0.25rem 0.5rem;
+      border-radius: var(--border-radius);
+      background-color: rgba(0, 165, 223, 0.1);
+      transition: all var(--transition-speed);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    
+    .issues-link:hover, .issues-link:focus {
+      background-color: rgba(0, 165, 223, 0.2);
+      box-shadow: 0 2px 4px rgba(0, 165, 223, 0.2);
+      text-decoration: underline;
+    }
+    
     .legend-container {
       display: flex;
       flex-wrap: wrap;
@@ -109,6 +132,21 @@ import * as AccessStories from './Vuetify.stories';
     <h1>Audit d'accessibilité des composants Vuetify</h1>
     <p>Tableau de bord de l'état d'accessibilité des composants Vuetify</p>
   </div>
+
+    <div className="info-box accessibility-issues">
+    <h3>⚠️ Issues d'accessibilité Vuetify</h3>
+    <p>
+      Vous pouvez suivre les problèmes d'accessibilité officiels de Vuetify sur GitHub. 
+      Consultez les <a href="https://github.com/vuetifyjs/vuetify/issues?q=is%3Aissue%20state%3Aopen%20label%3Aa11y" target="_blank" rel="noopener noreferrer" className="issues-link">
+        <strong>issues d'accessibilité</strong>
+      </a> pour rester informé des derniers développements et corrections.
+    </p>
+    <p>
+      La participation de la communauté est essentielle pour améliorer l'accessibilité de Vuetify. 
+      N'hésitez pas à signaler de nouveaux problèmes ou à proposer des solutions aux problèmes existants.
+    </p>
+  </div>
+  
   
   <h2 className="section-title">Présentation</h2>
   
@@ -122,6 +160,7 @@ import * as AccessStories from './Vuetify.stories';
       <li>Les solutions recommandées pour corriger les problèmes identifiés</li>
     </ul>
   </div>
+
   
   <h2 className="section-title">Légende</h2>
   

package/src/stories/Accessibilite/Vuetify/VuetifyItems.ts

@@ -25,6 +25,7 @@ export const itemsChips = [
 	{ text: 'OTP Input ', value: 23 },
 	{ text: 'Range Sliders', value: 24 },
 	{ text: 'Date Input', value: 25 },
+	{ text: 'Icon', value: 26 },
 
 ]
 
@@ -80,15 +81,15 @@ export const VuetifyItems = [
 				solution: [
 					{
 						name: 'SySelect',
-						href: '/?path=/docs/composants-formulaires-syselect--docs',
+						href: '/?path=/docs/composants-formulaires-selects-syselect--docs',
 					},
 					{
 						name: 'SyInputSelect',
-						href: '/?path=/docs/composants-formulaires-syinputselect--docs',
+						href: '/?path=/docs/composants-formulaires-selects-syinputselect--docs',
 					},
 					{
 						name: 'SyBtnSelect',
-						href: '/?path=/docs/composants-formulaires-sybtnselect--docs',
+						href: '/?path=/docs/composants-formulaires-selects-sybtnselect--docs',
 					},
 				],
 			},
@@ -549,6 +550,22 @@ export const VuetifyItems = [
 					href: '/?path=/docs/composants-formulaires-datepicker-introduction--docs',
 				}],
 			},
+			{
+				name: 'Icon',
+				value: 26,
+				errorImportants: [
+					'1.2Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ? ',
+				],
+				errorSolutionImportant: [],
+
+				errorIndeterminated: [],
+				errorSolutionIndeterminated: [],
+
+				solution: [{
+					name: 'SyIcon',
+					href: '/?path=/docs/composants-formulaires-syicon--docs',
+				}],
+			},
 		],
 	},
 

package/src/stories/Demarrer/Accueil.mdx

@@ -12,4 +12,4 @@ import { css } from '@emotion/css';
 
 <Story of={AccueilStories.DesignSystem} />
 
-<Story of={AccueilStories.Guidelines} />
+<Story of={AccueilStories.Guidelines} />