@cnamts/synapse 1.0.20 → 1.0.21

package/src/components/ErrorPage/locales.ts

@@ -1,5 +1,23 @@
+import imgUrlAp from './assets/error-ap.svg'
+
 export const locales = {
-	errorCodeText: 'Code d\'erreur\xa0: ',
-	supportIdMessage: 'Votre identifiant de support\xa0:',
-	btnText: 'Retour à l’accueil',
+	default: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard.',
+		src: undefined,
+		code: '500',
+	},
+	cnam: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard. Si le problème persiste veuillez nous contacter par téléphone au 3646',
+		src: undefined,
+		code: '500',
+	},
+	ap: {
+		pageTitle: 'Les services amelipro sont indisponibles !',
+		message:
+      'Nous mettons en œuvre les mesures nécessaires pour rétablir rapidement votre accès. Veuillez nous excuser pour la gêne occasionnée.',
+		src: imgUrlAp,
+		code: '500',
+	},
 }

package/src/components/ErrorPage/tests/ErrorPage.a11y.spec.ts

@@ -6,23 +6,15 @@ import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import ErrorPage from '../ErrorPage.vue'
 
-// Scénario d’accessibilité : page d’erreur avec titre, message, code
-// et bouton de retour vers la page d’accueil.
+// Scénario d’accessibilité : page d'erreur basée sur StatusPage,
+// sans bouton d’action, avec illustration décorative masquée.
 
 describe('ErrorPage – accessibility (axe)', () => {
-	it('has no obvious axe violations with title, message and action button', async () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				pageTitle: 'Une erreur est survenue',
-				message: 'Un problème technique est survenu. Merci de réessayer plus tard.',
-				code: '500',
-				btnText: 'Retour à l\'accueil',
-				btnHref: 'https://www.ameli.fr',
-			},
-		})
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(ErrorPage)
 
 		const results = await axe(wrapper.element as HTMLElement)
-		assertNoA11yViolations(results, 'ErrorPage – default error page', {
+		assertNoA11yViolations(results, 'ErrorPage – default state', {
 			ignoreRules: ['region'],
 		})
 	})

package/src/components/ErrorPage/tests/ErrorPage.spec.ts

@@ -1,50 +1,11 @@
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import ErrorPage from '../ErrorPage.vue'
 
 describe('ErrorPage', () => {
 	it('renders correctly', () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				pageTitle: 'Something went wrong',
-				message: 'Error message',
-			},
-		})
+		const wrapper = shallowMount(ErrorPage)
 
-		expect(wrapper.text()).toContain('Something went wrong')
-		expect(wrapper.text()).toContain('Error message')
 		expect(wrapper.html()).toMatchSnapshot()
 	})
-
-	it('renders correctly with undefined route', () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				code: '501',
-				pageTitle: 'Error',
-				message: 'Error message',
-				btnText: 'Go to...',
-				btnHref: 'https://google.com',
-			},
-		})
-
-		expect(wrapper.find('a').exists()).toBe(true)
-		expect(wrapper.html()).toMatchSnapshot()
-	})
-
-	it('uses href without router navigation when only btnHref is provided', () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				code: '401',
-				pageTitle: 'Auth error',
-				message: 'You are not authorized',
-				btnText: 'Logout',
-				btnHref: 'https://google.com',
-			},
-		})
-
-		const link = wrapper.find('a')
-		expect(link.exists()).toBe(true)
-		expect(link.attributes('href')).toBe('https://google.com')
-		expect(link.attributes('to')).toBeUndefined()
-	})
 })

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

