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
diff --git a/docs/.vuepress/bmcAppPlugin.js b/docs/.vuepress/bmcAppPlugin.js
new file mode 100644
index 0000000..d068b05
--- /dev/null
+++ b/docs/.vuepress/bmcAppPlugin.js
@@ -0,0 +1,8 @@
+import "../../src/assets/styles/_obmc-custom.scss";
+import Alert from '../../src/components/Global/Alert';
+
+export default {
+ install (Vue, options) {
+ Vue.component('Alert', Alert);
+ }
+}
\ No newline at end of file
diff --git a/docs/.vuepress/components/BmcAlerts.vue b/docs/.vuepress/components/BmcAlerts.vue
new file mode 100644
index 0000000..a0c9503
--- /dev/null
+++ b/docs/.vuepress/components/BmcAlerts.vue
@@ -0,0 +1,15 @@
+<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 5a8e601..abcbeb9 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -42,7 +42,10 @@
},
{
title: "Components",
- children: ["/guide/components/", "/guide/components/page-section"]
+ children: [
+ "/guide/components/",
+ "/guide/components/alert",
+ ]
}
],
"/themes/": [""]
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
new file mode 100644
index 0000000..5a84f61
--- /dev/null
+++ b/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,10 @@
+import {
+ AlertPlugin,
+ } from 'bootstrap-vue';
+
+import BmcAppPlugin from './bmcAppPlugin';
+
+export default ({ Vue }) => {
+ Vue.use(AlertPlugin);
+ Vue.use(BmcAppPlugin);
+}
\ No newline at end of file