@cnamts/synapse 0.0.6-alpha → 0.0.8-alpha

package/src/components/NirField/NirField.vue

@@ -20,6 +20,7 @@
 		numberLabel?: string
 		keyLabel?: string
 		displayKey?: boolean
+		showSuccessMessages?: boolean
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		customNumberRules?: any
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -33,6 +34,7 @@
 		numberLabel: 'Numéro de sécurité sociale',
 		keyLabel: 'Clé',
 		displayKey: true,
+		showSuccessMessages: false,
 		customNumberRules: [],
 		customKeyRules: [],
 	})
@@ -239,18 +241,19 @@
 		validateOnSubmit,
 	})
 </script>
+
 <template>
 	<div class="d-flex align-start">
 		<v-input
 			ref="vInput"
 			:class="{
-				'v-messages__message--success': successes.length > 0,
+				'v-messages__message--success': successes.length > 0 && props.showSuccessMessages,
 				'v-messages__message--error': errors.length > 0
 			}"
 			:error-messages="errors"
 			:label="numberLabel"
 			:max-errors="3"
-			:messages="successes"
+			:messages="props.showSuccessMessages ? successes : []"
 			:model-value="[numberValue, keyValue]"
 			class="vd-nir-field__fields-wrapper multi-line"
 			validate-on="blur lazy"
@@ -336,115 +339,112 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .v-messages__message--success {
-  color: tokens.$colors-border-success !important;
+	color: tokens.$colors-border-success !important;
 
-  .v-field--active & {
-    color: tokens.$colors-border-success !important;
-  }
+	.v-field--active & {
+		color: tokens.$colors-border-success !important;
+	}
 }
 
 .v-messages__message--error {
-  color: tokens.$colors-border-error;
+	color: tokens.$colors-border-error;
 
-  .v-field--active & {
-    color: tokens.$colors-border-error;
-  }
+	.v-field--active & {
+		color: tokens.$colors-border-error;
+	}
 }
 
 :deep(.v-field.v-field--active .v-label.v-field-label--floating) {
-  opacity: 1;
+	opacity: 1;
 }
 
 .multi-line {
-  white-space: pre-line !important;
+	white-space: pre-line !important;
 }
 
 .vd-number-field {
-  max-width: 296px;
+	max-width: 296px;
 }
 
 .vd-key-field {
-  width: 104px;
+	width: 104px;
+	flex: none;
 }
 
 .custom-counter {
-  color: rgba(0, 0, 0, 0.54);
+	color: rgb(0 0 0 / 54%);
 }
 
 .vd-nir-field :deep(.v-input__append-inner),
 .vd-tooltip-icon {
-  flex: none;
-  color: rgba(0, 0, 0, 0.54);
+	flex: none;
+	color: rgb(0 0 0 / 54%);
 }
 
 :deep(.v-overlay__content) {
-  background: rgba(84, 88, 89, 0.95) !important;
-}
-
-.vd-key-field {
-  flex: none;
+	background: rgb(84 88 89 / 95%) !important;
 }
 
 .vd-nir-field--outlined :deep(.v-messages.error--text) {
-  padding: 6px;
+	padding: 6px;
 }
 
 .vd-nir-field {
-  container-name: nirFieldwrapper;
+	container-name: nirfieldwrapper;
 }
 
 :deep(.v-input__append) {
-  margin-inline-start: 0 !important;
+	margin-inline-start: 0 !important;
 }
+
 :deep(.vd-number-field > .v-input__prepend) {
-  margin-right: 0 !important;
+	margin-right: 0 !important;
 }
 
 :deep(.vd-key-field > .v-input__prepend) {
-  @media screen and (max-width: 360px) {
-    margin-inline-end: 0 !important;
-  }
+	@media screen and (width <= 360px) {
+		margin-inline-end: 0 !important;
+	}
 }
 
 :deep(.v-text-field .v-input__details) {
-  padding-inline-start: 0 !important;
-  padding-inline-end: 0 !important;
-  flex: none !important;
+	padding-inline: 0 !important;
+	flex: none !important;
 }
 
 :deep(.v-text-field .v-input__details .v-messages) {
-  color: rgba(0, 0, 0, 1) !important;
+	color: rgb(0 0 0 / 100%) !important;
 }
 
 @mixin responsive-nir-wrapper {
-  .vd-nir-field__fields-wrapper :deep(> .v-input__control) {
-    justify-content: start;
-    flex-wrap: wrap;
-    gap: 4px;
-    margin-bottom: 4px;
-
-    .vd-number-field {
-      flex: 100% 0 0;
-    }
-  }
+	.vd-nir-field__fields-wrapper :deep(> .v-input__control) {
+		justify-content: start;
+		flex-wrap: wrap;
+		gap: 4px;
+		margin-bottom: 4px;
+
+		.vd-number-field {
+			flex: 100% 0 0;
+		}
+	}
 }
 
 @container nirFieldwrapper (max-width: 300px) {
-  @include responsive-nir-wrapper;
+	@include responsive-nir-wrapper;
 }
 
