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/docs/.vuepress/components/BmcAlerts.vue b/docs/.vuepress/components/BmcAlerts.vue
new file mode 100644
index 0000000..6044064
--- /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 680c98e..a07000e 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -44,6 +44,7 @@
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 799cf20..72fd24d 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
diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md
new file mode 100644
index 0000000..768aa87
--- /dev/null
+++ b/docs/guide/components/alert.md
@@ -0,0 +1,12 @@
+# Alerts
+An alert is an inline message that contains a short description that a user cannot manually dismiss. With exception to the error message on the login page, alerts are not triggered by user action. Success and error notifications based on user actions are created using a toast component.
+
+[Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert)
+
+<BmcAlerts />
+
+```vue
+<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>
+```
\ No newline at end of file