Add toast component documentation

- Add documentation that describes when and how to use a toast message
with code snippets
- Add an informational toast method in the BVToastMixin
- Add BVToastMixin to enhaceApp to register mixin globally.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I89bf2aa8b3fdb9294354a80c98ccf692b6e3615a

3 files changed, 20 insertions, 2 deletions

diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/_toast.scss
index 538f9968..9295b17e 100644
--- a/src/assets/styles/_toast.scss
+++ b/src/assets/styles/_toast.scss
@@ -4,7 +4,7 @@
 
 .toast {
   padding: $spacer/2 $spacer/2 $spacer/2 $spacer;
-  border-width: 0 0 0 5px;
+  border-width: 0 0 0 3px;
   .close {
     font-weight: 300;
     opacity: 1;
@@ -25,12 +25,20 @@
 
 .b-toast-success .toast {
   border-left-color: $success!important;
+  background-color: $success-light;
+}
+
+.b-toast-info .toast {
+  border-left-color: $info!important;
+  background-color: $info-light;
 }
 
 .b-toast-danger .toast {
   border-left-color: $danger!important;
+  background-color: $danger-light;
 }
 
 .b-toast-warning .toast {
   border-left-color: $warning!important;
+  background-color: $warning-light;
 }
\ No newline at end of file
diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js
index 4fedc9a4..538bb93c 100644
--- a/src/components/Mixins/BVToastMixin.js
+++ b/src/components/Mixins/BVToastMixin.js
@@ -28,6 +28,15 @@ const BVToastMixin = {
         isStatus: true,
         solid: true
       });
+    },
+    infoToast(message, title = i18n.t('global.status.informational')) {
+      this.$root.$bvToast.toast(message, {
+        title,
+        variant: 'info',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
     }
   }
 };
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 0bf40513..1e676ee6 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -28,7 +28,8 @@
       "off": "Off",
       "on": "On",
       "success": "Success",
-      "warning": "Warning"
+      "warning": "Warning",
+      "informational": "Informational"
     }
   },
   "appHeader": {