-@media screen and (max-width: 360px) {
-  @include responsive-nir-wrapper;
+@media screen and (width <= 360px) {
+	@include responsive-nir-wrapper;
 }
 
 .v-text-field .v-input__append-inner {
-  padding-left: 0 !important;
+	padding-left: 0 !important;
 }
 
 :deep(.v-text-field > .v-input__control > .v-input__slot > .v-text-field__slot) {
-  width: min-content !important;
+	width: min-content !important;
 }
 </style>

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

@@ -17,6 +17,7 @@ describe('NirField.vue', () => {
 			props: {
 				modelValue: '',
 				required: true,
+				showSuccessMessages: true,
 			},
 		})
 	})

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

@@ -7,6 +7,20 @@ const meta = {
 	parameters: {
 		layout: 'fullscreen',
 	},
+	argTypes: {
+		hideBtn: {
+			control: { type: 'boolean' },
+		},
+		btnText: {
+			control: { type: 'text' },
+		},
+		btnHref: {
+			control: { type: 'text' },
+		},
+		btnLink: {
+			control: { type: 'text' },
+		},
+	},
 } satisfies Meta<typeof NotFoundPage>
 
 export default meta
@@ -14,6 +28,10 @@ export default meta
 type Story = StoryObj<typeof NotFoundPage>
 
 export const Default: Story = {
+	args: {
+		btnText: 'Retour à l’accueil',
+		btnHref: '/',
+	},
 	parameters: {
 		query: {
 			support_id: '',
@@ -24,7 +42,10 @@ export const Default: Story = {
 				code: `
 				<template>
 					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<NotFoundPage />
+						<NotFoundPage 
+							btn-text="Retour à l’accueil" 
+							btn-href="/" 
+						/>
 					</div>
 				</template>
 				`,
@@ -45,17 +66,27 @@ export const Default: Story = {
 }
 
 export const WithErrorCode: Story = {
+	args: {
+		btnText: 'Retour à l’accueil',
+		btnHref: '/',
+	},
 	parameters: {
 		query: {
 			support_id: '1234567890123456789',
 		},
+		btnText: 'Retour à l’accueil',
+		btnHref: '/',
+		hideBtn: false,
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
 				<template>
 					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<NotFoundPage />
+						<NotFoundPage 
+							btn-text="Retour à l’accueil" 
+							btn-href="/" 
+						/>
 					</div>
 				</template>
 				`,

package/src/components/NotFoundPage/NotFoundPage.vue

@@ -2,10 +2,23 @@
 	import { onMounted, ref } from 'vue'
 	import ErrorPage from '../ErrorPage/ErrorPage.vue'
 	import { locales } from './locales'
+	import type { RouteRecordRaw } from 'vue-router'
 
 	const SUPPORT_ID_PARAM_NAME = 'support_id'
 	const supportId = ref<string | undefined>()
 
+	withDefaults(defineProps<{
+		btnText?: string
+		btnHref?: string
+		btnLink?: RouteRecordRaw | string
+		hideBtn?: boolean
+	}>(), {
+		btnText: undefined,
+		btnLink: '/',
+		btnHref: undefined,
+		hideBtn: false,
+	})
+
 	onMounted(() => {
 		const params = new URLSearchParams(document.location.search)
 		let supportIdParam = params.get(SUPPORT_ID_PARAM_NAME)
@@ -23,6 +36,10 @@
 		:code="locales.code"
 		:page-title="locales.pageTitle"
 		:message="locales.message"
+		:btn-text="btnText"
+		:btn-href="btnHref"
+		:btn-link="btnLink"
+		:hide-btn="hideBtn"
 	>
 		<template
 			v-if="supportId"

package/src/components/NotificationBar/NotificationBar.mdx

@@ -6,13 +6,13 @@ import * as NotificationBarStories from './NotificationBar.stories';
 
 # NotificationBar
 
-##### Les notification bars servent à notifier l’utilisateur soit d’un retour d’action.
+##### Les NotificationsBar servent à notifier l’utilisateur soit d’un retour d’action.
 
-##### Deux actions sont possible :
+##### Deux actions sont possibles :
  - Fermer la notification lorsqu’elle a été vue
  - Cliquer sur un élément qui permet de faire une action secondaire (comme amener sur une page visée par la notification).
 
-##### L’affichage d’une durée de quelques secondes et disprition automatique de la notification bar est déconseillé pour des raisons d’accessibilité afin de permettre à tout le monde de prendre le temps nécessaire de lire la notification.
+##### L’affichage d’une durée de quelques secondes et disparition automatique de la notification bar est déconseillé pour des raisons d’accessibilité afin de permettre à tout le monde de prendre le temps nécessaire de lire la notification.
 
 ##### Les 4 états son disponibles :
 - **Information** : Information supplémentaire nécessaire à la compréhension de l’utilisateur d’un élément spécifique.
@@ -20,10 +20,10 @@ import * as NotificationBarStories from './NotificationBar.stories';
 - **Warning** : Alerte, élément important mais pas bloquant. L’utilisateur a besoin d’être informé d’un élément ou d’une conséquence.
 - **Success** : l’action a été réalisée correctement et prise en compte.
 
-<Canvas of={NotificationBarStories.Success}  />
+<Canvas of={NotificationBarStories.Default}  />
 
 # API
-<Controls of={NotificationBarStories.Success} />
+<Controls of={NotificationBarStories.Default} />
 
 # Exemple d'utilisation