Revert "Add alert message component and documentation"

This reverts commit 71650fff20c0ad29eb05d770736386863324b64e.

Reason for revert: Found an issue with Sass loader when compiling docs that needs to be addressed.

Change-Id: Icdd1243665f60849bfb341594452687fcdaeebe2

11 files changed, 26 insertions, 149 deletions

diff --git a/docs/.vuepress/bmcAppPlugin.js b/docs/.vuepress/bmcAppPlugin.js
deleted file mode 100644
index d068b055..00000000
--- a/docs/.vuepress/bmcAppPlugin.js
+++ /dev/null
@@ -1,8 +0,0 @@
-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
deleted file mode 100644
index a0c95034..00000000
--- a/docs/.vuepress/components/BmcAlerts.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<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 abcbeb9e..5a8e601f 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -42,10 +42,7 @@ module.exports = {
           },
           {
             title: "Components",
-            children: [
-            "/guide/components/",
-            "/guide/components/alert",
-          ]
+            children: ["/guide/components/", "/guide/components/page-section"]
           }
         ],
         "/themes/": [""]
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
deleted file mode 100644
index 5a84f619..00000000
--- a/docs/.vuepress/enhanceApp.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import {
-    AlertPlugin,
-  } from 'bootstrap-vue';
-
-import BmcAppPlugin from './bmcAppPlugin';
-
-export default ({ Vue }) => {
-      Vue.use(AlertPlugin);
-      Vue.use(BmcAppPlugin);
-}
\ No newline at end of file
diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md
deleted file mode 100644
index 768aa873..00000000
--- a/docs/guide/components/alert.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# 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
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss
deleted file mode 100644
index 816ad33b..00000000
--- a/src/assets/styles/_alerts.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.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 {
-      flex: 0 0 20px;
-      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 2a8d896a..66cebda2 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -39,7 +39,6 @@
 
 @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
deleted file mode 100644
index bc65b6e9..00000000
--- a/src/components/Global/Alert.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<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/locales/en-US.json b/src/locales/en-US.json
index 019d5461..0bf40513 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -133,7 +133,8 @@
     "password": "Password",
     "username": "Username",
     "alert": {
-      "message": "Invalid username or password"
+      "title": "Invalid username or password",
+      "action": "Try again after verifying your username and password are correct."
     }
   },
   "pageOverview": {
diff --git a/src/locales/es.json b/src/locales/es.json
index a3e3ee09..48ed7748 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -16,7 +16,8 @@
     "password": "Contraseña",
     "username": "Nombre de usuario",
     "alert": {
-      "message": "Usuario o contraseña invalido"
+      "title": "Usuario o contraseña invalido.",
+      "action": "Inténtalo de nuevo."
     },
     "form": {
       "english": "Inglés",
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index bdf2a6ac..2018720c 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -15,11 +15,12 @@
         </b-col>
         <b-col md="6">
           <b-form class="login-form" novalidate @submit.prevent="login">
-            <alert class="login-error" :show="authError" variant="danger">
+            <b-alert class="login-error" :show="authError" variant="danger">
               <p id="login-error-alert">
-                {{ $t('pageLogin.alert.message') }}
+                <strong>{{ $t('pageLogin.alert.title') }}</strong>
+                <span>{{ $t('pageLogin.alert.action') }}</span>
               </p>
-            </alert>
+            </b-alert>
             <div class="login-form__section">
               <label for="language">{{ $t('pageLogin.language') }}</label>
               <b-form-select
@@ -82,11 +83,9 @@
 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 {
@@ -174,8 +173,24 @@ export default {
   margin-bottom: $spacer;
 }
 
-.alert.login-error {
+.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 {