@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/LogoBrandSection/assets/compte-ameli.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0" y="0" style="enable-background:new 0 0 146 64" version="1.1"  width="146" height="64"  viewBox="0 0 146 64"><path d="M10.5 37.1c-1.3.4-2.7.6-4 .6-1.9 0-3.1-1-3.1-4v-2.8c0-2.9 1.2-3.8 3.1-3.8 1.3 0 2.7.1 4 .6l.6-2.8c-1.5-.4-3.1-.7-4.6-.7-3.7 0-6.5 2.2-6.5 6.5V34c0 4.4 2.8 6.5 6.5 6.5 1.6 0 3.1-.3 4.6-.7l-.6-2.7zM13.4 35.3c0 3.4 2.2 5.5 5.3 5.5s5.3-2.1 5.3-5.5v-2.2c0-3.4-2.2-5.5-5.3-5.5s-5.3 2.1-5.3 5.5v2.2zm3.3-.1v-1.9c0-1.6.4-2.7 1.9-2.7s1.9 1 1.9 2.7v1.9c0 1.6-.4 2.7-1.9 2.7-1.5-.1-1.9-1.1-1.9-2.7zM26.4 40.3h3.4V33c0-1.6.4-2.5 1.5-2.5 1 0 1.5 1 1.5 2.8v6.9h3.4v-6.9c0-1.9.4-2.8 1.5-2.8 1 0 1.5.9 1.5 2.5v7.4h3.4v-7.5c0-3.4-2.2-5-4.9-5-1.3 0-2.4.6-3.1 1.6-.7-1-1.8-1.6-3.1-1.6-2.7 0-4.9 1.6-4.9 5l-.2 7.4zM48.2 40c.4.3 1.3.6 2.1.6 2.5 0 4.9-1.8 4.9-5.2v-2.7c0-3.2-2.4-5.2-5.2-5.2s-5.2 1.9-5.2 5.2v12.4h3.4V40zm0-2.6V33c0-1.6.7-2.4 1.8-2.4s1.8.7 1.8 2.4v2.4c0 1.8-.7 2.5-1.8 2.5-.6-.1-1.2-.2-1.8-.5zM58.7 40.3h3.4v-10H64v-2.2h-1.9v-3.8l-3.4.4v3.4h-2.1l.4 2.2h1.5v10h.2zM65.6 35.3c0 3.5 2.2 5.3 5.5 5.3 1.6 0 2.7-.3 4-.7l-.6-2.7c-1 .3-2.2.6-3.4.6-1.5 0-2.2-.7-2.2-2.5v-.1h6.8v-2.7c0-2.8-2.2-4.7-5-4.7s-5 1.8-5 5.2c-.1 0-.1 2.3-.1 2.3zm3.4-2.5v-.3c0-1 .7-1.9 1.6-1.9 1 0 1.6.9 1.6 1.9v.3H69z" fill="#0084b2"/><path d="M85.1 36.9c0-2.7 2.1-4 7.1-4.4 0-1-.6-1.5-1.9-1.5s-2.1.3-3.4 1l-1.5-2.5c1.6-.9 3.5-1.5 5.5-1.5 3.2 0 5.2 1.6 5.2 5.5v6.9h-3.2l-.3-1.2c-.9.9-2.2 1.5-3.7 1.5-2.5.1-3.8-1.7-3.8-3.8zm7.1-.1v-1.9c-2.5.3-3.4.9-3.4 1.8s.4 1 1.3 1c.7 0 1.5-.3 2.1-.9zM99.3 28.2h3.2l.3 1.5c1-.9 2.1-1.8 3.8-1.8s2.8.7 3.5 1.9c1.2-1 2.2-1.9 4-1.9 2.7 0 4 1.8 4 4.9v7.5h-3.8v-7.1c0-1.6-.4-2.1-1.5-2.1s-1.3.3-2.1 1v8.1h-4v-7.1c0-1.6-.4-2.1-1.5-2.1s-1.3.3-2.1 1v8.1h-3.8V28.2c.1 0 0 0 0 0zM120.5 34.3c0-4 2.8-6.2 5.9-6.2 3.1 0 5.5 2.7 5.5 5.8v1.6h-7.5c.3 1.6 1.6 2.4 3.2 2.4s1.8-.3 2.7-.7l1.3 2.4c-1.3.9-3.1 1.3-4.6 1.3-3.9-.3-6.5-2.5-6.5-6.6zm8-1.5c0-1.2-.4-2.1-1.9-2.1s-2.1.7-2.4 2.1h4.3zM134.5 36.4V23.2h3.8v13.3c0 .7.4 1 .7 1h.4l.4 2.8c-.4.1-1.2.3-1.9.3-2.5 0-3.4-1.6-3.4-4.2zM141.6 24.6c0-1.2 1-1.9 2.2-1.9 1.3 0 2.2.7 2.2 1.9s-1 1.9-2.2 1.9c-1.3.1-2.2-.6-2.2-1.9zm.3 3.6h3.8v12.1h-3.8V28.2z" fill="#0c419a"/></svg>

