@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.stories.ts

@@ -538,7 +538,7 @@ export const CustomColors: Story = {
 						/>
 						<SyCheckBoxGroup
 							v-model="value3"
-							color="success"
+							color="onSuccessVariant"
 							label="Couleur succès"
 							:options="options"
 							:show-success-messages="false"
@@ -552,7 +552,7 @@ export const CustomColors: Story = {
 						/>
 						<SyCheckBoxGroup
 							v-model="value5"
-							color="warning"
+							color="onWarningVariant"
 							label="Couleur avertissement"
 							:options="options"
 							:show-success-messages="false"
@@ -604,11 +604,22 @@ Le composant SyCheckBoxGroup peut être personnalisé avec différentes couleurs
 		},
 		template: `
 			<div>
-				<SyCheckBoxGroup v-model="value1" color="primary" label="Couleur primaire (par défaut)" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value2" color="secondary" label="Couleur secondaire" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value3" color="success" label="Couleur succès" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value4" color="error" label="Couleur erreur" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value5" color="warning" label="Couleur avertissement" :options="options" :show-success-messages="false" />
+              <SyCheckBoxGroup v-model="value1" color="primary" label="Couleur primaire (par défaut)"
+                               :options="options" :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value2" color="secondary" label="Couleur secondaire" :options="options"
+                               :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value3" color="onSuccessVariant" label="Couleur succès" :options="options"
+                               :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value4" color="error" label="Couleur erreur" :options="options"
+                               :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value5" color="onWarningVariant" label="Couleur avertissement"
+                               :options="options"
+                               :show-success-messages="false"
+              />
 			</div>
 		`,
 	}),

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.vue

@@ -57,7 +57,7 @@
 			options: () => [],
 			readonly: false,
 			required: false,
-			showSuccessMessages: true,
+			showSuccessMessages: false,
 			successMessages: null,
 			title: undefined,
 			warningMessages: null,
@@ -298,7 +298,7 @@
 }
 
 .warning-field :deep(.v-messages__message) {
-	color: rgb(var(--v-theme-warning)) !important;
+	color: rgb(var(--v-theme-onWarningVariant)) !important;
 }
 
 .error-field :deep(.v-messages__message) {
@@ -310,7 +310,7 @@
 }
 
 .success-field :deep(.v-messages__message) {
-	color: rgb(var(--v-theme-success)) !important;
+	color: rgb(var(--v-theme-onSuccessVariant)) !important;
 }
 
 :deep(.v-messages__message) {

package/src/components/Customs/SyCheckBoxGroup/tests/SyCheckBoxGroup.visual.cy.ts

@@ -0,0 +1,55 @@
+import SyCheckBoxGroup from '../SyCheckBoxGroup.vue'
+
+const defaultOptions = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+	{ label: 'Option C', value: 'c' },
+]
+
+describe('SyCheckBoxGroup - Visual regression tests', () => {
+	it('displays the checkbox group by default', () => {
+		cy.mountWithVuetify(SyCheckBoxGroup, {
+			props: { options: defaultOptions },
+		})
+
+		cy.get('.sy-checkbox-group').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-group-default', cy.get('.sy-checkbox-group'))
+	})
+
+	it('displays the checkbox group with some items selected', () => {
+		cy.mountWithVuetify(SyCheckBoxGroup, {
+			props: {
+				options: defaultOptions,
+				modelValue: ['a', 'c'],
+				multiple: true,
+			},
+		})
+
+		cy.get('.sy-checkbox-group').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-group-selected', cy.get('.sy-checkbox-group'))
+	})
+
+	it('displays the checkbox group with a label', () => {
+		cy.mountWithVuetify(SyCheckBoxGroup, {
+			props: {
+				options: defaultOptions,
+				label: 'Choisissez vos options',
+			},
+		})
+
+		cy.get('.sy-checkbox-group').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-group-with-label', cy.get('.sy-checkbox-group'))
+	})
+
+	it('displays the checkbox group in disabled state', () => {
+		cy.mountWithVuetify(SyCheckBoxGroup, {
+			props: {
+				options: defaultOptions,
+				disabled: true,
+			},
+		})
+
+		cy.get('.sy-checkbox-group').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-group-disabled', cy.get('.sy-checkbox-group'))
+	})
+})

package/src/components/Customs/SyCheckbox/SyCheckbox.stories.ts

