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

7 files changed, 105 insertions, 29 deletions

diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss
new file mode 100644
index 00000000..3f103b19
--- /dev/null
+++ b/src/assets/styles/_alerts.scss
@@ -0,0 +1,59 @@
+.alert {
+    display: flex;
+    padding: $spacer;
+    border-width: 0 0 0 3px;
+    color: $gray-800;
+    margin-bottom: $spacer;
+
+    .close {
+      font-weight: 300;
+      opacity: 1;
+    }
+
+    .alert-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-right: $spacer;
+      margin-bottom: $spacer;
+
+      @include media-breakpoint-up(sm) {
+        margin-bottom: 0;
+      }
+    }
+
+    .alert-content {
+      flex: 1 1 auto;
+    }
+
+    .alert-title {
+      margin-bottom: $spacer / 2;
+    }
+
+    .alert-msg {
+      p + p {
+        margin-bottom: $spacer;
+      }
+
+      p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    &.alert-info {
+      border-left-color: $info;
+      background-color: $info-light;
+      fill: $info;
+    }
+
+    &.alert-danger {
+      border-left-color: $danger;
+      background-color: $danger-light;
+      fill: $danger;
+    }
+
+    &.alert-warning {
+      border-left-color: $warning;
+      background-color: $warning-light;
+      fill: $warning;
+    }
+  }
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 66cebda2..2a8d896a 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -39,6 +39,7 @@
 
 @import "~bootstrap-vue/src/index.scss";
 
+@import "./alerts";
 @import "./buttons";
 @import "./form-components";
 @import "./modal";
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>
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 96074ee6..11143212 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -33,20 +33,20 @@ export default {
 .status-icon {
   vertical-align: text-bottom;
   &.success {
-    fill: $success;
+    fill: theme-color('success');
   }
   &.danger {
-    fill: $danger;
+    fill: theme-color('danger');
   }
   &.secondary {
-    fill: $gray-600;
+    fill: gray('600');
 
     svg {
       transform: rotate(-45deg);
     }
   }
   &.warning {
-    fill: $warning;
+    fill: theme-color('warning');
   }
 }
 </style>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 1e676ee6..63247da6 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -134,8 +134,7 @@
     "password": "Password",
     "username": "Username",
     "alert": {
-      "title": "Invalid username or password",
-      "action": "Try again after verifying your username and password are correct."
+      "message": "Invalid username or password"
     }
   },
   "pageOverview": {
diff --git a/src/locales/es.json b/src/locales/es.json
index 48ed7748..a3e3ee09 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -16,8 +16,7 @@
     "password": "Contraseña",
     "username": "Nombre de usuario",
     "alert": {
-      "title": "Usuario o contraseña invalido.",
-      "action": "Inténtalo de nuevo."
+      "message": "Usuario o contraseña invalido"
     },
     "form": {
       "english": "Inglés",
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 {