@cnamts/synapse 0.0.14-alpha → 0.0.15-alpha

package/src/components/RatingPicker/RatingPicker.stories.ts

@@ -331,7 +331,7 @@ export const ReadOnly: Story = {
 		v-model="ratingEmotion"
 		label="Êtes-vous satisfait de ce service ?"
 		type="emotion"
-		read-only
+		readonly
 	/>
 </template>
         `,

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

@@ -159,6 +159,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				  <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/SkipLink.xlsx" style="color:#0C41BD;">Voir le
+						  rapport</a></p>
+					  <p style="color: grey; font-size: 14px">Correctifs associés (<a
+						  href="https://github.com/assurance-maladie-digital/design-system/issues/4012" target="_blank"
+						  style="color:#0C41BD;"
+					  >issue #4012</a>)</p>
+				</div>
 			  </div>
             `,
 		}

package/src/components/SkipLink/SkipLink.vue

@@ -39,7 +39,8 @@
 				if (fail) return
 				if (to.path === from.path) return
 				nextTick(() => {
-					skipLinkSpan.value?.focus()
+					const link = document.querySelector('a.sy-skip-link') as HTMLAnchorElement
+					if (link) link.focus()
 				})
 			})
 		}
@@ -47,25 +48,26 @@
 </script>
 
 <template>
-	<div class="vd-skip-link-container">
-		<span
-			ref="skipLinkSpan"
-			tabindex="-1"
-		/>
+	<nav
+		aria-label="Liens d'évitement"
+		class="sy-skip-link-container"
+	>
+		<div ref="skipLinkSpan" />
 
 		<a
+			ref="skipLink"
 			:href="target"
-			class="vd-skip-link text-primary d-block d-sr-only-focusable px-2"
+			class="sy-skip-link text-primary d-block d-sr-only-focusable px-2"
 		>
 			<slot>{{ label }}</slot>
 		</a>
-	</div>
+	</nav>
 </template>
 
 <style lang="scss" scoped>
 @use '/src/assets/tokens';
 
