Add alert message component and documentation

- Add custom alert component to simplify the use of custom alerts
- Add documentation for using the custom alert
- Update the login error alert to use the alert component instead of
the Bootstrap-vue component.
- Register alert component in enhanceApp
- Replace Sass variables used in the StatusIcon component style block
to use the Boostrap theme-color and gray Sass functions so the colors
can be used in the Vuepress documentation custom components

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

3 files changed, 19 insertions, 1 deletions

diff --git a/docs/.vuepress/components/BmcAlerts.vue b/docs/.vuepress/components/BmcAlerts.vue
new file mode 100644
index 00000000..60440644
--- /dev/null
+++ b/docs/.vuepress/components/BmcAlerts.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <alert show variant="warning">This is a warning message</alert>
+        <alert show variant="danger">This is an error message</alert>
+        <alert show variant="info">This is an info message</alert>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'BmcAlerts',
+}
+</script>
\ No newline at end of file
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 680c98ef..a07000e8 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -44,6 +44,7 @@ module.exports = {
             title: "Components",
             children: [
             "/guide/components/",
+            "/guide/components/alert",
             "/guide/components/button",
             "/guide/components/toast",
           ]
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index 799cf208..72fd24d7 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -1,19 +1,22 @@
 
-// OpenBMC Imports
 import "../../src/assets/styles/_obmc-custom.scss";
+import Alert from "../../src/components/Global/Alert";
 import BVToastMixin from "../../src/components/Mixins/BVToastMixin";
 
 // Bootstrap-vue Plugin imports
 import {
+    AlertPlugin,
     ButtonPlugin,
     ToastPlugin
   } from 'bootstrap-vue';
 
 
 export default ({ Vue }) => {
+      Vue.use(AlertPlugin);
       Vue.use(ButtonPlugin);
       Vue.use(ToastPlugin);
 
       // BMC Components and Mixins
+      Vue.component('Alert', Alert);
       Vue.mixin('BVToastMixin', BVToastMixin);
 }
\ No newline at end of file