@cnamts/synapse 0.0.13-alpha → 0.0.14-alpha

package/src/composables/date/useDatePickerAccessibility.ts

@@ -5,9 +5,49 @@ import { nextTick } from 'vue'
 
 /**
  * Améliore l'accessibilité du DatePicker en ajoutant des attributs ARIA et des instructions pour les lecteurs d'écran
- * @returns Une fonction pour mettre à jour l'accessibilité du DatePicker
+ * @returns Des fonctions pour mettre à jour l'accessibilité du DatePicker et gérer les événements clavier
  */
 export function useDatePickerAccessibility() {
+	// Référence pour suivre si l'événement a déjà été traité
+	let isProcessingEnterKey = false
+
+	/**
+	 * Gestionnaire d'événements clavier pour simuler le comportement de la touche espace avec la touche entrée
+	 * @param event L'événement clavier
+	 */
+	const handleKeyDown = (event: Event): void => {
+		const keyboardEvent = event as KeyboardEvent
+		// Si la touche entrée est pressée et que nous ne sommes pas déjà en train de traiter un événement
+		if (keyboardEvent.key === 'Enter' && !isProcessingEnterKey) {
+			// Marquer que nous sommes en train de traiter l'événement pour éviter les doublons
+			isProcessingEnterKey = true
+
+			// Empêcher le comportement par défaut de la touche entrée
+			keyboardEvent.preventDefault()
+
+			// Récupérer l'élément actuellement focalisé
+			const focusedElement = document.activeElement
+
+			// Simuler un événement de touche espace
+			if (focusedElement && focusedElement instanceof HTMLElement) {
+				// Créer et déclencher un événement de clic qui simule le comportement de l'espace
+				const clickEvent = new MouseEvent('click', {
+					bubbles: true,
+					cancelable: true,
+					view: window,
+				})
+
+				// Déclencher un seul événement de clic
+				focusedElement.dispatchEvent(clickEvent)
+			}
+
+			// Réinitialiser l'état après un délai pour permettre le traitement des autres événements
+			setTimeout(() => {
+				isProcessingEnterKey = false
+			}, 100)
+		}
+	}
+
 	/**
 	 * Met à jour les attributs d'accessibilité du DatePicker
 	 * Ajoute des attributs ARIA et des instructions pour les lecteurs d'écran
@@ -64,14 +104,19 @@ export function useDatePickerAccessibility() {
 			srOnlyHtmlEl.style.clip = 'rect(0, 0, 0, 0)'
 			srOnlyHtmlEl.style.whiteSpace = 'nowrap'
 			srOnlyHtmlEl.style.border = '0'
-			srOnlyEl.textContent = 'Utilisez les flèches pour naviguer entre les dates et Entrée pour sélectionner une date'
-
+			srOnlyEl.textContent = 'Utilisez tab pour naviguer entre les dates et Entrée ou Espace pour sélectionner une date'
 			datePickerEl.prepend(srOnlyEl)
 		}
+
+		// Ajouter un gestionnaire d'événements clavier pour la touche entrée
+		// Utiliser des casts explicites pour rassurer TypeScript sur les types
+		datePickerEl.removeEventListener('keydown', handleKeyDown as EventListener) // Supprimer d'abord pour éviter les doublons
+		datePickerEl.addEventListener('keydown', handleKeyDown as EventListener)
 	}
 
 	return {
 		updateAccessibility,
+		handleKeyDown,
 	}
 }
 

package/src/designTokens/tokens/cnam/cnamColors.ts

@@ -156,16 +156,11 @@ export const cnamColorsTokens = {
 		lighten97: '#fafafa',
 	},
 	white: {
-		20: 'rgba(255, 255, 255, 0.2000)',
-		38: 'rgba(255, 255, 255, 0.3800)',
-		40: 'rgba(255, 255, 255, 0.4000)',
-		70: 'rgba(255, 255, 255, 0.7000)',
-		8: 'rgba(255, 255, 255, 0.0800)',
-		0: 'rgba(255, 255, 255, 0.0000)',
+		lighten20: 'rgba(255, 255, 255, 0.20)',
+		lighten38: 'rgba(255, 255, 255, 0.38)',
+		lighten40: 'rgba(255, 255, 255, 0.40)',
+		lighten70: 'rgba(255, 255, 255, 0.70)',
+		lighten8: 'rgba(255, 255, 255, 0.080)',
 		base: '#ffffff',
 	},
-	transparentBlue: {
-		transparentBlue18: '#a6d4eb',
-		transparentBlue8: '#ebf0f7',
-	},
 }

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -88,6 +88,4 @@ export const cnamLightTheme = {
 	iconOnDark: cnamSemanticTokens.colors.icon.onDark,
 	iconDisabled: cnamSemanticTokens.colors.icon.disabled,
 	iconDisabledOnDark: cnamSemanticTokens.colors.icon.disabledOnDark,
-	transparentBlue18: cnamColorsTokens.blue.base,
-	transparentBlue8: cnamColorsTokens.transparentBlue.transparentBlue8,
 }

package/src/designTokens/tokens/cnam/cnamSemantic.ts

@@ -22,7 +22,7 @@ export const cnamSemanticTokens = {
 			errorSubdued: '#fcedeb',
 			errorContrasted: '#b33f2e',
 			disabled: '#dddede',
-			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.08)',
 			assure: '#ed76b3',
 			professionnel: '#66c9ec',
 			entreprise: '#f0b323',
@@ -76,11 +76,11 @@ export const cnamSemanticTokens = {
 			onLight: '#0c419a',
 		},
 		interactive: {
-			default: 'rgba(255, 255, 255, 0.0000)',
+			default: 'rgba(255, 255, 255, 0)',
 			hover: '#e7ecf5',
 			pressed: '#ced9eb',
 			focus: '#e7ecf5',
-			disabled: 'rgba(255, 255, 255, 0.0000)',
+			disabled: 'rgba(255, 255, 255, 0)',
 			hoverOnSelected: '#ced9eb',
 		},
 	},

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

@@ -156,16 +156,11 @@ export const paColorsTokens = {
 		lighten97: '#fafafa',
 	},
 	white: {
-		20: 'rgba(255, 255, 255, 0.2000)',
-		38: 'rgba(255, 255, 255, 0.3800)',
-		40: 'rgba(255, 255, 255, 0.4000)',
-		70: 'rgba(255, 255, 255, 0.7000)',
-		8: 'rgba(255, 255, 255, 0.0800)',
-		0: 'rgba(255, 255, 255, 0.0000)',
+		lighten20: 'rgba(255, 255, 255, 0.20)',
+		lighten38: 'rgba(255, 255, 255, 0.38)',
+		lighten40: 'rgba(255, 255, 255, 0.40)',
+		lighten70: 'rgba(255, 255, 255, 0.70)',
+		lighten8: 'rgba(255, 255, 255, 0.080)',
 		base: '#ffffff',
 	},
-	transparentBlue: {
-		transparentBlue18: '#a6d4eb',
-		transparentBlue8: '#ebf0f7',
-	},
 }

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

@@ -9,6 +9,7 @@ export const paLightTheme = {
 	info: '#0062AC',
 	success: '#73A839',
 	warning: '#FD7E14',
+	avatar: '#0062AC',
 	blue: '#007bff',
 	blueBase: '#007bff',
 	indigo: '#6610f2',
@@ -59,10 +60,10 @@ export const paLightTheme = {
 	backgroundMain: paSemanticTokens.colors.background.main,
 	backgroundSurface: paSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: paSemanticTokens.colors.background.surfaceAlt,
-	backgroungMainAlt: paSemanticTokens.colors.background.mainAlt,
-	backgroungRaised: paSemanticTokens.colors.background.raised,
+	backgroundMainAlt: paSemanticTokens.colors.background.mainAlt,
+	backgroundRaised: paSemanticTokens.colors.background.raised,
 	backgroundAccent: paSemanticTokens.colors.background.accent,
-	backgroungAccentContrasted: paSemanticTokens.colors.background.accentContrasted,
+	backgroundAccentContrasted: paSemanticTokens.colors.background.accentContrasted,
 	backgroundAccentAlt: paSemanticTokens.colors.background.accentAlt,
 	backgroundInfo: paSemanticTokens.colors.background.info,
 	backgroundInfoSubdued: paSemanticTokens.colors.background.infoSubdued,
@@ -118,6 +119,4 @@ export const paLightTheme = {
 	iconOnDark: paSemanticTokens.colors.icon.onDark,
 	iconDisabled: paSemanticTokens.colors.icon.disabled,
 	iconDisabledOnDark: paSemanticTokens.colors.icon.disabledOnDark,
-	transparentBlue18: paColorsTokens.blue.base,
-	transparentBlue8: paColorsTokens.transparentBlue.transparentBlue8,
 }

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

@@ -22,7 +22,7 @@ export const paSemanticTokens = {
 			errorSubdued: '#fcedeb',
 			errorContrasted: '#b33f2e',
 			disabled: '#dddede',
-			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.08)',
 			assure: '#ed76b3',
 			professionnel: '#66c9ec',
 			entreprise: '#f0b323',
@@ -76,11 +76,11 @@ export const paSemanticTokens = {
 			onLight: '#0c419a',
 		},
 		interactive: {
-			default: 'rgba(255, 255, 255, 0.0000)',
+			default: 'rgba(255, 255, 255, 0)',
 			hover: '#e7ecf5',
 			pressed: '#ced9eb',
 			focus: '#e7ecf5',
-			disabled: 'rgba(255, 255, 255, 0.0000)',
+			disabled: 'rgba(255, 255, 255, 0)',
 			hoverOnSelected: '#ced9eb',
 		},
 	},

package/src/stories/DesignTokens/ColorDisplay.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { VContainer, VRow, VCol, VCard, VCardTitle, VCardSubtitle } from 'vuetify/components'
+
+	interface Props {
+		colorCategory: string
+		cnamColors: Record<string, string>
+		paColors: Record<string, string>
+	}
+
+	const props = defineProps<Props>()
+
+	const theme = computed(() => typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam')
+	const displayColors = computed(() => theme.value === 'cnam' ? props.cnamColors : props.paColors)
+
+	const isEmptyObject = (obj: Record<string, string>) => {
+		return Object.keys(obj).length === 0
+	}
+</script>
+
+<template>
+	<VContainer>
+		<VRow v-if="!isEmptyObject(displayColors)">
+			<VCol
+				v-for="(color, name) in displayColors"
+				:key="name"
+				cols="6"
+				md="3"
+				sm="4"
+			>
+				<VCard color="grey-lighten-4">
+					<VCardTitle style="font-size: medium;">
+						{{ name }}
+					</VCardTitle>
+					<VCardSubtitle>{{ color }}</VCardSubtitle>
+					<VCard
+						height="70px"
+						class="color"
+					>
+						<div :style="{ backgroundColor: color, height: '100%', width: '100%' }" />
+					</VCard>
+				</VCard>
+			</VCol>
+		</VRow>
+		<div
+			v-else
+			class="text-grey"
+		>
+			Couleurs en cours définition.
+		</div>
+	</VContainer>
+</template>
+
+<style lang="scss" scoped>
+	.v-card--variant-elevated.color {
+		background: transparent !important;
+	}
+</style>

package/src/stories/DesignTokens/Colors.mdx

@@ -1,220 +1,89 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
-import { cnamLightTheme } from "@/designTokens/tokens/cnam/cnamLightTheme.ts";
-import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors.ts'
+import { Story, Meta } from '@storybook/blocks';
+import * as ColorsStories from './colors.stories';
 
 <Meta title="Design Tokens/Couleurs" />
 
 # Couleurs
-
-Les couleurs contribuent à l’identification de nos applications ou services et font partie intégrante de la marque Assurance Maladie. Elles assurent l’homogénéité graphique des interfaces.
+<Story of={ColorsStories.Theme} />
 
 ## Couleurs de base
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            primary: cnamColorsTokens.blue.base,
-            secondary: cnamColorsTokens.cyan.darken40,
-            accent: cnamColorsTokens.cyan.base,
-            error: cnamColorsTokens.orange.darken20,
-            info: cnamColorsTokens.blue.base,
-            success: cnamColorsTokens.green.base,
-            warning: cnamColorsTokens.yellow.base,
-            risquePro: cnamColorsTokens.brick.base
-        }}
-    />
-</ColorPalette>
-
-## Interactive Colors
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            interactiveDefault: cnamLightTheme.interactiveDefault,
-            interactiveHover: cnamLightTheme.interactiveHover,
-            interactivePressed: cnamLightTheme.interactivePressed,
-            interactiveFocus: cnamLightTheme.interactiveFocus,
-            interactiveDisabled: cnamLightTheme.interactiveDisabled,
-        }}
-    />
-    <ColorItem
-        colors={{
-            interactiveHoverOnSelected: cnamLightTheme.interactiveHoverOnSelected,
-        }}
-    />
-</ColorPalette>
-
-## Border Colors
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            borderDarker: cnamLightTheme.borderDarker,
-            borderBase: cnamLightTheme.borderBase,
-            borderSubdued: cnamLightTheme.borderSubdued,
-            borderAccent: cnamLightTheme.borderAccent,
-            borderAccentContrasted: cnamLightTheme.borderAccentContrasted,
-            borderAccentOnDark: cnamLightTheme.borderAccentOnDark
-        }}
-    />
-
-    <ColorItem
-        colors={{
-            borderInfo: cnamLightTheme.borderInfo,
-            borderSuccess: cnamLightTheme.borderSuccess,
-            borderWarning: cnamLightTheme.borderWarning,
-            borderError: cnamLightTheme.borderError,
-            borderOnDark: cnamLightTheme.borderOnDark,
-            borderDisabled: cnamLightTheme.borderDisabled,
-            borderDisabledOnDark: cnamLightTheme.borderDisabledOnDark
-        }}
-    />
-</ColorPalette>
-
-## Text Colors
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            textBase: cnamLightTheme.textBase,
-            textAccent: cnamLightTheme.textAccent,
-            textAccentContrasted: cnamLightTheme.textAccentContrasted,
-            textSubdued: cnamLightTheme.textSubdued,
-            textInfo: cnamLightTheme.textInfo,
-            textSuccess: cnamLightTheme.textSuccess
-        }}
-    />
-
-    <ColorItem
-        colors={{
-            textWarning: cnamLightTheme.textWarning,
-            textError: cnamLightTheme.textError,
-            textDisabled: cnamLightTheme.textDisabled,
-            textOnDark: cnamLightTheme.textOnDark,
-            textSubduedOnDark: cnamLightTheme.textSubduedOnDark,
-            textDisabledOnDark: cnamLightTheme.textDisabledOnDark
-        }}
-    />
-</ColorPalette>
+<Story of={ColorsStories.Base} />
+
+## Autres couleurs
+<Story of={ColorsStories.Others} />
+
+## Palette de couleurs
+
+### Orange
+<Story of={ColorsStories.PaletteOrange} />
+
+### Yellow
+<Story of={ColorsStories.PaletteYellow} />
+
+### Green
+<Story of={ColorsStories.PaletteGreen} />
+
+### Turquoise
+<Story of={ColorsStories.PaletteTurquoise} />
+
+### Blue
+<Story of={ColorsStories.PaletteBlue} />
+
+### Cyan
+<Story of={ColorsStories.PaletteCyan} />
+
+### Frosted Blue
+<Story of={ColorsStories.PaletteFrostedBlue} />
+
+### Parma
+<Story of={ColorsStories.PaletteParma} />
+
+### Mauve
+<Story of={ColorsStories.PaletteMauve} />
+
+### Pink
+<Story of={ColorsStories.PalettePink} />
+
+### Brick
+<Story of={ColorsStories.PaletteBrick} />
+
+### Grey
+<Story of={ColorsStories.PaletteGrey} />
+
+### White
+<Story of={ColorsStories.PaletteWhite} />
+
+## Interactive
+<Story of={ColorsStories.Interactive} />
+
+## Border
+<Story of={ColorsStories.Border} />
+
+## Text
+<Story of={ColorsStories.Text} />
 
 ## Icons
-<ColorPalette>
-    <ColorItem
-        colors={{
-            textBase: cnamLightTheme.iconBase,
-            textSubdued: cnamLightTheme.iconSubdued,
-            textSubduedOnDark: cnamLightTheme.iconSubduedOnDark,
-            textAccent: cnamLightTheme.iconAccent,
-            textAccentContrasted: cnamLightTheme.iconAccentContrasted
-        }}
-    />
-
-    <ColorItem
-        colors={{
-            textInfo: cnamLightTheme.iconInfo,
-            textSuccess: cnamLightTheme.iconSuccess,
-            textWarning: cnamLightTheme.iconWarning,
-            textError: cnamLightTheme.iconError,
-            textOnDark: cnamLightTheme.iconOnDark
-        }}
-    />
-
-    <ColorItem
-        colors={{
-            textDisabled: cnamLightTheme.iconDisabled,
-            textDisabledOnDark: cnamLightTheme.iconDisabledOnDark
-        }}
-    />
-</ColorPalette>
-
-## Background Colors
-
-### Main Backgrounds
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            backgroundMain: cnamLightTheme.backgroundMain,
-            backgroundSurface: cnamLightTheme.backgroundSurface,
-            backgroundSurfaceAlt: cnamLightTheme.backgroundSurfaceAlt
-        }}
-    />
-</ColorPalette>
-
-### Alternative Backgrounds
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            backgroundMainAlt: cnamLightTheme.backgroundMainAlt,
-            backgroundRaised: cnamLightTheme.backgroundRaised,
-            backgroundAccent: cnamLightTheme.backgroundAccent,
-            backgroundAccentContrasted: cnamLightTheme.backgroundAccentContrasted,
-            backgroundAccentAlt: cnamLightTheme.backgroundAccentAlt
-        }}
-    />
-</ColorPalette>
-
-### Informational Backgrounds
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            backgroundInfo: cnamLightTheme.backgroundInfo,
-            backgroundInfoSubdued: cnamLightTheme.backgroundInfoSubdued,
-            backgroundInfoContrasted: cnamLightTheme.backgroundInfoContrasted
-        }}
-    />
-</ColorPalette>
-
-### Success Backgrounds
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            backgroundSuccess: cnamLightTheme.backgroundSuccess,
-            backgroundSuccessSubdued: cnamLightTheme.backgroundSuccessSubdued,
-            backgroundSuccessContrasted: cnamLightTheme.backgroundSuccessContrasted
-        }}
-    />
-</ColorPalette>
-
-### Warning Backgrounds
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            backgroundWarning: cnamLightTheme.backgroundWarning,
-            backgroundWarningSubdued: cnamLightTheme.backgroundWarningSubdued,
-            backgroundWarningContrasted: cnamLightTheme.backgroundWarningContrasted
-        }}
-    />
-</ColorPalette>
-
-### Error Backgrounds
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            backgroundError: cnamLightTheme.backgroundError,
-            backgroundErrorSubdued: cnamLightTheme.backgroundErrorSubdued,
-            backgroundErrorContrasted: cnamLightTheme.backgroundErrorContrasted
-        }}
-    />
-</ColorPalette>
-
-### Other Backgrounds
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            backgroundDisabled: cnamLightTheme.backgroundDisabled,
-            backgroundDisabledOnDark: cnamLightTheme.backgroundDisabledOnDark,
-            backgroundAssure: cnamLightTheme.backgroundAssure,
-            backgroundProfessionnel: cnamLightTheme.backgroundProfessionnel,
-            backgroundEntreprise: cnamLightTheme.backgroundEntreprise
-        }}
-    />
-</ColorPalette>
-
-
-## Transparent Background Colors
-
-### Transparent Blues
-<ColorPalette className="vertical-palette">
-    <ColorItem
-        colors={{
-            transparentBlue18: cnamLightTheme.transparentBlue18,
-            transparentBlue8: cnamLightTheme.transparentBlue8
-        }}
-    />
-</ColorPalette>
+<Story of={ColorsStories.Icons} />
+
+## Background
+
+### Main
+<Story of={ColorsStories.MainBackgrounds} />
+
+### Alternative
+<Story of={ColorsStories.AlternativeBackgrounds} />
+
+### Informational
+<Story of={ColorsStories.InformationalBackgrounds} />
+
+### Success
+<Story of={ColorsStories.SuccessBackgrounds} />
+
+### Warning
+<Story of={ColorsStories.WarningBackgrounds} />
+
+### Error
+<Story of={ColorsStories.ErrorBackgrounds} />
+
+### Other
+<Story of={ColorsStories.OtherBackgrounds} />