@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/HeaderBar/HeaderBurgerMenu/tests/HeaderBurgerMenu.visual.cy.ts

@@ -0,0 +1,196 @@
+import { mdiMapMarker } from '@mdi/js'
+import { defineComponent, h } from 'vue'
+import { VBtn, VIcon } from 'vuetify/components'
+import HeaderBurgerMenu from '../HeaderBurgerMenu.vue'
+import HeaderMenuItem from '../HeaderMenuItem/HeaderMenuItem.vue'
+import HeaderMenuSection from '../HeaderMenuSection/HeaderMenuSection.vue'
+import HeaderSubMenu from '../HeaderSubMenu/HeaderSubMenu.vue'
+import { registerHeaderMenuKey } from '../../consts'
+
+type LinkItem = {
+	title: string
+	href: string
+	subtitle?: string
+}
+
+type SubMenuSection = {
+	title: string
+	items: LinkItem[]
+}
+
+type MenuItem = LinkItem | {
+	subMenuTitle: string
+	subMenuSubtitle?: string
+	sections: SubMenuSection[]
+}
+
+type MenuSection = {
+	title: string
+	items: MenuItem[]
+}
+
+const menu: MenuSection[] = [
+	{
+		title: 'Vous informer',
+		items: [
+			{
+				title: 'Actualites',
+				href: 'https://www.ameli.fr/assure/actualites',
+			},
+			{
+				subMenuTitle: 'Droits et demarches',
+				subMenuSubtitle: 'selon votre situation',
+				sections: [
+					{
+						title: 'Droits et demarches',
+						items: [
+							{
+								title: 'Les essentiels de l\'assure',
+								href: 'https://www.ameli.fr/assure/droits-demarches/principes',
+							},
+							{
+								title: 'Parentalite, couple',
+								href: 'https://www.ameli.fr/assure/droits-demarches/famille',
+							},
+						],
+					},
+					{
+						title: 'Vie professionnelle',
+						items: [
+							{
+								title: 'Arret de travail pour maladie',
+								href: 'https://www.ameli.fr/assure/droits-demarches/maladie-accident-hospitalisation/arret-travail-maladie',
+							},
+							{
+								title: 'Accident du travail ou de trajet',
+								href: 'https://www.ameli.fr/assure/droits-demarches/maladie-accident-hospitalisation/accident-travail-trajet',
+							},
+						],
+					},
+				],
+			},
+		],
+	},
+	{
+		title: 'Besoin d\'aide',
+		items: [
+			{
+				title: 'Contacter l\'Assurance Maladie',
+				subtitle: 'obtenir une attestation, envoyer une feuille de soins, contacter sa caisse, etc.',
+				href: 'https://www.ameli.fr/assure/adresses-contacts',
+			},
+			{
+				title: 'Trouver un professionnel de sante',
+				subtitle: 'medecins, infirmiers...',
+				href: 'https://www.ameli.fr/assure/adresses-contacts',
+			},
+		],
+	},
+]
+
+function renderLink(item: LinkItem) {
+	return h('a', { href: item.href }, [
+		item.title,
+		item.subtitle
+			? h('em', { style: 'font-style: normal; color: #757777;' }, item.subtitle)
+			: null,
+	])
+}
+
+function renderMenuItem(item: MenuItem) {
+	if ('subMenuTitle' in item) {
+		return h(HeaderMenuItem, { key: item.subMenuTitle }, {
+			default: () => h(HeaderSubMenu, { innerTag: 'div' }, {
+				title: () => [
+					item.subMenuTitle,
+					item.subMenuSubtitle
+						? h('em', { style: 'font-style: normal; color: #757777;' }, item.subMenuSubtitle)
+						: null,
+				],
+				default: () => item.sections.map(subSection => h(HeaderMenuSection, {
+					key: subSection.title,
+					tag: 'div',
+					showTitle: false,
+				}, {
+					title: () => subSection.title,
+					default: () => subSection.items.map(subItem => h(HeaderMenuItem, { key: subItem.title }, {
+						default: () => renderLink(subItem),
+					})),
+				})),
+			}),
+		})
+	}
+
+	return h(HeaderMenuItem, { key: item.title }, {
+		default: () => renderLink(item),
+	})
+}
+
+const GeneratedMenuContent = defineComponent({
+	name: 'GeneratedMenuContent',
+	setup() {
+		return () => [
+			...menu.map(section => h(HeaderMenuSection, { key: section.title }, {
+				title: () => section.title,
+				default: () => section.items.map(item => renderMenuItem(item)),
+			})),
+			h(HeaderMenuSection, { innerTag: 'div' }, {
+				title: () => 'Votre caisse',
+				default: () => h('div', { style: 'padding: 16px 50px 16px 20px;' }, [
+					h('div', { class: 'd-flex align-center ga-2 font-weight-bold' }, [
+						h(VIcon, {
+							ariaLabel: 'Localisation',
+							role: 'img',
+							ariaHidden: 'false',
+							color: 'primary',
+						}, () => mdiMapMarker),
+						h('p', 'Vous n\'avez pas selectionne votre caisse'),
+					]),
+					h(VBtn, {
+						class: 'mt-3 mb-4 font-weight-bold text-capitalize',
+						baseColor: 'primary',
+						density: 'comfortable',
+						flat: true,
+						height: '37',
+					}, () => 'Selectionner'),
+					h('p', { class: 'mb-8' }, 'Les pages d\'ameli seront alors enrichies des informations locales de votre caisse.'),
+				]),
+			}),
+		]
+	},
+})
+
+function mountGeneratedMenu(width = 375, height = 900) {
+	cy.viewport(width, height)
+
+	cy.mountWithVuetify(HeaderBurgerMenu, {
+		global: {
+			provide: {
+				[registerHeaderMenuKey]: () => {},
+			},
+		},
+		slots: {
+			default: () => h(GeneratedMenuContent),
+		},
+	})
+
+	cy.get('.header-menu-btn').first().click()
+	cy.get('.overlay').should('be.visible')
+	cy.get('.header-menu-wrapper').should('be.visible')
+}
+
+describe('HeaderBurgerMenu - Visual regression tests', () => {
+	it('displays the generated menu opened', () => {
+		mountGeneratedMenu()
+		cy.matchImageSnapshot('header-burger-menu-generated')
+	})
+
+	it('displays the generated menu with the first submenu opened', () => {
+		mountGeneratedMenu(1200, 900)
+
+		cy.contains('.sub-menu-btn', 'Droits et demarches').click()
+		cy.get('.sub-menu--open').should('exist')
+		cy.get('.sub-menu-content-wrapper').should('be.visible')
+		cy.matchImageSnapshot('header-burger-menu-generated-submenu-open')
+	})
+})

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -109,7 +109,6 @@
 
 <style scoped lang="scss">
 @use '../consts' as *;