-.vd-skip-link {
+.sy-skip-link {
 	z-index: 150;
 	position: fixed;
 	top: 0;

package/src/components/SkipLink/tests/__snapshots__/skipLink.spec.ts.snap

@@ -1,17 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SkipLink > renders correctly 1`] = `
-<div class="vd-skip-link-container">
-  <span tabindex="-1"></span>
+<nav
+  aria-label="Liens d'évitement"
+  class="sy-skip-link-container"
+>
+  <div></div>
   <a
     class="
       d-block
       d-sr-only-focusable
       px-2
+      sy-skip-link
       text-primary
-      vd-skip-link
     "
     href="#main"
   >Aller au contenu principal</a>
-</div>
+</nav>
 `;

package/src/components/SkipLink/tests/skipLink.spec.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import SkipLink from '../SkipLink.vue'
+import { locales } from '../locales'
 
 // Create a mock router
 const router = createRouter({
@@ -28,19 +29,132 @@ describe('SkipLink', () => {
 	})
 
 	it('focuses the skip link on route change', async () => {
-		const wrapper = mount(SkipLink, {
+		// Monter le composant
+		mount(SkipLink, {
 			global: {
 				plugins: [router],
 			},
 		})
 
-		// Create a mock for the focus method
-		const spy = vi.spyOn(wrapper.vm.$refs.skipLinkSpan as HTMLLinkElement, 'focus')
+		// Espionner querySelector et focus
+		const linkElement = document.createElement('a')
+		const focusSpy = vi.spyOn(linkElement, 'focus')
+		vi.spyOn(document, 'querySelector').mockImplementation(() => linkElement)
 
-		// Trigger the route change
+		// Déclencher le changement de route
 		await router.push('/about')
-		await router.isReady() // Ensure the router is ready
+		await router.isReady()
+		await new Promise(resolve => setTimeout(resolve, 0))
+
+		expect(focusSpy).toHaveBeenCalled()
+	})
+
+	it('accepte des props personnalisées', () => {
+		const customLabel = 'Accéder au contenu'
+		const customTarget = '#content'
+
+		const wrapper = mount(SkipLink, {
+			props: {
+				label: customLabel,
+				target: customTarget,
+			},
+		})
+
+		const link = wrapper.find('a.sy-skip-link')
+		expect(link.text()).toBe(customLabel)
+		expect(link.attributes('href')).toBe(customTarget)
+	})
+
+	it('utilise les valeurs par défaut', () => {
+		const wrapper = mount(SkipLink)
+
+		const link = wrapper.find('a.sy-skip-link')
+		expect(link.text()).toBe(locales.label)
+		expect(link.attributes('href')).toBe('#main')
+	})
+
+	it('contient les attributs d\'accessibilité corrects', () => {
+		const wrapper = mount(SkipLink)
+
+		expect(wrapper.find('nav').attributes('aria-label')).toBe('Liens d\'évitement')
+		expect(wrapper.find('a.sy-skip-link').exists()).toBe(true)
+	})
+
+	it('ne déplace pas le focus si la navigation échoue', async () => {
+		// Mock du router avec un hook afterEach qui simule un échec
+		const mockRouter = {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			afterEach: (callback: any) => {
+				// Simuler un appel avec fail=true
+				callback(
+					{ path: '/new-path' },
+					{ path: '/' },
+					true, // fail=true
+				)
+			},
+		}
+
+		// Espionner querySelector et focus
+		const linkElement = document.createElement('a')
+		const focusSpy = vi.spyOn(linkElement, 'focus')
+		vi.spyOn(document, 'querySelector').mockImplementation(() => linkElement)
+
+		// Mock de getCurrentInstance pour injecter notre router
+		// eslint-disable-next-line @typescript-eslint/no-require-imports
+		vi.spyOn(require('vue'), 'getCurrentInstance').mockReturnValue({
+			appContext: {
+				app: {
+					config: {
+						globalProperties: {
+							$router: mockRouter,
+						},
+					},
+				},
+			},
+		})
+
+		mount(SkipLink)
+		await new Promise(resolve => setTimeout(resolve, 0))
+
+		expect(focusSpy).not.toHaveBeenCalled()
+	})
+
+	it('ne déplace pas le focus si le chemin reste identique', async () => {
+		// Mock du router avec un hook afterEach où to.path = from.path
+		const mockRouter = {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			afterEach: (callback: any) => {
+				// Simuler un appel avec les mêmes chemins
+				callback(
+					{ path: '/same-path' },
+					{ path: '/same-path' },
+					false,
+				)
+			},
+		}
+
+		// Espionner querySelector et focus
+		const linkElement = document.createElement('a')
+		const focusSpy = vi.spyOn(linkElement, 'focus')
+		vi.spyOn(document, 'querySelector').mockImplementation(() => linkElement)
+
+		// Mock de getCurrentInstance
+		/* eslint-disable */
+		vi.spyOn(require('vue'), 'getCurrentInstance').mockReturnValue({
+			appContext: {
+				app: {
+					config: {
+						globalProperties: {
+							$router: mockRouter,
+						},
+					},
+				},
+			},
+		})
+
+		mount(SkipLink)
+		await new Promise(resolve => setTimeout(resolve, 0))
 
-		expect(spy).toHaveBeenCalled()
+		expect(focusSpy).not.toHaveBeenCalled()
 	})
 })

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

@@ -44,6 +44,13 @@ const meta = {
 				type: { summary: 'string' },
 			},
 		},
+		'logoutText': {
+			control: 'text',
+			description: 'Texte dans le bouton de déconnexion',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 		'additionalInformation': {
 			control: 'text',
 			description: 'Informations supplémentaires sur l\'utilisateur (ex: rôle, service, etc.)',
@@ -376,6 +383,55 @@ export const CustomFullName: Story = {
 	},
 }
 
+export const CustomLogoutText: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menu-items="menuItems"
+  :logout-text="Déconnexion"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import { UserMenuBtn } from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const logoutText = ref('Déconnexion')
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		logoutText: 'Déconnexion',
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
 export const CustomAdditionalInformation: Story = {
 	parameters: {
 		sourceCode: [

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -15,6 +15,7 @@
 		hideLogoutBtn?: boolean
 		isMobileView?: boolean
 		hideUserIcon?: boolean
+		logoutText?: string
 	}>(), {
 		menuItems: () => [],
 		additionalInformation: 'Information supplémentaire',
@@ -22,6 +23,7 @@
 		hideLogoutBtn: false,
 		isMobileView: false,
 		hideUserIcon: false,
+		logoutText: 'Logout',
 	})
 
 	const modelValue = defineModel<MenuItem | null>({
@@ -74,8 +76,8 @@
 						class="mr-4"
 						v-bind="options['logoutIcon']"
 					/>
-					<VListItemTitle>
-						Logout
+					<VListItemTitle class="logout">
+						{{ props.logoutText }}
 					</VListItemTitle>
 				</div>
 			</VListItem>

package/src/components/UserMenuBtn/tests/UserMenuBtn.spec.ts

@@ -122,4 +122,45 @@ describe('UserMenuBtn', () => {
 		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
 		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test-value'])
 	})
+
+	it('possède la prop logoutText  custom', async () => {
+		const customLogoutText = 'Déconnexion'
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				logoutText: customLogoutText,
+				hideLogoutBtn: false,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				fullName: 'John Doe',
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+
+		// Vérifier directement que la prop est correctement passée au composant
+		expect(wrapper.props('logoutText')).toBe(customLogoutText)
+	})
+
+	it('possède la prop logoutText  par défaut', async () => {
+		const defaultLogoutText = 'Logout'
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideLogoutBtn: false,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				fullName: 'John Doe',
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+
+		// Vérifier directement que la prop est correctement passée au composant
+		expect(wrapper.props('logoutText')).toBe(defaultLogoutText)
+	})
 })

package/src/components/index.ts

@@ -42,6 +42,7 @@ export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBt
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
+export { indicatifs } from './PhoneField/indicatifs'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'

package/src/composables/rules/useFieldValidation.ts

@@ -177,16 +177,30 @@ export function useFieldValidation() {
 
 				case 'notBeforeToday': {
 					const dateValue = new Date(value)
+					// Réinitialiser l'heure à minuit pour ne comparer que les dates
+					dateValue.setHours(0, 0, 0, 0)
+
+					// Créer une date aujourd'hui à minuit pour comparaison
+					const today = new Date()
+					today.setHours(0, 0, 0, 0)
+
 					return createValidationResult(
-						dateValue >= new Date(),
+						dateValue >= today,
 						options.message || options.warningMessage || `${identifier} ne peut pas être antérieur à aujourd'hui.`,
 					)
 				}
 
 				case 'notAfterToday': {
 					const dateValue = new Date(value)
+					// Réinitialiser l'heure à minuit pour ne comparer que les dates
+					dateValue.setHours(0, 0, 0, 0)
+
+					// Créer une date aujourd'hui à minuit pour comparaison
+					const today = new Date()
+					today.setHours(0, 0, 0, 0)
+
 					return createValidationResult(
-						dateValue <= new Date(),
+						dateValue <= today,
 						options.message || options.warningMessage || `${identifier} ne peut pas être postérieur à aujourd'hui.`,
 					)
 				}
