@cnamts/synapse 1.0.27 → 1.1.0

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.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,
@@ -380,13 +379,6 @@
 			>
 				<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>

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/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/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'))
+	})
+})

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

@@ -0,0 +1,40 @@
+import SyPagination from '../SyPagination.vue'
+
+describe('SyPagination - Visual regression tests', () => {
+	it('displays pagination on first page', () => {
+		cy.mountWithVuetify(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+			},
+		})
+
+		cy.get('.sy-pagination').should('be.visible')
+		cy.matchImageSnapshot('sy-pagination-first-page', cy.get('.sy-pagination'))
+	})
+
+	it('displays pagination on middle page', () => {
+		cy.mountWithVuetify(SyPagination, {
+			props: {
+				modelValue: 5,
+				pages: 10,
+			},
+		})
+
+		cy.get('.sy-pagination').should('be.visible')
+		cy.matchImageSnapshot('sy-pagination-middle-page', cy.get('.sy-pagination'))
+	})
+
+	it('displays pagination with label', () => {
+		cy.mountWithVuetify(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 5,
+				label: 'Navigation des pages',
+			},
+		})
+
+		cy.get('.sy-pagination').should('be.visible')
+		cy.matchImageSnapshot('sy-pagination-with-label', cy.get('.sy-pagination'))
+	})
+})

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

@@ -114,7 +114,6 @@ export const Default: Story = {
 			{ label: 'Option B', value: 'b' },
 			{ label: 'Option C', value: 'c' },
 		],
-		showSuccessMessages: true,
 	},
 
 	render: args => ({

package/src/components/Customs/SyRadioGroup/SyRadioGroup.vue

@@ -182,12 +182,12 @@
 			}}</span>.
 		</span>
 		<template
-			v-if="(!hasError && (hasWarning || hasSuccess) && props.showSuccessMessages) || showHelpTextAsMessage"
+			v-if="(!hasError && (hasWarning || (hasSuccess && props.showSuccessMessages))) || showHelpTextAsMessage"
 			#details
 		>
 			<div class="v-input__details sy-radio-group__messages">
 				<VMessages
-					v-if="!hasError && (hasWarning || hasSuccess) && props.showSuccessMessages"
+					v-if="!hasError && (hasWarning || (hasSuccess && props.showSuccessMessages))"
 					:active="hasWarning || (hasSuccess && successes.length > 0)"
 					:messages="hasWarning ? warnings : successes"
 				/>
@@ -227,7 +227,8 @@
 }
 
 .sy-radio-group__help-text {
-	font-size: 0.75rem;
+	margin-top: 10px;
+	font-size: var(--v-fontSize-liensEtLibelles);
 	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
 }
 

package/src/components/Customs/SyRadioGroup/composables/useSyRadioGroupValidation.ts

@@ -73,7 +73,7 @@ export function useSyRadioGroupValidation(
 
 	// Vuetify ne gère pas les messages de succès, on désactive automatiquement en mode Vuetify
 	const effectiveShowSuccessMessages = computed(() =>
-		props.useVuetifyValidation ? false : (props.showSuccessMessages ?? true),
+		props.useVuetifyValidation ? false : (props.showSuccessMessages ?? false),
 	)
 
 	const {

package/src/components/Customs/SyRadioGroup/validation/Validation.stories.ts

@@ -250,22 +250,14 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 /**
- * showSuccessMessages: false — les messages de succès sont masqués
- * Le champ est validé mais aucun message positif n'est affiché
+ * Validation avec customSuccessRules (règles de succès Synapse)
+ * Affiche un message de succès quand une option valide est sélectionnée
  */
-export const NoSuccessMessage: Story = {
+export const WithSuccess: Story = {
 	parameters: {
 		docs: {
 			description: {
-				story: `
-### showSuccessMessages à false
-Avec **showSuccessMessages: false**, la validation se produit normalement mais les messages de succès ne s'affichent pas.
-
-**Caractéristiques :**
-- Sélectionner une option valide le champ silencieusement
-- Aucun message vert n'est affiché
-- Utile quand le feedback positif est jugé superflu
-				`,
+				story: 'Une option valide est présélectionnée et déclenche la confirmation de succès au chargement.',
 			},
 		},
 		sourceCode: [
@@ -273,20 +265,25 @@ Avec **showSuccessMessages: false**, la validation se produit normalement mais l
 				name: 'Template',
 				code: `
 <template>
-	<SyRadioGroup
-		v-model="selected"
-		label="Choisissez une option"
-		:options="options"
-		:show-success-messages="false"
-		required
-	/>
+	<SyForm ref="form" @submit="onSubmit">
+		<SyRadioGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			show-success-messages
+			:custom-success-rules="customSuccessRules"
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
 </template>`,
 			},
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
 import { ref } from 'vue'
-import { SyRadioGroup } from '@cnamts/synapse'
+import { SyRadioGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+import type { ValidationRule } from '@/composables/unifyValidation/useValidation'
 
 const selected = ref<string | null>('a')
 
@@ -294,27 +291,66 @@ const options = [
 	{ label: 'Option A', value: 'a' },
 	{ label: 'Option B', value: 'b' },
 ]
+
+const customSuccessRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: unknown) => value !== null && value !== undefined,
+			successMessage: 'Sélection confirmée.',
+		},
+	},
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide !')
+	}
+}
 </script>`,
 			},
 		],
 	},
 
 	render: args => ({
-		components: { SyRadioGroup },
+		components: { SyRadioGroup, SyForm, VBtn },
 		setup() {
 			const selected = ref<string | null>('a')
-			return { args, selected }
+
+			const customSuccessRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value !== null && value !== undefined,
+						successMessage: 'Sélection confirmée.',
+					},
+				},
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide !')
+				}
+			}
+
+			return { args, selected, customSuccessRules, onSubmit }
 		},
 		template: `
-			<SyRadioGroup
-				v-model="selected"
-				v-bind="args"
-				:show-success-messages="false"
-			/>
+			<SyForm ref="form" @submit="onSubmit">
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+					show-success-messages
+					:custom-success-rules="customSuccessRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
 		`,
 	}),
 }
 
+/**
+ * showSuccessMessages: false — les messages de succès sont masqués
 /**
  * disableErrorHandling: true — la validation est complètement désactivée
  */