@cnamts/synapse 1.0.27 → 1.1.1

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

@@ -0,0 +1,32 @@
+import ErrorPage from '../ErrorPage.vue'
+
+describe('ErrorPage - Visual regression tests', () => {
+	it('displays the error page by default', () => {
+		cy.mountWithVuetify(ErrorPage)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('error-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the error page with custom message', () => {
+		cy.mountWithVuetify(ErrorPage, {
+			props: {
+				pageTitle: 'Erreur technique',
+				message: 'Une erreur inattendue s\'est produite.',
+				code: '500',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('error-page-custom', cy.get('.v-application'))
+	})
+
+	it('displays the error page without button', () => {
+		cy.mountWithVuetify(ErrorPage, {
+			props: { hideBtn: true },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('error-page-no-btn', cy.get('.v-application'))
+	})
+})

package/src/components/ExternalLinks/ExternalLinks.mdx

@@ -65,7 +65,6 @@ Vous pouvez utiliser le slot `link-icon` pour remplacer l'icône dans les liens.
 
 			const arrowIcon = mdiArrowTopRight
 		</script>
-import '../../stories/styles/shared.css';
 
 		<template>
 			<ExternalLinks

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

@@ -0,0 +1,30 @@
+import ExternalLinks from '../ExternalLinks.vue'
+
+const defaultItems = [
+	{ text: 'Ameli.fr', href: 'https://www.ameli.fr' },
+	{ text: 'Service-public.fr', href: 'https://www.service-public.fr' },
+]
+
+describe('ExternalLinks - Visual regression tests', () => {
+	it('displays the external links button', () => {
+		cy.mountWithVuetify(ExternalLinks, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('external-links-default', cy.get('.v-application'))
+	})
+
+	it('displays the external links in fixed position', () => {
+		cy.mountWithVuetify(ExternalLinks, {
+			props: {
+				items: defaultItems,
+				fixed: true,
+				position: 'bottom right',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('external-links-fixed', cy.get('.v-application'))
+	})
+})

package/src/components/FileList/FileList.mdx

@@ -76,7 +76,6 @@ Il est possible de personnaliser les icônes de fichier en utilisant le slot dyn
 					state: 'initial',
 				},
 			])
-import '../../stories/styles/shared.css';
 		</script>
 
 		<FileList

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

@@ -0,0 +1,31 @@
+import FileList from '../FileList.vue'
+
+const defaultUploadList = [
+	{ id: '1', title: 'Carte vitale', state: 'initial', showUploadBtn: true },
+	{ id: '2', title: 'Justificatif de domicile', state: 'success', fileName: 'justificatif.pdf' },
+	{ id: '3', title: 'Ordonnance', state: 'error' },
+]
+
+describe('FileList - Visual regression tests', () => {
+	it('displays the file list with mixed states', () => {
+		cy.mountWithVuetify(FileList, {
+			props: { uploadList: defaultUploadList },
+		})
+
+		cy.get('.upload-list').should('be.visible')
+		cy.matchImageSnapshot('file-list-default', cy.get('.upload-list'))
+	})
+
+	it('displays the file list with delete buttons', () => {
+		cy.mountWithVuetify(FileList, {
+			props: {
+				uploadList: [
+					{ id: '1', title: 'Document', state: 'success', fileName: 'doc.pdf', showDeleteBtn: true },
+				],
+			},
+		})
+
+		cy.get('.upload-list').should('be.visible')
+		cy.matchImageSnapshot('file-list-with-delete', cy.get('.upload-list'))
+	})
+})

package/src/components/FilePreview/accessibilite/Accessibility.mdx

@@ -1,12 +1,90 @@
 import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../FilePreview.stories.ts';
-import '@/stories/styles/shared.css';
+import * as FilePreviewStories from '../FilePreview.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+  AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={FilePreviewStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+  componentName="FilePreview"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/tutorials/images/"
+>
+  <AuditSection>
+    <div class="mt-2">
+      <p>Rapport d'audit manuel : <a href="/audits/FilePreview.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+      <p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/922" target="_blank" style={{color:'#0C41BD'}}>issue #922</a>)</p>
+    </div>
+  </AuditSection>
 
-<br />
+  <CriteriaSection>
+
+    <CriteriaCard icon="🖼️" title="Prévisualisation des images">
+      <ul>
+        <li><strong>Image native</strong> : Utilisation de l'élément HTML <code>&lt;img&gt;</code></li>
+        <li><strong>Texte alternatif</strong> : Support de l'attribut <code>alt</code> via <code>options.image.alt</code></li>
+        <li><strong>Compatibilité</strong> : Restitution native par les technologies d'assistance</li>
+        <li><strong>Conformité</strong> : Respect du critère RGAA 1.1 relatif aux images porteuses d'information</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📄" title="Prévisualisation des PDF">
+      <ul>
+        <li><strong>Intégration native</strong> : Utilisation de l'élément <code>&lt;object&gt;</code></li>
+        <li><strong>Type explicite</strong> : Déclaration du MIME type <code>application/pdf</code></li>
+        <li><strong>Fallback accessible</strong> : Message affiché lorsque la prévisualisation n'est pas disponible</li>
+        <li><strong>Compatibilité variable</strong> : Le rendu dépend du navigateur et du lecteur PDF disponible</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="⚠️" title="Gestion des formats non supportés">
+      <ul>
+        <li><strong>Message alternatif</strong> : Affichage d'un contenu de remplacement lorsque le type de fichier n'est pas prévisualisable</li>
+        <li><strong>Slot personnalisé</strong> : Possibilité de fournir un message métier adapté</li>
+        <li><strong>Compréhension utilisateur</strong> : Évite les zones vides ou silencieuses</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="♿" title="Informations accessibles">
+      <ul>
+        <li><strong>Texte alternatif pertinent</strong> : Fournir un <code>alt</code> descriptif lorsque l'image apporte une information</li>
+        <li><strong>Image décorative</strong> : Utiliser un <code>alt=""</code> lorsque l'image n'apporte aucune information utile</li>
+        <li><strong>Message de secours</strong> : Les utilisateurs sont informés lorsqu'un aperçu ne peut être affiché</li>
+        <li><strong>Navigation clavier</strong> : Aucun comportement spécifique requis car le composant n'est pas interactif</li>
+      </ul>
+    </CriteriaCard>
+
+  </CriteriaSection>
+
+  <DemoSection componentName="FilePreview">
+    <Story of={FilePreviewStories.Default} />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li>Renseigner systématiquement <code>options.image.alt</code> pour les images informatives.</li>
+      <li>Prévoir un message explicite pour les formats non pris en charge.</li>
+      <li>Ne pas utiliser la prévisualisation comme unique moyen d'accéder au document.</li>
+      <li>Fournir un lien de téléchargement complémentaire lorsque cela est pertinent.</li>
+      <li>Tester les PDF sur plusieurs navigateurs car leur rendu dépend des capacités natives.</li>
+      <li>Vérifier que le contraste des contenus affichés respecte les exigences d'accessibilité.</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/tutorials/images/" target="_blank" rel="noopener noreferrer">WAI - ImagesTutorial</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://accessibilite.numerique.gouv.fr/" target="_blank" rel="noopener noreferrer">Référentiel Général d'Amélioration de l'Accessibilité (RGAA)</a></li>
+    </ul>
+  </ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,36 @@
+import FileUpload from '../FileUpload.vue'
+
+describe('FileUpload - Visual regression tests', () => {
+	it('displays the file upload zone by default', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: { modelValue: [] },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-default', cy.get('.v-application'))
+	})
+
+	it('displays the file upload zone in disabled state', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: {
+				modelValue: [],
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-disabled', cy.get('.v-application'))
+	})
+
+	it('displays the file upload zone with multiple files allowed', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: {
+				modelValue: [],
+				multiple: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-multiple', cy.get('.v-application'))
+	})
+})

package/src/components/FilterInline/FilterInline.mdx

@@ -92,7 +92,6 @@ const filters = ref([
 		title: 'Profession',
 	},
 ])
-import '../../stories/styles/shared.css';
 
 const folderTypes = [
 	{

package/src/components/FilterInline/FilterInline.stories.ts

@@ -537,6 +537,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>
@@ -583,6 +584,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 						color="primary"

package/src/components/FilterInline/FilterInline.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 	import useFilterable, { type FilterProp } from '@/composables/useFilterable/useFilterable'
 	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
-	import { toRef } from 'vue'
+	import { toRef, watch } from 'vue'
 	import ChipList from '../ChipList/ChipList.vue'
 	import { locales as defaultLocales } from './locales'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
@@ -15,19 +15,25 @@
 	})
 
 	const emits = defineEmits<{
-		'update:modelValue': (value: FilterProp) => void
+		(e: 'update:modelValue', value: FilterProp): void
 	}>()
 
 	const {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		getChips,
 		getFilterCount,
 		formatFilterName,
-	} = useFilterable(toRef(props, 'modelValue'), emits)
+	} = useFilterable(toRef(props, 'modelValue'))
 
+	watch(filters, (newFilters) => {
+		if (JSON.stringify(newFilters) === JSON.stringify(props.modelValue)) {
+			// a new array or object do not mean a new value
+			return
+		}
+		emits('update:modelValue', filters.value)
+	}, { deep: true })
 </script>
 
 <template>
@@ -88,7 +94,6 @@
 						'onUpdate:modelValue': (value: unknown) => {
 							if (value !== filter.value) {
 								filter.value = value
-								updateValue()
 							}
 						},
 					}"

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

@@ -0,0 +1,25 @@
+import FilterInline from '../FilterInline.vue'
+
+const defaultFilters = [
+	{
+		name: 'statut',
+		title: 'Statut',
+		value: ['actif'],
+	},
+	{
+		name: 'type',
+		title: 'Type',
+		value: null,
+	},
+]
+
+describe('FilterInline - Visual regression tests', () => {
+	it('displays the inline filters', () => {
+		cy.mountWithVuetify(FilterInline, {
+			props: { modelValue: defaultFilters },
+		})
+
+		cy.get('.sy-filters-inline').should('be.visible')
+		cy.matchImageSnapshot('filter-inline-default', cy.get('.sy-filters-inline'))
+	})
+})

package/src/components/FilterSideBar/FilterSideBar.mdx

@@ -93,7 +93,6 @@ const filters = ref([
 		title: 'Profession',
 	},
 ])
-import '../../stories/styles/shared.css';
 
 const folderTypes = [
 	{
@@ -237,6 +236,14 @@ const professionList = [
 	}}
 />
 
+## Titre du panneau
+
+Vous pouvez afficher un titre au-dessus des filtres via la prop `title`. C'est utile pour distinguer plusieurs `FilterSideBar` présents sur une même page (par exemple associés à des tableaux différents).
+
+Le niveau sémantique du titre est configurable via la prop `headingLevel` (`1` à `6`, défaut `2`) afin de l'intégrer correctement dans la hiérarchie de titres de la page. Le titre sert également de **nom accessible** au panneau (`aria-labelledby`).
+
+<Canvas of={FilterSideBarStories.Title} />
+
 ## Gestion du z-index
 
 Le `FilterSideBar` utilise un `VNavigationDrawer` de Vuetify dont le z-index par défaut est **1000**.

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -10,7 +10,7 @@ import RangeField from '../RangeField/RangeField.vue'
 import SyTextField from '../Customs/SyTextField/SyTextField.vue'
 
 const meta = {
-	title: 'Composants/Filtres/FiltersSideBar',
+	title: 'Composants/Filtres/FilterSideBar',
 	component: FilterSideBar,
 
 	argTypes: {
@@ -89,6 +89,37 @@ const meta = {
 				},
 			},
 		},
+		'title': {
+			description: 'Titre affiché au-dessus des filtres du panneau',
+			control: {
+				type: 'text',
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'undefined',
+				},
+			},
+		},
+		'headingLevel': {
+			description: 'Niveau sémantique du titre (balise h1 à h6), pour l’intégration dans la hiérarchie de titres de la page',
+			control: {
+				type: 'select',
+			},
+			options: [1, 2, 3, 4, 5, 6],
+			table: {
+				category: 'props',
+				type: {
+					summary: '1 | 2 | 3 | 4 | 5 | 6',
+				},
+				defaultValue: {
+					summary: '2',
+				},
+			},
+		},
 		'onUpdate:modelValue': {
 			description: 'Événement déclenché lors de la mise à jour des filtres',
 			control: {
@@ -602,6 +633,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>
@@ -703,6 +735,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>
@@ -833,6 +866,108 @@ const professionList = [
 	},
 }
 
+export const Title: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<FilterSideBar
+		v-model="filters"
+		title="Filtres du tableau personnalisé"
+	>
+		<template #name="{ props }">
+			<SyTextField
+				v-bind="props"
+				label="Nom"
+				variant="outlined"
+				hide-details
+			/>
+		</template>
+
+		<template #folder="{ props }">
+			<SyTextField
+				v-bind="props"
+				label="Type de dossier"
+				variant="outlined"
+				hide-details
+			/>
+		</template>
+	</FilterSideBar>
+</template>
+			`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FilterSideBar, SyTextField } from '@cnamts/synapse'
+
+const filters = ref([
+	{
+		name: 'name',
+		title: 'Identité',
+	},
+	{
+		name: 'folder',
+		title: 'Type de dossier',
+	},
+])
+</script>
+			`,
+			},
+		],
+	},
+	args: {
+		'onUpdate:modelValue': fn(),
+		'title': 'Filtres du tableau personnalisé',
+	},
+	decorators: Default.decorators,
+	render: args => ({
+		components: { FilterSideBar, SyTextField },
+		setup() {
+			const filters = ref([
+				{
+					name: 'name',
+					title: 'Identité',
+				},
+				{
+					name: 'folder',
+					title: 'Type de dossier',
+				},
+			])
+
+			return { args, filters }
+		},
+		template: `
+			<FilterSideBar
+				v-bind="args"
+				v-model="filters"
+			>
+				<template #name="{ props }">
+					<SyTextField
+						v-bind="props"
+						label="Nom"
+						variant="outlined"
+						hide-details
+					/>
+				</template>
+
+				<template #folder="{ props }">
+					<SyTextField
+						v-bind="props"
+						label="Type de dossier"
+						variant="outlined"
+						hide-details
+					/>
+				</template>
+			</FilterSideBar>
+		`,
+	}),
+}
+
 export const ZIndex: Story = {
 	args: {
 		'onUpdate:modelValue': fn(),