@cnamts/synapse 1.0.26 → 1.0.27

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

@@ -132,7 +132,7 @@
 
 	&:hover {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+		background-color: rgb(var(--v-theme-primaryVariant, 7, 39, 92));
 	}
 }
 

package/src/components/NirField/NirField.vue

@@ -594,16 +594,16 @@
 
 .sy-number-errors,
 .sy-key-errors {
-	color: rgb(var(--v-theme-textError));
+	color: rgb(var(--v-theme-error));
 }
 
 .sy-number-warnings,
 .sy-key-warnings {
-	color: rgb(var(--v-theme-textWarning));
+	color: rgb(var(--v-theme-onWarningVariant));
 }
 
 .sy-number-success,
 .sy-key-success {
-	color: rgb(var(--v-theme-textSuccess));
+	color: rgb(var(--v-theme-onSuccessVariant));
 }
 </style>

package/src/components/NotificationBar/Notification/Notification.vue

@@ -137,38 +137,38 @@
 
 	/* stylelint-disable custom-property-pattern */
 	.notification--info {
-		background-color: rgb(var(--v-theme-backgroundInfoContrasted, '12, 65, 154'));
-		color: rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+		background-color: rgb(var(--v-theme-info));
+		color: rgb(var(--v-theme-onPrimary));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+			outline: 2px solid rgb(var(--v-theme-onPrimary));
 		}
 	}
 
 	.notification--success {
-		background-color: rgb(var(--v-theme-backgroundSuccessContrasted, '86, 194, 113'));
-		color: rgb(var(--v-theme-feedbackOnSuccess));
+		background-color: rgb(var(--v-theme-success, '86, 194, 113'));
+		color: rgb(var(--v-theme-onSuccess));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-feedbackOnSuccess));
+			outline: 2px solid rgb(var(--v-theme-onSuccess));
 		}
 	}
 
 	.notification--warning {
-		background-color: rgb(var(--v-theme-backgroundWarningContrasted, '240, 179, 35'));
-		color: rgb(var(--v-theme-textBase, '0, 0, 0'));
+		background-color: rgb(var(--v-theme-warning));
+		color: rgb(var(--v-theme-onWarning));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textBase, '0, 0, 0'));
+			outline: 2px solid rgb(var(--v-theme-onSurface));
 		}
 	}
 
 	.notification--error {
-		background-color: rgb(var(--v-theme-backgroundErrorContrasted, '179, 63, 46'));
-		color: rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+		background-color: rgb(var(--v-theme-error));
+		color: rgb(var(--v-theme-onPrimary));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+			outline: 2px solid rgb(var(--v-theme-onPrimary));
 		}
 	}
 

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -649,13 +649,13 @@ export const WithClearQueue: Story = (args) => {
                 Ajouter info
               </VBtn>
               <VBtn
-                  color="success"
+                  color="onSuccessVariant"
                   @click="envoyerNotification('Notification succès', 'success')"
               >
                 Ajouter succès
               </VBtn>
               <VBtn
-                  color="warning"
+                  color="onWarningVariant"
                   @click="envoyerNotification('Notification avertissement', 'warning')"
               >
                 Ajouter avertissement
@@ -719,13 +719,13 @@ export const showAll: Story = (args) => {
 				Ajouter info
 			  </VBtn>
 			  <VBtn
-				  color="success"
+				  color="onSuccessVariant"
 				  @click="envoyerNotification('Notification succès', 'success')"
 			  >
 				Ajouter succès
 			  </VBtn>
 			  <VBtn
-				  color="warning"
+				  color="onWarningVariant"
 				  @click="envoyerNotification('Notification avertissement', 'warning')"
 			  >
 				Ajouter avertissement
@@ -769,14 +769,14 @@ showAll.parameters = {
 						Ajouter une notification info
 					</VBtn>
 					<VBtn
-						color="success"
-						@click="envoyerNotification('Notification succès', 'success')"
+						color="onSuccessVariant"
+						@click="envoyerNotification('Notification succès', 'onSuccessVariant')"
 					>
 						Ajouter une notification succès
 					</VBtn>
 					<VBtn
-						color="warning"
-						@click="envoyerNotification('Notification avertissement', 'warning')"
+						color="onWarningVariant"
+						@click="envoyerNotification('Notification avertissement', 'onWarningVariant')"
 					>
 						Ajouter une notification avertissement
 					</VBtn>

package/src/components/PaginatedTable/Pagination.vue

@@ -78,7 +78,7 @@
 }
 
 :deep(.v-pagination) .v-pagination__list [aria-disabled='false'] svg {
-	color: rgb(var(--v-theme-iconBase));
+	color: rgb(var(--v-theme-primary));
 }
 
 :deep(.v-pagination) .v-btn--variant-plain[aria-disabled='false'] {
@@ -86,6 +86,6 @@
 }
 
 :deep(.v-pagination) .v-btn--variant-plain:hover[aria-disabled='false'] svg {
-	color: rgb(var(--v-theme-textBase));
+	color: rgb(var(--v-theme-onSurface));
 }
 </style>

package/src/components/PasswordField/PasswordField.vue

@@ -362,10 +362,10 @@
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderWarning)) !important;
+		color: rgb(var(--v-theme-warning)) !important;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-warning)) !important;
 		}
 	}
 
