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
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
new file mode 100644
index 0000000..bc65b6e
--- /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>