@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/SocialMediaLinks/SocialMediaLinks.stories.ts

@@ -1,6 +1,8 @@
 import SocialMediaLinks from './SocialMediaLinks.vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { mdiFacebook, mdiLinkedin, mdiTwitter } from '@mdi/js'
+import { mdiFacebook, mdiLinkedin } 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 meta = {
 	title: 'Composants/Navigation/SocialMediaLinks',
@@ -22,11 +24,11 @@ const meta = {
 			},
 			{
 				icon: mdiFacebook,
-				href: 'https://twitter.com/Assur_Maladie',
+				href: 'https://www.facebook.com/AssurMaladie/',
 			},
 			{
-				icon: mdiTwitter,
-				href: 'https://twitter.com/Assur_Maladie',
+				icon: xIcon,
+				href: 'https://x.com/Assur_Maladie',
 			},
 		],
 		headingLevel: 6,
@@ -78,7 +80,9 @@ export const Default: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
 	import { SocialMediaLinks } from '@cnamts/synapse'
-	import { mdiFacebook, mdiLinkedin, mdiTwitter } from '@mdi/js'
+	import { mdiFacebook, mdiLinkedin } 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 links = [
 		{
@@ -89,12 +93,12 @@ export const Default: Story = {
 		{
 			icon: mdiFacebook,
 			name: 'Facebook',
-			href: 'https://twitter.com/Assur_Maladie',
+			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',
 		},
 	]
 </script>
@@ -112,12 +116,12 @@ export const Default: Story = {
 			{
 				icon: mdiFacebook,
 				name: 'Facebook',
-				href: 'https://twitter.com/Assur_Maladie',
+				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/SocialMediaLinks/SocialMediaLinks.vue

@@ -49,7 +49,10 @@
 					<SyIcon
 						:icon="social.icon"
 						size="30px"
-						class="vd-social-media-links-icon"
+						:class="{
+							'vd-social-media-links-icon': true,
+							'vd-social-media-links-icon--x': social.name === 'X',
+						}"
 						decorative
 					/>
 				</VBtn>
@@ -91,6 +94,11 @@ li {
 	color: tokens.$grey-base;
 }
 
+.vd-social-media-links-icon--x {
+	transform: scale(0.75);
+	transform-origin: center;
+}
+
 .v-btn--icon {
 	width: calc(var(--v-btn-height) + 5px);
 	height: calc(var(--v-btn-height) + 5px);

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

@@ -0,0 +1,67 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as SocialMediaLinksStories from '../SocialMediaLinks.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
+<Meta of={SocialMediaLinksStories} />
+
+<AccessibilityGuideLayout
+	componentName="SocialMediaLinks"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d’audit manuel : <a href="/audits/SocialMediaLinks.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/790" target="_blank" style={{ color: '#0C41BD' }}>issue #790</a>)
+		</div>
+	</AuditSection>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure et rôles">
+			<ul>
+				<li><strong>Titre accessible</strong> : utilise un heading natif (<code>h1–h6</code>) ou un <code>role="heading"</code> + <code>aria-level</code> via <code>use-native-heading</code>.</li>
+				<li><strong>Liens</strong> : chaque bouton est un lien <code>&lt;a&gt;</code> avec <code>aria-label</code> explicite « Lien vers &lt;nom&gt; ».</li>
+				<li><strong>Icônes décoratives</strong> : <code>SyIcon</code> marqué décoratif pour ne pas polluer le lecteur d’écran.</li>
+				<li><strong>Ouverture externe</strong> : <code>target="_blank"</code> avec <code>rel="noopener noreferrer"</code> pour la sécurité.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li><strong>Focus visible</strong> : halo visible sur <code>.v-btn--icon:focus-visible</code>, contrasté en clair/sombre.</li>
+				<li><strong>Ordre logique</strong> : tabulation suit l’ordre des liens fournis.</li>
+				<li><strong>Taille des cibles</strong> : boutons icon-text élargis (<code>height/width</code> ajustée) pour une cible confortable.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Contraste et lisibilité">
+			<ul>
+				<li><strong>Texte du label</strong> : couleur primaire (<code>tokens.$blue-base</code>) ou blanc en thème sombre.</li>
+				<li><strong>Icônes</strong> : couleur neutre (<code>tokens.$grey-base</code>) et outline blanc en sombre.</li>
+				<li><strong>Responsive</strong> : alignement adapté (gauche/droite) selon la largeur.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SocialMediaLinks">
+		<Story of={SocialMediaLinksStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez toujours un <code>aria-label</code> descriptif pour chaque lien d’icône.</li>
+			<li>Choisissez un niveau de titre cohérent avec la hiérarchie de la page (<code>heading-level</code> 1–6) ou activez <code>use-native-heading</code> pour un titre sémantique.</li>
+			<li>Vérifiez le focus visible sur tous les liens, notamment en thème sombre.</li>
+			<li>Utilisez des icônes SVG accessibles et marquées décoratives quand le libellé est déjà donné.</li>
+			<li>Si vous changez l’ordre ou la liste des réseaux, assurez-vous que l’ordre de tabulation reste logique.</li>
+		</ul>
+	</BestPracticesSection>
+</AccessibilityGuideLayout>

package/src/components/SocialMediaLinks/tests/DefaultSocialMediaLinks.spec.ts

@@ -1,6 +1,6 @@
 import { defaultSocialMediaLinks } from '../DefaultSocialMediaLinks'
 import { describe, it, expect } from 'vitest'
-import { mdiLinkedin, mdiTwitter } from '@mdi/js'
+import { mdiLinkedin } from '@mdi/js'
 
 describe('defaultSocialMediaLinks', () => {
 	it('contains the correct number of links', () => {
@@ -13,9 +13,9 @@ describe('defaultSocialMediaLinks', () => {
 		expect(linkedinLink?.icon).toBe(mdiLinkedin)
 	})
 
-	it('contains the correct Twitter link', () => {
-		const twitterLink = defaultSocialMediaLinks.find(link => link.href === 'https://twitter.com/Assur_Maladie')
-		expect(twitterLink).toBeDefined()
-		expect(twitterLink?.icon).toBe(mdiTwitter)
+	it('contains the correct X link', () => {
+		const xLink = defaultSocialMediaLinks.find(link => link.href === 'https://x.com/Assur_Maladie')
+		expect(xLink).toBeDefined()
+		expect(typeof xLink?.icon).toBe('string')
 	})
 })

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

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SocialMediaLinks from '../SocialMediaLinks.vue'
+
+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 sampleLinks = [
+	{
+		href: 'https://www.linkedin.com/company/assurance-maladie/',
+		name: 'LinkedIn',
+		icon: 'mdi-linkedin',
+	},
+	{
+		href: 'https://x.com/Assur_Maladie',
+		name: 'X',
+		icon: xIcon,
+	},
+	{
+		href: 'https://www.facebook.com/assurancemaladie',
+		name: 'Facebook',
+		icon: 'mdi-facebook',
+	},
+]
+
+describe('SocialMediaLinks – accessibility (axe)', () => {
+	it('has no obvious axe violations with native heading', async () => {
+		const wrapper = mount(SocialMediaLinks, {
+			props: {
+				links: sampleLinks,
+				headingLevel: 6,
+				useNativeHeading: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SocialMediaLinks – native heading', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with ARIA heading', async () => {
+		const wrapper = mount(SocialMediaLinks, {
+			props: {
+				links: sampleLinks,
+				headingLevel: 3,
+				useNativeHeading: false,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SocialMediaLinks – aria heading', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -2,6 +2,8 @@ import { mount, VueWrapper } from '@vue/test-utils'
 import SocialMediaLinks from '../SocialMediaLinks.vue'
 import { describe, it, expect, afterEach } from 'vitest'
 
+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'
+
 describe('SocialMediaLinks', () => {
 	let wrapper: VueWrapper
 
@@ -30,7 +32,7 @@ describe('SocialMediaLinks', () => {
 
 	it('renders correctly with provided links', () => {
 		const links = [
-			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://x.com', name: 'X', icon: xIcon },
 			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
 		]
 		wrapper = mount(SocialMediaLinks, {
@@ -51,8 +53,8 @@ describe('SocialMediaLinks', () => {
 
 		// Check first link
 		const firstLink = listItems[0]?.find('a')
-		expect(firstLink?.attributes('href')).toBe('https://twitter.com')
-		expect(firstLink?.attributes('aria-label')).toBe('Lien vers Twitter')
+		expect(firstLink?.attributes('href')).toBe('https://x.com')
+		expect(firstLink?.attributes('aria-label')).toBe('Lien vers X')
 
 		// Check second link
 		const secondLink = listItems[1]?.find('a')
@@ -62,7 +64,7 @@ describe('SocialMediaLinks', () => {
 
 	it('renders the correct number of social media links', () => {
 		const links = [
-			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://x.com', name: 'X', icon: xIcon },
 			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
 		]
 		wrapper = mount(SocialMediaLinks, {
@@ -126,7 +128,7 @@ describe('SocialMediaLinks', () => {
 
 	it('has proper focus styles for accessibility', () => {
 		const links = [
-			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://x.com', name: 'X', icon: xIcon },
 		]
 		wrapper = mount(SocialMediaLinks, {
 			props: {
@@ -142,8 +144,8 @@ describe('SocialMediaLinks', () => {
 
 		// Verify the button has proper accessibility attributes
 		const link = wrapper.find('a')
-		expect(link.attributes('href')).toBe('https://twitter.com')
-		expect(link.attributes('aria-label')).toBe('Lien vers Twitter')
+		expect(link.attributes('href')).toBe('https://x.com')
+		expect(link.attributes('aria-label')).toBe('Lien vers X')
 
 		// Check that the component has the necessary CSS classes for focus styles
 		// We can't test the actual CSS properties, but we can verify the structure is there

package/src/components/StatusPage/StatusPage.mdx

@@ -0,0 +1,22 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import '../../stories/styles/shared.css';
+import * as StatusPageStories from './StatusPage.stories'
+
+<Meta of={StatusPageStories} />
+
+<div className="header">
+  <h1>StatusPage</h1>
+  <p>Le composant `StatusPage` sert à afficher une page de statut.</p>
+</div>
+
+<Canvas of={StatusPageStories.Default} />
+
+# API
+
+<Controls of={StatusPageStories.Default} />
+
+## Lien de retour
+
+Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.
+
+<Canvas of={StatusPageStories.WithLink} />

package/src/components/StatusPage/StatusPage.stories.ts

@@ -0,0 +1,193 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import StatusPage from './StatusPage.vue'
+
+const meta = {
+	title: 'Templates/StatusPage',
+	component: StatusPage,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		'code': {
+			description: 'Code d\'erreur affiché en premier plan',
+		},
+		'codeErrorText': {
+			description: 'Text affiché avant le code d\'erreur pour les outils d\'accessibilité',
+			table: {
+				defaultValue: {
+					summary: 'Code d\'erreur\xa0: ',
+				},
+			},
+		},
+		'additional-content': {
+			control: {
+				type: 'text',
+			},
+			table: {
+				type: {
+					summary: '{}',
+				},
+			},
+		},
+		'action': {
+			control: {
+				type: 'text',
+			},
+			table: {
+				type: {
+					summary: '{}',
+				},
+			},
+		},
+		'illustration': {
+			control: {
+				type: 'text',
+			},
+			table: {
+				type: {
+					summary: '{}',
+				},
+			},
+		},
+	},
+} satisfies Meta<typeof StatusPage>
+
+export default meta
+
+type Story = StoryObj<typeof StatusPage>
+
+export const Default: Story = {
+	args: {
+		pageTitle: 'une erreur est survenue',
+		code: '500',
+		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',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+							<StatusPage
+								page-title="une erreur est survenue"
+								code="500"
+								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"
+							>
+					</div>
+				</template>
+				`,
+			}, {
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				
+				`,
+			},
+		],
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+}
+
+export const WithLink: Story = {
+	args: {
+		...Default.args,
+		btnHref: '/',
+		btnText: 'Retour à l\'accueil',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+							<StatusPage
+								page-title="une erreur est survenue"
+								code="500"
+								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"
+								btn-href=""
+								btn-text="Retour à l'accueil"
+							>
+					</div>
+				</template>
+				`,
+			}, {
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				
+				`,
+			},
+		],
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+}
+
+export const CustomIllustration: Story = {
+	args: {
+		...Default.args,
+		btnHref: '/',
+		btnText: 'Retour à l\'accueil',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+							<StatusPage
+								page-title="une erreur est survenue"
+								code="500"
+								message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
+								btn-href="/"
+								btn-text="Retour à l'accueil"
+							>
+								<template #illustration>
+									<div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+										<span style="font-weight: 700; color: #0D419A;">Illustration</span>
+									</div>
+								</template>
+							</StatusPage>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	render: args => ({
+		components: { StatusPage },
+		setup() {
+			return { args }
+		},
+		template: `
+			<StatusPage v-bind="args">
+				<template #illustration>
+					<div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+						<span style="font-weight: 700; color: #0D419A;">Illustration</span>
+					</div>
+				</template>
+			</StatusPage>
+		`,
+	}),
+}

package/src/components/StatusPage/StatusPage.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+	import type { RouteRecordRaw } from 'vue-router'
+	import PageContainer from '../PageContainer/PageContainer.vue'
+
+	type MessagePart =
+		| { type: 'text', value: string }
+		| { type: 'phone', value: string }
+
+	// Fonction pour formater le message et ajouter des liens tel: aux numéros de téléphone
+	const splitMessage = (message?: string): MessagePart[] => {
+		// Regex pour détecter les numéros de téléphone
+		if (!message)
+			return []
+
+		const regex = /\b(\d{4}|\d{10})\b/g
+		const parts: MessagePart[] = []
+		let lastIndex = 0
+		let match: RegExpExecArray | null
+
+		while ((match = regex.exec(message)) !== null) {
+			if (match.index > lastIndex) {
+				parts.push({
+					type: 'text',
+					value: message.slice(lastIndex, match.index),
+				})
+			}
+
+			parts.push({
+				type: 'phone',
+				value: match[1]!,
+			})
+
+			lastIndex = regex.lastIndex
+		}
+
+		if (lastIndex < message.length) {
+			parts.push({
+				type: 'text',
+				value: message.slice(lastIndex),
+			})
+		}
+
+		return parts
+	}
+
+	withDefaults(defineProps<{
+		pageTitle?: string
+		message?: string
+		code?: string
+		codeErrorText?: string
+		btnText?: string
+		btnHref?: string
+		btnLink?: RouteRecordRaw | string
+		hideBtn?: boolean
+	}>(), {
+		pageTitle: undefined,
+		message: undefined,
+		code: undefined,
+		codeErrorText: 'Code d\'erreur\xa0: ',
+		btnText: undefined,
+		btnLink: '/',
+		btnHref: undefined,
+		hideBtn: false,
+	})
+</script>
+
+<template>
+	<PageContainer size="md">
+		<VCard
+			:elevation="0"
+			class="pa-6 pa-sm-16"
+		>
+			<VRow class="max-width-none">
+				<VCol
+					:sm="$slots.illustration ? 6 : 12"
+					cols="12"
+					class="order-last order-sm-first text-center text-sm-left d-flex flex-column justify-center align-sm-start"
+				>
+					<div
+						v-if="code"
+						class="sy-code text-primary mb-4"
+					>
+						<span class="d-sr-only">{{ codeErrorText }}</span>
+						{{ code }}
+					</div>
+
+					<h1
+						v-if="pageTitle"
+						class="mb-2 font-weight-bold text-h5 mb-4"
+					>
+						{{ pageTitle }}
+					</h1>
+
+					<p v-if="message">
+						<template
+							v-for="(part, index) in splitMessage(message)"
+							:key="index"
+						>
+							<span v-if="part.type === 'text'">
+								{{ part.value }}
+							</span>
+							<a
+								v-else
+								:href="`tel:${part.value}`"
+							>
+								{{ part.value }}
+							</a>
+						</template>
+					</p>
+
+					<slot name="additional-content" />
+
+					<slot name="action">
+						<VBtn
+							v-if="!hideBtn && btnText && (btnLink || btnHref)"
+							:to="btnHref ? undefined : btnLink"
+							:href="btnHref"
+							color="primary"
+							class="mt-6"
+						>
+							{{ btnText }}
+						</VBtn>
+					</slot>
+				</VCol>
+
+				<VCol
+					v-if="$slots.illustration"
+					cols="12"
+					sm="6"
+					class="d-flex align-center justify-center"
+				>
+					<slot name="illustration" />
+				</VCol>
+			</VRow>
+		</VCard>
+	</PageContainer>
+</template>
+
+<style lang="scss" scoped>
+.sy-code {
+	font-size: 6rem;
+	line-height: 6rem;
+	font-weight: 400;
+}
+</style>