@@ -605,9 +605,9 @@ export const CustomColors: Story = {
 				code: `
 <div>
   <SyCheckbox v-model="checked1" label="Couleur primaire (par défaut)" />
-  <SyCheckbox v-model="checked3" label="Couleur succès" color="success" />
+  <SyCheckbox v-model="checked3" label="Couleur succès" color="onSuccessVariant" />
   <SyCheckbox v-model="checked4" label="Couleur erreur" color="error" />
-  <SyCheckbox v-model="checked5" label="Couleur avertissement" color="warning" />
+  <SyCheckbox v-model="checked5" label="Couleur avertissement" color="onWarningVariant" />
 </div>`,
 			},
 		],
@@ -633,9 +633,9 @@ Le composant SyCheckbox peut être personnalisé avec différentes couleurs pour
 		template: `
 			<div>
 				<SyCheckbox v-model="checked1" label="Couleur primaire (par défaut)" />
-				<SyCheckbox v-model="checked3" label="Couleur succès" color="success" />
-				<SyCheckbox v-model="checked4" label="Couleur erreur" color="error" />
-				<SyCheckbox v-model="checked5" label="Couleur avertissement" color="warning" />
+              <SyCheckbox v-model="checked3" label="Couleur succès" color="onSuccessVariant"/>
+              <SyCheckbox v-model="checked4" label="Couleur erreur" color="error"/>
+              <SyCheckbox v-model="checked5" label="Couleur avertissement" color="onWarningVariant"/>
 			</div>
 		`,
 	}),
@@ -784,9 +784,9 @@ Cette case à cocher utilise des règles de validation personnalisées et valide
 					required
 					display-asterisk
 				/>
-				<VBtn 
-					type="submit" 
-					color="primary"
+				<VBtn
+                    type="submit"
+                    color="primary"
 					class="mt-4"
 				>
 					Soumettre

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -3,7 +3,6 @@
 	import type { VCheckbox } from 'vuetify/components'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