package/src/components/LogoBrandSection/dividerDimensionsMapping.ts

@@ -0,0 +1,14 @@
+export const dividerDimensionsMapping = {
+	xSmall: {
+		width: '11',
+		height: '32',
+	},
+	small: {
+		width: '14',
+		height: '40',
+	},
+	normal: {
+		width: '22',
+		height: '64',
+	},
+} as const

package/src/components/LogoBrandSection/locales.ts

@@ -0,0 +1,14 @@
+export const locales = {
+	homeLinkPrefix: 'Accueil,',
+	logoCnam: 'Caisse nationale',
+	logoAmeli: 'ameli.fr',
+	logoAmeliPro: 'AmeliPro',
+	logoCompteAmeli: 'Compte ameli',
+	compteEntreprise: {
+		title: {
+			text: 'Compte',
+			highlight: 'entreprise',
+		},
+		subTitle: 'Vos démarches maladie et risques professionnels',
+	},
+}

package/src/components/LogoBrandSection/secondaryLogoMapping.ts

@@ -0,0 +1,24 @@
+import { locales } from './locales'
+import logoCnam from './assets/cnam.svg'
+import logoAmeli from './assets/ameli.svg'
+import logoAmeliPro from './assets/ameli-pro.svg'
+import logoCompteAmeli from './assets/compte-ameli.svg'
+
+export const secondaryLogoMapping = {
+	'cnam': {
+		src: logoCnam,
+		alt: locales.logoCnam,
+	},
+	'ameli': {
+		src: logoAmeli,
+		alt: locales.logoAmeli,
+	},
+	'ameli-pro': {
+		src: logoAmeliPro,
+		alt: locales.logoAmeliPro,
+	},
+	'compte-ameli': {
+		src: logoCompteAmeli,
+		alt: locales.logoCompteAmeli,
+	},
+} as const

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