@@ -262,8 +276,17 @@ export function useFieldValidation() {
 						return { error: 'Date de référence invalide' }
 					}
 
+					// Normaliser les deux dates en réinitialisant les heures/minutes/secondes
+					dateValue.setHours(0, 0, 0, 0)
+					referenceDate.setHours(0, 0, 0, 0)
+
+					// Comparer les dates normalisées
+					const isSameDate = dateValue.getFullYear() === referenceDate.getFullYear()
+						&& dateValue.getMonth() === referenceDate.getMonth()
+						&& dateValue.getDate() === referenceDate.getDate()
+
 					return createValidationResult(
-						dateValue.getTime() === referenceDate.getTime(),
+						isSameDate,
 						options.message || options.warningMessage || `${identifier} doit être exactement le ${options.date}.`,
 					)
 				}

package/src/stories/Accessibilite/KitDePreAudit/Echantillonnage.mdx

@@ -37,4 +37,4 @@ Certains contenus sont exemptés de l’obligation d’accessibilité et se situ
 7. Les contenus des intranets et des extranets publiés avant le 23 septembre 2019, jusqu’à ce que ces sites fassent l’objet d’une révision en profondeur ;
 8. Les contenus des sites internet et des applications mobiles qui ne sont ni nécessaires à l’accomplissement d’une démarche administrative active ni mis à jour ou modifiés après le 23 septembre 2019, notamment les archives.
 
