@cnamts/synapse 0.0.4-alpha → 0.0.5-alpha

package/src/components/ErrorPage/ErrorPage.stories.ts

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ErrorPage from './ErrorPage.vue'
+
+const meta = {
+	title: 'Templates/ErrorPage',
+	component: ErrorPage,
+	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 ErrorPage>
+
+export default meta
+
+type Story = StoryObj<typeof ErrorPage>
+
+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)">
+						<ErrorPage
+							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 { ErrorPage } 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)">
+						<ErrorPage
+							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 { ErrorPage } from '@cnamts/synapse'
+				</script>
+				
+				`,
+			},
+		],
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+}

package/src/components/ErrorPage/ErrorPage.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+	import type { RouteRecordRaw } from 'vue-router'
+	import { locales } from './locales'
+	import PageContainer from '../PageContainer/PageContainer.vue'
+
+	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: locales.errorCodeText,
+		btnText: undefined,
+		btnLink: '/',
+		btnHref: undefined,
+		hideBtn: false,
+	})
+</script>
+
+<template>
+	<PageContainer size="l">
+		<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="vd-code text-primary mb-4"
+					>
+						<span class="d-sr-only">{{ codeErrorText }}</span>
+						{{ code }}
+					</div>
+
+					<h2
+						v-if="pageTitle"
+						class="mb-2 font-weight-bold text-h5 mb-4"
+					>
+						{{ pageTitle }}
+					</h2>
+
+					<p v-if="message">
+						{{ message }}
+					</p>
+
+					<slot name="additional-content" />
+
+					<slot name="action">
+						<VBtn
+							v-if="!hideBtn && btnText && (btnLink || btnHref)"
+							:to="btnLink"
+							:href="btnHref"
+							color="primary"
+							exact
+							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>
+.vd-code {
+	font-size: 6rem;
+	line-height: 6rem;
+	font-weight: 400;
+}
+</style>

package/src/components/ErrorPage/locales.ts

@@ -0,0 +1,5 @@
+export const locales = {
+	errorCodeText: 'Code d\'erreur\xa0: ',
+	supportIdMessage: 'Votre identifiant de support\xa0:',
+	btnText: 'Retour à l’accueil',
+}

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

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import ErrorPage from '../ErrorPage.vue'
+
+describe('ErrorPage', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(ErrorPage, {
+			global: {
+				plugins: [vuetify],
+			},
+			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(ErrorPage, {
+			global: {
+				plugins: [vuetify],
+			},
+			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()
+	})
+})

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

@@ -0,0 +1,78 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ErrorPage > renders correctly 1`] = `
+"<div data-v-fb0b02fd="" data-v-8f2b5bad="" class="py-10 px-8 vd-page-container d-flex justify-center">
+  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 960px;">
+    <div data-v-8f2b5bad="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-6 pa-sm-16">
+      <!---->
+      <div class="v-card__loader">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+          <!---->
+          <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+            <div class="v-progress-linear__indeterminate">
+              <div class="v-progress-linear__indeterminate long"></div>
+              <div class="v-progress-linear__indeterminate short"></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <div data-v-8f2b5bad="" class="v-row max-width-none">
+        <div data-v-8f2b5bad="" class="v-col-sm-12 v-col-12 order-last order-sm-first text-center text-sm-left d-flex flex-column justify-center align-sm-start">
+          <!--v-if-->
+          <h2 data-v-8f2b5bad="" class="mb-2 font-weight-bold text-h5 mb-4">Something went wrong</h2>
+          <p data-v-8f2b5bad="">Error message</p>
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+      <!---->
+      <!----><span class="v-card__underlay"></span>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`ErrorPage > renders correctly with undefined route 1`] = `
+"<div data-v-fb0b02fd="" data-v-8f2b5bad="" class="py-10 px-8 vd-page-container d-flex justify-center">
+  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 960px;">
+    <div data-v-8f2b5bad="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-6 pa-sm-16">
+      <!---->
+      <div class="v-card__loader">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+          <!---->
+          <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+            <div class="v-progress-linear__indeterminate">
+              <div class="v-progress-linear__indeterminate long"></div>
+              <div class="v-progress-linear__indeterminate short"></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <div data-v-8f2b5bad="" class="v-row max-width-none">
+        <div data-v-8f2b5bad="" class="v-col-sm-12 v-col-12 order-last order-sm-first text-center text-sm-left d-flex flex-column justify-center align-sm-start">
+          <div data-v-8f2b5bad="" class="vd-code text-primary mb-4"><span data-v-8f2b5bad="" class="d-sr-only">Code d'erreur&nbsp;: </span> 501</div>
+          <h2 data-v-8f2b5bad="" class="mb-2 font-weight-bold text-h5 mb-4">Error</h2>
+          <p data-v-8f2b5bad="">Error message</p><a data-v-8f2b5bad="" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated mt-6" href="https://google.com"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator="">Go to...</span>
+            <!---->
+            <!---->
+          </a>
+        </div>
+        <!--v-if-->
+      </div>
+      <!---->
+      <!----><span class="v-card__underlay"></span>
+    </div>
+  </div>
+</div>"
+`;