@cnamts/synapse 0.0.16-alpha → 1.0.0

package/src/components/TableToolbar/TableToolbar.vue

@@ -7,7 +7,7 @@
 	import { locales as defaultLocales } from './locales'
 
 	const props = withDefaults(defineProps<{
-		nbTotal: number
+		nbTotal?: number
 		nbFiltered?: number
 		search?: string
 		searchLabel?: string
@@ -16,6 +16,7 @@
 		loading?: boolean
 		locales?: typeof defaultLocales
 	} & CustomizableOptions>(), {
+		nbTotal: 0,
 		nbFiltered: undefined,
 		search: undefined,
 		searchLabel: defaultLocales.search,
@@ -30,6 +31,12 @@
 		(e: 'add'): void
 	}>()
 
+	defineSlots<{
+		searchLeft?: () => undefined
+		searchRight?: () => undefined
+		filters?: () => undefined
+	}>()
+
 	const options = useCustomizableOptions(config, props)
 	const display = useDisplay()
 	const theme = useTheme()
@@ -38,7 +45,6 @@
 		'sy-form-input--s': display.xs.value,
 		'flex-grow-0': display.xs.value,
 		'flex-grow-1': !display.xs.value,
-		'mr-6': props.showAddButton,
 		'loading': props.loading,
 	}))
 
@@ -59,12 +65,14 @@
 	>
 		<p
 			v-if="nbTotal > 0"
-			class="mb-0 font-weight-bold mr-4 my-3"
+			class="mb-0 font-weight-bold mr-4 mr-sm-0 my-3"
 			data-test-id="nb-rows"
 		>
 			{{ displayNbRows }}
 		</p>
 
+		<slot name="filters" />
+
 		<div class="sy-table-toolbar__search">
 			<slot name="search-left" />
 			<VTextField