-@use '@/assets/tokens.scss' as *;
 
 .logo {
 	display: flex;

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

@@ -37,7 +37,6 @@
 
 <style lang="scss" scoped>
 @use '../consts' as *;
-@use '@/assets/tokens';
 
 .header-menu-btn {
 	text-transform: capitalize;
@@ -50,20 +49,20 @@
 	justify-content: center;
 	font-weight: 700;
 	background-color: rgb(var(--v-theme-primary));
-	color: tokens.$neutral-white;
+	color: rgb(var(--v-theme-textOnDark));
 	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%
+			rgb(var(--v-theme-blue-lighten80)) 50%,
+			rgb(var(--v-theme-blue-lighten80)) 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;
+		background-color: rgb(var(--v-theme-surface));
 		color: rgb(var(--v-theme-primary));
 		outline: none;
 		border: 2px solid rgb(var(--v-theme-primary));
@@ -71,9 +70,9 @@
 }
 
 .header-menu-btn__open {
-	background-color: tokens.$neutral-white;
+	background-color: rgb(var(--v-theme-surface));
 	color: rgb(var(--v-theme-primary));
-	border-color: tokens.$neutral-white;
+	border-color: rgb(var(--v-theme-textOnDark));
 }
 
 @media screen and (max-width: ($header-breakpoint + 1)) {

package/src/components/HeaderBar/tests/HeaderBar.visual.cy.ts

@@ -0,0 +1,81 @@
+import { h } from 'vue'
+import HeaderBar from '../HeaderBar.vue'
+
+describe('HeaderBar - Visual regression tests', () => {
+	it('displays the header by default', () => {
+		cy.mountWithVuetify(HeaderBar, {
+			props: {
+				serviceTitle: 'Mon Service',
+			},
+		})
+
+		cy.get('.header').should('be.visible')
+		cy.matchImageSnapshot('header-bar-default')
+	})
+
+	it('displays the header with title and subtitle', () => {
+		cy.mountWithVuetify(HeaderBar, {
+			props: {
+				serviceTitle: 'Mon Service',
+				serviceSubtitle: 'Description du service',
+			},
+		})
+
+		cy.get('.header').should('be.visible')
+		cy.matchImageSnapshot('header-bar-with-subtitle')
+	})
+
+	it('displays the header with custom width', () => {
+		cy.mountWithVuetify(HeaderBar, {
+			props: {
+				serviceTitle: 'Mon Service',
+				width: '900px',
+			},
+		})
+
+		cy.get('.header').should('be.visible')
+		cy.matchImageSnapshot('header-bar-custom-width')
+	})
+
+	it('displays the header with header-side slot', () => {
+		cy.mountWithVuetify(HeaderBar, {
+			props: {
+				serviceTitle: 'Mon Service',
+			},
+			slots: {
+				'header-side': () => h('button', 'Connexion'),
+			},
+		})
+
+		cy.get('.header').should('be.visible')
+		cy.get('.header-side').should('be.visible')
+		cy.matchImageSnapshot('header-bar-with-side')
+	})
+
+	it('displays the header with prepend slot', () => {
+		cy.mountWithVuetify(HeaderBar, {
+			props: {
+				serviceTitle: 'Mon Service',
+			},
+			slots: {
+				prepend: () => h('div', { style: 'background:#005AA1;color:#fff;padding:4px 16px;font-size:14px;' }, 'Bandeau info'),
+			},
+		})
+
+		cy.get('.header').should('be.visible')
+		cy.get('.header-prepend').should('be.visible')
+		cy.matchImageSnapshot('header-bar-with-prepend')
+	})
+
+	it('displays the non-sticky header', () => {
+		cy.mountWithVuetify(HeaderBar, {
+			props: {
+				serviceTitle: 'Mon Service',
+				sticky: false,
+			},
+		})
+
+		cy.get('.header').should('be.visible')
+		cy.matchImageSnapshot('header-bar-no-sticky')
+	})
+})

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -37,8 +37,8 @@
 			items?: NavigationItem[]
 			/** Si activé, une confirmation sera demandée avant de changer d'onglet */
 			confirmTabChange?: boolean
-			/** Message affiché dans la boîte de dialogue de confirmation */
-			confirmationMessage?: boolean
+			/** Message affiché dans la boîte de dialogue de confirmation (accepte un booléen pour rétrocompatibilité) */
+			confirmationMessage?: string | boolean
 			/** Largeur interne */
 			width?: string
 			headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
@@ -46,7 +46,7 @@
 		{
 			// Confirmation related defaults
 			confirmTabChange: false,
-			confirmationMessage: false,
+			confirmationMessage: undefined,
 			// Navigation related defaults
 			homeAriaLabel: undefined,
 			serviceTitle: undefined,
@@ -114,6 +114,14 @@
 		)
 	})
 
