@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/MonthPicker/useMonthPickerValidation.ts

@@ -0,0 +1,30 @@
+import { type ValidationRule } from '@/composables/validation/useValidation'
+import { computed } from 'vue'
+
+export type ValidationProps = {
+	customRules?: ValidationRule[]
+	customWarningRules?: ValidationRule[]
+	customSuccessRules?: ValidationRule[]
+	errorMessages?: string[] | null
+	warningMessages?: string[] | null
+	successMessages?: string[] | null
+	hasError?: boolean
+	hasWarning?: boolean
+	hasSuccess?: boolean
+	showSuccessMessages?: boolean
+}
+
+export function useMonthPickerValidation(props: ValidationProps) {
+	return computed(() => ({
+		customRules: props.customRules,
+		customWarningRules: props.customWarningRules,
+		customSuccessRules: props.customSuccessRules,
+		errorMessages: props.errorMessages,
+		warningMessages: props.warningMessages,
+		successMessages: props.successMessages,
+		hasError: props.hasError,
+		hasWarning: props.hasWarning,
+		hasSuccess: props.hasSuccess,
+		showSuccessMessages: props.showSuccessMessages,
+	}))
+}

package/src/components/NirField/NirField.mdx

@@ -65,8 +65,7 @@ import NirField from './NirField.vue';
 
 Le composant `NirField` utilise des règles de validation par défaut pour le numéro NIR et la Clé. Voici les règles de validation par défaut :
 
-#### Pour le numéro NIR :
-
+<h4 id="ancre-nirtype">Pour le numéro NIR</h4>
 - Props: `nirType` à simple (par defaut) d'après le [repo](https://github.com/assurance-maladie-digital/nir-validation) : 
 
   - Le 1er chiffre (1er composant) permet d'identifier le sexe de l'assuré (1 pour un homme et 2 pour une femme) ;

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

@@ -878,9 +878,6 @@ export const WithNirTooltip: Story = {
 		nirTooltipPosition: 'prepend',
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: `
@@ -929,9 +926,6 @@ export const WithKeyTooltip: Story = {
 		keyTooltipPosition: 'append',
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: `
@@ -1394,4 +1388,70 @@ const value = ref('')
 			},
 		],
 	},
