@cnamts/synapse 1.0.24 → 1.0.26

package/src/components/RatingPicker/tests/__snapshots__/RatingPicker.spec.ts.snap

@@ -3,7 +3,6 @@
 exports[`RatingPicker > renders correctly 1`] = `
 <div class="sy-rating-picker">
   <fieldset class="sy-number-picker">
-    <legend class="d-sr-only"></legend>
     <legend class="
       mb-6
       text-h6
@@ -19,7 +18,7 @@ exports[`RatingPicker > renders correctly 1`] = `
         role="radiogroup"
       >
         <div
-          aria-label="Note de 1 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -29,9 +28,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="0"
         >
           1
+          <span class="d-sr-only">
+            Note de 1 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 2 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -41,9 +43,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           2
+          <span class="d-sr-only">
+            Note de 2 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 3 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -53,9 +58,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           3
+          <span class="d-sr-only">
+            Note de 3 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 4 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -65,9 +73,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           4
+          <span class="d-sr-only">
+            Note de 4 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 5 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -77,9 +88,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           5
+          <span class="d-sr-only">
+            Note de 5 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 6 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -89,9 +103,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           6
+          <span class="d-sr-only">
+            Note de 6 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 7 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -101,9 +118,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           7
+          <span class="d-sr-only">
+            Note de 7 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 8 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -113,9 +133,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           8
+          <span class="d-sr-only">
+            Note de 8 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 9 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -125,9 +148,12 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           9
+          <span class="d-sr-only">
+            Note de 9 sur 10.
+          </span>
         </div>
         <div
-          aria-label="Note de 10 sur 10."
+          aria-checked="false"
           class="
             pa-0
             sy-number-picker__item
@@ -137,6 +163,9 @@ exports[`RatingPicker > renders correctly 1`] = `
           tabindex="-1"
         >
           10
+          <span class="d-sr-only">
+            Note de 10 sur 10.
+          </span>
         </div>
       </div>
       <!-- v-if -->

package/src/components/RatingPicker/useRatingFocus.ts

@@ -0,0 +1,97 @@
+import { nextTick, ref, watch, type Ref } from 'vue'
+
+type SelectValueFn = (value: number) => void
+
+interface UseRatingFocusOptions {
+	length: Ref<number>
+	modelValue: Ref<number>
+	selectValue: SelectValueFn
+	wrap?: boolean
+}
+
+export function useRatingFocus({
+	length,
+	modelValue,
+	selectValue,
+	wrap = true,
+}: UseRatingFocusOptions) {
+	const ratingElement = ref<HTMLElement[]>([])
+
+	function setFocus(index: number) {
+		ratingElement.value.forEach((el, i) => {
+			if (!el) return
+			el.setAttribute('tabindex', i === index ? '0' : '-1')
+		})
+
+		ratingElement.value[index]?.focus()
+	}
+
+	function getCurrentIndex() {
+		if (modelValue.value >= 1 && modelValue.value <= length.value) {
+			return modelValue.value - 1
+		}
+		return 0
+	}
+
+	function initFocus() {
+		setFocus(getCurrentIndex())
+	}
+
+	function selectAndFocus(index: number) {
+		const value = index + 1
+		selectValue(value)
+		nextTick(() => setFocus(index))
+	}
+
+	function focusNextElement(index: number) {
+		let nextIndex = index + 1
+
+		if (wrap) {
+			if (nextIndex >= length.value) {
+				nextIndex = 0
+			}
+		}
+		else {
+			nextIndex = Math.min(nextIndex, length.value - 1)
+		}
+
+		setFocus(nextIndex)
+	}
+
+	function focusPrevElement(index: number) {
+		let prevIndex = index - 1
+
+		if (wrap) {
+			if (prevIndex < 0) {
+				prevIndex = length.value - 1
+			}
+		}
+		else {
+			prevIndex = Math.max(prevIndex, 0)
+		}
+
+		setFocus(prevIndex)
+	}
+
+	function focus() {
+		nextTick(() => {
+			setFocus(getCurrentIndex())
+		})
+	}
+
+	watch(modelValue, () => {
+		nextTick(() => {
+			setFocus(getCurrentIndex())
+		})
+	})
+
+	return {
+		ratingElement,
+		setFocus,
+		initFocus,
+		selectAndFocus,
+		focusNextElement,
+		focusPrevElement,
+		focus,
+	}
+}

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/SyTextArea/SyTextArea.vue

@@ -143,7 +143,12 @@
 		:bg-color="props.bgColor"
 		:error="hasError"
 		:error-messages="errors"
-		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+		:class="{
+			'success-field': hasSuccess && !hasError && !hasWarning,
+			'warning-field': hasWarning && !hasError,
+			'error-field': hasError,
+		}"
+		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? successes : []))"
 		:max-errors="props.maxErrors"
 		:disabled="props.disabled"
 		:readonly="props.readonly"
@@ -157,3 +162,29 @@
 		@update:focused="(e: boolean) => { focused = e; if (!e) execBlurChange() }"
 	/>
 </template>
+
+<style lang="scss" scoped>
+.success-field {
+	:deep(.v-field__outline) {
+		--v-field-border-opacity: 1;
+
+		color: rgb(var(--v-theme-success));
+	}
+
+	:deep(.v-messages__message) {
+		color: rgb(var(--v-theme-success));
+	}
+}
+
+.warning-field {
+	:deep(.v-field__outline) {
+		--v-field-border-opacity: 1;
+
+		color: rgb(var(--v-theme-borderWarning));
+	}
+
+	:deep(.v-messages__message) {
+		color: rgb(var(--v-theme-borderWarning));
+	}
+}
+</style>

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>