@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/SocialMediaLinks/DefaultSocialMediaLinks.ts

@@ -1,7 +1,9 @@
-import { mdiTwitter, mdiFacebook, mdiLinkedin } from '@mdi/js'
+import { mdiFacebook, mdiLinkedin } from '@mdi/js'
 
 import type { SocialMediaLink } from './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/SocialMediaLinks/SocialMediaLinks.mdx

@@ -20,7 +20,9 @@ import * as SocialMediaLinksStories from './SocialMediaLinks.stories.ts';
 <Source dark 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 = [
 	{
@@ -31,12 +33,12 @@ const links = [
 	{
 		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>

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>
@@ -88,7 +91,12 @@ li {
 }
 
 .vd-social-media-links-icon {
-	color: tokens.$grey-base;
+	color: tokens.$grey-base !important;
+}
+
+.vd-social-media-links-icon--x {
+	transform: scale(0.75);
+	transform-origin: center;
 }
 
 .v-btn--icon {

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

@@ -1,15 +1,67 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../SocialMediaLinks.stories.ts';
-import '@/stories/styles/shared.css';
+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={Stories} />
+<Meta of={SocialMediaLinksStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<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>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/SocialMediaLinks.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/790" target="_blank" style={{color:'#0C41BD'}}>issue #790</a>)</p>
-	</div>
+		<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,31 @@
+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} />
+
+## Rôle et identifiant ARIA
+
+Les props `role` et `unique-id` permettent de préciser le rôle sémantique du composant et de lier le titre au conteneur via `aria-labelledby`.
+
+Lorsque `role` est défini, l'attribut `aria-labelledby` est automatiquement appliqué sur le `PageContainer` en pointant vers le `h1`.
+
+<Canvas of={StatusPageStories.WithRole} />
+
+## Lien de retour
+
+Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.<br/>
+L'événement `btn-click` est émis lorsque l'utilisateur clique sur le bouton.
+
+<Canvas of={StatusPageStories.WithLink} />

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

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import StatusPage from './StatusPage.vue'
+
+const meta = {
+	title: 'Templates/StatusPage',
+	component: StatusPage,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
+		'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: {
+		headingLevel: 1,
+		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,
+		headingLevel: 1,
+		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',
+		headingLevel: 1,
+	},
+	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>
+		`,
+	}),
+}
+
+export const WithRole: Story = {
+	args: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Veuillez réessayer ultérieurement.',
+		code: '500',
+		role: 'main',
+		uniqueId: 'status-page-main',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<StatusPage
+						page-title="Une erreur est survenue"
+						message="Veuillez réessayer ultérieurement."
+						code="500"
+						role="main"
+						unique-id="status-page-main"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}