From c2862dcc2a3e531a58b50b31ad18a3597303c7ac Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Fri, 11 Sep 2020 18:02:42 +0530
Subject: Add icon to the toast component

- Add status icon to the toast component.
- Add a method that return title with associated icon.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Iae75e3eec7317af6b25a0ed1bfa4cc72644f7cd7
---
 src/assets/styles/bmc/custom/_toasts.scss |  9 ++++++++-
 src/components/Mixins/BVToastMixin.js     | 27 +++++++++++++++++++++------
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index dcc3985a..b8ec246e 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -2,8 +2,9 @@
   top: 75px!important; // make sure toasts do not hide top header
 }
 
+// Toast component and status icon style
 .toast {
-  padding: $spacer/2 $spacer/2 $spacer/2 $spacer;
+  padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2;
   border-width: 0 0 0 3px;
   box-shadow: $box-shadow;
   .close {
@@ -12,6 +13,12 @@
   }
 }
 
+.toast-icon svg {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+
 .toast-header {
   background-color: inherit!important; //override specificity
   border: none;
diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js
index 538bb93c..95ac5312 100644
--- a/src/components/Mixins/BVToastMixin.js
+++ b/src/components/Mixins/BVToastMixin.js
@@ -1,10 +1,25 @@
-import i18n from '../../i18n';
-
+import i18n from '@/i18n';
+import StatusIcon from '../Global/StatusIcon';
 const BVToastMixin = {
+  components: {
+    StatusIcon
+  },
   methods: {
+    toastTitle(title, status) {
+      // Create title with icon
+      const titleWithIcon = this.$createElement(
+        'strong',
+        { class: 'toast-icon' },
+        [
+          this.$createElement('StatusIcon', { props: { status: status } }),
+          title
+        ]
+      );
+      return titleWithIcon;
+    },
     successToast(message, title = i18n.t('global.status.success')) {
       this.$root.$bvToast.toast(message, {
-        title,
+        title: this.toastTitle(title, 'success'),
         variant: 'success',
         autoHideDelay: 10000, //auto hide in milliseconds
         isStatus: true,
@@ -13,7 +28,7 @@ const BVToastMixin = {
     },
     errorToast(message, title = i18n.t('global.status.error')) {
       this.$root.$bvToast.toast(message, {
-        title,
+        title: this.toastTitle(title, 'danger'),
         variant: 'danger',
         noAutoHide: true,
         isStatus: true,
@@ -22,7 +37,7 @@ const BVToastMixin = {
     },
     warningToast(message, title = i18n.t('global.status.warning')) {
       this.$root.$bvToast.toast(message, {
-        title,
+        title: this.toastTitle(title, 'warning'),
         variant: 'warning',
         noAutoHide: true,
         isStatus: true,
@@ -31,7 +46,7 @@ const BVToastMixin = {
     },
     infoToast(message, title = i18n.t('global.status.informational')) {
       this.$root.$bvToast.toast(message, {
-        title,
+        title: this.toastTitle(title, 'info'),
         variant: 'info',
         noAutoHide: true,
         isStatus: true,
-- 
cgit v1.2.3