@@ -0,0 +1,365 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import LogoBrandSection from '../LogoBrandSection.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('LogoBrandSection', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+				mobileVersion: false,
+				reduceLogo: false,
+				homeLink: {
+					href: '/',
+				},
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with service computed', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Service Title')
+	})
+
+	it('renders correctly with service computed', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-entreprise',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Compte entreprise')
+	})
+
+	it('renders correctly with height', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+				mobileVersion: false,
+				reduceLogo: false,
+				homeLink: {
+					href: '/',
+				},
+			},
+		})
+
+		const mainDiv = wrapper.find('.vd-logo-brand-section')
+		expect(mainDiv.attributes('height')).toBe('64px')
+	})
+
+	it('renders correctly with showServiceSubTitle', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Service Sub Title')
+	})
+
+	it('renders correctly with no showServiceSubTitle', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: '',
+			},
+		})
+
+		expect(wrapper.find('.vd-title').text()).toBe('Service Title')
+	})
+
+	it('renders correctly with default theme', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		const divider = wrapper.find('.vd-divider')
+		expect(divider.attributes('fill')).toBe('#0c419a')
+	})
+
+	it('renders correctly with cnam theme', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'cnam',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		const divider = wrapper.find('.vd-divider')
+		expect(divider.attributes('fill')).toBe('#006386')
+	})
+
+	it('renders correctly with compte entreprise theme', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-entreprise',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		const divider = wrapper.find('.vd-divider')
+		expect(divider.attributes('fill')).toBe('#cd545b')
+	})
+
+	it('renders correctly with risquePro if no reduceLogo', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'risque-pro',
+				reduceLogo: false,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('risquepro')).toBe('true')
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('false')
+	})
+
+	it('renders correctly with risquePro', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'risque-pro',
+				reduceLogo: true,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('true')
+	})
+
+	it('renders correctly with isCompteEntreprise', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-entreprise',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Compte entreprise')
+	})
+
+	it('renders correctly with isCompteAmeliMobile', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-ameli',
+				mobileVersion: true,
+			},
+		})
+
+		const img = wrapper.find('.vd-home-link img')
+		expect(img.attributes('alt')).toBe('Compte ameli')
+	})
+
+	it('renders correctly without signature', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				reduceLogo: true,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('true')
+	})
+
+	it('renders correctly without hideSignature', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				reduceLogo: false,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('false')
+	})
+
+	it('renders correctly with secondaryLogo', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				stubs: ['RouterLink', 'Logo'],
+				plugins: [vuetify],
+			},
+			props: {
+				theme: 'compte-ameli',
+			},
+		})
+
+		expect(wrapper.find('[alt="Compte ameli"]').exists()).toBe(true)
+	})
+
+	it('renders correctly with logoContainerComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				homeLink: {
+					href: '#',
+				},
+			},
+		})
+
+		expect(wrapper.find('a').attributes('href')).toBe('#')
+	})
+
+	it('renders correctly RouterLink with logoContainerComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				homeLink: {
+					to: '/',
+				},
+			},
+		})
+
+		expect(wrapper.find('router-link-stub').attributes('to')).toBe('/')
+	})
+
+	it('renders correctly with logoContainerComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				homeLink: {
+					href: undefined,
+					to: undefined,
+				},
+			},
+		})
+
+		expect(wrapper.find('.vd-home-link').element.tagName).toBe('DIV')
+	})
+
+	it('renders correctly with secondaryLogoCtnComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+			},
+		})
+
+		expect(wrapper.findAll('.vd-home-link').length).toBe(1)
+	})
+
+	it('renders correctly with secondaryLogoCtnComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'ameli-pro',
+			},
+		})
+
+		expect(wrapper.findAll('.vd-home-link').length).toBe(2)
+	})
+
+	it('renders correctly with secondaryLogoCtnComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'ameli',
+				homeLink: {
+					href: undefined,
+					to: undefined,
+				},
+			},
+		})
+
+		expect(wrapper.findAll('.vd-home-link')[1].element.tagName).toBe('DIV')
+	})
+})

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

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LogoBrandSection > renders correctly 1`] = `
+"<div data-v-7f5c1754="" height="64px" class="vd-logo-brand-section d-flex"><a data-v-7f5c1754="" href="/" class="vd-home-link">
+    <logo-stub data-v-7f5c1754="" hidesignature="false" hideorganism="false" risquepro="false" avatar="false" dark="false" size="normal" class=""></logo-stub>
+  </a><svg data-v-7f5c1754="" width="22" height="64" fill="#0c419a" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 64" class="vd-divider">
+    <path data-v-7f5c1754="" d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z"></path>
+  </svg>
+  <div data-v-7f5c1754="" class="vd-title-container d-flex justify-center flex-column text-primary">
+    <h1 data-v-7f5c1754="" class="vd-title text-caption text-md-subtitle-1 font-weight-medium">Service Title</h1>
+    <h2 data-v-7f5c1754="" class="vd-title text-caption">Service Sub Title</h2>
+  </div>
+</div>"
+`;

package/src/components/LogoBrandSection/types.ts

@@ -0,0 +1,8 @@
+export type Theme =
+	| 'ameli'
+	| 'ameli-pro'
+	| 'cnam'
+	| 'compte-ameli'
+	| 'compte-entreprise'
+	| 'default'
+	| 'risque-pro'

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>' }),
+	],
+}