update design-tokens and fix notificationBar success color

assurance-maladie-digital · Sep 25, 2024 · 99b8e1c · 99b8e1c
1 parent 88d9530
commit 99b8e1c
Show file tree

Hide file tree

Showing 4 changed files with 4,022 additions and 4,953 deletions.
diff --git a/packages/synapse-bridge/package.json b/packages/synapse-bridge/package.json
@@ -55,7 +55,7 @@
 		"vuex": "^4.1.0"
 	},
 	"dependencies": {
-		"@cnamts/design-tokens": "2.16.8",
+		"@cnamts/design-tokens": "2.16.10",
 		"@vuepic/vue-datepicker": "^8.6.0",
 		"consola": "2.15.3"
 	},

diff --git a/packages/synapse-bridge/src/patterns/NotificationBar/NotificationBar.vue b/packages/synapse-bridge/src/patterns/NotificationBar/NotificationBar.vue
@@ -1,17 +1,17 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import {defineComponent} from 'vue'
+import {mapActions, mapGetters} from 'vuex'
 import {
-	mdiClose,
-	mdiCheckCircleOutline,
 	mdiAlertCircleOutline,
-	mdiInformationOutline,
 	mdiAlertOctagonOutline,
+	mdiCheckCircleOutline,
+	mdiClose,
+	mdiInformationOutline,
 } from '@mdi/js'
-import { config } from './config'
-import { locales } from './locales'
-import { customizable } from '@/mixins/customizable'
-import type { IndexedObject } from '@/types'
+import {config} from './config'
+import {locales} from './locales'
+import {customizable} from '@/mixins/customizable'
+import type {IndexedObject} from '@/types'
 
 export default defineComponent({
 	mixins: [customizable(config)],
@@ -89,14 +89,18 @@ export default defineComponent({
 	},
 	watch: {
 		notification(): void {
-			if (this.notification) {
-				this.snackbar = true
-				this.snackbarColor =
-					this.options.snackBar.color || this.notification.type
+			if (!this.notification) {
+				this.snackbar = false;
+				return;
+			}
+
+			this.snackbar = true;
+			if (this.notification.type === 'success') {
+				this.snackbarColor = '#56C271';
 			} else {
-				this.snackbar = false
+				this.snackbarColor = this.options.snackBar.color || this.notification.type;
 			}
-		},
+		}
 	},
 	methods: {
 		...mapActions('notification', {
@@ -119,29 +123,29 @@ export default defineComponent({
 
 <template>
 	<VSnackbar
-		v-bind="options.snackBar"
-		:modelValue="snackbar"
 		:color="snackbarColor"
-		:vertical="mobileVersion && hasLongContent"
+		:location="bottom ? 'bottom' : 'top'"
+		:modelValue="snackbar"
 		:multi-line="hasLongContent"
+		:vertical="mobileVersion && hasLongContent"
 		:width="mobileVersion ? 'auto' : '960px'"
-		role="status"
-		:location="bottom ? 'bottom' : 'top'"
 		class="vd-notification-bar"
+		role="status"
+		v-bind="options.snackBar"
 	>
 		<div :class="'text-' + contentColor" class="vd-notification-content">
 			<VIcon
 				v-if="!mobileVersion"
-				v-bind="options.icon"
 				:color="contentColor"
 				class="vd-notification-icon"
+				v-bind="options.icon"
 			>
 				{{ icon }}
 			</VIcon>
 
 			{{ notification?.message }}
 
-			<VSpacer />
+			<VSpacer/>
 
 			<VDivider
 				v-if="mobileVersion && hasLongContent"
@@ -155,19 +159,19 @@ export default defineComponent({
 					v-if="!mobileVersion && hasLongContent"
 					:color="contentColor"
 					:style="{ borderColor: dividerColor }"
-					class="mx-4"
 					:vertical="true"
+					class="mx-4"
 				/>
-				<slot name="action" :attrs="actionSlotAttrs"></slot>
-				<slot name="default" />
+				<slot :attrs="actionSlotAttrs" name="action"></slot>
+				<slot name="default"/>
 				<VBtn
-					v-bind="{
-						...options.btn,
-					}"
+					:class="{ 'ma-0': smallCloseBtn }"
 					:color="contentColor"
 					:icon="smallCloseBtn"
-					:class="{ 'ma-0': smallCloseBtn }"
 					class="ml-4"
+					v-bind="{
+						...options.btn,
+					}"
 					@click="clearNotification"
 				>
 					<span :class="{ 'd-sr-only': smallCloseBtn }">

diff --git a/...apse-bridge/src/patterns/NotificationBar/tests/__snapshots__/NotificationBar.spec.ts.snap b/...apse-bridge/src/patterns/NotificationBar/tests/__snapshots__/NotificationBar.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`NotificationBar > Rendering > renders correctly with actionSlotAttrs prop 1`] = `
 <!---->
-<div data-v-629b7edf="" class="text-grey-darken-80 vd-notification-content"><i data-v-629b7edf="" class="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-grey-darken-80 mr-2 vd-notification-icon" aria-hidden="true"></i> test <div data-v-629b7edf="" class="v-spacer"></div><!--v-if-->
+<div data-v-629b7edf="" class="text-grey-darken-80 vd-notification-content"><i data-v-629b7edf="" class="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-grey-darken-80 vd-notification-icon mr-2" aria-hidden="true"></i> test <div data-v-629b7edf="" class="v-spacer"></div><!--v-if-->
   <div data-v-629b7edf="" class="d-flex flex-row justify-space-between">
     <hr data-v-629b7edf="" class="v-divider v-divider--vertical v-theme--light text-grey-darken-80 mx-4" style="border-color: rgba(0, 0, 0, 1);" aria-orientation="vertical" role="separator">{
     "attrs": {