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

1 files changed, 21 insertions, 6 deletions

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,