@@ -109,6 +117,16 @@
 
 .sy-table-toolbar {
 	min-height: 56px;
+
+	:deep(.v-toolbar__content) {
+		width: 100%;
+		flex-wrap: wrap;
+		flex-direction: row !important;
+
+		@media (width <= 600px) {
+			flex-direction: column !important;
+		}
+	}
 }
 
 .loading :deep(.v-field__append-inner) {
@@ -125,6 +143,10 @@
 	grid-auto-flow: column;
 	margin-left: auto;
 	align-items: end;
+
+	@media (width <= 600px) {
+		margin-left: 0;
+	}
 }
 
 .sy-form-input {
@@ -134,11 +156,6 @@
 .sy-form-input--s {
 	z-index: 1; // Display content above the table on mobile
 	contain: none; // Allow fixed elements to be displayed properly
-
-	:deep(.v-toolbar__content) {
-		width: 100%;
-		flex-wrap: wrap;
-	}
 }
 
 .sy-table-toolbar.v-theme--dark :deep() {

package/src/components/TableToolbar/config.ts

@@ -8,14 +8,15 @@ export const config = {
 	addBtn: {
 		variant: 'outlined',
 		color: 'primary',
-		class: 'my-1 px-2 px-md-4',
+		class: 'px-2 px-md-4',
 		minWidth: '44px',
+		height: '40px',
 	},
 	addIconLabel: {
 		class: 'mr-1',
 	},
 	textField: {
-		variant: 'underlined',
+		variant: 'outlined',
 		clearable: true,
 		singleLine: true,
 		hideDetails: true,

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

@@ -27,6 +27,7 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       5/5 lignes
@@ -36,9 +37,9 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -48,8 +49,9 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -193,7 +195,9 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -243,6 +247,7 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1 ligne
@@ -253,10 +258,10 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
         loading
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--disabled
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -266,9 +271,10 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--disabled
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -387,7 +393,9 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -437,6 +445,7 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1 ligne
@@ -446,9 +455,9 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -458,8 +467,9 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -603,7 +613,9 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -653,6 +665,7 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1 ligne
@@ -662,9 +675,9 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -674,8 +687,9 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -819,7 +833,9 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -871,9 +887,9 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -883,8 +899,9 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -1028,7 +1045,9 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -1079,6 +1098,7 @@ exports[`TableToolbar > should render 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1/2 lignes
@@ -1088,9 +1108,9 @@ exports[`TableToolbar > should render 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -1100,8 +1120,9 @@ exports[`TableToolbar > should render 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -1245,7 +1266,9 @@ exports[`TableToolbar > should render 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>

package/src/components/index.ts

@@ -4,6 +4,7 @@ export type { RuleOptions } from '../composables/rules/useFieldValidation'
 export { useNotificationService } from '../services/NotificationService'
 export { useValidation } from '../composables/validation/useValidation'
 export { useDateFormat } from '../composables/date/useDateFormatDayjs'
+export { default as Accordion } from './Accordion/Accordion.vue'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as ChipList } from './ChipList/ChipList.vue'
@@ -23,6 +24,7 @@ export { default as DataList } from './DataList/DataList.vue'
 export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
 export { default as DataListItem } from './DataListItem/DataListItem.vue'
 export { default as DialogBox } from './DialogBox/DialogBox.vue'
+export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
@@ -66,6 +68,7 @@ export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as SyTextArea } from './SyTextArea/SyTextArea.vue'
 export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'

package/src/composables/date/useHolidayDay.ts

@@ -0,0 +1,98 @@
+/**
+ * Composable pour la gestion des jours fériés
+ */
+
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+// Étendre dayjs avec le plugin customParseFormat
+dayjs.extend(customParseFormat)
+
+/**
+ * Algorithme de GAUSS pour calculer la date de Pâques
+ * @param annee - L'année pour laquelle calculer la date de Pâques
+ * @returns Un objet contenant le jour et le mois de Pâques
+ */
+function calculPaquesGregorienne(annee: number): { jour: number, mois: number } {
+	const val1 = (19 * (annee % 19) + 24) % 30
+	const val2 = (2 * (annee % 4) + 4 * (annee % 7) + 6 * val1 + 5) % 7
+	const sum = val1 + val2
+
+	let jourPaques: number
+	let moisPaques: number
+
+	if (sum <= 9) {
+		jourPaques = sum + 22
+		moisPaques = 3
+	}
+	else {
+		jourPaques = sum - 9
+		moisPaques = 4
+	}
+
+	return { jour: jourPaques, mois: moisPaques }
+}
+
+/**
+ * Calcule les jours fériés d'une année donnée
+ * @param annee - L'année pour laquelle calculer les jours fériés
+ * @param format - Format des jours fériés en retour (défaut : "DD/MM/YYYY")
+ * @returns Un Set contenant la liste des jours fériés
+ */
+export function getJoursFeries(annee: number, format = 'DD/MM/YYYY'): Set<string> {
+	const { jour: jourPaques, mois: moisPaques } = calculPaquesGregorienne(annee)
+	const formatDay = (date: dayjs.Dayjs) => date.format(format)
+
+	const jours = new Set([
+		formatDay(dayjs(`01/01/${annee}`, 'DD/MM/YYYY')), // Jour de l'an
+		formatDay(dayjs(new Date(annee, moisPaques - 1, jourPaques + 1))), // Lundi de Pâques
+		formatDay(dayjs(`01/05/${annee}`, 'DD/MM/YYYY')), // Fête du travail
+		formatDay(dayjs(`08/05/${annee}`, 'DD/MM/YYYY')), // Victoire des alliés
+		formatDay(dayjs(new Date(annee, moisPaques - 1, jourPaques + 39))), // Ascension
+		formatDay(dayjs(new Date(annee, moisPaques - 1, jourPaques + 50))), // Lundi de Pentecôte
+		formatDay(dayjs(`14/07/${annee}`, 'DD/MM/YYYY')), // Fête Nationale
+		formatDay(dayjs(`15/08/${annee}`, 'DD/MM/YYYY')), // Assomption
+		formatDay(dayjs(`01/11/${annee}`, 'DD/MM/YYYY')), // Toussaint
+		formatDay(dayjs(`11/11/${annee}`, 'DD/MM/YYYY')), // Armistice
+		formatDay(dayjs(`25/12/${annee}`, 'DD/MM/YYYY')), // Noël
+	])
+
+	return jours
+}
+
+/**
+ * Vérifie si une date est un jour férié
+ * @param date - La date à vérifier (Date ou string)
+ * @param format - Format de la date si elle est fournie en string (défaut : "DD/MM/YYYY")
+ * @returns true si la date est un jour férié, false sinon
+ */
+export function isHolidayDay(date: Date | string, format = 'DD/MM/YYYY'): boolean {
+	// Convertir la date en objet dayjs
+	const dateObj = typeof date === 'string'
+		? dayjs(date, format)
+		: dayjs(date)
+
+	if (!dateObj.isValid()) {
+		return false
+	}
+
+	const annee = dateObj.year()
+	const joursFeries = getJoursFeries(annee, format)
+
+	// Vérifier si la date formatée est dans l'ensemble des jours fériés
+	return joursFeries.has(dateObj.format(format))
+}
+
+/**
+ * Hook composable pour la gestion des jours fériés
+ * @returns Fonctions pour gérer les jours fériés
+ */
+export function useHolidayDay() {
+	return {
+		getJoursFeries,
+		isHolidayDay,
+		calculPaquesGregorienne,
+	}
+}
+
+export default useHolidayDay

package/src/composables/rules/useFieldValidation.ts

@@ -1,6 +1,9 @@
 // Regular expressions
 export const EMAIL_REGEXP = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
 
+// Import du composable pour les jours fériés
+import { useHolidayDay } from '@/composables/date/useHolidayDay'
+
 export type ValidationResult = {
 	success?: string
 	error?: string
@@ -291,14 +294,24 @@ export function useFieldValidation() {
 					)
 				}
 
+				case 'isHolidayDay': {
+					const { isHolidayDay } = useHolidayDay()
+					const dateValue = new Date(value)
+
+					return createValidationResult(
+						!isHolidayDay(dateValue),
+						options.message || options.warningMessage || `${identifier} n'est pas un jour férié.`,
+					)
+				}
+
 				case 'custom': {
 					const result = options.validate?.(value)
 					if (result === true) {
-						return { success: baseMessages.success }
+						return { success: options.successMessage || baseMessages.success }
 					}
 					return options.isWarning
-						? { warning: typeof result === 'string' ? result : baseMessages.warning }
-						: { error: typeof result === 'string' ? result : baseMessages.error }
+						? { warning: typeof result === 'string' ? result : options.warningMessage || baseMessages.warning }
+						: { error: typeof result === 'string' ? result : options.message || baseMessages.error }
 				}
 
 				default:

package/src/composables/validation/useValidation.ts

@@ -94,7 +94,8 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		})
 
 		// Si pas d'erreur, ajouter le message de succès ou un message par défaut
-		if (!hasValidationError && value && options.showSuccessMessages !== false) {
+		// Mais seulement si aucun customSuccessRules n'est défini pour éviter la duplication
+		if (!hasValidationError && value && options.showSuccessMessages !== false && (!successRules || successRules.length === 0)) {
 			const customSuccessMessage = rules.find(rule => rule.options.successMessage)?.options.successMessage
 			if (customSuccessMessage) {
 				successes.value.push(customSuccessMessage)

package/src/designTokens/tokens/pa/paLightTheme.ts

@@ -2,48 +2,17 @@ import { paColorsTokens } from './paColors'
 import { paSemanticTokens } from '../pa/paSemantic'
 
 export const paLightTheme = {
-	primary: '#0062ac',
-	secondary: '#ac1c81',
-	accent: '#6f42c1',
-	error: '#B6052A',
-	info: '#0062AC',
-	success: '#73A839',
-	warning: '#FD7E14',
-	avatar: '#0062AC',
-	blue: '#007bff',
-	blueBase: '#007bff',
-	indigo: '#6610f2',
-	indigoBase: '#6610f2',
-	purple: '#6f42c1',
-	purpleBase: '#6f42c1',
-	pink: '#e83e8c',
-	pinkBase: '#e83e8c',
-	red: '#dc3545',
-	redBase: '#dc3545',
-	orange: '#fd7e14',
-	orangeBase: '#fd7e14',
-	yellow: '#ffc107',
-	yellowBase: '#ffc107',
-	green: '#28a745',
-	greenBase: '#28a745',
-	teal: '#20c997',
-	tealBase: '#20c997',
-	cyan: '#17a2b8',
-	cyanBase: '#17a2b8',
-	gray: '#8a8b8b',
-	grayBase: '#8a8b8b',
-	grayDark: '#343434',
-	grayDarkBase: '#343434',
+	primary: paColorsTokens.blue.base,
+	secondary: paColorsTokens.cyan.darken40,
+	accent: paColorsTokens.cyan.base,
+	error: paColorsTokens.orange.darken20,
+	info: paColorsTokens.blue.base,
+	avatar: paColorsTokens.cyan.darken20,
+	success: paColorsTokens.turquoise.darken60,
+	warning: paColorsTokens.yellow.darken60,
 	risquePro: paColorsTokens.brick.base,
-	light: '#f4f5f1',
-	dark: '#343434',
-	default: '#b7cbd6',
-	brand: '#4a3f59',
-	brandSecondary: '#ac1c81',
-	brandMuted: '#b7cbd6',
-	brandMutedLite: '#E7F3F9',
-	hilitePrimary: '#0062ac',
-	hiliteSecondary: '#e6bebf',
+	light: paColorsTokens.grey.lighten60,
+	dark: paColorsTokens.grey.darken80,
 	onBackground: paSemanticTokens.colors.background.surface,
 	onSurfaceAlt: paSemanticTokens.colors.background.surfaceAlt,
 	onSurface: paSemanticTokens.colors.background.surface,

package/src/stories/Accessibilite/Introduction.mdx

@@ -16,8 +16,11 @@ C'est pourquoi et sauf exception motivée, toute nouvelle demande d'audit d'acce
 L'objectif ici est d'anticiper les erreurs et diluer l'effort de mise en conformité tout au long du processus de fabrication afin de ne pas attendre le résultat de l'audit pour réécrire le produit.<br/>
 Une fois le produit éligible, l'équipe experte de la Filière Digital réalise un audit et communique à l'équipe-produit un rapport comportant des recommandations. Si le produit utilise le DS CNAM et que des problèmes sont identifiés associés à ce dernier, les évolutions seront portés directement par la Filière Digital, en cas contraire il est demandé à l'équipe-produit de corriger les anomalies et de mettre à jour en autonomie le rapport d'audit pour atteindre la pleine conformité.
 
-Conscient que tous les produits ne peuvent pas utiliser dans l’immédiat le Design System thème Cnam ou thème Portail Agent, nous avons conçu le kit de pré-audit pour qu’il puisse fonctionner en autonomie.<br/>
-Si vous avez besoin d’un accompagnement sur le sujet, merci de prendre contact avec valentin.becquet@assurance-maladie.fr.
+Conscient que tous les produits ne peuvent pas utiliser dans l’immédiat le Design System thème Cnam ou thème Portail Agent, nous avons conçu le kit de pré-audit pour qu’il puisse fonctionner en autonomie.
+
+Si vous avez besoin d’un accompagnement sur le sujet, merci de prendre contact avec [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr).
+
+Pour toute remontée de problème liée à l’accessibilité, veuillez ouvrir une issue à l’adresse suivante : [Signaler un problème d'accessibilité](https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=accessibility.md)
 
 Vous trouverez dans ce dossier 3 principales rubriques :