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

1 files changed, 6 insertions, 21 deletions

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index da96844a..c15e5f53 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -15,12 +15,11 @@
         </b-col>
         <b-col md="6">
           <b-form class="login-form" novalidate @submit.prevent="login">
-            <b-alert class="login-error" :show="authError" variant="danger">
+            <alert class="login-error" :show="authError" variant="danger">
               <p id="login-error-alert">
-                <strong>{{ $t('pageLogin.alert.title') }}</strong>
-                <span>{{ $t('pageLogin.alert.action') }}</span>
+                {{ $t('pageLogin.alert.message') }}
               </p>
-            </b-alert>
+            </alert>
             <b-form-group
               label-for="language"
               :label="$t('pageLogin.language')"
@@ -87,9 +86,11 @@
 import { required } from 'vuelidate/lib/validators';
 import VuelidateMixin from '../../components/Mixins/VuelidateMixin.js';
 import i18n from '../../i18n';
+import Alert from '../../components/Global/Alert';
 
 export default {
   name: 'Login',
+  components: { Alert },
   mixins: [VuelidateMixin],
   data() {
     return {
@@ -177,24 +178,8 @@ export default {
   margin-bottom: $spacer;
 }
 
-.login-error {
+.alert.login-error {
   margin-bottom: $spacer * 2;
-
-  p {
-    margin-bottom: 0;
-  }
-
-  strong {
-    display: block;
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 0;
-  }
-
-  strong + span {
-    margin-top: $spacer / 2;
-    margin-bottom: 0;
-  }
 }
 
 .login-branding {