@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

package/src/components/FilterSideBar/AccessibiliteItems.ts

@@ -0,0 +1,153 @@
+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é?',
+		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,
+
+			},
+			{
+				precision: ' 3.2.4 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 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 3:1, au moins ; '
+					+ 'Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée supérieure ou égale à 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 3:1, au moins ; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3: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. 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).'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					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.4 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 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 3:1, au moins ; '
+					+ 'Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée supérieure ou égale à 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 3:1, au moins ; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 5 : Tableaux',
+		subtitle: '5.1 Chaque tableau de données complexe a-t-il un résumé ? ',
+		items: [
+
+			{
+				precision: '5.1.1 Pour chaque tableau de données complexe, un résumé est-il disponible ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les tableaux de données complexes (tableau de données - élément <table> ou élément pourvu d’un attribut WAI-ARIA role="table" - contenant des en-têtes qui ne sont pas répartis uniquement sur la première ligne et/ou la première colonne de la grille ou dont la portée n’est pas valable pour l’ensemble de la colonne ou de la ligne) ; ',
+					info2: '2. Pour chaque tableau de données complexe, vérifier qu’un passage de texte permettant de comprendre la nature et la structure du tableau, est présent : '
+						+ 'Soit dans l’élément <caption> ; '
+						+ 'Soit dans l’attribut summary de l’élément <table> (dans les versions de HTML et de XHTML antérieures à HTML 5) ; '
+						+ 'Soit dans un passage de texte lié au tableau avec l’attribut aria-describedby. ',
+					info3: '3. Si c’est le cas pour chaque tableau de données complexe, 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,
+
+			},
+
+		],
+	},
+
+]

package/src/components/FilterSideBar/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/NirField/NirField.stories.ts

@@ -21,6 +21,7 @@ const meta: Meta<typeof NirField> = {
 			table: {
 				type: {
 					summary: 'string',
+					detail: 'ex: 1840275123456 74',
 				},
 			},
 		},
@@ -524,6 +525,89 @@ export const WithSuccessMessages: Story = {
 	},
 }
 
+export const WithoutSuccessMessages: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Messages de succès
+
+Cette story illustre l'utilisation de la propriété \`showSuccessMessages\` qui permet de contrôler
+l'affichage des messages de succès lors de la validation. Par défaut, cette propriété est à \`true\`.
+
+Cela peut être utile pour réduire la verbosité de l'interface lorsque les messages de succès
+ne sont pas nécessaires dans certains contextes.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <!-- Champ avec messages de succès (par défaut) -->
+  <NirField
+    v-model="value"
+    label="NIR avec messages de succès"
+    required
+  />
+
+  <!-- Champ sans messages de succès -->
+  <NirField
+    v-model="value"
+    label="NIR sans messages de succès"
+    required
+    :showSuccessMessages="false"
+  />
+</template>`,
+			},
+		],
+	},
+	render: () => ({
+		components: { NirField },
+		setup() {
+			const value1 = ref('184027512345674')
+			const value2 = ref('184027512345674')
+
+			return { value1, value2 }
+		},
+		template: `
+      <div>
+        <div>
+          <div>
+            <p class="text-subtitle-2 mb-2">Avec messages de succès</p>
+            <NirField
+              v-model="value1"
+              label="NIR avec messages de succès"
+              required
+              showSuccessMessages
+            />
+          </div>
+
+          <div>
+            <p class="text-subtitle-2 mb-2">Sans messages de succès</p>
+            <NirField
+              v-model="value2"
+              label="NIR sans messages de succès"
+              required
+              :showSuccessMessages="false"
+            />
+          </div>
+        </div>
+
+        <div class="mt-4 text-body-2">
+          <p>Observations :</p>
+          <ul>
+            <li>Les deux champs ont la même valeur valide</li>
+            <li>Le premier champ affiche un message de succès et un indicateur visuel vert au blur</li>
+            <li>Le second champ n'affiche pas de message de succès, au blur</li>
+            <li>Essayez de modifier les valeurs pour voir le comportement avec des données invalides puis valides</li>
+          </ul>
+        </div>
+      </div>
+    `,
+	}),
+}
+
 export const CustomRules: Story = {
 	args: {
 		...Default.args,
@@ -954,3 +1038,84 @@ const onSubmit = async () => {
 		`,
 	}),
 }