-Il existe un système de dérogation dans la mise en conformité d’un service numérique à l’accessible : la charge disproportionnée. Elle permet de déroger à certaines règles d'accessibilité lorsque leur mise en œuvre engendre une charge excessive pour l'organisation. Cela peut inclure des contraintes techniques, financières ou temporelles qui rendent la conformité à une norme spécifique difficile ou irréalisable. L’absence de priorité, le manque de temps ou de connaissance ne sont pas des circonstances légitimes de dérogations. Cette dérogation doit être justifiée, documentée et nécessite un accord auprès de la DSI de la CNAM. De plus, des solutions alternatives doivent être proposées pour garantir un accès maximal aux utilisateurs en situation de handicap.
+Il existe un système de dérogation dans la mise en conformité d’un service numérique à l’accessible : la charge disproportionnée. Elle permet de déroger à certaines règles d'accessibilité lorsque leur mise en œuvre engendre une charge excessive pour l'organisation. Cela peut inclure des contraintes techniques, financières ou temporelles qui rendent la conformité à une norme spécifique difficile ou irréalisable. L’absence de priorité, le manque de temps ou de connaissance ne sont pas des circonstances légitimes de dérogations. Cette dérogation doit être justifiée, documentée et nécessite un accord auprès du comité de gouvernance de la l'accessibilité numérique (en attendant sa création, c'est la Filière Digital qui en a le mandat). De plus, des solutions alternatives doivent être proposées pour garantir un accès maximal aux utilisateurs en situation de handicap.

package/src/stories/GuideDuDev/LesBreackingChanges.mdx

@@ -12,7 +12,7 @@ Les librairies `vue-dot` et `synapse-bridge` utilisaient en interne la librairie
 
 Le form builder n'est plus maintenu par le design system dans sa version synapse. Vous pouvez trouvez le code source dans sa version vue2 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder) et sa version vue3 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder).
 
-## Les composants
+## Les composants Synapse
 
 ### CustomIcon
 
@@ -33,4 +33,33 @@ Vous devez désormais utiliser le composant [VIcon](https://vuetifyjs.com/en/com
 
 ### FilterModule
 
-Le composant `FilterModule` n'était pas optimisé du point de vue expérience utilisateur, le nombre de clics pour accéder à un filtre était trop important. Il a été remplacé par le composant [FilterInline](/docs/composants-filtres-filterssidebar--docs) et [FilterSideBar](/docs/composants-filtres-filterinline--docs).
+Le composant `FilterModule` n'était pas optimisé du point de vue expérience utilisateur, le nombre de clics pour accéder à un filtre était trop important. Il a été remplacé par le composant [FilterSideBar](/docs/composants-filtres-filterssidebar--docs) et [FilterInline](/docs/composants-filtres-filterinline--docs).
+
+### FilePreview
+
+La props `locales` a été ajoutée afin de gérer la localisation des messages d'erreurs.
+
+[Voir l'API du composant](https://cnam-design-system.netlify.app/?path=/docs/composants-donn%C3%A9es-filepreview--docs)
+
+### NirField
+
+ - Le variant utilisé par défaut est maintenant 'outlined'.
+ - La props `nir-length` a été renomée en `displayKey`.
+ - La props `tooltip` a été supprimée au profit des props `nirTooltip` et `keyTooltip`, ainsi que `nirTooltipPosition` et `keyTooltipPosition`.
+ - Ajout de nouvelles props pour la gestion des erreurs: `disableErrorHandling`, `customNumberRules` et `customKeyRules`
+
+
+[Voir l'API du composant](https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-nirfield--docs#api)
+
+### DatePicker
+
+Des changements sont encore susceptibles d'avoir lieu sur ce composant.
+
+ - Le variant utilisé par défaut est maintenant 'outlined'.
+ - Le composant en mode calendrier ne permet plus la saisie manuelle de la date.
+ - Les props `no-prepend-icon` et `append-icon` ont été remplacés par les props `displayIcon` et `displayAppendIcon`.
+ - La props `mask` a été retirée.
+ - Les modes `birthdate` et `picker-date` ont été retirés.
+ - Les slots `prepend` et `append` ont été retirées.
+
+[Voir l'API du composant](https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-nirfield--docs#api)

package/src/components/LangBtn/tests/Config.spec.ts

@@ -1,24 +0,0 @@
-import config from '../config'
-import { describe, it, expect } from 'vitest'
-
-describe('config', () => {
-	it('should have correct menu configuration', () => {
-		expect(config.menu).toEqual({
-			offsetY: true,
-		})
-	})
-
-	it('should have correct button configuration', () => {
-		expect(config.btn).toEqual({
-			color: 'primary',
-			variant: 'outlined',
-			ripple: true,
-		})
-	})
-
-	it('should have correct icon configuration', () => {
-		expect(config.icon).toEqual({
-			class: 'ml-1',
-		})
-	})
-})