@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/PasswordField/PasswordField.vue

@@ -320,8 +320,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .vd-password {
 	:deep(.v-field) {
 		.v-field__input {
@@ -360,10 +358,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -371,7 +369,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -379,11 +377,11 @@
 .error-field {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
@@ -395,10 +393,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -406,7 +404,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }

package/src/components/PhoneField/PhoneField.vue

@@ -540,7 +540,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
+@use '@/assets/overrides/breakpoints' as bp;
 
 .phone-field-fieldset {
 	border: 1px solid #b9b9b9;
@@ -560,7 +560,7 @@
 }
 
 .required-asterisk {
-	color: #d32f2f;
+	color: rgb(var(--v-theme-error));
 	margin-left: 4px;
 }
 
@@ -581,7 +581,7 @@
 	width: 100%;
 }
 
-@media (width >= 600px) {
+@media #{bp.$up-sm} {
 	.phone-field-container {
 		flex-direction: row;
 		align-items: stretch;

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

@@ -254,8 +254,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 $virtual-thumb-size: 40px;
 
 .wrapper {

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

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

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

@@ -0,0 +1,65 @@
+import RangeField from '../RangeField.vue'
+
+describe('RangeField - Visual regression tests', () => {
+	it('displays the component by default', () => {
+		cy.mountWithVuetify(RangeField)
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-default')
+	})
+
+	it('displays with custom min/max values', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'min': 0,
+				'max': 500,
+				'modelValue': [100, 400],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-custom-range')
+	})
+
+	it('displays with custom step', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'min': 0,
+				'max': 100,
+				'step': 10,
+				'modelValue': [20, 80],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-step')
+	})
+
+	it('displays with fieldset label', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'fieldsetLabel': 'Fourchette de prix (€)',
+				'min': 0,
+				'max': 1000,
+				'modelValue': [200, 800],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-with-label')
+	})
+
+	it('displays with custom background', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				bgColor: '#f0f0f0',
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-custom-bg')
+	})
+})

package/src/components/RatingPicker/EmotionPicker/EmotionPicker.vue

@@ -179,8 +179,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-emotion-picker {
 	display: flex;
 	border: 0;
@@ -201,15 +199,15 @@
 	flex-direction: column;
 
 	&.sad {
-		color: tokens.$orange-darken-20 !important;
+		color: rgb(var(--v-theme-orange-darken20)) !important;
 	}
 
 	&.neutral {
-		color: tokens.$yellow-darken-60 !important;
+		color: rgb(var(--v-theme-yellow-darken60)) !important;
 	}
 
 	&.happy {
-		color: tokens.$turquoise-darken-60 !important;
+		color: rgb(var(--v-theme-turquoise-darken60)) !important;
 	}
 
 	&--active.sy-emotion-picker__item--disabled .v-icon {
@@ -228,15 +226,15 @@
 	&:focus,
 	&:hover {
 		&.sad {
-			background: tokens.$orange-lighten-90;
+			background: rgb(var(--v-theme-orange-lighten90));
 		}
 
 		&.neutral {
-			background: tokens.$yellow-lighten-90;
+			background: rgb(var(--v-theme-yellow-lighten90));
 		}
 
 		&.happy {
-			background: tokens.$turquoise-lighten-90;
+			background: rgb(var(--v-theme-turquoise-lighten90));
 		}
 	}
 

package/src/components/RatingPicker/StarsPicker/StarsPicker.vue

@@ -125,8 +125,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-stars-picker {
 	border: 0;
 }
@@ -140,15 +138,15 @@
 	height: 36px !important;
 
 	&--disabled.text-primary {
-		color: tokens.$primary-base !important;
+		color: rgb(var(--v-theme-primary)) !important;
 	}
 
 	&.text-blue-lighten {
-		color: tokens.$blue-lighten-60 !important;
+		color: rgb(var(--v-theme-blue-lighten60)) !important;
 	}
 
 	&--disabled.text-blue-lighten {
-		color: tokens.$blue-lighten-60 !important;
+		color: rgb(var(--v-theme-blue-lighten60)) !important;
 	}
 }
 </style>

package/src/components/SearchListField/SearchListField.vue

@@ -178,8 +178,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-search-list fieldset {
 	border: 0;
 }

package/src/components/SkipLink/SkipLink.vue

@@ -37,8 +37,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '/src/assets/tokens';
-
 .sy-skip-link {
 	z-index: 150;
 	position: fixed;
@@ -46,8 +44,8 @@
 	right: 0;
 	transition: none;
 	width: 100%;
-	background: #fff;
+	background: rgb(var(--v-theme-surface));
 	outline: none; // Disable outline to use border
-	border: 2px solid tokens.$blue-darken-60;
+	border: 2px solid rgb(var(--v-theme-blue-darken60));
 }
 </style>

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -62,7 +62,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
+@use '@/assets/overrides/breakpoints' as bp;
 
 .vd-social-media-links {
 	display: flex;
@@ -74,7 +74,7 @@ li {
 }
 
 .vd-social-media-links-label.text--primary {
-	color: tokens.$blue-base;
+	color: rgb(var(--v-theme-blue-base));
 	font-weight: 600;
 	margin: 0;
 	padding: 0;
@@ -91,7 +91,7 @@ li {
 }
 
 .vd-social-media-links-icon {
-	color: tokens.$grey-base !important;
+	color: rgb(var(--v-theme-grey-base)) !important;
 }
 
 .vd-social-media-links-icon--x {
@@ -105,7 +105,7 @@ li {
 	border: 0;
 
 	&:focus-visible {
-		outline: 3px solid tokens.$blue-base;
+		outline: 3px solid rgb(var(--v-theme-blue-base));
 		outline-offset: -1px;
 	}
 }
@@ -121,7 +121,7 @@ li {
 	}
 }
 
-@media (width >= 768px) {
+@media #{bp.$up-tablet} {
 	.vd-social-media-links-label {
 		text-align: right;
 	}
@@ -131,7 +131,7 @@ li {
 	}
 }
 
-@media (width <= 767px) {
+@media #{bp.$down-mobile} {
 	.vd-social-media-links-label {
 		text-align: left;
 	}

package/src/components/SubHeader/SubHeader.vue

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

package/src/components/SyAlert/SyAlert.vue

@@ -119,8 +119,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-@use '@/assets/apTokens';
 @use 'sass:map';
 
 .sy-alert {
@@ -128,7 +126,7 @@
 }
 
 .alert {
-	padding: tokens.$padding-4;
+	padding: var(--v-padding-4);
 }
 
 .alert-icon {
@@ -165,7 +163,7 @@
 	letter-spacing: normal;
 
 	span {
-		font-size: 14px;
+		font-size: var(--v-fontSize-liensEtLibelles);
 	}
 
 	&:focus-visible {
@@ -187,15 +185,15 @@
 	.alert {
 		display: flex;
 		flex-direction: column;
-		background-color: tokens.$white-base;
+		background-color: rgb(var(--v-theme-surface));
 
 		:deep(.v-alert__content) {
 			align-self: flex-start !important;
-			margin-top: tokens.$padding-4;
+			margin-top: var(--v-padding-4);
 		}
 
 		:deep(.v-alert__close) {
-			margin-top: tokens.$padding-4;
+			margin-top: var(--v-padding-4);
 			align-self: flex-end;
 		}
 
@@ -219,7 +217,7 @@
 @mixin redesign($type, $map) {
 	&.alert--#{$type}.v-alert--variant-tonal {
 		background: map.get($map, 'background') !important;
-		color: tokens.$colors-text-base !important;
+		color: rgb(var(--v-theme-textBase)) !important;
 
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
@@ -299,7 +297,7 @@
 
 .v-alert.v-theme--dark {
 	&.v-alert--variant-outlined {
-		background-color: tokens.$white-base !important;
+		background-color: rgb(var(--v-theme-surface)) !important;
 	}
 
 	.alert-close-btn {

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

@@ -0,0 +1,46 @@
+import SyAlert from '../SyAlert.vue'
+
+describe('SyAlert - Visual regression tests', () => {
+	const types = ['info', 'success', 'warning', 'error'] as const
+	const variants = ['tonal', 'outlined'] as const
+
+	types.forEach((type) => {
+		it(`displays the "${type}" type correctly`, () => {
+			cy.mountWithVuetify(SyAlert, {
+				props: { type },
+				slots: {
+					default: `Ceci est une alerte de type ${type}`,
+				},
+			})
+
+			cy.get('.v-alert').should('be.visible')
+			cy.matchImageSnapshot(`sy-alert-${type}`, cy.get('.v-alert'))
+		})
+	})
+
+	variants.forEach((variant) => {
+		it(`displays the "${variant}" variant correctly`, () => {
+			cy.mountWithVuetify(SyAlert, {
+				props: { type: 'info', variant },
+				slots: {
+					default: `Alerte en variante ${variant}`,
+				},
+			})
+
+			cy.get('.v-alert').should('be.visible')
+			cy.matchImageSnapshot(`sy-alert-variant-${variant}`, cy.get('.v-alert'))
+		})
+	})
+
+	it('displays the close button when closable', () => {
+		cy.mountWithVuetify(SyAlert, {
+			props: { type: 'info', closable: true },
+			slots: {
+				default: 'Alerte avec bouton de fermeture',
+			},
+		})
+
+		cy.get('.v-alert').should('be.visible')
+		cy.matchImageSnapshot('sy-alert-closable', cy.get('.v-alert'))
+	})
+})

package/src/components/SyBtnMenu/SyBtnMenu.vue

@@ -260,8 +260,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-user-menu-btn-ctn {
 	position: relative;
 	z-index: 1;
@@ -285,12 +283,12 @@
 	}
 
 	&:focus::before {
-		background: tokens.$blue-base;
+		background: rgb(var(--v-theme-blue-base));
 		opacity: 0.08;
 	}
 
 	&:focus {
-		background: rgba(tokens.$blue-base, 0.08) !important;
+		background: rgba(var(--v-theme-blue-base), 0.08) !important;
 	}
 
 	.subtitle {

package/src/components/TableToolbar/TableToolbar.vue

@@ -116,8 +116,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-table-toolbar {
 	min-height: 56px;
 
@@ -162,27 +160,27 @@
 }
 
 .sy-table-toolbar.v-theme--dark :deep() {
-	background-color: tokens.$grey-darken-20 !important;
+	background-color: rgb(var(--v-theme-grey-darken20)) !important;
 
 	p,
 	.text-primary {
-		color: rgba(tokens.$colors-text-ondark, 0.6) !important;
+		color: rgba(var(--v-theme-textOnDark), 0.6) !important;
 	}
 
 	svg {
-		fill: tokens.$colors-text-ondark !important;
+		fill: rgb(var(--v-theme-textOnDark)) !important;
 	}
 
 	.v-label {
-		color: rgba(tokens.$colors-text-ondark, 0.6) !important;
+		color: rgba(var(--v-theme-textOnDark), 0.6) !important;
 	}
 
 	.v-field__input {
-		color: tokens.$colors-text-ondark !important;
+		color: rgb(var(--v-theme-textOnDark)) !important;
 	}
 }
 
 .v-theme--dark button.v-btn:hover :deep() {
-	background: rgba(tokens.$colors-text-ondark, 0.1);
+	background: rgba(var(--v-theme-textOnDark), 0.1);
 }
 </style>