+	// Filtrer le message de confirmation pour éviter les erreurs TypeScript dans le template
+	// Même si HorizontalNavbar accepte un booléen, cette propriété calculée garantit la propreté du typage
+	const formattedConfirmationMessage = computed<string | undefined>(() => {
+		return typeof props.confirmationMessage === 'string'
+			? props.confirmationMessage
+			: undefined
+	})
+
 	// Fonction qui gère la confirmation de changement d'onglet
 	// Cette fonction est appelée quand un utilisateur essaie de changer d'onglet
 	// et que la confirmation est activée
@@ -221,6 +229,7 @@
 				:items="items"
 				:vuetify-options
 				:confirm-tab-change="confirmTabChange"
+				:confirmation-message="formattedConfirmationMessage"
 				@confirm-tab-change="handleConfirmTabChange"
 			>
 				<template #navigation-bar-prepend>

package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue

@@ -19,17 +19,25 @@
 		items?: NavigationItem[]
 		/** Si activé, une confirmation sera demandée avant de changer d'onglet */
 		confirmTabChange?: boolean
-		/** Message affiché dans la boîte de dialogue de confirmation */
-		confirmationMessage?: boolean
+		/** Message affiché dans la boîte de dialogue de confirmation (accepte un booléen pour rétrocompatibilité) */
+		confirmationMessage?: string | boolean
 		/** Largeur interne */
 		width?: string
 	}>(), {
 		items: () => [],
 		confirmTabChange: false,
-		confirmationMessage: false,
+		confirmationMessage: undefined,
 		width: '1712px',
 	})
 
