@cnamts/synapse 1.0.20 → 1.0.21

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>

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

@@ -0,0 +1,81 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as StatusPageStories from '../StatusPage.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
+<Meta of={StatusPageStories} />
+
+<AccessibilityGuideLayout
+    componentName="StatusPage"
+    iconSrc={AccessibilityIcon}
+>
+
+    <CriteriaSection>
+        <CriteriaCard icon="🔍" title="Structure sémantique">
+            <ul>
+                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif</li>
+                <li><strong>Code d'erreur</strong> : le code (ex. <code>500</code>, <code>404</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>Rôles ARIA hérités</strong> via <code>PageContainer</code> :</li>
+                <ul>
+                    <li>exemple : <code>role="main"</code> représente le contenu principal de la page</li>
+                </ul>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🔗" title="Liens et boutons">
+            <ul>
+                <li><strong>Numéros de téléphone</strong> : les numéros de 4 ou 10 chiffres (ex. <code>3646</code>) sont automatiquement transformés en liens <code>tel:</code> cliquables et vocalisables</li>
+                <li><strong>Bouton de retour</strong> : rendu via <code>btn-href</code> (balise <code>a</code>) ou <code>btn-link</code> (balise <code>router-link</code>)</li>
+                <li><strong>Texte du bouton</strong> : doit être explicite et décrire la destination, ex. <em>"Retour à l'accueil"</em></li>
+                <li><strong>Masquage du bouton</strong> : la prop <code>hide-btn</code> permet de masquer le bouton si une alternative de navigation est présente</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🖼️" title="Illustration">
+            <ul>
+                <li><strong>Image décorative</strong> : l'illustration doit avoir <code>alt=""</code> et <code>aria-hidden="true"</code> car elle est purement décorative</li>
+                <li><strong>Slot illustration</strong> : si une illustration personnalisée est fournie via le slot <code>#illustration</code>, les mêmes règles s'appliquent</li>
+                <li><strong>Mise en page adaptive</strong> : la colonne illustration n'est affichée que si le slot est fourni, évitant des zones vides</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📝" title="Contenu additionnel">
+            <ul>
+                <li><strong>Slot <code>additional-content</code></strong> : destiné à du contenu textuel complémentaire (ex. identifiant de support), doit rester lisible par les lecteurs d'écran</li>
+                <li><strong>Slot <code>action</code></strong> : permet d'ajouter des actions supplémentaires accessibles au clavier</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection title="Avec illustration personnalisée" componentName="StatusPage">
+        <Story of={StatusPageStories.CustomIllustration} />
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Toujours renseigner <code>page-title</code> avec un titre clair et unique décrivant l'erreur</li>
+            <li>Personnaliser <code>code-error-text</code> si nécessaire pour un contexte métier spécifique</li>
+            <li>Fournir un <code>btn-text</code> explicite — éviter les libellés génériques comme <em>"Cliquez ici"</em></li>
+            <li>Ne pas masquer le bouton (<code>hide-btn</code>) sans proposer une alternative de navigation claire</li>
+            <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
+            <li>Le contenu dans <code>additional-content</code> doit être lisible par les lecteurs d'écran : éviter le contenu purement visuel</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>

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

@@ -0,0 +1,29 @@
+// @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 StatusPage from '../StatusPage.vue'
+
+// Scénario d’accessibilité : page d’erreur avec titre, message, code
+// et bouton de retour vers la page d’accueil.
+
+describe('StatusPage – accessibility (axe)', () => {
+	it('has no obvious axe violations with title, message and action button', async () => {
+		const wrapper = mount(StatusPage, {
+			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',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'StatusPage – default page', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import StatusPage from '../StatusPage.vue'
+
+describe('StatusPage', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				pageTitle: 'Something went wrong',
+				message: 'Error message',
+			},
+		})
+
+		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(StatusPage, {
+			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(StatusPage, {
+			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()
+	})
+})