@@ -1,270 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ErrorPage > renders correctly 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    style="width: 800px;"
-  >
-    <div class="
-      elevation-0
-      pa-6
-      pa-sm-16
-      v-card
-      v-card--density-default
-      v-card--variant-elevated
-      v-theme--light
-    ">
-      <!---->
-      <div class="v-card__loader">
-        <div
-          aria-hidden="true"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          class="
-            v-locale--is-ltr
-            v-progress-linear
-            v-theme--light
-          "
-          role="progressbar"
-          style="
-            top: 0px;
-            height: 0px;
-            --v-progress-linear-height: 2px;
-          "
-        >
-          <!---->
-          <div
-            class="v-progress-linear__background"
-            style="opacity: NaN;"
-          ></div>
-          <div
-            class="v-progress-linear__buffer"
-            style="
-              opacity: NaN;
-              width: 0%;
-            "
-          ></div>
-          <transition-stub
-            appear="false"
-            css="true"
-            name="fade-transition"
-            persisted="false"
-          >
-            <div class="v-progress-linear__indeterminate">
-              <div class="
-                long
-                v-progress-linear__indeterminate
-              "></div>
-              <div class="
-                short
-                v-progress-linear__indeterminate
-              "></div>
-            </div>
-          </transition-stub>
-          <!---->
-        </div>
-      </div>
-      <!---->
-      <!---->
-      <div class="
-        max-width-none
-        v-row
-      ">
-        <div class="
-          align-sm-start
-          d-flex
-          flex-column
-          justify-center
-          order-last
-          order-sm-first
-          text-center
-          text-sm-left
-          v-col-12
-          v-col-sm-12
-        ">
-          <!-- v-if -->
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            text-h5
-          ">
-            Something went wrong
-          </h1>
-          <p>
-            <span>
-              Error message
-            </span>
-          </p>
-          <!-- v-if -->
-        </div>
-        <!-- v-if -->
-      </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ErrorPage > renders correctly with undefined route 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    style="width: 800px;"
-  >
-    <div class="
-      elevation-0
-      pa-6
-      pa-sm-16
-      v-card
-      v-card--density-default
-      v-card--variant-elevated
-      v-theme--light
-    ">
-      <!---->
-      <div class="v-card__loader">
-        <div
-          aria-hidden="true"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          class="
-            v-locale--is-ltr
-            v-progress-linear
-            v-theme--light
-          "
-          role="progressbar"
-          style="
-            top: 0px;
-            height: 0px;
-            --v-progress-linear-height: 2px;
-          "
-        >
-          <!---->
-          <div
-            class="v-progress-linear__background"
-            style="opacity: NaN;"
-          ></div>
-          <div
-            class="v-progress-linear__buffer"
-            style="
-              opacity: NaN;
-              width: 0%;
-            "
-          ></div>
-          <transition-stub
-            appear="false"
-            css="true"
-            name="fade-transition"
-            persisted="false"
-          >
-            <div class="v-progress-linear__indeterminate">
-              <div class="
-                long
-                v-progress-linear__indeterminate
-              "></div>
-              <div class="
-                short
-                v-progress-linear__indeterminate
-              "></div>
-            </div>
-          </transition-stub>
-          <!---->
-        </div>
-      </div>
-      <!---->
-      <!---->
-      <div class="
-        max-width-none
-        v-row
-      ">
-        <div class="
-          align-sm-start
-          d-flex
-          flex-column
-          justify-center
-          order-last
-          order-sm-first
-          text-center
-          text-sm-left
-          v-col-12
-          v-col-sm-12
-        ">
-          <div class="
-            mb-4
-            sy-code
-            text-primary
-          ">
-            <span class="d-sr-only">
-              Code d'erreur&nbsp;:
-            </span>
-            501
-          </div>
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            text-h5
-          ">
-            Error
-          </h1>
-          <p>
-            <span>
-              Error message
-            </span>
-          </p>
-          <a
-            class="
-              bg-primary
-              mt-6
-              v-btn
-              v-btn--density-default
-              v-btn--elevated
-              v-btn--size-default
-              v-btn--variant-elevated
-              v-theme--light
-            "
-            href="https://google.com"
-          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-            
-          <!----><span
-            class="v-btn__content"
-            data-no-activator=""
-          >Go to...</span>
-            
-          <!---->
-            
-          <!---->
-          </a>
-        </div>
-        <!-- v-if -->
-      </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
-    </div>
-  </div>
-</div>
+<status-page-stub
+  btnlink="/"
+  code="500"
+  codeerrortext="Code d'erreur : "
+  hidebtn="false"
+  message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
+  pagetitle="Une erreur est survenue"
+></status-page-stub>
 `;

package/src/components/FileUpload/FileUpload.vue

@@ -40,8 +40,13 @@
 	const fileList = ref<File[]>([])
 	const isDarkMode = useTheme().current.value.dark
 
+	function openFileDialog() {
+		fileInput.value?.click()
+	}
+
 	defineExpose({
 		fileInput,
+		openFileDialog,
 	})
 
 	watch(() => props.modelValue, (value) => {

package/src/components/FooterBar/FooterBar.stories.ts

@@ -2,7 +2,9 @@ import FooterBar from '../FooterBar/FooterBar.vue'
 import Logo from '../Logo/Logo.vue'
 import CollapsibleList from '../CollapsibleList/CollapsibleList.vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { mdiTwitter, mdiLinkedin, mdiFacebook, mdiYoutube } from '@mdi/js'
+import { mdiLinkedin, mdiFacebook, mdiYoutube } from '@mdi/js'
+
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
 
 const items = [
 	{
@@ -246,9 +248,9 @@ export const Default: Story = {
 				href: 'https://www.facebook.com',
 			},
 			{
-				icon: mdiTwitter,
-				name: 'Twitter',
-				href: 'https://www.twitter.com',
+				icon: xIcon,
+				name: 'X',
+				href: 'https://x.com',
 			},
 			{
 				icon: mdiLinkedin,
@@ -944,7 +946,9 @@ export const customSocialMediaLinks: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
 	import { FooterBar } from '@cnamts/synapse'
-	import { mdiFacebook, mdiTwitter, mdiLinkedin, mdiYoutube } from '@mdi/js'
+	import { mdiFacebook, mdiLinkedin, mdiYoutube } from '@mdi/js'
+	
+	const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
 	
 	const items = [
         {
@@ -972,8 +976,8 @@ export const customSocialMediaLinks: Story = {
 			href: 'https://www.facebook.com',
 		},
 		{
-			icon: mdiTwitter,
-			name: 'Twitter',
+			icon: xIcon,
+			name: 'X',
 			href: 'https://www.twitter.com',
 		},
 		{
@@ -996,21 +1000,21 @@ export const customSocialMediaLinks: Story = {
 	args: {
 		items: items,
 		socialMediaLinks: [
+			{
+				icon: mdiLinkedin,
+				name: 'LinkedIn',
+				href: 'https://www.linkedin.com',
+			},
 			{
 				icon: mdiFacebook,
 				name: 'Facebook',
 				href: 'https://www.facebook.com',
 			},
 			{
-				icon: mdiTwitter,
-				name: 'Twitter',
+				icon: xIcon,
+				name: 'X',
 				href: 'https://www.twitter.com',
 			},
-			{
-				icon: mdiLinkedin,
-				name: 'LinkedIn',
-				href: 'https://www.linkedin.com',
-			},
 			{
 				icon: mdiYoutube,
 				name: 'YouTube',

package/src/components/FooterBar/defaultSocialMediaLinks.ts

@@ -1,7 +1,9 @@
-import { mdiTwitter, mdiLinkedin, mdiFacebook } from '@mdi/js'
+import { mdiLinkedin, mdiFacebook } from '@mdi/js'
 
 import type { SocialMediaLink } from '@/components/SocialMediaLinks/types'
 
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
+
 export const defaultSocialMediaLinks: SocialMediaLink[] = [
 	{
 		icon: mdiLinkedin,
@@ -14,8 +16,8 @@ export const defaultSocialMediaLinks: SocialMediaLink[] = [
 		href: 'https://www.facebook.com/AssurMaladie/',
 	},
 	{
-		icon: mdiTwitter,
-		name: 'Twitter',
-		href: 'https://twitter.com/Assur_Maladie',
+		icon: xIcon,
+		name: 'X',
+		href: 'https://x.com/Assur_Maladie',
 	},
 ]

package/src/components/MaintenancePage/MaintenancePage.mdx

@@ -7,7 +7,7 @@ import * as MaintenancePageStories from "./MaintenancePage.stories";
 <div className="header">
   <h1>MaintenancePage</h1>
   <p>Le composant `MaintenancePage` permet d'afficher une page de maintenance.
-Il est basé sur le composant `ErrorPage` du design system.</p>
+Il est basé sur le composant `StatusPage` du design system.</p>
 </div>
 
 <Canvas of={MaintenancePageStories.Default} />

package/src/components/MaintenancePage/MaintenancePage.vue

@@ -1,24 +1,32 @@
 <script setup lang="ts">
+	import StatusPage from '../StatusPage/StatusPage.vue'
 	import { locales } from './locales'
-	import ErrorPage from '../ErrorPage/ErrorPage.vue'
+	import { useThemeLocales } from '@/utils/theme'
+
+	const { themeLocales } = useThemeLocales(locales)
 </script>
 
 <template>
-	<ErrorPage
-		:page-title="locales.pageTitle"
-		:message="locales.message"
+	<StatusPage
+		:page-title="themeLocales.pageTitle"
+		:message="themeLocales.message"
+		:code="themeLocales.code"
 		:hide-btn="true"
 	>
-		<template #illustration>
+		<template
+			v-if="themeLocales.src || $slots.illustration"
+			#illustration
+		>
 			<slot name="illustration">
 				<img
-					src="./assets/maintenance.svg"
+					v-if="themeLocales.src"
+					:src="themeLocales.src"
 					alt=""
 					aria-hidden="true"
 				>
 			</slot>
 		</template>
-	</ErrorPage>
+	</StatusPage>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,15 +1,70 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../MaintenancePage.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
+<AccessibilityGuideLayout
+    componentName="MaintenancePage"
+    iconSrc={AccessibilityIcon}
+>
+
+<div class="mt-2">
+    <p>Rapport d'audit manuel : <a href="/audits/MaintenancePage.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/653" target="_blank" style={{color:'#0C41BD'}}>issue #653</a>)</p>
 </div>
 
+    <CriteriaSection>
+        <CriteriaCard icon="🔍" title="Structure sémantique">
+            <ul>
+                <li><strong>Titre de page</strong> : rendu dans une balise <code>h1</code> via <code>StatusPage</code>, sa valeur provient des locales du thème via <code>useThemeLocales</code></li>
+                <li><strong>Code d'erreur</strong> : le code est précédé du texte masqué visuellement <code>codeErrorText</code> (par défaut <em>"Code d'erreur : "</em>) pour les lecteurs d'écran</li>
+                <li><strong>Valeurs par défaut</strong> : <code>pageTitle</code>, <code>message</code> et <code>code</code> proviennent des locales du thème via <code>useThemeLocales</code></li>
+            </ul>
+        </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/MaintenancePage.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/653" target="_blank" style={{color:'#0C41BD'}}>issue #653</a>)</p>
-	</div>
+        <CriteriaCard icon="🔗" title="Navigation">
+            <ul>
+                <li><strong>Bouton masqué par défaut</strong> : la prop <code>hide-btn</code> est fixée à <code>true</code> — la page de maintenance ne propose pas de navigation vers une autre page</li>
+                <li><strong>Pas de lien de retour</strong> : intentionnel car l'application est indisponible, évitant ainsi de rediriger vers une page inaccessible</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🖼️" title="Illustration">
+            <ul>
+                <li><strong>Image décorative</strong> : l'illustration par défaut possède <code>alt=""</code> et <code>aria-hidden="true"</code> car elle est purement décorative</li>
+                <li><strong>Source thémable</strong> : l'image source provient des locales du thème via <code>useThemeLocales</code></li>
+                <li><strong>Slot <code>#illustration</code></strong> : si une illustration personnalisée est fournie, les mêmes règles d'accessibilité s'appliquent</li>
+                <li><strong>Mise en page adaptive</strong> : la colonne illustration n'est affichée que si <code>src</code> ou le slot <code>#illustration</code> est fourni</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Les valeurs par défaut de <code>page-title</code>, <code>message</code> et <code>code</code> proviennent du thème — les surcharger uniquement si le contexte métier le nécessite</li>
+            <li>Ne pas afficher de bouton de retour (<code>hide-btn="true"</code> par défaut) — l'application étant indisponible, un lien de retour serait inutile voire trompeur</li>
+            <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
+            <li>Le slot <code>#illustration</code> personnalisé doit respecter les mêmes règles : <code>alt=""</code> et <code>aria-hidden="true"</code> si l'image est décorative</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.3.1 – Info and Relationships</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 2.4.4 – Link Purpose</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.1.1 – Non-text Content</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/" target="_blank" style={{ color: '#0C41BD' }}>ARIA Authoring Practices Guide</a></li>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>