+	// Format confirmation message to ensure backward compatibility
+	// If a boolean was provided (old API), we return undefined to let SyTabs use its default string
+	const formattedConfirmationMessage = computed<string | undefined>(() => {
+		return typeof props.confirmationMessage === 'string'
+			? props.confirmationMessage
+			: undefined
+	})
+
 	// Définition des événements émis
 	const emit = defineEmits(['cancel-navigation', 'confirm-tab-change'])
 
@@ -235,7 +243,7 @@
 					:items="tabItems"
 					:model-value="Number(activeTab)"
 					:confirm-tab-change="props.confirmTabChange"
-					:confirmation-message="props.confirmationMessage"
+					:confirmation-message="formattedConfirmationMessage"
 					:vuetify-options="{
 						sheet: { theme: 'dark', color: '#07275C' },
 						tab: { 'base-color': '#B5BECE', 'active-color': '#ffffff', 'slider-color': '#fff' },
@@ -274,7 +282,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss' as *;
 @use '@/components/HeaderBar/consts' as *;
 
 .horizontal-menu {
@@ -316,7 +323,7 @@
 	transition: color 0.2s ease;
 
 	&:hover {
-		color: #fff;
+		color: rgb(var(--v-theme-textOnDark));
 	}
 
 	&:focus-visible {
@@ -327,7 +334,7 @@
 
 	&--active,
 	&[aria-current='page'] {
-		color: #fff;
+		color: rgb(var(--v-theme-textOnDark));
 		border-bottom: 3px solid #fff; /* Bordure solide et plus visible pour les éléments actifs */
 		box-shadow: 0 3px 0 0 #fff; /* Double effet pour être sûr que la bordure est bien visible */
 
@@ -343,7 +350,7 @@
 	padding: 8px 16px;
 	margin-top: 8px;
 	background-color: v-bind('options.sheet.color');
-	color: #fff;
+	color: rgb(var(--v-theme-textOnDark));
 	text-decoration: none;
 	border-radius: 4px;
 	transition: background-color 0.2s ease;

package/src/components/HeaderToolbar/HeaderToolbar.vue

@@ -738,7 +738,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
 @use '../HeaderBar/consts' as *;
 
 $header-max-width: 1200px;
@@ -748,12 +747,12 @@ $font-sm: 12px;
 $menu-padding: 10px 16px;
 $menu-padding-mobile: 10px 12px;
 $std-radius: 0;
-$blue-lighten-90: tokens.$blue-lighten-90;
-$blue-darken-40: tokens.$blue-darken-40;
-$blue-darken-60: tokens.$blue-darken-60;
-$user-assure: tokens.$user-assure;
-$user-professionnel: tokens.$user-professionnel;
-$user-entreprise: tokens.$user-entreprise;
+$blue-lighten-90: rgb(var(--v-theme-blue-lighten90));
+$blue-darken-40: rgb(var(--v-theme-blue-darken40));
+$blue-darken-60: rgb(var(--v-theme-blue-darken60));
+$user-assure: rgb(var(--v-theme-pink-lighten40));
+$user-professionnel: rgb(var(--v-theme-cyan-lighten40));
+$user-entreprise: rgb(var(--v-theme-yellow-base));
 $first-item-width: 95px;
 $first-item-max-width: 320px;
 $first-item-width-mobile: 32px;

package/src/components/LangBtn/LangBtn.vue

@@ -188,10 +188,8 @@
 	</div>
 </template>
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .v-list-item:hover {
-	background-color: rgba(tokens.$colors-overlay, 0.005);
+	background-color: rgba(var(--v-theme-colors-overlay), 0.005);
 }
 
 .v-list-item:focus-visible {
@@ -206,7 +204,7 @@
 }
 
 .vd-lang-btn {
-	font-size: 16px;
+	font-size: var(--v-fontSize-corpsDeTexte);
 	text-transform: none;
 	letter-spacing: inherit;
 

package/src/components/Logo/tests/Logo.visual.cy.ts

@@ -0,0 +1,57 @@
+import Logo from '../Logo.vue'
+
+describe('Logo - Visual regression tests', () => {
+	it('displays the logo by default', () => {
+		cy.mountWithVuetify(Logo)
+
+		cy.get('svg').should('be.visible')
+		cy.matchImageSnapshot('logo-default', cy.get('svg'))
+	})
+
+	it('displays the logo without signature', () => {
+		cy.mountWithVuetify(Logo, {
+			props: { hideSignature: true },
+		})
+
+		cy.get('svg').should('be.visible')
+		cy.matchImageSnapshot('logo-no-signature', cy.get('svg'))
+	})
+
+	it('displays the logo without organism', () => {
+		cy.mountWithVuetify(Logo, {
+			props: { hideOrganism: true },
+		})
+
+		cy.get('svg').should('be.visible')
+		cy.matchImageSnapshot('logo-no-organism', cy.get('svg'))
+	})
+
+	it('displays the logo with occupational risk variant', () => {
+		cy.mountWithVuetify(Logo, {
+			props: { risquePro: true },
+		})
+
+		cy.get('svg').should('be.visible')
+		cy.matchImageSnapshot('logo-risque-pro', cy.get('svg'))
+	})
+
+	it('displays the logo in dark mode', () => {
+		cy.mountWithVuetify(Logo, {
+			props: { dark: true },
+		})
+		cy.get('.v-application').invoke('css', 'background-color', '#121212')
+
+		cy.get('svg').should('be.visible')
+		cy.matchImageSnapshot('logo-dark', cy.get('svg'))
+		cy.get('.v-application').invoke('css', 'background-color', '')
+	})
+
+	it('displays the logo as avatar', () => {
+		cy.mountWithVuetify(Logo, {
+			props: { avatar: true },
+		})
+
+		cy.get('svg').should('be.visible')
+		cy.matchImageSnapshot('logo-avatar', cy.get('svg'))
+	})
+})

package/src/components/LogoBrandSection/LogoBrandSection.vue

@@ -170,7 +170,7 @@
 		case 'ameli-pro':
 			return cnamLightTheme.secondary
 		case 'compte-entreprise':
-			return '#cd545b'
+			return cnamLightTheme.risquePro
 		default:
 			return cnamLightTheme.primary
 		}
@@ -303,7 +303,7 @@
 		font-weight: 700 !important;
 
 		span {
-			color: #cd545b;
+			color: rgb(var(--v-theme-risquePro));
 		}
 	}
 

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerHeader.vue

@@ -103,7 +103,7 @@
 .visual-picker-header {
 	padding-block: 16px;
 	background-color: rgb(var(--v-theme-primary, '12, 65, 154'));
-	color: #fff;
+	color: rgb(var(--v-theme-textOnDark));
 }
 
 .visual-picker-header__title {

package/src/components/NirField/NirField.stories.ts

@@ -1415,7 +1415,7 @@ export const ComplexNirType: Story = {
 		  :required="false"
 		  numberLabel="Numéro de sécurité sociale"
 		  keyLabel="Clé"
-		  :nirType="complexe"
+		  nirType="complexe"
 		  :displayKey="true"
 		 />
     </template>
@@ -1428,7 +1428,7 @@ export const ComplexNirType: Story = {
      	import { NirField } from '@cnamts/synapse'
      	import { ref } from 'vue'
      
-		const value = ref('184027512345674')
+			const value = ref('712125233333340')
 
 		return { value }
 	</script>

package/src/components/NirField/NirField.vue

@@ -517,8 +517,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .nir-field {
 	display: flex;
 	flex-wrap: wrap;
@@ -596,16 +594,16 @@
 
 .sy-number-errors,
 .sy-key-errors {
-	color: tokens.$colors-text-error;
+	color: rgb(var(--v-theme-textError));
 }
 
 .sy-number-warnings,
 .sy-key-warnings {
-	color: tokens.$colors-text-warning;
+	color: rgb(var(--v-theme-textWarning));
 }
 
 .sy-number-success,
 .sy-key-success {
-	color: tokens.$colors-text-success;
+	color: rgb(var(--v-theme-textSuccess));
 }
 </style>