@@ -373,7 +373,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-warning)) !important;
 		}
 	}
 }
@@ -381,11 +381,11 @@
 .error-field {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-borderError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 }
 
@@ -397,10 +397,10 @@
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 
@@ -408,7 +408,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 }

package/src/components/PasswordField/tests/PasswordField.spec.ts

@@ -16,12 +16,12 @@ interface PasswordFieldVM {
 
 describe('PasswordField.vue', () => {
 	it('renders the password field', () => {
-		const wrapper = mount(PasswordField)
+		const wrapper = mount(PasswordField, { props: { label: 'Password' } })
 		expect(wrapper.exists()).toBe(true)
 	})
 
 	it('toggles password visibility', async () => {
-		const wrapper = mount(PasswordField)
+		const wrapper = mount(PasswordField, { props: { label: 'Password' } })
 		// 2. Cast wrapper.vm as your interface
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
@@ -34,7 +34,7 @@ describe('PasswordField.vue', () => {
 	})
 
 	it('emits update:modelValue event on input', async () => {
-		const wrapper = mount(PasswordField)
+		const wrapper = mount(PasswordField, { props: { label: 'Password' } })
 		const input = wrapper.find('input')
 		await input.setValue('new-password')
 		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['new-password'])

package/src/components/RangeField/RangeSlider/RangeSlider.vue

@@ -273,7 +273,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(0, -50%);
 		width: 100%;
 		height: var(--sy-track-height);
-		background-color: rgb(var(--v-theme-backgroundInfoSubdued));
+		background-color: rgb(var(--v-theme-infoVariant));
 	}
 }
 
@@ -381,7 +381,7 @@ $virtual-thumb-size: 40px;
 	transform: translate(0, -50%);
 	width: 100%;
 	height: var(--sy-track-height);
-	background-color: rgb(var(--v-theme-accentPrimaryLight));
+	background-color: rgb(var(--v-theme-primary));
 	transition: all 0.1s;
 }
 

package/src/components/RangeField/RangeSlider/Tooltip/Tooltip.vue

@@ -57,7 +57,7 @@
 	position: absolute;
 	bottom: 0;
 	background-color: rgb(0 0 0 / 70%);
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 	padding: 4px 8px;
 	border-radius: 4px;
 	will-change: transform;

package/src/components/StatusPage/tests/StatusPage.spec.ts

@@ -72,4 +72,153 @@ describe('StatusPage', () => {
 
 		expect(wrapper.html()).toContain('Contenu additionnel')
 	})
+
+	it('n\'affiche pas le bouton si hideBtn est true', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Retour',
+				btnLink: '/',
+				hideBtn: true,
+			},
+		})
+
+		expect(wrapper.find('.v-btn').exists()).toBe(false)
+	})
+
+	it('émet btn-click au clic sur le bouton', async () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Retour',
+				btnHref: 'https://example.com',
+			},
+		})
+
+		await wrapper.find('.v-btn').trigger('click')
+		expect(wrapper.emitted('btn-click')).toBeTruthy()
+	})
+
+	it('affiche le slot illustration quand fourni', () => {
+		const wrapper = mount(StatusPage, {
+			props: { headingLevel: 1 },
+			slots: {
+				illustration: '<img src="test.svg" alt="illustration" />',
+			},
+		})
+
+		expect(wrapper.html()).toContain('illustration')
+	})
+
+	it('ajoute aria-labelledby quand role est défini', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				pageTitle: 'Erreur',
+				role: 'main',
+				uniqueId: 'test-id',
+			},
+		})
+
+		const container = wrapper.find('[aria-labelledby]')
+		expect(container.exists()).toBe(true)
+		expect(container.attributes('aria-labelledby')).toBe('test-id-title')
+	})
+
+	it('applique la classe heading correcte pour headingLevel > 1', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 2,
+				pageTitle: 'Titre h2',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Titre h2')
+	})
+
+	it('utilise btnLink comme navigation interne quand btnHref est absent', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Accueil',
+				btnLink: '/accueil',
+			},
+		})
+
+		const btn = wrapper.find('.v-btn')
+		expect(btn.exists()).toBe(true)
+	})
+
+	describe('splitMessage', () => {
+		it('retourne [] si message est undefined', () => {
+			const wrapper = mount(StatusPage, {
+				props: { headingLevel: 1 },
+			})
+
+			expect(wrapper.findAll('a[href^="tel:"]').length).toBe(0)
+		})
+
+		it('texte sans numéro → aucun lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Contactez le support.',
+				},
+			})
+
+			expect(wrapper.findAll('a[href^="tel:"]').length).toBe(0)
+			expect(wrapper.text()).toContain('Contactez le support.')
+		})
+
+		it('numéro 4 chiffres → lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Appelez le 3646.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(1)
+			expect(telLinks[0]!.attributes('href')).toBe('tel:3646')
+		})
+
+		it('numéro 10 chiffres → lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Appelez le 0123456789 pour de l\'aide.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(1)
+			expect(telLinks[0]!.attributes('href')).toBe('tel:0123456789')
+		})
+
+		it('numéro en milieu de texte → texte avant + lien + texte après', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Contactez-nous au 0123456789 pour toute question.',
+				},
+			})
+
+			expect(wrapper.text()).toContain('Contactez-nous au')
+			expect(wrapper.text()).toContain('pour toute question.')
+			expect(wrapper.find('a[href="tel:0123456789"]').exists()).toBe(true)
+		})
+
+		it('plusieurs numéros dans le message', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Numéros : 3646 et 0123456789.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(2)
+		})
+	})
 })

