@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/PageContainer/PageContainer.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import PageContainer from './PageContainer.vue'
-import { VCard } from 'vuetify/components'
+import { VCard, VDivider } from 'vuetify/components'
+import HeaderBar from '../HeaderBar/HeaderBar.vue'
+import FooterBar from '../FooterBar/FooterBar.vue'
 
 const meta = {
 	title: 'Composants/Layout/PageContainer',
 	component: PageContainer,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['spacingClass', 'containerSize'] },
+		controls: { exclude: ['spacingClass', 'containerSize', 'alignCenter'] },
 	},
 	argTypes: {
 		size: {
@@ -254,3 +256,169 @@ export const WithAriaRole: Story = {
 		}
 	},
 }
+
+export const WithHeaderAndFooter: Story = {
+	parameters: {
+		layout: 'fullscreen',
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <div class="d-flex flex-column" style="min-height: 100vh; width: 100%;">
+        <PageContainer style="flex: 1; width: 100%;">
+            <template #prepend="{ width }">
+                <HeaderBar
+                    service-title="Mon espace"
+                    service-subtitle="Service de santé"
+                    :heading-level-title="1"
+                    :width="width"
+                >
+                    <template #header-side>
+                        <div class="d-flex align-center ga-3 text-primary">
+                            <div class="text-body-2">
+                                <div class="font-weight-medium">Dr. Jean Dupont</div>
+                                <div>Cabinet médical</div>
+                                <div>12 rue de la Paix, 75001 Paris</div>
+                            </div>
+                            <VDivider vertical class="mx-2" style="height: 48px;" />
+                            <div class="text-body-2">
+                                <div class="font-weight-medium">Contact</div>
+                                <div>Tel: 01 23 45 67 89</div>
+                                <div>contact@cabinet.fr</div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #append>
+                        <div class="bg-primary" style="width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center;">
+                            <div class="text-white font-weight-medium">Mon Espace Personnel</div>
+                        </div>
+                    </template>
+                </HeaderBar>
+            </template>
+            
+            <h2 class="text-h5 mb-4">Bienvenue dans votre espace professionnel</h2>
+            <p>
+                Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                un texte en faux latin, qui permet de faire office de texte d'attente.
+            </p>
+            <p class="mt-4">
+                L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page
+                contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée
+                par le contenu, il demeure concentré seulement sur l'aspect graphique. Ce texte a pour autre
+                avantage d'utiliser des mots de longueur variable, essayant de simuler une occupation normale.
+            </p>
+            <p class="mt-4">
+                La méthode simplifiée consiste à ne pas s'embarrasser de prétentions philosophiques,
+                et à composer un texte en français présentable. On peut aussi utiliser des générateurs
+                de texte automatiques pour obtenir du contenu aléatoire, mais il faut veiller à ce que
+                le résultat soit cohérent et agréable à lire.
+            </p>
+            <p class="mt-4 mb-16">
+                Ce contenu supplémentaire permet de bien visualiser l'espacement entre le contenu principal
+                et le pied de page. Il est important de prévoir suffisamment d'espace pour que la mise en page
+                reste harmonieuse et que le contenu soit facilement lisible. Le texte d'attente peut être remplacé
+                par du texte réel dès que celui-ci est disponible.
+            </p>
+            
+            <template #append="{ width }">
+                <FooterBar
+                    :width="width"
+                    version="3.0.0"
+                    a11y-compliance="partiellement-conforme"
+                />
+            </template>
+        </PageContainer>
+    </div>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+    import { PageContainer, HeaderBar, FooterBar } from '@cnamts/synapse'
+    import { VDivider } from 'vuetify/components'
+</script>
+                `,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer, HeaderBar, FooterBar, VDivider },
+			setup() {
+				return { args }
+			},
+			template: `
+                <div class="d-flex flex-column" style="min-height: 100vh; width: 100%;">
+                    <PageContainer :size="args.size" :spacing="args.spacing" :color="args.color" style="flex: 1; width: 100%;">
+                        <template #prepend="{ width }">
+                            <HeaderBar
+                                service-title="Mon espace"
+                                service-subtitle="Service de santé"
+                                :heading-level-title="1"
+                                :width="width"
+                            >
+                                <template #header-side v-if="args.size !== 'xs' && args.size !== 'sm'">
+                                    <div class="d-flex align-center ga-3 text-primary mr-4">
+                                        <div class="text-body-2">
+                                            <div class="font-weight-medium">Dr. Jean Dupont</div>
+                                            <div>Cabinet médical</div>
+                                            <div>12 rue de la Paix, 75001 Paris</div>
+                                        </div>
+                                        <VDivider vertical class="mx-2" style="height: 48px;" />
+                                        <div class="text-body-2">
+                                            <div class="font-weight-medium">Contact</div>
+                                            <div>Tel: 01 23 45 67 89</div>
+                                            <div>contact@cabinet.fr</div>
+                                        </div>
+                                    </div>
+                                </template>
+                                <template #append>
+                                    <div class="bg-primary" style="width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center;">
+                                        <div class="text-white font-weight-medium">Mon Espace Personnel</div>
+                                    </div>
+                                </template>
+                            </HeaderBar>
+                        </template>
+                        
+                        <h2 class="text-h5 mb-4">Bienvenue dans votre espace professionnel</h2>
+                        <p>
+                            Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                            à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                            faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                            un texte en faux latin, qui permet de faire office de texte d'attente.
+                        </p>
+                        <p class="mt-4">
+                            L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page
+                            contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée
+                            par le contenu, il demeure concentré seulement sur l'aspect graphique. Ce texte a pour autre
+                            avantage d'utiliser des mots de longueur variable, essayant de simuler une occupation normale.
+                        </p>
+                        <p class="mt-4">
+                            La méthode simplifiée consiste à ne pas s'embarrasser de prétentions philosophiques,
+                            et à composer un texte en français présentable. On peut aussi utiliser des générateurs
+                            de texte automatiques pour obtenir du contenu aléatoire, mais il faut veiller à ce que
+                            le résultat soit cohérent et agréable à lire.
+                        </p>
+                        <p class="mt-4 mb-16">
+                            Ce contenu supplémentaire permet de bien visualiser l'espacement entre le contenu principal
+                            et le pied de page. Il est important de prévoir suffisamment d'espace pour que la mise en page
+                            reste harmonieuse et que le contenu soit facilement lisible. Le texte d'attente peut être remplacé
+                            par du texte réel dès que celui-ci est disponible.
+                        </p>
+                        
+                        <template #append="{ width }">
+                            <FooterBar
+                                :width="width"
+                                version="3.0.0"
+                                a11y-compliance="partiellement-conforme"
+                            />
+                        </template>
+                    </PageContainer>
+                </div>
+            `,
+		}
+	},
+}

package/src/components/PageContainer/PageContainer.vue

@@ -10,6 +10,7 @@
 		uniqueId?: string
 		role?: AriaRole
 		ariaLabelledby?: string
+		alignCenter?: boolean
 	}>(), {
 		size: undefined,
 		spacing: undefined,
@@ -17,6 +18,7 @@
 		uniqueId: undefined,
 		role: undefined,
 		ariaLabelledby: undefined,
+		alignCenter: false,
 	})
 
 	const display = useDisplay()
@@ -53,6 +55,8 @@
 		}
 	})
 
+	const containerWidth = computed(() => `${containerSize.value}px`)
+
 	defineExpose({
 		spacingClass,
 		containerSize,
@@ -62,17 +66,54 @@
 <template>
 	<div
 		:id="uniqueId ? `${uniqueId}-container` : undefined"
-		:class="[spacingClass, 'vd-page-container d-flex justify-center']"
+		:class="['vd-page-container d-flex flex-column', { 'align-center': alignCenter }]"
 		:role="role"
 		:aria-labelledby="ariaLabelledby"
 	>
-		<VSheet
-			:id="uniqueId ? `${uniqueId}-content` : undefined"
-			:width="containerSize"
-			:color="color"
+		<!-- Slot prepend avec wrapper de largeur fixe -->
+		<div
+			v-if="$slots.prepend"
+			class="vd-page-container__slot-wrapper"
+		>
+			<div
+				class="vd-page-container__slot-content"
+				:style="{ width: containerWidth }"
+			>
+				<slot
+					name="prepend"
+					:width="containerWidth"
+				/>
+			</div>
+		</div>
+
+		<div
+			:class="spacingClass"
+			class="vd-page-container__content"
 		>
-			<slot />
-		</VSheet>
+			<VSheet
+				:id="uniqueId ? `${uniqueId}-content` : undefined"
+				:width="containerSize"
+				:color="color"
+			>
+				<slot />
+			</VSheet>
+		</div>
+
+		<!-- Slot append avec wrapper de largeur fixe -->
+		<div
+			v-if="$slots.append"
+			class="vd-page-container__slot-wrapper"
+		>
+			<div
+				class="vd-page-container__slot-content"
+				:style="{ width: containerWidth }"
+			>
+				<slot
+					name="append"
+					:width="containerWidth"
+				/>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -80,7 +121,21 @@
 .vd-page-container {
 	flex: 1;
 	width: 100%;
-	max-width: 1712px;
+}
+
+.vd-page-container__content {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+
+.vd-page-container__slot-wrapper {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.vd-page-container__slot-content {
 	margin: 0 auto;
 }
 </style>

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

@@ -0,0 +1,33 @@
+import PageContainer from '../PageContainer.vue'
+import { h } from 'vue'
+
+describe('PageContainer - Visual regression tests', () => {
+	it('displays the page container by default', () => {
+		cy.mountWithVuetify(PageContainer, {
+			slots: { default: () => h('p', 'Contenu de la page') },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('page-container-default', cy.get('.v-application'))
+	})
+
+	it('displays the page container with md size', () => {
+		cy.mountWithVuetify(PageContainer, {
+			props: { size: 'md' },
+			slots: { default: () => h('p', 'Contenu de la page') },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('page-container-md', cy.get('.v-application'))
+	})
+
+	it('displays the page container with background color', () => {
+		cy.mountWithVuetify(PageContainer, {
+			props: { color: 'blue-lighten-5' },
+			slots: { default: () => h('p', 'Contenu de la page') },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('page-container-color', cy.get('.v-application'))
+	})
+})

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

@@ -3,18 +3,26 @@
 exports[`PageContainer > render correctly 1`] = `
 <div class="
   d-flex
-  justify-center
-  px-14
-  py-10
+  flex-column
   vd-page-container
 ">
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    style="width: 800px;"
-  ></div>
+  <!-- Slot prepend avec wrapper de largeur fixe -->
+  <!-- v-if -->
+  <div class="
+    px-14
+    py-10
+    vd-page-container__content
+  ">
+    <div
+      class="
+        bg-transparent
+        v-sheet
+        v-theme--light
+      "
+      style="width: 800px;"
+    ></div>
+  </div>
+  <!-- Slot append avec wrapper de largeur fixe -->
+  <!-- v-if -->
 </div>
 `;

package/src/components/PaginatedTable/PaginatedTable.mdx

@@ -28,7 +28,6 @@ import * as PaginatedTableStories from "./PaginatedTable.stories.ts";
 		itemsPerPage: 4,
 		sortBy: [{ key: 'calories', order: 'desc' }],
 	})
-import '../../stories/styles/shared.css';
 
 	const headers = reactive([
 		{ text: 'Dessert (100g serving)', value: 'name' },

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

@@ -1,12 +1,104 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../PaginatedTable.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../PaginatedTable.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="PaginatedTable"
+    iconSrc={AccessibilityIcon}
+>
+    <AuditSection>
+        <div>Rapport d’audit manuel :{' '}
+            <a href="/audits/PaginatedTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
+        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>
+            Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/914" target="_blank" rel="noopener noreferrer" style={{color: '#0C41BD'}}>issue #914</a>)
+        </div>
+    </AuditSection>
 
-<br />
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTable</code> ou <code>VDataTableServer</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) est injectée dynamiquement au montage et reste accessible via <code>d-sr-only</code> si elle est visuellement masquée.</li>
+                <li>Les en-têtes utilisent des cellules <code>th</code> avec <code>scope="col"</code> et exposent les états de tri via <code>aria-sort</code>.</li>
+                <li>Les options de pagination et de tri sont exposées via des composants natifs (<code>Pagination</code>, sélecteurs Vuetify).</li>
+                <li>Les slots permettent d’étendre le tableau sans casser la sémantique native.</li>
+                <li>L’état de tri, pagination et groupement peut être persisté sans impacter la structure accessible.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes de colonnes sont focalisables via <code>tabindex="0"</code>.</li>
+                <li>Les actions de tri sont accessibles au clavier via Entrée ou Espace.</li>
+                <li>La pagination est entièrement navigable au clavier (page, items par page).</li>
+                <li>Le sélecteur « éléments par page » est accessible et correctement libellé.</li>
+                <li>Les champs de filtre et composants injectés restent accessibles dans l’ordre de tabulation.</li>
+                <li>Les interactions dynamiques ne bloquent pas la navigation clavier.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le <code>caption</code> fournit un contexte global pour la lecture du tableau.</li>
+                <li>Les changements de pagination et de tri sont restitués via les attributs ARIA des en-têtes.</li>
+                <li>Les champs « éléments par page » sont annoncés avec un libellé explicite.</li>
+                <li>Les suppressions d’attributs comme <code>aria-describedby</code> évitent les annonces redondantes.</li>
+                <li>Les modifications d’état du tableau restent cohérentes pour les lecteurs d’écran.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system garantissent un contraste suffisant pour texte, bordures et focus.</li>
+                <li>Les en-têtes sont visuellement différenciés via une typographie renforcée.</li>
+                <li>Les états actifs (focus, tri, sélection) restent perceptibles visuellement et programmatiquement.</li>
+                <li>Les contrôles de pagination et filtres conservent une lisibilité constante sur tous les thèmes.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="💾" title="Persistance et état">
+            <ul>
+                <li>L’état du tableau (tri, pagination, groupement) peut être sauvegardé dans le localStorage.</li>
+                <li>La restauration de l’état n’altère pas la structure du tableau ni son accessibilité.</li>
+                <li>Les préférences utilisateur sont isolées par clé (<code>suffix</code>) pour éviter les collisions.</li>
+                <li>Les champs et en-têtes restent accessibles après rechargement.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="PaginatedTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournissez toujours un <code>caption</code> explicite pour décrire le contenu du tableau.</li>
+            <li>Utilisez des intitulés de colonnes courts, uniques et compréhensibles.</li>
+            <li>Évitez de surcharger les slots avec des contrôles non liés au tableau.</li>
+            <li>Vérifiez que les interactions de tri restent accessibles uniquement au clavier.</li>
+            <li>Testez la restitution des changements (pagination, tri) avec un lecteur d’écran.</li>
+            <li>Assurez une cohérence entre les états visuels et les attributs ARIA.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5 (tableaux), 7 (ARIA), 10 (présentation)</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,41 @@
+import PaginatedTable from '../PaginatedTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom' },
+	{ title: 'Prénom', key: 'prenom' },
+	{ title: 'Date', key: 'date' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', date: '01/01/1990' },
+	{ nom: 'Martin', prenom: 'Marie', date: '15/06/1985' },
+]
+
+describe('PaginatedTable - Visual regression tests', () => {
+	it('displays the paginated table by default', () => {
+		cy.mountWithVuetify(PaginatedTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau de données',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('paginated-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the paginated table with server items', () => {
+		cy.mountWithVuetify(PaginatedTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 50,
+				caption: 'Tableau serveur',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('paginated-table-server', cy.get('.v-application'))
+	})
+})

package/src/components/PasswordField/PasswordField.mdx

@@ -1,5 +1,6 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks'
 import * as PasswordFieldStories from './PasswordField.stories'
+import * as PasswordFieldValidationStories from './Validation/Validation.stories'
 
 <Meta of={PasswordFieldStories} />
 
@@ -56,73 +57,25 @@ Le composant peut être requis et afficher un message d'erreur si le champ est v
 
 Exemple complet montrant les différents types de validation (erreurs, avertissements, succès).
 
-<Canvas of={PasswordFieldStories.WithValidation} />
+<Canvas of={PasswordFieldValidationStories.WithCustomRules} />
 
 ### Exemples d'états de validation
 
 <div className="sb-grid">
   <div>
     <h4>Avec erreur</h4>
-    <Canvas of={PasswordFieldStories.WithError} />
+    <Canvas of={PasswordFieldValidationStories.WithError} />
   </div>
   <div>
     <h4>Avec avertissement</h4>
-    <Canvas of={PasswordFieldStories.WithWarning} />
+    <Canvas of={PasswordFieldValidationStories.WithWarning} />
   </div>
   <div>
     <h4>Avec succès</h4>
-    <Canvas of={PasswordFieldStories.WithSuccess} />
+    <Canvas of={PasswordFieldValidationStories.WithSuccess} />
   </div>
 </div>
 
-### Validation de formulaire
-
-Le composant expose une méthode `validateOnSubmit` pour valider le champ lors de la soumission d'un formulaire.
-
-<Canvas of={PasswordFieldStories.WithFormValidation} />
-
-<Source
-    dark code={`
-<template>
-	<form @submit.prevent="handleSubmit">
-		<PasswordField
-			ref="passwordFieldRef"
-			v-model="password"
-			required
-			:custom-rules="customRules"
-		/>
-		<button type="submit">Valider</button>
-	</form>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { PasswordField } from '@cnamts/synapse'
-
-const password = ref('')
-import '../../stories/styles/shared.css';
-const passwordFieldRef = ref()
-
-const customRules = [{
-	type: 'custom',
-	options: {
-		message: 'Le mot de passe doit contenir au moins 8 caractères',
-		validate: (value: string) => value.length >= 8
-	}
-}]
-
-function handleSubmit() {
-	const isValid = passwordFieldRef.value?.validateOnSubmit()
-	if (!isValid) {
-		// Gérer l'erreur
-		return
-	}
-	// Continuer avec la soumission
-}
-</script>
-`}
-/>
-
 ### Méthodes exposées
 
 Le composant expose les méthodes et propriétés suivantes via `defineExpose` :