+
+}
+
+export const ComplexNirType: Story = {
+	args: {
+		modelValue: '712125233333340',
+		required: false,
+		numberLabel: 'Numéro de sécurité sociale',
+		keyLabel: 'Clé',
+		displayKey: true,
+		nirType: 'complexe',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+    <template>
+		 <NirField
+		  v-model="value"
+		  :required="false"
+		  numberLabel="Numéro de sécurité sociale"
+		  keyLabel="Clé"
+		  :nirType="complexe"
+		  :displayKey="true"
+		 />
+    </template>
+    `,
+			},
+			{
+				name: 'Script',
+				code: `
+    <script setup lang="ts">
+     	import { NirField } from '@cnamts/synapse'
+     	import { ref } from 'vue'
+     
+		const value = ref('184027512345674')
+
+		return { value }
+	</script>
+    `,
+			},
+		],
+	},
+	render: () => ({
+		components: { NirField },
+		setup() {
+			const value = ref('712125233333340')
+
+			return { value }
+		},
+		template: `
+          <div>
+            <p class="mt-2">Cet exemple montre l'utilisation d'un NIR de type complexe<br/>(commençant par 7).</p>
+			<p class="mb-4">Pour plus d'informations sur le NirType voir la <a href="/?path=/docs/composants-formulaires-nirfield--docs#ancre-nirtype">documentation</a>.</p>
+          </div>
+           <NirField
+				v-model="value"
+				:required="false"
+				numberLabel="Numéro de sécurité sociale"
+				keyLabel="Clé"
+				nirType="complexe"
+				:displayKey="true"
+			/>
+    `,
+	}),
 }

package/src/components/NotFoundPage/NotFoundPage.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import NotFoundPage from './NotFoundPage.vue'
 
-const meta = {
+const meta: Meta<typeof NotFoundPage> = {
 	title: 'Templates/NotFoundPage',
 	component: NotFoundPage,
 	parameters: {

package/src/components/NotFoundPage/NotFoundPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { onMounted, ref } from 'vue'
+	import { computed, onMounted, ref } from 'vue'
 	import StatusPage from '../StatusPage/StatusPage.vue'
 	import { locales, SUPPORT_ID_PARAM_NAME, supportIdMessage } from './locales'
 	import type { RouteRecordRaw } from 'vue-router'
@@ -9,16 +9,23 @@
 
 	const supportId = ref<string | undefined>()
 
-	withDefaults(defineProps<{
+	interface Props {
 		btnText?: string
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
-	}>(), {
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		src?: string
+		uniqueId?: string
+	}
+	const props = withDefaults(defineProps<Props>(), {
 		btnText: undefined,
 		btnLink: '/',
 		btnHref: undefined,
 		hideBtn: false,
+		headingLevel: 1,
+		src: undefined,
+		uniqueId: undefined,
 	})
 
 	onMounted(() => {
@@ -31,17 +38,20 @@
 
 		supportId.value = supportIdParam.trim().match(/.{1,4}/g)?.join(' ')
 	})
+	const src = computed(() => props.src || themeLocales.value.src)
 </script>
 
 <template>
 	<StatusPage
 		:page-title="themeLocales.pageTitle"
+		:heading-level="headingLevel"
 		:message="themeLocales.message"
 		:code="themeLocales.code"
 		:btn-text="btnText"
 		:btn-href="btnHref"
 		:btn-link="btnLink"
 		:hide-btn="hideBtn"
+		:unique-id="uniqueId"
 	>
 		<template
 			v-if="supportId"
@@ -56,12 +66,13 @@
 		</template>
 
 		<template
-			v-if="themeLocales.src || $slots.illustration"
+			v-if="src || $slots.illustration"
 			#illustration
 		>
 			<slot name="illustration">
 				<img
-					:src="themeLocales.src"
+					v-if="src"
+					:src="src"
 					alt=""
 					aria-hidden="true"
 				>

package/src/components/NotFoundPage/accessibilite/Accessibility.mdx

@@ -29,6 +29,8 @@ import {
                 <li><strong>Titre de page</strong> : rendu dans une balise <code>h1</code> via <code>StatusPage</code>, sa valeur provient des locales du thème via <code>useThemeLocales</code></li>
                 <li><strong>Code d'erreur</strong> : le code <em>404</em> est précédé du texte masqué visuellement <code>codeErrorText</code> (par défaut <em>"Code d'erreur : "</em>) pour les lecteurs d'écran</li>
                 <li><strong>Identifiant de support</strong> : si le paramètre <code>support_id</code> est présent dans l'URL, il est affiché dans le slot <code>#additional-content</code> avec un formatage espacé par groupes de 4 caractères pour faciliter la lecture</li>
+                <li><strong>Prop <code>uniqueId</code></strong> : permet de définir un identifiant unique sur le conteneur, facilitant le ciblage par <code>aria-labelledby</code> ou <code>aria-describedby</code> depuis d'autres éléments</li>
+                <li><strong>Prop <code>role</code></strong> : aucune prop <code>role</code> n'est exposée sur ce composant — la <code>NotFoundPage</code> est une page statique d'information, sa structure sémantique (<code>h1</code>, paragraphe) suffit à en exprimer le rôle sans qu'un attribut ARIA <code>role</code> supplémentaire soit nécessaire ; l'exposer risquerait d'introduire de mauvaises utilisations pouvant nuire à l'expérience des utilisateurs de lecteurs d'écran</li>
             </ul>
         </CriteriaCard>
 

package/src/components/NotFoundPage/tests/NotFoundPage.a11y.spec.ts

@@ -192,4 +192,53 @@ describe('NotFoundPage – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations with a custom uniqueId', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				uniqueId: 'custom-not-found-id',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – custom uniqueId', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has a single h1 heading', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const headings = wrapper.findAll('h1')
+		if (headings.length !== 1) {
+			throw new Error(`Expected exactly 1 h1 heading, found ${headings.length}`)
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – single h1', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with all props provided', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				uniqueId: 'full-props-id',
+				btnText: 'Retour à l\'accueil',
+				btnHref: 'https://example.com',
+				hideBtn: false,
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – all props', {
+			ignoreRules: ['region'],
+		})
+	})
 })

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

@@ -1,16 +1,17 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
 import { mount, flushPromises } from '@vue/test-utils'
 import NotFoundPage from '../NotFoundPage.vue'
 import StatusPage from '../../StatusPage/StatusPage.vue'
 
 vi.mock('@/utils/theme', () => ({
 	useThemeLocales: () => ({
-		themeLocales: {
+		themeLocales: ref({
 			code: '404',
 			pageTitle: 'Page non trouvée',
 			message: 'Cette page n\'existe pas ou a été déplacée.',
 			src: '/src/components/NotFoundPage/assets/not-found.svg',
-		},
+		}),
 	}),
 }))
 
@@ -113,4 +114,25 @@ describe('NotFoundPage', () => {
 		expect(img.exists()).toBe(true)
 		expect(img.attributes('src')).toBe('/custom.svg')
 	})
+
+	it('uses a generated uniqueId', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('.vd-page-container').attributes('id')).toMatch(/^[-a-z0-9]+-container$/)
+	})
+
+	it('passes a custom uniqueId prop to StatusPage', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				uniqueId: 'custom-id',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const statusPage = wrapper.findComponent(StatusPage)
+		expect(statusPage.props('uniqueId')).toBe('custom-id')
+	})
 })

package/src/components/NotFoundPage/tests/__snapshots__/NotFoundPage.spec.ts.snap

@@ -1,19 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
+<div
+  class="
+    d-flex
+    justify-center
+    px-14
+    py-10
+    vd-page-container
+  "
+  id="v-0-container"
+>
   <div
     class="
       bg-transparent
       v-sheet
       v-theme--light
     "
+    id="v-0-content"
     style="width: 800px;"
   >
     <div class="
@@ -107,6 +111,7 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Page non trouvée
@@ -148,19 +153,23 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
 `;
 
 exports[`NotFoundPage > renders correctly 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
+<div
+  class="
+    d-flex
+    justify-center
+    px-14
+    py-10
+    vd-page-container
+  "
+  id="v-0-container"
+>
   <div
     class="
       bg-transparent
       v-sheet
       v-theme--light
     "
+    id="v-0-content"
     style="width: 800px;"
   >
     <div class="
@@ -254,6 +263,7 @@ exports[`NotFoundPage > renders correctly 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Page non trouvée

package/src/components/NotificationBar/Notification/Notification.vue

@@ -74,7 +74,9 @@
 			decorative
 		/>
 
-		<span class="notification__message">{{ notification.message }}</span>
+		<span class="notification__message">
+			<slot :notification="props.notification">{{ notification.message }}</slot>
+		</span>
 		<div
 			class="d-flex ga-2 notification__actions"
 			:class="notification.message.length > 50 ? 'action-section-long-text' : 'action-section-short-text'"

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

@@ -408,6 +408,160 @@ CustomCloseBtnText.parameters = {
 	],
 }
 
+export const DefaultSlot: Story = (args) => {
+	return {
+		components: { NotificationBar, VBtn },
+		setup() {
+			const { addNotification } = useNotificationService()
+
+			const envoyerNotification = () => {
+				const notification: Notification = {
+					id: Date.now().toString(),
+					message: 'Notification avec contenu principal personnalisé.',
+					type: 'info',
+					timeout: -1,
+				}
+				addNotification(notification)
+			}
+
+			return { args, envoyerNotification }
+		},
+		template: `
+          <div class="d-flex flex-wrap align-center justify-center">
+            <NotificationBar v-bind="args">
+              <template #default="{ notification }">
+                Contenu personnalisé pour <strong>{{ notification.id }}</strong>
+              </template>
+            </NotificationBar>
+            <VBtn
+                color="primary"
+                @click="envoyerNotification()"
+                class="ma-6"
+            >
+              Afficher la notification
+            </VBtn>
+          </div>
+        `,
+	}
+}
+
+DefaultSlot.args = {
+	...Default.args,
+}
+
+DefaultSlot.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<NotificationBar>
+				<template #default="{ notification }">
+					Contenu personnalisé pour <strong>{{ notification.id }}</strong>
+				</template>
+			</NotificationBar>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { NotificationBar, useNotificationService } from '@cnamts/synapse'
+
+				const { addNotification } = useNotificationService()
+
+				const envoyerNotification = () => {
+					addNotification({
+						id: Date.now().toString(),
+						message: 'Notification avec contenu principal personnalisé.',
+						type: 'info',
+						timeout: -1,
+					})
+				}
+			</script>
+			`,
+		},
+	],
+}
+
+export const ActionSlot: Story = (args) => {
+	return {
+		components: { NotificationBar, VBtn },
+		setup() {
+			const { addNotification } = useNotificationService()
+
+			const envoyerNotification = () => {
+				const notification: Notification = {
+					id: Date.now().toString(),
+					message: 'Notification avec contenu personnalisé via slot.',
+					type: 'info',
+					timeout: -1,
+				}
+				addNotification(notification)
+			}
+
+			return { args, envoyerNotification }
+		},
+		template: `
+          <div class="d-flex flex-wrap align-center justify-center">
+            <NotificationBar v-bind="args">
+              <template #action>
+                <VBtn variant="outlined">
+                  Voir le détail
+                </VBtn>
+              </template>
+            </NotificationBar>
+            <VBtn
+                color="primary"
+                @click="envoyerNotification()"
+                class="ma-6"
+            >
+              Afficher la notification
+            </VBtn>
+          </div>
+        `,
+	}
+}
+
+ActionSlot.args = {
+	...Default.args,
+}
+
+ActionSlot.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<NotificationBar>
+				<template #action>
+					<VBtn variant="outlined">
+						Voir le détail
+					</VBtn>
+				</template>
+			</NotificationBar>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { NotificationBar, useNotificationService } from '@cnamts/synapse'
+
+				const { addNotification } = useNotificationService()
+
+				const envoyerNotification = () => {
+					addNotification({
+						id: Date.now().toString(),
+						message: 'Notification avec contenu personnalisé via slot.',
+						type: 'info',
+						timeout: -1,
+					})
+				}
+			</script>
+			`,
+		},
+	],
+}
+
 export const Customization: Story = Default.bind({})
 Customization.args = {
 	...Default.args,

package/src/components/NotificationBar/tests/NotificationBar.a11y.spec.ts

@@ -41,6 +41,32 @@ describe('NotificationBar – accessibility (axe)', () => {
 		vi.restoreAllMocks()
 	})
 
+	it('has no obvious axe violations with default slot content', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Message original',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+
+		useNotificationService().notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar, {
+			attachTo: document.body,
+			slots: {
+				default: '<span>Contenu personnalisé via slot default</span>',
+			},
+		})
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'NotificationBar – default slot content', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+
 	it('has no obvious axe violations with visible info notification', async () => {
 		const notification: Notification = {
 			id: '1',

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

@@ -186,6 +186,66 @@ describe('NotificationBar.vue', () => {
 		expect(wrapper.html()).not.toContain('Test message 1')
 	})
 
+	it('should render default slot content instead of message', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Message original',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		notificationServiceMock.notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar, {
+			slots: {
+				default: '<span>Contenu personnalisé</span>',
+			},
+		})
+		vi.runAllTimers()
+		await nextTick()
+
+		expect(wrapper.html()).toContain('Contenu personnalisé')
+		expect(wrapper.html()).not.toContain('Message original')
+	})
+
+	it('should expose notification slotProp in default slot', async () => {
+		const notification: Notification = {
+			id: 'abc',
+			message: 'Message original',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		notificationServiceMock.notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar, {
+			slots: {
+				default: `<template #default="{ notification }"><span>id: {{ notification.id }}</span></template>`,
+			},
+		})
+		vi.runAllTimers()
+		await nextTick()
+
+		expect(wrapper.html()).toContain('id: abc')
+	})
+
+	it('should fall back to message when no default slot is provided', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Message fallback',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		notificationServiceMock.notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar)
+		vi.runAllTimers()
+		await nextTick()
+
+		expect(wrapper.html()).toContain('Message fallback')
+	})
+
 	it('should compute action', async () => {
 		const notification: Notification = {
 			id: '1',