package/src/components/SubHeader/SubHeader.vue

@@ -220,7 +220,7 @@
 	}
 
 	.vd-data-list-item-action-btn {
-		color: rgb(var(--v-theme-textOnDark)) !important;
+		color: rgb(var(--v-theme-onPrimary)) !important;
 	}
 }
 

package/src/components/SyAlert/SyAlert.vue

@@ -168,7 +168,7 @@
 
 	&:focus-visible {
 		outline: solid 2px black !important;
-		outline-color: var(--v-primary-base) !important;
+		outline-color: var(--v-theme-primary) !important;
 		outline-offset: 2px !important;
 
 		&::after {
@@ -217,7 +217,7 @@
 @mixin redesign($type, $map) {
 	&.alert--#{$type}.v-alert--variant-tonal {
 		background: map.get($map, 'background') !important;
-		color: rgb(var(--v-theme-textBase)) !important;
+		color: rgb(var(--v-theme-onSurface)) !important;
 
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
@@ -241,7 +241,7 @@
 			background: map.get($map, 'icon-bg');
 
 			:deep(svg) {
-				fill: map.get($map, 'accent');
+				fill: map.get($map, 'icon');
 			}
 		}
 	}
@@ -256,41 +256,41 @@
 	@include redesign(
 		'warning',
 		(
-			'background': var(--alert-warning-background),
-			'accent': var(--alert-warning-accent),
-			'border': var(--alert-warning-border),
-			'icon':var(--alert-warning-icon),
-			'icon-bg': var(--alert-warning-icon-bg),
+			'background': rgb(var(--v-theme-warningVariant)),
+			'accent': rgb(var(--v-theme-onWarningVariant)),
+			'border': rgb(var(--v-theme-onWarningVariant)),
+			'icon': rgb(var(--v-theme-onWarningVariant)),
+			'icon-bg': rgb(var(--v-theme-warningVariant90)),
 		)
 	);
 	@include redesign(
 		'success',
 		(
-			'background': var(--alert-success-background),
-			'accent': var(--alert-success-accent),
-			'border': var(--alert-success-border),
-			'icon':var(--alert-success-icon),
-			'icon-bg': var(--alert-success-icon-bg),
+			'background': rgb(var(--v-theme-successVariant)),
+			'accent': rgb(var(--v-theme-onSuccessVariant)),
+			'border': rgb(var(--v-theme-onSuccessVariant)),
+			'icon':rgb(var(--v-theme-onSuccessVariant)),
+			'icon-bg': rgb(var(--v-theme-successVariant90)),
 		)
 	);
 	@include redesign(
 		'error',
 		(
-			'background': var(--alert-error-background),
-			'accent': var(--alert-error-accent),
-			'border': var(--alert-error-border),
-			'icon':var(--alert-error-icon),
-			'icon-bg': var(--alert-error-icon-bg),
+			'background': rgb(var(--v-theme-errorVariant)),
+			'accent': rgb(var(--v-theme-error)),
+			'border': rgb(var(--v-theme-error)),
+			'icon':rgb(var(--v-theme-error)),
+			'icon-bg': rgb(var(--v-theme-errorVariant90)),
 		)
 	);
 	@include redesign(
 		'info',
 		(
-			'background': var(--alert-info-background),
-			'accent': var(--alert-info-accent),
-			'border': var(--alert-info-border),
-			'icon':var(--alert-info-icon),
-			'icon-bg': var(--alert-info-icon-bg),
+			'background': rgb(var(--v-theme-infoVariant)),
+			'accent': rgb(var(--v-theme-info)),
+			'border': rgb(var(--v-theme-info)),
+			'icon':rgb(var(--v-theme-info)),
+			'icon-bg': rgb(var(--v-theme-infoVariant90)),
 		)
 	);
 }