@cnamts/synapse 1.0.19 → 1.0.21

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/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

@@ -1,6 +1,5 @@
 import { Meta, Story } from '@storybook/blocks';
-import * as AccessStories from './Accessibilite.stories.ts';
-import * as FooterBarStories from './FooterBar.stories';
+import * as FooterBarStories from '../FooterBar.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import {
 	AccessibilityGuideLayout,
@@ -10,9 +9,9 @@ import {
 	BestPracticesSection,
 	ResourcesSection,
 	AuditSection,
-} from '../../stories/accessibility/AccessibilityGuideLayout.mdx';
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={AccessStories} />
+<Meta of={FooterBarStories} />
 
 <AccessibilityGuideLayout
 	componentName="FooterBar"

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/FranceConnectBtn/FranceConnectBtn.vue

@@ -3,6 +3,7 @@
 	import { computed } from 'vue'
 	import { useTheme } from 'vuetify'
 	import { locales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<{
 		href: string
@@ -85,13 +86,13 @@
 			:aria-label="locales.infoLinkAriaLabel(isConnectPlus)"
 		>
 			{{ locales.infoLinkLabel(isConnectPlus) }}
-
-			<VIcon
+			<SyIcon
+				name="external-link"
 				size="1em"
+				:icon="mdiOpenInNew"
 				class="sy-france-connect-info-link-icon"
-			>
-				{{ mdiOpenInNew }}
-			</VIcon>
+				decorative
+			/>
 		</a>
 	</div>
 </template>

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../FranceConnectBtn.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.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/4005" target="_blank" style={{color:'#0C41BD'}}>issue #4005</a>)</p>
+	</div>

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

@@ -73,6 +73,7 @@ exports[`FranceConnectBtn > renders correctly 1`] = `
       v-icon
       v-theme--light
     "
+    name="external-link"
     style="
       font-size: 1em;
       height: 1em;
@@ -162,6 +163,7 @@ exports[`FranceConnectBtn > renders correctly in black 1`] = `
         v-icon
         v-theme--dark
       "
+      name="external-link"
       style="
         font-size: 1em;
         height: 1em;
@@ -247,6 +249,7 @@ exports[`FranceConnectBtn > renders correctly with connect-plus 1`] = `
       v-icon
       v-theme--light
     "
+    name="external-link"
     style="
       font-size: 1em;
       height: 1em;

package/src/components/HeaderBar/HeaderBurgerMenu/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks'
+import * as HeaderBurgerMenuStories from '../HeaderBurgerMenu.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={HeaderBurgerMenuStories}/>
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/HeaderBurgerMenu.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/646" target="_blank" style={{color:'#0C41BD'}}>issue #646</a>)</p>
+	</div>

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks'
+import * as HeaderBarStories from '../HeaderBar.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={HeaderBarStories}/>
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/HeaderBar.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/643" target="_blank" style={{color:'#0C41BD'}}>issue #643</a>)</p>
+</div>

package/src/components/HeaderBar/{Usages.mdx → usages/Usages.mdx}

@@ -1,6 +1,6 @@
 import { Meta, Story} from "@storybook/blocks";
-import '../../stories/styles/shared.css';
-import * as HeaderBarStories from "./HeaderBar.stories.ts";
+import '../../../stories/styles/shared.css';
+import * as HeaderBarStories from "../HeaderBar.stories.ts";
 import * as UsagesStories from "./Usages.stories.ts";
 
 <Meta of={HeaderBarStories} />

package/src/components/HeaderLoading/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

@@ -1,10 +1,9 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas, Source, Story } from '@storybook/blocks';
-import * as AccessStories from './Accessibilite.stories.ts';
-import * as HeaderLoadingStories from './HeaderLoading.stories.ts';
+import * as HeaderLoadingStories from '../HeaderLoading.stories.ts';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
-import '../../stories/styles/shared.css';
+import '../../../stories/styles/shared.css';
 
-<Meta of={AccessStories} />
+<Meta of={HeaderLoadingStories} />
 
 <div className="accessibility-guide">
   <Title>Guide d'Accessibilité du Composant HeaderLoading</Title>
@@ -266,7 +265,12 @@ import '../../stories/styles/shared.css';
   <div className="compliance-section">
     <h2>Conformité RGAA</h2>
     <div className="legend-container">
-      <Story of={AccessStories.Legende} />
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/HeaderLoading.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/639" target="_blank" style={{color:'#0C41BD'}}>issue #639</a>)</p>
+	</div>
+
     </div>
     
   </div>

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks'
+import * as HeaderToolbarStories from '../HeaderToolbar.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={HeaderToolbarStories}/>
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/HeaderToolbar.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/640" target="_blank" style={{color:'#0C41BD'}}>issue #640</a>)</p>
+	</div>

package/src/components/LangBtn/LangBtn.vue

@@ -7,6 +7,7 @@
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import defaultOptions from './config'
 	import type { VBtn, VListItem } from 'vuetify/components'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		modelValue?: string
@@ -148,13 +149,13 @@
 					class="vd-lang-btn"
 				>
 					{{ currentLangData.name }}
-					<VIcon
+					<SyIcon
 						v-if="!hideDownArrow"
 						v-bind="options.icon"
 						class="ml-1"
-					>
-						{{ mdiMenuDown }}
-					</VIcon>
+						:icon="mdiMenuDown"
+						decorative
+					/>
 				</VBtn>
 			</template>
 			<VList

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../LangBtn.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/LangBtn.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/4009" target="_blank" style={{color:'#0C41BD'}}>issue #4009</a>)</p>
+	</div>

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

@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../Logo.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/Logo.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Aucune correction nécéssaire.</p>
+	</div>
+
+

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

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../LogoBrandSection.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

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

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as LunarCalendar from '../LunarCalendar.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={LunarCalendar} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>

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

@@ -0,0 +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} />
+
+<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>
+
+        <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>