+
+export const DisableErrorHandling: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Désactivation de la gestion des erreurs
+
+Cette story illustre l'utilisation de la propriété \`disableErrorHandling\` qui permet de désactiver complètement
+la gestion et l'affichage des erreurs dans un champ, même si des règles de validation sont définies.
+
+Cela peut être utile dans des cas particuliers où vous souhaitez définir des règles de validation
+mais gérer leur affichage différemment, ou utiliser la validation uniquement au niveau du formulaire parent.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <!-- Champ avec validation normale -->
+  <NirField
+    v-model="value"
+    label="NIR avec validation"
+    required
+  />
+  
+  <!-- Champ avec gestion d'erreurs désactivée -->
+  <NirField
+    v-model="value"
+    label="NIR sans gestion d'erreurs"
+    required
+    disableErrorHandling
+  />
+</template>`,
+			},
+		],
+	},
+	render: () => ({
+		components: { NirField },
+		setup() {
+			const value1 = ref('')
+			const value2 = ref('')
+
+			return { value1, value2 }
+		},
+		template: `
+      <div>
+        <div>
+          <div>
+            <p class="text-subtitle-2 mb-2">Validation normale</p>
+            <NirField
+              v-model="value1"
+              label="NIR avec validation"
+              required
+            />
+          </div>
+          
+          <div>
+            <p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
+            <NirField
+              v-model="value2"
+              label="NIR sans gestion d'erreurs"
+              required
+              disableErrorHandling
+            />
+          </div>
+        </div>
+        
+        <div class="mt-4 text-body-2">
+          <p>Instructions :</p>
+          <ol>
+            <li class="ml-4">Cliquez dans un champ puis en dehors pour déclencher la validation</li>
+            <li class="ml-4">Essayez de saisir des valeurs invalides (moins de 13 chiffres)</li>
+            <li class="ml-4">Notez que le premier champ affiche des erreurs, mais pas le second</li>
+          </ol>
+        </div>
+      </div>
+    `,
+	}),
+}

package/src/components/NirField/NirField.vue

@@ -40,6 +40,7 @@
 		hint?: string
 		persistentHint?: boolean
 		persistentPlaceholder?: boolean
+		disableErrorHandling?: boolean
 	}>(), {
 		modelValue: undefined,
 		label: undefined,
@@ -72,6 +73,7 @@
 		hint: undefined,
 		persistentHint: false,
 		persistentPlaceholder: false,
+		disableErrorHandling: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -153,11 +155,13 @@
 	const numberValidation = useValidation({
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.numberLabel,
+		disableErrorHandling: props.disableErrorHandling,
 	})
 
 	const keyValidation = useValidation({
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.keyLabel,
+		disableErrorHandling: props.disableErrorHandling,
 	})
 
 	// Règles de validation
@@ -406,7 +410,7 @@
 				:has-warning="hasNumberWarning"
 				:has-success="hasNumberSuccess"
 				:error="hasNumberErrors"
-				:messages="hasNumberErrors ? numberValidation.errors.value : (hasNumberWarning ? numberValidation.warnings.value : (hasNumberSuccess ? numberValidation.successes.value : []))"
+				:messages="hasNumberErrors ? numberValidation.errors.value : (hasNumberWarning ? numberValidation.warnings.value : (hasNumberSuccess && props.showSuccessMessages ? numberValidation.successes.value : []))"
 				:has-error="hasNumberErrors"
 				:required="required"
 				:is-disabled="isDisabled"
@@ -449,7 +453,7 @@
 				:has-warning="hasKeyWarning"
 				:has-success="hasKeySuccess"
 				:hint="props.hint || locales.keyHint"
-				:messages="hasKeyErrors ? keyValidation.errors.value : (hasKeyWarning ? keyValidation.warnings.value : (hasKeySuccess ? keyValidation.successes.value : []))"
+				:messages="hasKeyErrors ? keyValidation.errors.value : (hasKeyWarning ? keyValidation.warnings.value : (hasKeySuccess && props.showSuccessMessages ? keyValidation.successes.value : []))"
 				:has-error="hasKeyErrors"
 				:is-disabled="isDisabled"
 				:bg-color="bgColor"

package/src/components/NirField/tests/config.spec.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest'
+import defaultOptions from '../config'
+
+describe('NirField config', () => {
+	it('should have the correct default options structure', () => {
+		expect(defaultOptions).toHaveProperty('persistentHint')
+		expect(defaultOptions).toHaveProperty('validateOn')
+		expect(defaultOptions).toHaveProperty('icon')
+		expect(defaultOptions).toHaveProperty('tooltip')
+	})
+
+	it('should have the correct persistentHint configuration', () => {
+		expect(defaultOptions.persistentHint).toEqual({
+			persistentHint: true,
+		})
+	})
+
+	it('should have the correct validateOn configuration', () => {
+		expect(defaultOptions.validateOn).toEqual({
+			validateOn: 'blur',
+		})
+	})
+
+	it('should have the correct icon configuration', () => {
+		expect(defaultOptions.icon).toEqual({
+			color: '',
+		})
+	})
+
+	it('should have the correct tooltip configuration', () => {
+		expect(defaultOptions.tooltip).toEqual({
+			location: 'top',
+		})
+	})
+
+	it('should be immutable when imported', () => {
+		// Vérifier que l'objet ne peut pas être modifié après import
+		const originalTooltipLocation = defaultOptions.tooltip.location
+
+		// Tentative de modification
+		const testFunc = () => {
+			defaultOptions.tooltip.location = 'bottom'
+		}
+
+		// En mode strict, la modification d'une propriété en lecture seule devrait lever une erreur
+		// En mode non-strict, la modification ne devrait pas être effective
+		try {
+			testFunc()
+			// Si pas d'erreur, vérifions que la valeur n'a pas changé
+			expect(defaultOptions.tooltip.location).toBe(originalTooltipLocation)
+		}
+		catch (e) {
+			// Si une erreur est levée, c'est que l'objet est correctement protégé
+			expect(e).toBeTruthy()
+		}
+	})
+
+	it('should be used correctly in the component', () => {
+		// Ce test est un placeholder pour vérifier l'intégration avec le composant
+		// Dans un cas réel, on pourrait monter le composant et vérifier que les options
+		// par défaut sont correctement appliquées
+		expect(defaultOptions.validateOn.validateOn).toBe('blur')
+		expect(defaultOptions.persistentHint.persistentHint).toBe(true)
+	})
+})

package/src/components/NotificationBar/NotificationBar.mdx

@@ -31,8 +31,8 @@ import * as NotificationBarStories from './NotificationBar.stories';
 <script setup lang="ts">
 	import { VBtn } from 'vuetify/components'
 	import { NotificationBar } from '@cnamts/synapse'
-	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
-	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
+	import { useNotificationService } from '@cnamts/synapse'
+	import type { Notification } from '@cnamts/synapse'
 
 	const { addNotification } = useNotificationService()
 

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -115,7 +115,6 @@ Default.args = {
 	closeBtnText: 'Fermer',
 	type: 'info',
 	bottom: false,
-	rounded: '4',
 }
 
 Default.parameters = {
@@ -173,7 +172,6 @@ Default.parameters = {
 export const Success: Story = Default.bind({})
 Success.args = {
 	...Default.args,
-	rounded: 'pill',
 	type: 'success',
 }
 Success.parameters = {
@@ -186,7 +184,6 @@ Success.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="pill"
 					type="success"
 				>
 					<template #default>This is a success notification</template>
@@ -232,7 +229,6 @@ Success.parameters = {
 export const Warning: Story = Default.bind({})
 Warning.args = {
 	...Default.args,
-	rounded: 'pill',
 	type: 'warning',
 }
 Warning.parameters = {
@@ -245,7 +241,6 @@ Warning.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="pill"
 					type="warning"
 				>
 					<template #default>This is a warning notification</template>
@@ -291,7 +286,6 @@ Warning.parameters = {
 export const Error: Story = Default.bind({})
 Error.args = {
 	...Default.args,
-	rounded: 'pill',
 	type: 'error',
 }
 Error.parameters = {
@@ -304,7 +298,6 @@ Error.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="pill"
 					type="error"
 				>
 					<template #default>This is an error notification</template>
@@ -350,7 +343,6 @@ Error.parameters = {
 export const Bottom: Story = Default.bind({})
 Bottom.args = {
 	...Default.args,
-	rounded: 'pill',
 	bottom: true,
 }
 Bottom.parameters = {
@@ -363,7 +355,6 @@ Bottom.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="true"
-					:rounded="pill"
 					:type="type"
 				>
 					<template #default>This is a bottom-positioned notification</template>
@@ -409,7 +400,6 @@ Bottom.parameters = {
 export const CustomCloseBtnText: Story = Default.bind({})
 CustomCloseBtnText.args = {
 	...Default.args,
-	rounded: 'pill',
 	closeBtnText: 'Masquer',
 }
 CustomCloseBtnText.parameters = {
@@ -448,7 +438,6 @@ CustomCloseBtnText.parameters = {
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
-				const rounded = 'pill'
 
 				const envoyerNotification = (message: string) => {
 					const notification = {
@@ -465,3 +454,62 @@ CustomCloseBtnText.parameters = {
 		},
 	],
 }
+
+export const Customization: Story = Default.bind({})
+Customization.args = {
+	...Default.args,
+	rounded: 'pill',
+	type: 'success',
+}
+Customization.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="bottom"
+					:rounded="pill"
+					type="success"
+				>
+					<template #default>This is a success notification</template>
+				</NotificationBar>
+				<VBtn
+					color="success"
+					@click="envoyerNotification('This is a success notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@cnamts/synpase'
+
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
+
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'success',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
+}