@cnamts/synapse 0.0.15-alpha → 1.0.0

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/Avancement/Avancement.mdx

@@ -0,0 +1,12 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import * as AvancementStories from './Avancement.stories.ts';
+
+<Meta of={AvancementStories} />
+
+# Outils de pré-audit
+
+<Story of={AvancementStories.PreAudit} />
+
+# Contrôle manuel
+
+<Story of={AvancementStories.Manuel} />

package/src/stories/Accessibilite/Avancement/Avancement.stories.ts

@@ -0,0 +1,134 @@
+import type { StoryObj } from '@storybook/vue3'
+import { computed } from 'vue'
+
+export default {
+	title: 'Accessibilité/Avancement',
+}
+
+export const PreAudit: StoryObj = {
+	render: () => {
+		return {
+			setup() {},
+			template: `
+				<v-chip
+					class="ma-2"
+					color="success"
+					variant="elevated"
+				>
+					50/50 Composants
+				</v-chip>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Manuel: StoryObj = {
+	render: () => {
+		return {
+			setup() {
+				const headers = [
+					{ text: 'Composant', value: 'composant' },
+					{ text: 'Statut', value: 'status' },
+				]
+
+				const items = [
+					{ composant: 'PageContainer', status: 'Audité' },
+					{ composant: 'SkipLink', status: 'Audité' },
+					{ composant: 'Alerts', status: 'Audité' },
+					{ composant: 'NotificationBar', status: 'Non audité' },
+					{ composant: 'BackBtn', status: 'Audité' },
+					{ composant: 'BackToTopBtn', status: 'Audité' },
+					{ composant: 'CopyBtn', status: 'Audité' },
+					{ composant: 'LangBtn', status: 'Audité' },
+					{ composant: 'DownloadBtn', status: 'Audité' },
+					{ composant: 'FranceConnectBtn', status: 'Audité' },
+					{ composant: 'SyTextField', status: 'Audité' },
+					{ composant: 'HeaderBar', status: 'Non audité' },
+					{ composant: 'HeaderNavigationBar', status: 'Non audité' },
+					{ composant: 'LogoBrandSection', status: 'Non audité' },
+					{ composant: 'SubHeader', status: 'Non audité' },
+					{ composant: 'HeaderLoading', status: 'Non audité' },
+					{ composant: 'HeaderToolbar', status: 'Non audité' },
+					{ composant: 'Footer', status: 'Non audité' },
+					{ composant: 'SySelect', status: 'Non audité' },
+					{ composant: 'SyInputSelect', status: 'Non audité' },
+					{ composant: 'Logo', status: 'Non audité' },
+					{ composant: 'DataListGroup', status: 'Non audité' },
+					{ composant: 'DataList', status: 'Non audité' },
+					{ composant: 'DataListItem', status: 'Non audité' },
+					{ composant: 'DataListLoading', status: 'Non audité' },
+					{ composant: 'ErrorPage', status: 'Non audité' },
+					{ composant: 'CookieBanner', status: 'Non audité' },
+					{ composant: 'ExternalLinks', status: 'Non audité' },
+					{ composant: 'ContextualMenu', status: 'Non audité' },
+					{ composant: 'DialogBox', status: 'Non audité' },
+					{ composant: 'PasswordField', status: 'Non audité' },
+					{ composant: 'PhoneField', status: 'Non audité' },
+					{ composant: 'UserMenuBtn', status: 'Non audité' },
+					{ composant: 'SyBtnSelect', status: 'Non audité' },
+					{ composant: 'NirField', status: 'Non audité' },
+					{ composant: 'PeriodField', status: 'Non audité' },
+					{ composant: 'RangeField', status: 'Non audité' },
+					{ composant: 'SearchListField', status: 'Non audité' },
+					{ composant: 'SelectBtnField', status: 'Non audité' },
+					{ composant: 'RatingPicker', status: 'Non audité' },
+					{ composant: 'DatePicker', status: 'Non audité' },
+					{ composant: 'FileUpload', status: 'Non audité' },
+					{ composant: 'FilePreview', status: 'Non audité' },
+					{ composant: 'FileList', status: 'Non audité' },
+					{ composant: 'UploadWorkflow', status: 'Non audité' },
+					{ composant: 'ChipList', status: 'Non audité' },
+					{ composant: 'FilterInline', status: 'Non audité' },
+					{ composant: 'FilterSideBar', status: 'Non audité' },
+					{ composant: 'PaginatedTable', status: 'Non audité' },
+					{ composant: 'TableToolbar', status: 'Non audité' },
+				]
+
+				const totalItems = computed(() => items.length)
+
+				const checkedItems = computed(() => {
+					return items.filter(item => item.status === 'Audité').length
+				})
+
+				return { headers, items, totalItems, checkedItems }
+			},
+			template: `
+				<v-chip
+					class="ma-2"
+					color="warning"
+					variant="elevated"
+				>
+					{{checkedItems}}/{{totalItems}} Composants
+				</v-chip>
+
+				<v-data-table
+					:items="items"
+					:items-per-page="10"
+					class="elevation-1 mt-4"
+					item-value="composant"
+				>
+					<template #header.composant>
+						<span class="font-weight-bold">Composant</span>
+					</template>
+					<template #header.status>
+						<span class="font-weight-bold">Status</span>
+					</template>
+					<template #item.composant="{ item }">
+						{{ item.composant }}
+					</template>
+					<template #item.status="{ item }">
+						<v-chip
+							:color="item.status === 'Audité' ? 'success' : 'warning'"
+							variant="flat"
+							small
+						>
+							{{ item.status }}
+						</v-chip>
+					</template>
+				</v-data-table>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

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 :
 

package/src/stories/DesignTokens/colors.stories.ts

@@ -45,13 +45,12 @@ export const Base: StoryObj = {
 					'risque-pro': cnamLightTheme.risquePro,
 				}
 				const paColors = {
-					'primary': paLightTheme.primary,
-					'secondary': paLightTheme.secondary,
-					'error': paLightTheme.error,
-					'info': paLightTheme.info,
-					'success': paLightTheme.success,
-					'warning': paLightTheme.warning,
-					'risque-pro': paLightTheme.risquePro,
+					primary: paLightTheme.primary,
+					secondary: paLightTheme.secondary,
+					error: paLightTheme.error,
+					info: paLightTheme.info,
+					success: paLightTheme.success,
+					warning: paLightTheme.warning,
 				}
 				return {
 					cnamColors,
@@ -82,29 +81,10 @@ export const Others: StoryObj = {
 					dark: cnamLightTheme.dark,
 				}
 				const paColors = {
-					'avatar': paLightTheme.avatar,
-					'accent': paLightTheme.accent,
-					'light': paLightTheme.light,
-					'dark': paLightTheme.dark,
-					'blue': paLightTheme.blue,
-					'indigo': paLightTheme.indigo,
-					'purple': paLightTheme.purple,
-					'pink': paLightTheme.pink,
-					'red': paLightTheme.red,
-					'orange': paLightTheme.orange,
-					'yellow': paLightTheme.yellow,
-					'green': paLightTheme.green,
-					'teal': paLightTheme.teal,
-					'cyan': paLightTheme.cyan,
-					'gray': paLightTheme.gray,
-					'grayDark': paLightTheme.grayDark,
-					'default': paLightTheme.default,
-					'brand': paLightTheme.brand,
-					'brand-secondary': paLightTheme.brandSecondary,
-					'brand-muted': paLightTheme.brandMuted,
-					'brand-mutedLite': paLightTheme.brandMutedLite,
-					'hilite-primary': paLightTheme.hilitePrimary,
-					'hilite-secondary': paLightTheme.hiliteSecondary,
+					accent: paLightTheme.accent,
+					avatar: paLightTheme.avatar,
+					light: paLightTheme.light,
+					dark: paLightTheme.dark,
 				}
 				return {
 					cnamColors,
@@ -748,7 +728,14 @@ export const Interactive: StoryObj = {
 					'interactive-disabled': cnamLightTheme.interactiveDisabled,
 					'interactive-hover-on-selected': cnamLightTheme.interactiveHoverOnSelected,
 				}
-				const paColors = {}
+				const paColors = {
+					'interactive-default': paLightTheme.interactiveDefault,
+					'interactive-hover': paLightTheme.interactiveHover,
+					'interactive-pressed': paLightTheme.interactivePressed,
+					'interactive-focus': paLightTheme.interactiveFocus,
+					'interactive-disabled': paLightTheme.interactiveDisabled,
+					'interactive-hover-on-selected': paLightTheme.interactiveHoverOnSelected,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -786,7 +773,21 @@ export const Border: StoryObj = {
 					'border-disabled': cnamLightTheme.borderDisabled,
 					'border-disabled-on-dark': cnamLightTheme.borderDisabledOnDark,
 				}
-				const paColors = {}
+				const paColors = {
+					'border-darker': paLightTheme.borderDarker,
+					'border-base': paLightTheme.borderBase,
+					'border-subdued': paLightTheme.borderSubdued,
+					'border-accent': paLightTheme.borderAccent,
+					'border-accent-contrasted': paLightTheme.borderAccentContrasted,
+					'border-accent-on-dark': paLightTheme.borderAccentOnDark,
+					'border-info': paLightTheme.borderInfo,
+					'border-success': paLightTheme.borderSuccess,
+					'border-warning': paLightTheme.borderWarning,
+					'border-error': paLightTheme.borderError,
+					'border-on-dark': paLightTheme.borderOnDark,
+					'border-disabled': paLightTheme.borderDisabled,
+					'border-disabled-on-dark': paLightTheme.borderDisabledOnDark,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -823,7 +824,20 @@ export const Text: StoryObj = {
 					'text-subdued-on-dark': cnamLightTheme.textSubduedOnDark,
 					'text-disabled-on-dark': cnamLightTheme.textDisabledOnDark,
 				}
-				const paColors = {}
+				const paColors = {
+					'text-base': paLightTheme.textBase,
+					'text-accent': paLightTheme.textAccent,
+					'text-accent-contrasted': paLightTheme.textAccentContrasted,
+					'text-subdued': paLightTheme.textSubdued,
+					'text-info': paLightTheme.textInfo,
+					'text-success': paLightTheme.textSuccess,
+					'text-warning': paLightTheme.textWarning,
+					'text-error': paLightTheme.textError,
+					'text-disabled': paLightTheme.textDisabled,
+					'text-on-dark': paLightTheme.textOnDark,
+					'text-subdued-on-dark': paLightTheme.textSubduedOnDark,
+					'text-disabled-on-dark': paLightTheme.textDisabledOnDark,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -859,7 +873,20 @@ export const Icons: StoryObj = {
 					'icon-disabled': cnamLightTheme.iconDisabled,
 					'icon-disabled-on-dark': cnamLightTheme.iconDisabledOnDark,
 				}
-				const paColors = {}
+				const paColors = {
+					'icon-base': paLightTheme.iconBase,
+					'icon-subdued': paLightTheme.iconSubdued,
+					'icon-subdued-on-dark': paLightTheme.iconSubduedOnDark,
+					'icon-accent': paLightTheme.iconAccent,
+					'icon-accent-contrasted': paLightTheme.iconAccentContrasted,
+					'icon-info': paLightTheme.iconInfo,
+					'icon-success': paLightTheme.iconSuccess,
+					'icon-warning': paLightTheme.iconWarning,
+					'icon-error': paLightTheme.iconError,
+					'icon-on-dark': paLightTheme.iconOnDark,
+					'icon-disabled': paLightTheme.iconDisabled,
+					'icon-disabled-on-dark': paLightTheme.iconDisabledOnDark,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -887,7 +914,11 @@ export const MainBackgrounds: StoryObj = {
 					'background-surface': cnamLightTheme.backgroundSurface,
 					'background-surface-alt': cnamLightTheme.backgroundSurfaceAlt,
 				}
-				const paColors = {}
+				const paColors = {
+					'background-main': paLightTheme.backgroundMain,
+					'background-surface': paLightTheme.backgroundSurface,
+					'background-surface-alt': paLightTheme.backgroundSurfaceAlt,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -917,7 +948,13 @@ export const AlternativeBackgrounds: StoryObj = {
 					'background-accent-contrasted': cnamLightTheme.backgroundAccentContrasted,
 					'background-accent-alt': cnamLightTheme.backgroundAccentAlt,
 				}
-				const paColors = {}
+				const paColors = {
+					'background-mainAlt': paLightTheme.backgroundMainAlt,
+					'background-raised': paLightTheme.backgroundRaised,
+					'background-accent': paLightTheme.backgroundAccent,
+					'background-accent-contrasted': paLightTheme.backgroundAccentContrasted,
+					'background-accent-alt': paLightTheme.backgroundAccentAlt,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -945,7 +982,11 @@ export const InformationalBackgrounds: StoryObj = {
 					'background-info-subdued': cnamLightTheme.backgroundInfoSubdued,
 					'background-info-contrasted': cnamLightTheme.backgroundInfoContrasted,
 				}
-				const paColors = {}
+				const paColors = {
+					'background-info': paLightTheme.backgroundInfo,
+					'background-info-subdued': paLightTheme.backgroundInfoSubdued,
+					'background-info-contrasted': paLightTheme.backgroundInfoContrasted,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -973,7 +1014,11 @@ export const SuccessBackgrounds: StoryObj = {
 					'background-success-subdued': cnamLightTheme.backgroundSuccessSubdued,
 					'background-success-contrasted': cnamLightTheme.backgroundSuccessContrasted,
 				}
-				const paColors = {}
+				const paColors = {
+					'background-success': paLightTheme.backgroundSuccess,
+					'background-success-subdued': paLightTheme.backgroundSuccessSubdued,
+					'background-success-contrasted': paLightTheme.backgroundSuccessContrasted,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -1001,7 +1046,11 @@ export const WarningBackgrounds: StoryObj = {
 					'background-warning-subdued': cnamLightTheme.backgroundWarningSubdued,
 					'background-warning-contrasted': cnamLightTheme.backgroundWarningContrasted,
 				}
-				const paColors = {}
+				const paColors = {
+					'background-warning': paLightTheme.backgroundWarning,
+					'background-warning-subdued': paLightTheme.backgroundWarningSubdued,
+					'background-warning-contrasted': paLightTheme.backgroundWarningContrasted,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -1029,7 +1078,11 @@ export const ErrorBackgrounds: StoryObj = {
 					'background-error-subdued': cnamLightTheme.backgroundErrorSubdued,
 					'background-error-contrasted': cnamLightTheme.backgroundErrorContrasted,
 				}
-				const paColors = {}
+				const paColors = {
+					'background-error': paLightTheme.backgroundError,
+					'background-error-subdued': paLightTheme.backgroundErrorSubdued,
+					'background-error-contrasted': paLightTheme.backgroundErrorContrasted,
+				}
 				return {
 					cnamColors,
 					paColors,
@@ -1059,7 +1112,13 @@ export const OtherBackgrounds: StoryObj = {
 					'background-professionnel': cnamLightTheme.backgroundProfessionnel,
 					'background-entreprise': cnamLightTheme.backgroundEntreprise,
 				}
-				const paColors = {}
+				const paColors = {
+					'background-disabled': paLightTheme.backgroundDisabled,
+					'background-disabled-on-dark': paLightTheme.backgroundDisabledOnDark,
+					'background-assure': paLightTheme.backgroundAssure,
+					'background-professionnel': paLightTheme.backgroundProfessionnel,
+					'background-entreprise': paLightTheme.backgroundEntreprise,
+				}
 				return {
 					cnamColors,
 					paColors,

package/src/utils/rules/index.ts

@@ -9,3 +9,4 @@ export * from './isNotBeforeToday/index'
 export * from './isNotAfterToday/index'
 export * from './isRequired/index'
 export * from './isValidEmail/index'
+export * from './isHolidayDay/index'

package/src/utils/rules/isHolidayDay/IsHolidayDay.mdx

@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Guide du dev/Règles De Validation/isHolidayDay" />
+
+# isHolidayDay
+
+La règle `isHolidayDay` vérifie qu'une date n'est pas un jour férié en France.
+
+## Utilisation
+
+```ts
+import { isHolidayDay } from '@/utils/isHolidayDay'
+
+const rules = [
+  isHolidayDay,
+]
+```
+
+## Personnalisation des messages d'erreur
+
+Vous pouvez personnaliser le message d'erreur en utilisant la fonction `isHolidayDayFn` :
+
+```ts
+import { isHolidayDayFn } from '@/utils/isHolidayDay'
+
+const customRule = isHolidayDayFn({
+  default: 'Veuillez sélectionner une date qui n\'est pas un jour férié.',
+})
+```
+
+## Fonctionnement
+
+Cette règle utilise le composable `useHolidayDay` pour déterminer si une date est un jour férié en France. La règle retourne :
+
+- `true` si la valeur est vide ou si la date n'est pas un jour férié
+- Un message d'erreur si la date est un jour férié
+
+## Jours fériés pris en compte
+
+Les jours fériés suivants sont pris en compte :
+
+- 1er janvier (Jour de l'an)
+- Lundi de Pâques (date variable)
+- 1er mai (Fête du travail)
+- 8 mai (Victoire des alliés)
+- Ascension (date variable)
+- Lundi de Pentecôte (date variable)
+- 14 juillet (Fête Nationale)
+- 15 août (Assomption)
+- 1er novembre (Toussaint)
+- 11 novembre (Armistice)
+- 25 décembre (Noël)