@cnamts/synapse 0.0.14-alpha → 0.0.16-alpha

package/src/components/DatePicker/tests/DateTextInput.spec.ts

@@ -38,7 +38,7 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('accepts valid date format', async () => {
@@ -116,20 +116,20 @@ describe('DateTextInput.vue', () => {
 			},
 		})
 
-		// Force la validation en déclenchant un événement de perte de focus
+		// Force validation by triggering a blur event
 		const input = wrapper.find('input')
 		await input.trigger('focus')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick() // Double nextTick pour s'assurer que les mises à jour sont terminées
-		// On peut également forcer la validation manuellement
+		await wrapper.vm.$nextTick() // Double nextTick to ensure updates are completed
+		// We can also force validation manually
 		await wrapper.vm.validateOnSubmit()
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
 		const warningMessages = textField.props('warningMessages') || []
-		// Vérifier que le message d'avertissement est bien présent
+		// Check that the warning message is present
 		expect(warningMessages.length).toBeGreaterThan(0)
-		// Le message réel commence par "Attention :"
+		// The actual message starts with "Attention:"
 		expect(warningMessages[0]).toContain('Attention :')
 	})
 
@@ -139,7 +139,7 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('formats input while typing', async () => {
@@ -169,7 +169,7 @@ describe('DateTextInput.vue', () => {
 		const input = wrapper.find('input')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('formats date during input', async () => {
@@ -180,13 +180,13 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles date deletion', async () => {
-		// D'abord on met une date valide
+		// First set a valid date
 		const input = wrapper.find('input')
 		await input.setValue('01/01/2025')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 
-		// Puis on la supprime
+		// Then delete it
 		await input.setValue('')
 		await input.trigger('input')
 		await input.trigger('blur')
@@ -227,9 +227,9 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles readonly state', async () => {
-		await wrapper.setProps({ readOnly: true })
+		await wrapper.setProps({ readonly: true })
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('readOnly')).toBe(true)
+		expect(textField.props('readonly')).toBe(true)
 	})
 
 	it('emits focus and blur events', async () => {
@@ -266,19 +266,61 @@ describe('DateTextInput.vue', () => {
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/__/____')
 
-		// Simuler une position de curseur après le "01"
+		// Simulate cursor position after "01"
 		input.element.setSelectionRange(2, 2)
 		await input.trigger('input')
 		await wrapper.vm.$nextTick()
 
-		// La position du curseur devrait rester après le "01"
+		// The cursor position should remain after "01"
 		expect(input.element.selectionStart).toBe(2)
 	})
 
+	it('handles 2 digits year correctly', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'DD/MM/YY',
+				dateFormatReturn: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('0')
+		expect(input.element.value).toBe('0_/__/__')
+
+		await input.setValue('01/02/99')
+		expect(input.element.value).toBe('01/02/99')
+		expect(customWrapper.emitted('update:model-value')?.at(-1)).toEqual(['1999-02-01'])
+	})
+
+	it('handles ISO-8601 date format correctly', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('2025-')
+		expect(input.element.value).toBe('2025-__-__')
+		expect(customWrapper.emitted('update:model-value')).toBeFalsy()
+
+		await input.setValue('2025-01-01')
+		expect(input.element.value).toBe('2025-01-01')
+		expect(customWrapper.emitted('update:model-value')?.at(-1)).toEqual(['2025-01-01'])
+	})
+
 	it('handles paste event with valid date', async () => {
 		const input = wrapper.find('input')
 
-		// Créer un événement de collage avec les données
+		// Create a paste event with data
 		const clipboardData = {
 			getData: () => '01/01/2025',
 		}
@@ -297,26 +339,26 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('keydown', {
 			key: 'Tab',
 		})
-		// Vérifier que le composant n'empêche pas la navigation par tab
+		// Check that the component doesn't prevent tab navigation
 		expect(wrapper.emitted('update:model-value')).toBeFalsy()
 
-		// Tester le comportement avec Ctrl+V (coller)
+		// Test behavior with Ctrl+V (paste)
 		await input.trigger('keydown', {
 			key: 'v',
 			ctrlKey: true,
 		})
-		// Le comportement par défaut devrait être préservé
+		// Default behavior should be preserved
 		expect(wrapper.emitted('update:model-value')).toBeFalsy()
 	})
 
 	it('validates on submit correctly', async () => {
 		const input = wrapper.find('input')
 
-		// Cas 1: Champ vide avec required=true
+		// Case 1: Empty field with required=true
 		const emptyResult = await wrapper.vm.validateOnSubmit()
 		expect(emptyResult).toBe(false)
 
-		// Cas 2: Date valide
+		// Case 2: Valid date
 		await input.setValue('01/01/2025')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
@@ -326,23 +368,29 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles focus and blur methods correctly', async () => {
-		// Simuler un querySelector global
-		const originalQuerySelector = document.querySelector
+		// Create a mock for the input element
 		const mockInput = { focus: vi.fn(), blur: vi.fn() }
 
-		// Remplacer document.querySelector
-		document.querySelector = vi.fn().mockReturnValue(mockInput)
+		// Mock the component's querySelector method
+		const mockQuerySelector = vi.fn().mockReturnValue(mockInput)
+
+		// Replace the element reference and its querySelector method
+		wrapper.vm.inputRef = {
+			$el: {
+				querySelector: mockQuerySelector,
+			},
+		}
 
-		// Appeler les méthodes exposées
+		// Call the exposed methods
 		wrapper.vm.focus()
 		wrapper.vm.blur()
 
-		// Vérifier que les méthodes ont été appelées
+		// Check that querySelector was called with the right selector
+		expect(mockQuerySelector).toHaveBeenCalledWith('input:not([type="hidden"])')
+
+		// Check that the methods were called
 		expect(mockInput.focus).toHaveBeenCalled()
 		expect(mockInput.blur).toHaveBeenCalled()
-
-		// Restaurer document.querySelector
-		document.querySelector = originalQuerySelector
 	})
 
 	it('initializes with model value correctly', async () => {
@@ -383,17 +431,17 @@ describe('DateTextInput.vue', () => {
 	it('handles partial date input correctly', async () => {
 		const input = wrapper.find('input')
 
-		// Saisir seulement le jour
+		// Enter only the day
 		await input.setValue('01')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/__/____')
 
-		// Ajouter le mois
+		// Add the month
 		await input.setValue('01/02')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/02/____')
 
-		// Compléter la date
+		// Complete the date
 		await input.setValue('01/02/2025')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/02/2025')
@@ -423,16 +471,16 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('focus')
 		await input.trigger('blur')
 		await customWrapper.vm.$nextTick()
-		await customWrapper.vm.$nextTick() // Double nextTick pour fiabilité
+		await customWrapper.vm.$nextTick() // Double nextTick for reliability
 
-		// Force validation manuelle
+		// Force manual validation
 		await customWrapper.vm.validateOnSubmit()
 		await customWrapper.vm.$nextTick()
 
 		const textField = customWrapper.findComponent(SyTextField)
 		const successMessages = textField.props('successMessages') || []
 
-		// Vérification assouplie
+		// Flexible verification
 		expect(successMessages.length).toBeGreaterThan(0)
 		expect(successMessages[0]).toContain('valide')
 	})

package/src/components/DialogBox/DialogBox.stories.ts

@@ -121,7 +121,7 @@ const meta: Meta<typeof DialogBox> = {
 							height: '32px',
 							class: 'mt-n2 mr-n2 ml-4',
 						},
-						actionsCtn: {
+						cardActions: {
 							class: 'd-flex flex-wrap mt-6',
 						},
 						cancelBtn: {
@@ -139,8 +139,11 @@ const meta: Meta<typeof DialogBox> = {
 					{
 	card?: Record<string, any>,
 	cardTitle?: Record<string, any>,
+	spacer?: Record<string, any>,
 	closeBtn?: Record<string, any>,
-	actionsCtn?: Record<string, any>,
+	icon?: Record<string, any>,
+	actionsBtn?: Record<string, any>,
+	actionsSpacer?: Record<string, any>,
 	cancelBtn?: Record<string, any>,
 	confirmBtn?: Record<string, any>,
 }

package/src/components/DialogBox/DialogBox.vue

@@ -123,7 +123,7 @@
 
 			<div
 				v-if="!props.hideActions"
-				v-bind="options.actionsCtn"
+				v-bind="options.cardActions"
 				class="sy-dialog-box-actions-ctn"
 			>
 				<VSpacer v-bind="options.actionsSpacer" />

package/src/components/DialogBox/config.ts

@@ -12,7 +12,7 @@ export const config = {
 		height: '32px',
 		class: 'mt-n2 mr-n2 ml-4',
 	},
-	actionsCtn: {
+	cardActions: {
 		class: 'd-flex flex-wrap mt-6',
 	},
 	cancelBtn: {

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

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.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/4007" target="_blank" style="color:#0C41BD;">issue #4007</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/DownloadBtn/DownloadBtn.stories.ts

@@ -1,7 +1,7 @@
 import { fn, userEvent, within } from '@storybook/test'
 import type { Meta, StoryObj } from '@storybook/vue3'
 import axios from 'axios'
-import { VThemeProvider } from 'vuetify/components'
+import { VSheet } from 'vuetify/components'
 import DownloadBtn from './DownloadBtn.vue'
 import NotificationBar from '../NotificationBar/NotificationBar.vue'
 import { useNotificationService } from '@/services/NotificationService'
@@ -22,6 +22,15 @@ const meta = {
 				category: 'slots',
 			},
 		},
+		dark: {
+			control: 'boolean',
+			description: 'Applique le thème sombre.',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
 		filePromise: {
 			control: false,
 			description: 'Une fonction retournant une valeur de retour de Axios `Promise<AxiosResponse>`. <br>Exemple: `() => axios.get("https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f")`',
@@ -231,16 +240,16 @@ export const Dark: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<VThemeProvider theme="dark" with-background class="pa-4">
+	<VSheet color="primary" class="pa-4">
 		<DownloadBtn
+			dark
 			:file-promise="download"
-			background-color="black"
 			@error="console.log('error')"
 			@success="console.log('success')"
 		>
 			Télécharger
 		</DownloadBtn>
-	</VThemeProvider>
+	</VSheet>
 </template>
 				`,
 			},
@@ -259,20 +268,20 @@ export const Dark: Story = {
 		],
 	},
 	render: args => ({
-		components: { VThemeProvider, DownloadBtn },
+		components: { VSheet, DownloadBtn },
 		setup() {
 			return { args }
 		},
 		template: `
-			<VThemeProvider theme="dark" with-background class="pa-4">
+			<VSheet color="primary" class="pa-4">
 				<DownloadBtn v-bind="args">{{ args.default }}</DownloadBtn>
-			</VThemeProvider>
+			</VSheet>
 		`,
 	}),
 	args: {
+		dark: true,
 		filePromise: () => axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f'),
 		default: 'Télécharger',
-		backgroundColor: 'black',
 		onError: fn(),
 		onSuccess: fn(),
 	},

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -19,6 +19,7 @@
 		filePromise: () => Promise<AxiosResponse<Blob>>
 		fallbackFilename?: string
 		backgroundColor?: string
+		dark?: boolean
 		locales?: typeof defaultLocales
 	}
 
@@ -29,13 +30,19 @@
 	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
 		fallbackFilename: undefined,
 		backgroundColor: 'white',
+		dark: false,
 		locales: () => defaultLocales,
 	})
+
 	const emits = defineEmits(['error', 'success'])
 	const attrs = useAttrs()
 	const state = ref<State>('idle')
 	const options = useCustomizableOptions(config, props)
 	const btnOptions = computed(() => deepmerge(options.value.btn, attrs))
+	const isDark = computed(() => props.dark ?? false)
+	const buttonColor = computed(() => isDark.value ? 'white' : options.value.btn.color)
+	const buttonBgColor = computed(() => isDark.value ? 'transparent' : props.backgroundColor)
+	const iconColor = computed(() => isDark.value ? 'white' : options.value.icon.color)
 
 	/**
 	 * Get filename and content type from headers
@@ -88,12 +95,16 @@
 		v-bind="btnOptions"
 		:loading="state === 'loading'"
 		class="sy-download-btn"
-		:class="[`bg-${backgroundColor}`, btnOptions.variant === 'outlined' ? 'outlined-style' : '']"
+		:color="buttonColor"
+		:class="`bg-${buttonBgColor}`"
 		data-testid="download-btn"
 		@click="download"
 	>
 		<slot name="icon">
-			<VIcon v-bind="options.icon">
+			<VIcon
+				v-bind="options.icon"
+				:color="iconColor"
+			>
 				{{ mdiDownload }}
 			</VIcon>
 		</slot>
@@ -141,8 +152,4 @@
 .sy-download-btn:focus-visible::after {
 	opacity: 1;
 }
-
-.outlined-style {
-	border: 1px solid currentcolor;
-}
 </style>

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

@@ -4,7 +4,6 @@ exports[`DownloadBtn > renders correctly 1`] = `
 <button
   class="
     bg-white
-    outlined-style
     sy-download-btn
     text-primary
     text-wrap
@@ -47,7 +46,6 @@ exports[`DownloadBtn > with slots 1`] = `
 <button
   class="
     bg-white
-    outlined-style
     sy-download-btn
     text-primary
     text-wrap

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

@@ -187,6 +187,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.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/4005" target="_blank" style="color:#0C41BD;">issue #4005</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -10,6 +10,7 @@
 
 <style lang="scss" scoped>
 	@use '@/assets/tokens.scss' as *;
+	@use '../menu';
 
 	.header-menu-item {
 		color: rgb(var(--v-theme-primary));
@@ -37,6 +38,8 @@
 			&::first-letter {
 				text-transform: uppercase;
 			}
+
+			@include menu.item-focused;
 		}
 	}
 

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -63,6 +63,7 @@
 <style lang="scss" scoped>
 	@use '@/assets/tokens.scss' as *;
 	@use '../../consts' as *;
+	@use '../menu';
 
 	.sub-menu-btn {
 		display: flex;
@@ -83,6 +84,8 @@
 			}
 		}
 
+		@include menu.item-focused;
+
 		&::first-letter {
 			text-transform: uppercase;
 		}

package/src/components/HeaderBar/HeaderBurgerMenu/menu.scss

@@ -0,0 +1,19 @@
+@use 'sass:color';
+@use '@/assets/tokens';
+
+$red: color.channel(tokens.$primary-base, 'red');
+$green: color.channel(tokens.$primary-base, 'green');
+$blue: color.channel(tokens.$primary-base, 'blue');
+$primary: $red, $green, $blue;
+
+@mixin item-focused() {
+	border-top: 2px solid transparent;
+	border-bottom: 2px solid transparent;
+	transition: border-color 0.1s ease;
+
+	&:focus-visible {
+		outline: 0;
+		border-top: 2px solid rgb(var(--v-theme-primary, $primary));
+		border-bottom: 2px solid rgb(var(--v-theme-primary, $primary));
+	}
+}

package/src/components/HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue

@@ -48,12 +48,22 @@
 	font-weight: 700;
 	background-color: rgb(var(--v-theme-primary));
 	color: tokens.$neutral-white;
-	border-bottom: solid 1px tokens.$blue-lighten-80;
-	transition: color 0.15s 0.1s, background-color 0.15s 0.1s, border-bottom 0.15s 0.1s;
+	border: 2px solid transparent;
+	border-bottom:
+		solid 2px linear-gradient(
+			180deg,
+			transparent 0%,
+			transparent 50%,
+			tokens.$blue-lighten-80 50%,
+			tokens.$blue-lighten-80 100%
+		);
+	transition: color 0.15s 0.1s, background-color 0.15s 0.1s, border 0.15s 0.1s;
 
 	&:focus-visible {
 		background-color: tokens.$neutral-white;
 		color: rgb(var(--v-theme-primary));
+		outline: none;
+		border: 2px solid rgb(var(--v-theme-primary));
 	}
 }
 

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

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 					</v-btn>
 					Problèmes relevés par Tanaguru
 				  </div>
+				</div>
+					<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/LangBtn.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/4009" target="_blank" style="color:#0C41BD;">issue #4009</a>)</p>
 				</div>
 			  </div>
             `,

package/src/components/LangBtn/LangBtn.stories.ts

@@ -13,13 +13,11 @@ const meta: Meta<typeof LangBtn> = {
 		modelValue: { control: 'text' },
 		hideDownArrow: { control: 'boolean' },
 		ariaLabel: { control: 'text' },
-		// @ts-expect-error Type '"array"' is not assignable to type 'Control | undefined'.
-		availableLanguages: { control: { type: 'array' } },
+		availableLanguages: { control: { type: 'object' } },
 		vuetifyOptions: {
 			control: { type: 'object' },
 			default: () => ({
 				menu: {
-					offsetY: true,
 				},
 				btn: {
 					color: 'primary',
@@ -73,7 +71,6 @@ export const Default: Story = {
 		availableLanguages: ['fr', 'en', 'es'],
 		vuetifyOptions: {
 			menu: {
-				offsetY: true,
 			},
 			btn: {
 				color: 'primary',