@cnamts/synapse 1.0.22 → 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/tests/NotFoundPage.spec.ts

@@ -115,13 +115,12 @@ describe('NotFoundPage', () => {
 		expect(img.attributes('src')).toBe('/custom.svg')
 	})
 
-	it('passes a uniqueId prop to StatusPage', async () => {
+	it('uses a generated uniqueId', async () => {
 		const wrapper = mount(NotFoundPage)
 		await flushPromises()
 		await wrapper.vm.$nextTick()
 
-		const statusPage = wrapper.findComponent(StatusPage)
-		expect(statusPage.props('uniqueId')).toBeDefined()
+		expect(wrapper.find('.vd-page-container').attributes('id')).toMatch(/^[-a-z0-9]+-container$/)
 	})
 
 	it('passes a custom uniqueId prop to StatusPage', async () => {

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="
@@ -149,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="

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',

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

@@ -1,15 +1,83 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../RangeField.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as RangeFieldStories from '../RangeField.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={RangeFieldStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+  componentName="RangeField"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/slider/"
+>
+  <div class="mt-8">
+    <p>Rapport d'audit manuel : <a href="/audits/RangeField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+    <p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/908" target="_blank" style={{color:'#0C41BD'}}>issue #908</a>)</p>
+  </div>
 
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique et regroupement">
+      <ul>
+        <li><strong>Fieldset/Legend</strong> : Utilisation de <code>&lt;fieldset&gt;</code> et <code>&lt;legend&gt;</code> lorsque <code>fieldsetLabel</code> est fourni pour regrouper sémantiquement les champs</li>
+        <li><strong>Double entrée</strong> : Composant hybride avec slider visuel et champs textuels pour une accessibilité maximale</li>
+        <li><strong>Labels explicites</strong> : Champs texte avec labels personnalisables via <code>textFieldMinLabel</code> et <code>textFieldMaxLabel</code></li>
+      </ul>
+    </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/RangeField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/908" target="_blank" style={{color:'#0C41BD'}}>issue #908</a>)</p>
-	</div>
+    <CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+      <ul>
+        <li><strong>Input numérique</strong> : Champs texte avec <code>inputmode="numeric"</code> pour optimiser le clavier mobile</li>
+        <li><strong>Validation synchrone</strong> : Mise à jour bidirectionnelle entre slider et champs texte pour une cohérence immédiate</li>
+        <li><strong>Contraintes logiques</strong> : Validation automatique pour garantir min ≤ max avec corrections appropriées</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🎨" title="Masque saisie et formatage">
+      <ul>
+        <li><strong>vMaska</strong> : Masque de saisie personnalisé pour gérer nombres négatifs et décimaux</li>
+        <li><strong>Pattern flexible</strong> : Support des formats comme "-123.45" avec tokens adaptés</li>
+        <li><strong>Clamp automatique</strong> : Correction des valeurs hors limites avec <code>clamp()</code></li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📱" title="Responsive et adaptabilité">
+      <ul>
+        <li><strong>Layout adaptatif</strong> : Orientation des champs qui passe de horizontal à vertical sur mobile</li>
+        <li><strong>Display Vuetify</strong> : Utilisation de <code>useDisplay()</code> pour détecter les tailles d'écran</li>
+        <li><strong>Options personnalisables</strong> : Composant entièrement configurable via <code>useCustomizableOptions</code></li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="RangeField">
+    <Primary />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li><strong>Labels descriptifs</strong> : Utilisez des labels clairs pour les champs min/max ("Prix minimum", "Âge maximum")</li>
+      <li><strong>Fieldset cohérent</strong> : Regroupez les champs avec un <code>fieldsetLabel</code> pertinent ("Fourchette de prix", "Plage d'âge")</li>
+      <li><strong>Valeurs par défaut</strong> : Initialisez toujours <code>modelValue</code> avec une plage valide [min, max]</li>
+      <li><strong>Step approprié</strong> : Choisissez un <code>step</code> logique (1 pour les entiers, 0.1 pour les décimales)</li>
+      <li><strong>Validation côté serveur</strong> : Complétez la validation client avec des vérifications serveur pour la sécurité</li>
+      <li><strong>Feedback utilisateur</strong> : Ajoutez des messages d'aide ou d'erreur pour guider l'utilisateur</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/slider/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Sliders</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9" target="_blank" rel="noopener noreferrer">RGAA Critère 11.9 : Champs de saisie numérique</a></li>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/number" target="_blank" rel="noopener noreferrer">MDN : Champs input number et inputmode</a></li>
+    </ul>
+  </ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SkipLink from '../SkipLink.vue'
+
+describe('SkipLink – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(SkipLink, {
+			props: {
+				links: [
+					{ label: 'Aller au contenu', href: '#main' },
+					{ label: 'Aller à la navigation', href: '#nav' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SkipLink – default state')
+	})
+})