-	import { locales } from './locales'
 	import { cnamSemanticTokens } from '@/designTokens/tokens/cnam/cnamSemantic'
 
 	const props = withDefaults(
@@ -57,7 +56,7 @@
 			customRules: () => [],
 			customWarningRules: () => [],
 			customSuccessRules: () => [],
-			showSuccessMessages: true,
+			showSuccessMessages: false,
 			isValidateOnBlur: false,
 			disableErrorHandling: false,
 			id: undefined,
@@ -216,10 +215,10 @@
 		switch (props.color) {
 		case 'error':
 			return 'rgb(var(--v-theme-error))'
-		case 'success':
-			return 'rgb(var(--v-theme-success))'
-		case 'warning':
-			return 'rgb(var(--v-theme-warning))'
+		case 'onSuccessVariant':
+			return 'rgb(var(--v-theme-onSuccessVariant))'
+		case 'onWarningVariant':
+			return 'rgb(var(--v-theme-onWarningVariant))'
 		case 'primary':
 			return cnamSemanticTokens.colors.text.base
 		default:
@@ -380,32 +379,25 @@
 			>
 				<slot />
 			</template>
-			<span
-				v-if="messageId && props.required && !props.ariaLabel && !props.ariaLabelledby"
-				:id="messageId"
-				class="d-sr-only"
-			>
-				{{ locales.labelledbyMessage }} <span v-if="props.label">{{ props.label + (props.displayAsterisk ? '*' : '') }}</span>.
-			</span>
 		</VCheckbox>
 	</div>
 </template>
 
 <style scoped>
 .success-field :deep(.v-messages__message) {
-	color: rgb(var(--v-theme-success)) !important;
+	color: rgb(var(--v-theme-onSuccessVariant)) !important;
 }
 
 .success-field :deep(.v-selection-control__input) {
-	color: rgb(var(--v-theme-success));
+	color: rgb(var(--v-theme-onSuccessVariant));
 }
 
 .warning-field :deep(.v-messages__message) {
-	color: rgb(var(--v-theme-borderWarning)) !important;
+	color: rgb(var(--v-theme-onWarningVariant)) !important;
 }
 
 .warning-field :deep(.v-selection-control__input) {
-	color: rgb(var(--v-theme-borderWarning));
+	color: rgb(var(--v-theme-onWarningVariant));
 }
 
 :deep(.v-input--dirty .v-selection-control__input) {

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.spec.ts

@@ -122,8 +122,8 @@ describe('SyCheckbox', () => {
 		// Créer une règle de validation au format attendu par le composant
 		const customRule = {
 			type: 'custom',
-			validator: (value: boolean) => value === true,
 			options: {
+				validate: (value: boolean) => value === true,
 				message: 'This checkbox must be checked',
 				fieldIdentifier: 'Custom checkbox',
 			},

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.visual.cy.ts

@@ -0,0 +1,61 @@
+import SyCheckbox from '../SyCheckbox.vue'
+
+describe('SyCheckbox - Visual regression tests', () => {
+	it('displays the checkbox unchecked by default', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: { label: 'J\'accepte les conditions' },
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-unchecked', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox checked', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'J\'accepte les conditions',
+				modelValue: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-checked', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox in indeterminate state', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'Sélectionner tout',
+				indeterminate: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-indeterminate', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox in disabled state', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-disabled', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox as required', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'Champ obligatoire',
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-required', cy.get('.v-checkbox'))
+	})
+})

package/src/components/Customs/SyIcon/SyIcon.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+	import type { ComponentPublicInstance } from 'vue'
 	import type { IconValue } from 'vuetify/lib/composables/icons.mjs'
 	import { vRgaaSvgFix } from '@/directives/rgaaSvgFix'
-	import { computed, onMounted, watch } from 'vue'
+	import { computed, onMounted, onUpdated, ref, watch } from 'vue'
 
 	/**
 	 * Composant SyIcon - Affiche une icône avec gestion de l'accessibilité
@@ -32,6 +33,7 @@
 		autoDetectButton?: boolean
 		color?: string
 		size?: string
+		width?: string
 	}>()
 
 	const resolvedDecorative = computed(() => props.decorative ?? true)
@@ -45,11 +47,26 @@
 		}
 	})
 
+	const svg = ref<ComponentPublicInstance | null>(null)
+
 	// Vérification à l'initialisation du composant
 	onMounted(() => {
 		checkAccessibility(props.icon, resolvedDecorative.value, props.label)
+		setWidth()
 	})
 
+	onUpdated(setWidth)
+
+	function setWidth() {
+		if (svg.value && props.width) {
+			const iconElement = svg.value.$el?.querySelector('svg')
+
+			if (iconElement) {
+				iconElement.setAttribute('width', props.width)
+			}
+		}
+	}
+
 	// Vérification à chaque changement des props concernées
 	watch(
 		[() => props.decorative, () => props.label, () => props.icon],
@@ -65,6 +82,7 @@
 
 <template>
 	<v-icon
+		ref="svg"
 		v-rgaa-svg-fix="rgaaSvgFixConfig"
 		:color="props.color"
 		:size="props.size"

package/src/components/Customs/SyIcon/accessibilite/Accessibility.mdx

@@ -65,12 +65,6 @@ Le composant `SyIcon` implémente automatiquement les bonnes pratiques d'accessi
   </div>
 </div>
 
-## 🧪 Démonstration interactive
-
-La démonstration ci-dessous vous permet de voir comment les attributs d'accessibilité sont générés en fonction des propriétés du composant :
-
-<Canvas of={SyIconStoriesAccessibility.AccessibilityDemo} />
-
 ## ✅ Bonnes pratiques
 
 <div style={{ background: '#edf7ed', padding: '15px', borderRadius: '5px', borderLeft: '4px solid #4caf50', marginBottom: '20px' }}>

package/src/components/Customs/SyIcon/tests/SyIcon.visual.cy.ts

@@ -0,0 +1,83 @@
+import SyIcon from '../SyIcon.vue'
+import { mdiHome, mdiInformation, mdiStar, mdiAlert, mdiCheck, mdiPencil } from '@mdi/js'
+
+describe('SyIcon - Visual regression tests', () => {
+	it('displays a decorative icon by default', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiHome,
+				decorative: true,
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-decorative', cy.get('.v-icon'))
+	})
+
+	it('displays an informative icon with label', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiInformation,
+				decorative: false,
+				label: 'Information importante',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.get('.v-icon').should('have.attr', 'aria-label', 'Information importante')
+		cy.matchImageSnapshot('sy-icon-informative', cy.get('.v-icon'))
+	})
+
+	it('hides a decorative icon from assistive tech (aria-hidden)', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiStar,
+				decorative: true,
+			},
+		})
+
+		cy.get('.v-icon').should('have.attr', 'aria-hidden', 'true')
+	})
+
+	it('displays an icon with a custom color', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiAlert,
+				decorative: true,
+				color: 'error',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-color-error', cy.get('.v-icon'))
+	})
+
+	it('displays an icon with size large', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiCheck,
+				decorative: true,
+				size: 'large',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-size-large', cy.get('.v-icon'))
+	})
+
+	it('displays an icon with role button', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiPencil,
+				decorative: false,
+				label: 'Éditer',
+				role: 'button',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.get('.v-icon').should('have.attr', 'role', 'button')
+		cy.get('.v-icon').should('have.attr', 'aria-label', 'Éditer')
+		cy.matchImageSnapshot('sy-icon-role-button', cy.get('.v-icon'))
+	})
+})

package/src/components/Customs/SyIcon/utils/tests/iconUtils.spec.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { createAccessibleIconAttributes, fixSvgAttributes } from '../iconUtils'
+
+describe('createAccessibleIconAttributes', () => {
+	describe('icône décorative', () => {
+		it('retourne role="presentation" et aria-hidden="true"', () => {
+			const attrs = createAccessibleIconAttributes(true)
+			expect(attrs.role).toBe('presentation')
+			expect(attrs['aria-hidden']).toBe('true')
+		})
+
+		it('ignore le label quand décorative', () => {
+			const attrs = createAccessibleIconAttributes(true, 'Mon label')
+			expect(attrs.role).toBe('presentation')
+			expect(attrs['aria-hidden']).toBe('true')
+		})
+	})
+
+	describe('icône fonctionnelle', () => {
+		it('retourne role="img" et aria-hidden undefined', () => {
+			const attrs = createAccessibleIconAttributes(false)
+			expect(attrs.role).toBe('img')
+			expect(attrs['aria-hidden']).toBeUndefined()
+		})
+
+		it('retourne aria-label avec le label fourni', () => {
+			const attrs = createAccessibleIconAttributes(false, 'Fermer la modale')
+			expect(attrs['aria-label']).toBe('Fermer la modale')
+		})
+
+		it('retourne aria-label undefined si aucun label fourni', () => {
+			const attrs = createAccessibleIconAttributes(false)
+			expect(attrs['aria-label']).toBeUndefined()
+		})
+
+		it('retourne aria-label undefined si label est une chaîne vide', () => {
+			const attrs = createAccessibleIconAttributes(false, '')
+			expect(attrs['aria-label']).toBeUndefined()
+		})
+	})
+})
+
+describe('fixSvgAttributes', () => {
+	beforeEach(() => {
+		vi.useFakeTimers()
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	it('ne fait rien si element est null', () => {
+		expect(() => fixSvgAttributes(null, true)).not.toThrow()
+		vi.runAllTimers()
+	})
+
+	it('supprime l\'attribut role sur le SVG quand décorative', () => {
+		const container = document.createElement('div')
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('role', 'img')
+		container.appendChild(svg)
+
+		fixSvgAttributes(container, true)
+		vi.runAllTimers()
+
+		expect(svg.hasAttribute('role')).toBe(false)
+	})
+
+	it('supprime aria-hidden sur le SVG quand fonctionnelle', () => {
+		const container = document.createElement('div')
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('aria-hidden', 'true')
+		container.appendChild(svg)
+
+		fixSvgAttributes(container, false)
+		vi.runAllTimers()
+
+		expect(svg.hasAttribute('aria-hidden')).toBe(false)
+	})
+
+	it('ne fait rien si aucun SVG dans l\'élément', () => {
+		const container = document.createElement('div')
+		container.appendChild(document.createElement('span'))
+
+		expect(() => {
+			fixSvgAttributes(container, true)
+			vi.runAllTimers()
+		}).not.toThrow()
+	})
+
+	it('agit de manière asynchrone (setTimeout)', () => {
+		const container = document.createElement('div')
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('role', 'img')
+		container.appendChild(svg)
+
+		fixSvgAttributes(container, true)
+
+		// Avant le tick : l'attribut est encore présent
+		expect(svg.hasAttribute('role')).toBe(true)
+
+		vi.runAllTimers()
+
+		// Après le tick : supprimé
+		expect(svg.hasAttribute('role')).toBe(false)
+	})
+})

package/src/components/Customs/SyIconButton/tests/SyIconButton.visual.cy.ts

@@ -0,0 +1,55 @@
+import SyIconButton from '../SyIconButton.vue'
+import { mdiPencil, mdiDelete, mdiPlus } from '@mdi/js'
+
+describe('SyIconButton - Visual regression tests', () => {
+	it('displays the icon button by default', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiPencil,
+				label: 'Modifier',
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-default', cy.get('.v-btn'))
+	})
+
+	it('displays the icon button with primary color', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiDelete,
+				label: 'Supprimer',
+				color: 'error',
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-error', cy.get('.v-btn'))
+	})
+
+	it('displays the icon button in large size', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiPlus,
+				label: 'Ajouter',
+				size: 'large',
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-large', cy.get('.v-btn'))
+	})
+
+	it('displays the icon button in disabled state', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiPencil,
+				label: 'Modifier',
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-disabled', cy.get('.v-btn'))
+	})
+})