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.
- Add the enhanceApp and bmcAppPlugin to extend vuepress to use both
the BMC custom and Boostrap-Vue components along with the custom styles

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

1 files changed, 33 insertions, 0 deletions

diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
new file mode 100644
index 00000000..bc65b6e9
--- /dev/null
+++ b/src/components/Global/Alert.vue
@@ -0,0 +1,33 @@
+<template>
+  <b-alert :show="show" :variant="variant">
+    <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon">
+      <status-icon :status="variant" />
+    </div>
+    <div class="alert-content">
+      <div class="alert-msg"><slot /></div>
+    </div>
+  </b-alert>
+</template>
+
+<script>
+import StatusIcon from '../Global/StatusIcon';
+import { BAlert } from 'bootstrap-vue';
+
+export default {
+  name: 'Alert',
+  components: {
+    BAlert: BAlert,
+    StatusIcon: StatusIcon
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    variant: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>