@cnamts/synapse 1.0.7 → 1.0.9

package/src/components/Amelipro/AmeliproDisclosure/AmeliproDisclosure.stories.ts

@@ -56,3 +56,95 @@ export const Default: Story = {
 </AmeliproDisclosure>`,
 	}),
 }
+
+// --- Panneau ouvert par défaut ---
+export const OpenByDefault: Story = {
+	args: {
+		default: '[Slot: default]',
+		title: 'Ouvert par défaut',
+		uniqueId: 'amelipro-disclosure-open',
+		isOpen: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le panneau dépliant est ouvert au chargement grâce à la prop <code>isOpen</code>.</p>
+  <AmeliproDisclosure
+    title="Ouvert par défaut"
+    unique-id="amelipro-disclosure-open"
+    :is-open="true"
+  >
+    [Slot: default]
+  </AmeliproDisclosure>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproDisclosure } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproDisclosure },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le panneau dépliant est ouvert au chargement grâce à la prop <code>isOpen</code>.</p>
+<AmeliproDisclosure v-bind="args">
+  {{ args.default }}
+</AmeliproDisclosure>
+`,
+	}),
+}
+
+// --- Contenu personnalisé complexe ---
+export const CustomContent: Story = {
+	args: {
+		title: 'Contenu personnalisé',
+		uniqueId: 'amelipro-disclosure-custom',
+		isOpen: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le slot <code>default</code> permet d’ajouter un contenu totalement personnalisé dans le panneau.</p>
+  <AmeliproDisclosure
+    title="Contenu personnalisé"
+    unique-id="amelipro-disclosure-custom"
+  >
+    <ul>
+      <li>Premier élément</li>
+      <li>Deuxième élément</li>
+      <li>Troisième élément</li>
+    </ul>
+  </AmeliproDisclosure>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproDisclosure } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproDisclosure },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le slot <code>default</code> permet d’ajouter un contenu totalement personnalisé dans le panneau.</p>
+<AmeliproDisclosure v-bind="args">
+  <ul>
+    <li>Premier élément</li>
+    <li>Deuxième élément</li>
+    <li>Troisième élément</li>
+  </ul>
+</AmeliproDisclosure>
+`,
+	}),
+}

package/src/components/Amelipro/AmeliproErrorTemplate/AmeliproErrorTemplate.mdx

@@ -0,0 +1,23 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as AmeliproErrorTemplateStories from './AmeliproErrorTemplate.stories';
+
+<Meta of={AmeliproErrorTemplateStories} />
+
+# AmeliproErrorTemplate
+
+L’élément `AmeliproErrorTemplate` est utilisé pour afficher les différents messages d’alertes ou d’information.
+
+Malgré tous vos efforts, certaines erreurs seront inévitables. Pour entretenir une bonne expérience utilisateur vous devez afficher les bons messages au bon moment en fonction du type de problème. Si vous ne trouvez pas de message adapté parmi les messages de vie listés ci-dessous, veuillez prendre celui qui indique “erreur technique”.
+
+Pour les messages contenant un retour à la page d’accueil ou de connexion, il est possible de prévoir une redirection automatique au bout d’un temps défini. Dans ce cas précisez dans le message le texte suivant « Vous allez être redirigé vers (_"la page d’accueil"_ ou _"la page de connexion"_). Si la redirection ne se fait pas automatiquement, veuillez cliquer sur le lien suivant (_"Page d’accueil"_ ou _"Se reconnecter"_) ».
+
+## Règles d’usage
+
+Ce code est renvoyé par le serveur pour indiquer à l’utilisateur qu’aucune ressource (généralement une page web) n’a été trouvée à l’adresse demandée. L’entête de la page devrait être dynamique car même si dans la majorité des cas, l’utilisateur est connecté, l’affichage devrait être possible également dans le cas où il n’est pas connecté.
+
+<Canvas of={AmeliproErrorTemplateStories.Default} />
+
+## API
+
+<Controls of={AmeliproErrorTemplateStories.Default} />

package/src/components/Amelipro/AmeliproErrorTemplate/AmeliproErrorTemplate.stories.ts

@@ -0,0 +1,386 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproErrorTemplate from './AmeliproErrorTemplate.vue'
+
+const meta = {
+	argTypes: {
+		btnHref: { description: 'Href du bouton situé sous le texte principal si le slot "button est inutilisé"' },
+		btnTo: { description: 'Route du bouton situé sous le texte principal si le slot "button est inutilisé"' },
+		button: { description: 'Bouton sous le texte principal' },
+		click: { description: 'Événement émis au clic sur le bouton', type: 'void' },
+		contentTitle: { description: 'Titre du contenu' },
+		customBtnText: { description: 'Texte du bouton' },
+		customContentText: { description: 'Texte principal' },
+		customContentTitle: { description: 'Titre sous l’image ' },
+		customImgUrl: { description: 'Lien de l’image' },
+		customTitleText: { description: 'Titre de la card' },
+		default: { description: 'Texte principal' },
+		errorType: {
+			control: 'select',
+			description: 'Active les Modes par défaut',
+			options: [
+				'disconnect',
+				'obsolete',
+				'inactive',
+				'technical',
+				'maintenance',
+				'error401',
+				'error403',
+				'error404',
+				'error500',
+				'error503',
+			],
+			table: { type: { summary: 'string' } },
+		},
+		image: { description: 'Image de la fenetre' },
+		imgMinWidth: { description: 'Taille de minimal de l’image' },
+		imgWidth: { description: 'Taille de l’image' },
+		noButton: { description: 'Booléen permettant d’activer supprimer le bouton en bas du message' },
+		title: { description: 'Titre de la fenêtre' },
+		uniqueId: { description: 'Identifiant unique du composant' },
+	},
+	component: AmeliproErrorTemplate,
+	title: 'Composants/Amelipro/Mise en page/AmeliproErrorTemplate',
+} as Meta<typeof AmeliproErrorTemplate>
+export default meta
+
+type Story = StoryObj<typeof AmeliproErrorTemplate>
+
+export const Default: Story = {
+	args: {
+		errorType: 'technical',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="technical"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Disconnect: Story = {
+	args: {
+		errorType: 'disconnect',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="disconnect"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Obsolete: Story = {
+	args: {
+		errorType: 'obsolete',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="obsolete"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Inactive: Story = {
+	args: {
+		errorType: 'inactive',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="inactive"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Maintenance: Story = {
+	args: {
+		errorType: 'maintenance',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="maintenance"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Error401: Story = {
+	args: {
+		errorType: 'error401',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="error401"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Error403: Story = {
+	args: {
+		errorType: 'error403',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="error403"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Error404: Story = {
+	args: {
+		errorType: 'error404',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="error404"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Error500: Story = {
+	args: {
+		errorType: 'error500',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="error500"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}
+
+export const Error503: Story = {
+	args: {
+		errorType: 'error503',
+		imgMinWidth: '200',
+		imgWidth: '200',
+		noButton: false,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproErrorTemplate
+		error-type="error503"
+		img-min-width="200"
+		img-width="200"
+		:no-button="false"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproErrorTemplate },
+		setup() {
+			return { args }
+		},
+		template: `<AmeliproErrorTemplate
+	v-bind="args"
+/>`,
+	}),
+}

package/src/components/Amelipro/AmeliproErrorTemplate/AmeliproErrorTemplate.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+	import { type PropType, computed, ref } from 'vue'
+	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproCard from '../AmeliproCard/AmeliproCard.vue'
+	import { ErrorTemplateContent } from './errorTemplateTypes'
+	import type { RouteLocationRaw } from 'vue-router'
+	import { mdiChevronRight } from '@mdi/js'
+
+	const props = defineProps({
+		btnHref: {
+			type: String,
+			default: undefined,
+		},
+		btnTo: {
+			type: [Array, Object, String] as PropType<RouteLocationRaw>,
+			default: undefined,
+		},
+		customBtnText: {
+			type: String,
+			default: undefined,
+		},
+		customContentText: {
+			type: String,
+			default: undefined,
+		},
+		customContentTitle: {
+			type: String,
+			default: undefined,
+		},
+		customImgUrl: {
+			type: String,
+			default: undefined,
+		},
+		customTitleText: {
+			type: String,
+			default: undefined,
+		},
+		errorType: {
+			type: String as PropType<keyof typeof ErrorTemplateContent>,
+			required: true,
+		},
+		imgMinWidth: {
+			type: String,
+			default: '200',
+		},
+		imgWidth: {
+			type: String,
+			default: '200',
+		},
+		noButton: {
+			type: Boolean,
+			default: false,
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+	})
+
+	const titleText = ref<string | undefined>('')
+	const btnText = ref<string | undefined>('')
+	const contentText = ref('')
+	const contentTitle = ref('')
+	const imgUrlDefault = ref('')
+
+	const imgUrl = computed<string>(() => (props.customImgUrl === undefined ? imgUrlDefault.value : props.customImgUrl))
+
+	const loadGlobalData = (templateName: string): void => {
+		imgUrlDefault.value = ErrorTemplateContent[templateName]?.imgUrl
+		contentText.value = ErrorTemplateContent[templateName]?.contentText
+		contentTitle.value = ErrorTemplateContent[templateName]?.contentTitle
+		titleText.value = ErrorTemplateContent[templateName]?.titleText
+		btnText.value = ErrorTemplateContent[templateName]?.btnText
+	}
+
+	const emit = defineEmits(['click'])
+	const emitClickEvent = (): void => {
+		emit('click')
+	}
+
+	loadGlobalData(props.errorType)
+</script>
+
+<template>
+	<div
+		:id="uniqueId ? `${uniqueId}-container` : undefined"
+		class="amelipro-error-template"
+	>
+		<AmeliproCard
+			classes="amelipro-error-template__card"
+			:divider="false"
+			:unique-id="uniqueId ? `${uniqueId}-card` : undefined"
+		>
+			<template #headerLeft>
+				<slot name="title">
+					<h1
+						:id="uniqueId ? `${uniqueId}-title` : undefined"
+						class="text-uppercase font-weight-semibold mb-4 amelipro-error-template__title"
+					>
+						{{ customTitleText || titleText }}
+					</h1>
+				</slot>
+			</template>
+			<template #default>
+				<div
+					:id="uniqueId ? `${uniqueId}-content` : undefined"
+					class="d-flex flex-column align-center amelipro-error-template__content"
+				>
+					<slot name="image">
+						<img
+							:id="uniqueId ? `${uniqueId}-img` : undefined"
+							alt=""
+							class="mx-4 my-2 amelipro-error-template__img"
+							:max-width="imgWidth"
+							:min-width="imgMinWidth"
+							:src="imgUrl"
+							:width="imgWidth"
+						>
+					</slot>
+
+					<slot name="contentTitle">
+						<h2
+							:id="uniqueId ? `${uniqueId}-content-title` : undefined"
+							class="ap-parme--text text--darken-1 font-weight-semibold amelipro-error-template-content-title"
+						>
+							{{ customContentTitle || contentTitle }}
+						</h2>
+					</slot>
+
+					<slot name="default">
+						<div
+							:id="uniqueId ? `${uniqueId}-content-text` : undefined"
+							class="justify-center w-70 amelipro-error-template__content__text"
+						>
+							<p class="mt-6 mb-0 text-center">
+								{{ customContentText || contentText }}
+							</p>
+						</div>
+					</slot>
+					<slot name="button">
+						<AmeliproBtn
+							v-if="!noButton && (customBtnText || btnText)"
+							class="mt-2 text-none amelipro-error-template-content-btn"
+							hover-underline
+							:href="btnHref"
+							text
+							:to="btnTo"
+							:unique-id="uniqueId ? `${uniqueId}-content-btn` : undefined"
+							@click="emitClickEvent"
+						>
+							{{ customBtnText || btnText }}
+
+							<template #icon>
+								{{ mdiChevronRight }}
+							</template>
+						</AmeliproBtn>
+					</slot>
+
+					<img
+						v-if="errorType === 'obsolete'"
+						:id="uniqueId ? `${uniqueId}-obsolete-img` : undefined"
+						alt="logo des navigateurs recommandés : Edge, Chrome, Firefox et Safari"
+						class="mt-2 amelipro-error-template__content__img--obsolete"
+						src="../../../assets/amelipro/img/navigateurs.png"
+					>
+				</div>
+			</template>
+		</AmeliproCard>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.w-70 {
+	width: 70% !important;
+}
+
+.amelipro-error-template__title,
+.amelipro-error-template-content-title {
+	font-size: apTokens.$font-size-md;
+}
+
+.amelipro-error-template-content-btn {
+	font-size: apTokens.$font-size-sm;
+}
+</style>