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
diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js
index 538bb93..95ac531 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 @@
},
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 @@
},
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 @@
},
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,