@cnamts/synapse 0.0.4-alpha → 0.0.5-alpha

package/src/components/LangBtn/Accessibilite.stories.ts

@@ -0,0 +1,166 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Boutons/LangBtn/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/LangBtn/AccessibiliteItems.ts

@@ -0,0 +1,132 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.4 Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?',
+		items: [
+			{
+
+				precision: '1.4.1 Pour chaque image (balise <img>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> pourvues d’une alternative textuelle et utilisées comme CAPTCHA ou comme image-test',
+					info2: '2. Pour chaque image, vérifier que l’alternative textuelle est pertinente',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+
+				precision: ' 1.4.6 Pour chaque image vectorielle (balise <svg>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.6',
+				solution: [{
+					info1: '1. Retrouver dans le document les éléments <svg> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test;',
+					info2: '2. Pour chaque élément <svg>, vérifier que l’alternative textuelle est pertinente',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+			{
+
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ? '
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: ' 7.1.3 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il ces conditions : '
+					+ 'Le composant possède un nom pertinent ;'
+					+ 'Le nom accessible du composant contient au moins l’intitulé visible ;'
+					+ 'Le composant possède un rôle pertinent.',
+
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.3',
+				solution: [{
+					info1: '1. Pour chacun des composants d’interface ayant validé le test 7.1.1, vérifier que le composant d’interface possède : ',
+					info2: '2. Un nom pertinent (intitulé visible) et un rôle pertinent',
+					info3: '3. Si le composant d’interface possède un nom accessible, vérifier que ce nom est pertinent et contient au moins l’intitulé visible.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

package/src/components/LangBtn/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

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

@@ -11,7 +11,7 @@ const vuetify = createVuetify({
 	directives,
 })
 
-describe('LangBtn.vue', () => {
+describe('LangBtn', () => {
 	let wrapper: VueWrapper
 
 	afterEach(() => {

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LangBtn.vue > renders correctly 1`] = `
+exports[`LangBtn > renders correctly 1`] = `
 "<div data-v-42678988="" id="lang-menu-id"><button data-v-42678988="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined vd-lang-btn" id="lang-menu-btn" aria-label="Choix de la langue. Actuellement Français" aria-haspopup="menu" aria-controls="lang-menu-id" aria-owns="lang-menu-id" aria-expanded="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator="">Français <i data-v-42678988="" class="M7,10L12,15L17,10H7Z mdi v-icon notranslate v-theme--light v-icon--size-default ml-1" aria-hidden="true"></i></span>
     <!---->

package/src/components/MaintenancePage/MaintenancePage.mdx

@@ -0,0 +1,11 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as MaintenancePageStories from "./MaintenancePage.stories";
+
+<Meta of={MaintenancePageStories} />
+
+# MaintenancePage
+
+Le composant `MaintenancePage` permet d'afficher une page de maintenance.
+Il est basé sur le composant `ErrorPage` du design system.
+
+<Canvas of={MaintenancePageStories.Default} />

package/src/components/MaintenancePage/MaintenancePage.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import MaintenancePage from './MaintenancePage.vue'
+
+const meta: Meta = {
+	title: 'Templates/MaintenancePage',
+	component: MaintenancePage,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof MaintenancePage>
+
+export default meta
+
+type Story = StoryObj<typeof MaintenancePage>
+
+export const Default: Story = {
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+						<MaintenancePage />
+					</div>
+				</template>
+				`,
+			}, {
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { MaintenancePage } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/MaintenancePage/MaintenancePage.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+	import { locales } from './locales'
+	import ErrorPage from '../ErrorPage/ErrorPage.vue'
+</script>
+
+<template>
+	<ErrorPage
+		:page-title="locales.pageTitle"
+		:message="locales.message"
+		no-btn
+	>
+		<template #illustration>
+			<img
+				src="./assets/maintenance.svg"
+				:alt="locales.pageTitle"
+			>
+		</template>
+	</ErrorPage>
+</template>
+
+<style lang="scss" scoped>
+img {
+	max-height: 290px;
+}
+</style>

package/src/components/MaintenancePage/assets/maintenance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 171 172"><path fill="#e7ecf5" fill-rule="evenodd" d="M170.98 85.88c-.67 23.17-21.93 38.99-39.79 53.75-15.66 12.94-33.5 21.47-53.71 23.52-23.03 2.34-49.9 5.4-65.83-11.4C-4.15 135.07-.9 108.28 4.2 85.88 8.22 68.22 23.74 57.72 36.11 44.5c13.13-14.02 22.4-33.9 41.37-36.9 20.81-3.3 40.79 7.79 56.95 21.32 17.98 15.05 37.24 33.52 36.55 56.97Z" clip-rule="evenodd"/><circle cx="123.87" cy="127.71" r="17.83" fill="#fff" stroke="#0c419a" stroke-width="2"/><circle cx="126.62" cy="126.25" r="15.08" fill="#fff" stroke="#0c419a" stroke-width="2"/><circle cx="126.95" cy="125.92" r="10.86" fill="#fff" stroke="#0c419a" stroke-width="2"/><path fill="#0c419a" d="M87.88 67.72c0-19.13 13.03-28.19 24.48-30.48 21.07-4.21 54.13 12.81 54.63 57.07.42 36.27-15.75 76.47-51.55 76.52-32.75.05-41.02-27.72-45.88-34.2-1.66-2.2-5.02-8.76-8.76-11.68-2.48-1.93-8.1-1.9-12.48-3.73-4.8-2-11.98-8.02-13.46-13.94l-5.19-22.54c2.4-1.93 3.9-2.06 6.65-1.78.97 2.54 3.37 10.22 6.49 20.6 3.74 12.47 13.61 11.83 22.37 9.4 8.75-2.44 10.7-13.46 9.73-19.46-.78-4.8-5.73-15.19-8.11-19.78 2.02-2.3 3.46-2.8 6.32-2.92 1.2 2.43 4.22 8.66 6.81 14.1 3.24 6.82 3.73 12.81 3.24 16.87-.48 4.05-4.37 12.32-6.32 13.62-2.43 1.78-1.93 3.73-2.1 6.8-.36 6.15 8.87 41.35 40.69 41.19 34.77-.19 45.7-47.56 45.4-69.07-.6-41.99-30.97-55.12-46.54-51.07-8.47 2.2-19.74 6.98-20.26 24.48-.46 15.12 12.9 31.98 21.23 41.52 1.42 1.63 2.7 3.04 3.73 4.2-.64 2.43-2.75 4.05-4.7 4.86a217.2 217.2 0 0 1-4.05-4.34c-12.78-14.09-22.37-28.9-22.37-46.24Z"/><path fill="#0c419a" d="M120.8 35.67c-3-.16-5.91.05-8.64.59a32.39 32.39 0 0 0-17.06 9.22c-4.85 5.12-8.22 12.45-8.22 22.24 0 17.7 9.78 32.75 22.63 46.91l.74-.67-.74.67c1.34 1.47 2.7 2.93 4.07 4.36l.47.5.63-.27c2.16-.88 4.54-2.68 5.29-5.52l.13-.52-.35-.4c-1.04-1.17-2.3-2.57-3.72-4.2l-.75.66.74-.66c-8.3-9.5-21.42-26.32-20.98-40.83.25-8.54 3.08-13.8 6.83-17.28 3.75-3.48 8.51-5.18 12.68-6.26 14.75-3.84 44.7 8.6 45.29 50.11.15 10.58-2.5 27.72-9.45 42.08-6.95 14.37-18.02 25.89-34.95 25.98-15.55.08-25.46-8.41-31.57-17.78a56.35 56.35 0 0 1-6.43-13.66c-1.3-4.08-1.76-7.46-1.7-8.7.1-1.6.03-2.84.2-3.75.16-.92.45-1.52 1.5-2.3l-.04.03a7.72 7.72 0 0 0 2.04-2.4 34.63 34.63 0 0 0 2.03-3.79c1.3-2.8 2.42-5.88 2.7-8.14.5-4.26-.02-10.43-3.34-17.42-2.59-5.44-5.6-11.67-6.81-14.11l-.3-.59-.64.03c-2.96.13-4.9.84-7.03 3.26l-.45.51.31.61c1.18 2.27 3 6 4.63 9.75 1.62 3.74 3.03 7.55 3.38 9.73.45 2.8.22 6.93-1.16 10.55-1.39 3.6-3.83 6.66-7.85 7.78-4.3 1.2-8.8 1.9-12.54.9-3.73-1.02-6.8-3.62-8.61-9.63-2.06-6.86-3.06-9.84-4.3-13.66l-2.19-6.94-.02-.06-.2-.56-.63-.08c-2.83-.28-4.84-.04-7.38 2l-.49.4 5.35 23.15v.01c.8 3.25 3.09 6.34 5.75 8.92a28.5 28.5 0 0 0 8.28 5.7c2.34.98 4.9 1.43 7.14 1.9 2.25.45 4.17.96 5.12 1.7 1.7 1.32 3.44 3.63 4.94 5.87 1.49 2.24 2.71 4.4 3.63 5.61 1.1 1.46 2.56 4.44 4.54 7.98a67.85 67.85 0 0 0 7.99 11.64c6.9 7.9 17.5 15.02 34.15 14.99 18.28-.03 31.63-10.37 40.22-25.18 8.59-14.8 12.54-34.06 12.33-52.35-.44-39.16-26.18-57.56-47.2-58.63Zm-.12 2c19.88 1.01 44.88 18.36 45.31 56.65.2 17.98-3.72 36.95-12.06 51.33-8.34 14.38-20.96 24.16-38.5 24.18-16.08.02-26-6.72-32.64-14.31a65.94 65.94 0 0 1-7.74-11.3c-1.96-3.49-3.35-6.41-4.69-8.2-.74-.98-2.03-3.2-3.57-5.52-1.53-2.3-3.33-4.74-5.37-6.34-1.54-1.2-3.67-1.62-5.95-2.09-2.28-.46-4.72-.91-6.76-1.77a27 27 0 0 1-7.67-5.3c-2.5-2.41-4.54-5.3-5.2-7.96l-5.03-21.8a6.11 6.11 0 0 1 4.78-1.28l6.26 19.88c1.94 6.47 5.67 9.8 10 10.97 4.33 1.18 9.15.34 13.6-.9 4.73-1.31 7.64-4.98 9.17-8.99 1.54-4 1.8-8.38 1.28-11.58-.43-2.62-1.88-6.4-3.53-10.2a160.61 160.61 0 0 0-4.34-9.16 5.98 5.98 0 0 1 4.51-2.08c1.3 2.64 4.02 8.25 6.49 13.43 3.16 6.65 3.61 12.46 3.15 16.32-.21 1.8-1.28 4.87-2.53 7.54a32.87 32.87 0 0 1-1.9 3.56 8.1 8.1 0 0 1-1.46 1.8l-.01.02-.02.01a5.54 5.54 0 0 0-2.3 3.55c-.22 1.27-.13 2.53-.2 4-.12 1.85.43 5.18 1.77 9.41a58.24 58.24 0 0 0 6.66 14.16c6.36 9.73 16.98 18.76 33.26 18.68 17.83-.1 29.6-12.36 36.74-27.1 7.13-14.75 9.8-32.05 9.65-42.98-.6-42.47-31.4-56.3-47.8-52.03-4.3 1.12-9.4 2.9-13.53 6.74-4.13 3.83-7.2 9.72-7.47 18.68-.47 15.41 12.52 31.85 20.92 41.53a20.25 20.25 0 0 1-3.57 3.35c-12.38-13.8-21.5-28.16-21.5-44.85 0-9.34 3.14-16.1 7.66-20.86a30.46 30.46 0 0 1 16-8.64c2.55-.5 5.29-.7 8.13-.55zm-5.41 73.07 2.52 2.84a6.6 6.6 0 0 1-3.32 3.44c-.92-.97-1.84-1.96-2.75-2.95 1.3-.98 2.49-2.1 3.55-3.33z" color="#000"/><path fill="#fff" stroke="#0c419a" stroke-width="2" d="m34.44 82.53.1.36a6.74 6.74 0 0 0-3.73 1.04C26.1 64.48 15.89 25.9 28.38 12.6c4.54-4.54 10.21-6.1 12.48-6.32l.81 3.56a22.53 22.53 0 0 0-12 6.81c-9.96 10.61 1.1 52.13 4.77 65.88Z"/><path fill="#fff" stroke="#0c419a" stroke-width="2" d="M37.94 18.27c18 11.03 28.86 42.16 33.4 52.7A6.49 6.49 0 0 0 68 72.59c-6.39-16.54-19.2-44.02-30.06-50.75C29.25 16.46 21.9 18.6 18 20.71c-.05-1.7-.35-2.44-1.3-3.4 6.65-2.44 14.1-3.74 21.24.96Z"/><path fill="#0c419a" stroke="#0c419a" stroke-width="2" d="M46.86 10c-2.47 0-4.7 1.3-5.84-1.61-.65-1.79.16-3.41 1.46-3.9 1.3-.48 2.43-.64 2.92-1.13a7.2 7.2 0 0 1 3.73-2.1c2.24-.38 4.54.48 5.51 2.91a4.28 4.28 0 0 1-2.76 5.84c-1.45.48-3.72 0-5.02 0Z"/><ellipse cx="52.51" cy="5.35" fill="#fff" stroke="#fff" stroke-width="2" rx="1.12" ry="2.28" transform="rotate(-13 52.51 5.35)"/><path fill="#0c419a" stroke="#0c419a" stroke-width="2" d="M10.7 17.3c2.47 0 5.74-1.94 6.98 1.46.64 1.78.11 3.7-1.18 4.18-1.3.48-2.44.65-2.92 1.13a7.2 7.2 0 0 1-3.73 2.11c-2.25.38-4.67-.44-5.51-2.92-.77-2.23-.26-4.37 1.83-5.47 1.78-.94 2.75-.49 4.53-.49Z"/><ellipse cx="6.47" cy="22.53" fill="#fff" stroke="#fff" stroke-width="2" rx="1.12" ry="2.28" transform="rotate(158 6.47 22.53)"/></svg>

package/src/components/MaintenancePage/index.ts

@@ -0,0 +1,3 @@
+import MaintenancePage from './MaintenancePage.vue'
+
+export default MaintenancePage

package/src/components/MaintenancePage/locales.ts

@@ -0,0 +1,5 @@
+export const locales = {
+	pageTitle: 'Maintenance en cours',
+	message:
+		'L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée.',
+}

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

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+
+import MaintenancePage from '../'
+
+describe('MaintenancePage', () => {
+	it('renders correctly', () => {
+		const wrapper = shallowMount(MaintenancePage)
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MaintenancePage > renders correctly 1`] = `"<error-page-stub data-v-25a0ed68="" pagetitle="Maintenance en cours" message="L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée." codeerrortext="Code d'erreur&nbsp;: " btnlink="/" hidebtn="false" no-btn=""></error-page-stub>"`;

package/src/components/NotFoundPage/NotFoundPage.mdx

@@ -0,0 +1,19 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as NotFoundPageStories from "./NotFoundPage.stories";
+
+<Meta of={NotFoundPageStories} />
+
+# NotFoundPage
+
+Le composant `NotFoundPage` permet d'afficher une page 404.
+Il est basé sur le composant `ErrorPage` du design system.
+
+<Canvas of={NotFoundPageStories.Default} />
+
+## Code d'erreur
+
+Si un code d'erreur est passé en paramètre `support_id`, le composant l'affiche dans le template.
+
+Exemple : `https://www.example.fr?support_id=1234567890123456789`
+
+<Canvas of={NotFoundPageStories.WithErrorCode} />

package/src/components/NotFoundPage/NotFoundPage.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import NotFoundPage from './NotFoundPage.vue'
+
+const meta = {
+	title: 'Templates/NotFoundPage',
+	component: NotFoundPage,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof NotFoundPage>
+
+export default meta
+
+type Story = StoryObj<typeof NotFoundPage>
+
+export const Default: Story = {
+	parameters: {
+		query: {
+			support_id: '',
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+						<NotFoundPage />
+					</div>
+				</template>
+				`,
+			}, {
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { NotFoundPage } from '@cnamts/synapse'
+				</script>
+
+				`,
+			},
+		],
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+}
+
+export const WithErrorCode: Story = {
+	parameters: {
+		query: {
+			support_id: '1234567890123456789',
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+						<NotFoundPage />
+					</div>
+				</template>
+				`,
+			}, {
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { NotFoundPage } from '@cnamts/synapse'
+				</script>
+
+				`,
+			},
+		],
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+}

package/src/components/NotFoundPage/NotFoundPage.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+	import { onMounted, ref } from 'vue'
+	import ErrorPage from '../ErrorPage/ErrorPage.vue'
+	import { locales } from './locales'
+
+	const SUPPORT_ID_PARAM_NAME = 'support_id'
+	const supportId = ref<string | undefined>()
+
+	onMounted(() => {
+		const params = new URLSearchParams(document.location.search)
+		let supportIdParam = params.get(SUPPORT_ID_PARAM_NAME)
+
+		if (!supportIdParam) {
+			return
+		}
+
+		supportId.value = supportIdParam.trim().match(/.{1,4}/g)?.join(' ')
+	})
+</script>
+
+<template>
+	<ErrorPage
+		:code="locales.code"
+		:page-title="locales.pageTitle"
+		:message="locales.message"
+	>
+		<template
+			v-if="supportId"
+			#additional-content
+		>
+			<p class="mt-4">
+				{{ locales.supportIdMessage }}
+
+				<b>{{ supportId }}</b>
+				.
+			</p>
+		</template>
+
+		<template #illustration>
+			<img
+				src="./assets/not-found.svg"
+				:alt="locales.pageTitle"
+			>
+		</template>
+	</ErrorPage>
+</template>
+
+<style lang="scss" scoped>
+img {
+	max-height: 290px;
+}
+</style>

package/src/components/NotFoundPage/assets/not-found.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 175 185"><path fill="#e7ecf5" fill-rule="evenodd" d="M82.05 1.03c25.02 4.23 35.74 31.89 52.64 50.76 15.22 17 38.8 29.7 39.77 52.46.99 23.2-15.89 44.01-35.1 57.13-16.47 11.25-37.51 3.39-57.3 5.99-25.97 3.41-55.68 29.28-74.73 11.37-18.93-17.8 7.49-48.54 7.6-74.49.11-25.7-20.98-52.27-6.95-73.83C23 7.3 54.8-3.56 82.05 1.03Z" clip-rule="evenodd"/><path fill="#fff" d="M101.76 132.91 80.07 96.9l-6.74-11.21 3.21-4.8s32.94-.8 35.35 0l35.34 56.04-4.01 4.8h-36.15l-5.31-8.82Z"/><path fill="#0c419a" d="m101.76 132.91 5.3 8.83h-.4l-52.48-8.01 47.58-.82Z"/><path fill="#fff" d="M54.18 133.73h-.13V96.9h26.03l21.68 36.01-47.58.82ZM54.05 96.9v36.83l-19.28-9.6V88.9l19.28 8Z"/><path fill="#0c419a" d="m63.87 64.26 17.25-5.12 20.51-6.1s2.54 4.43 9.87 2.6c-5.53 1.83-20.28 6.68-26.74 8.62-8.04 2.4-20.89 0-20.89 0Z"/><path fill="#fff" d="M111.5 55.64c-7.34 1.83-9.87-2.6-9.87-2.6l-20.51 6.1c1.6-1.37 7.76-7.03 8.46-13.3.8-7.2 3.21-15.21 9.64-18.41 5.82-2.9 27.96-15.14 32.1-17.43-1.19.84-2.39 2.33-3.42 4.89a28.8 28.8 0 0 0-1.37 4.53c-3.21 14.41-2.4 31.23-12.05 35.23-1.07.44-2.06.77-2.97 1Z"/><path fill="#0c419a" d="M131.32 10c2.88-2.03 5.66-.19 5.66-.19L128 14.93l-.1-.04c1.03-2.56 2.23-4.06 3.42-4.9Z"/><path stroke="#0c419a" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m111.5 55.64 2.14-.7M111.5 55.65c-7.33 1.82-9.87-2.6-9.87-2.6l-20.51 6.09-17.25 5.12s12.85 2.4 20.89 0c6.46-1.94 21.2-6.79 26.74-8.61ZM111.5 55.65h.01M128 14.93l8.98-5.12s-2.78-1.84-5.66.19c-1.19.84-2.39 2.33-3.42 4.89a28.8 28.8 0 0 0-1.37 4.53c-3.21 14.41-2.4 31.23-12.05 35.23-1.07.45-2.06.77-2.97 1"/><path stroke="#0c419a" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M80.74 59.45s.14-.1.38-.31c1.6-1.37 7.76-7.03 8.46-13.3.8-7.2 3.21-15.21 9.64-18.41 5.82-2.9 27.96-15.14 32.1-17.43l.67-.37M97.61 33.03l20.08-10.4M96 40.24l20.9-10.41M62.08 88.9H34.77l19.28 8h26.1M101.79 132.91h-.03l-47.58.82h-.13V96.9M54.05 133.73l-19.28-9.6V88.9M76.54 80.89l34.54 56.04h26.52"/><g stroke="#0c419a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke="#0c419a" stroke-miterlimit="10" d="m54.06 133.7.12.03 52.49 8h36.55l4.01-4.8L111.9 80.9c-2.41-.8-35.35 0-35.35 0l-3.22 4.8 6.75 11.21 21.69 36.02 5.3 8.82"/><path  d="M1-1h6.27" transform="rotate(81.49 -7.48 56.18) skewX(.05)"/><path d="M1-1h7.26" transform="rotate(48.66 -44.44 74.2) skewX(.16)"/><path d="M1-1h4.39" transform="matrix(.9 .45 -.45 .9 38.17 66.32)"/></g></svg>

package/src/components/NotFoundPage/locales.ts

@@ -0,0 +1,6 @@
+export const locales = {
+	code: '404',
+	pageTitle: 'Page non trouvée',
+	message: 'Cette page n’existe pas ou a été déplacée.',
+	supportIdMessage: 'Votre identifiant de support est',
+}

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

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import { vuetify } from '@tests/unit/setup'
+import { locales } from '../locales'
+import NotFoundPage from '../NotFoundPage.vue'
+
+describe('NotFoundPage', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(NotFoundPage, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toContain(locales.code)
+		expect(wrapper.text()).toContain(locales.message)
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('display the support ID if provided in the url', async () => {
+		history.replaceState(
+			{},
+			'',
+			'/not-found?support_id=1234567890123456789',
+		)
+		const wrapper = mount(NotFoundPage, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.text()).toContain('1234 5678 9012 3456 789')
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})