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/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss
new file mode 100644
index 0000000..816ad33
--- /dev/null
+++ b/src/assets/styles/_alerts.scss
@@ -0,0 +1,58 @@
+.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 66cebda..2a8d896 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 0000000..bc65b6e
--- /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/locales/en-US.json b/src/locales/en-US.json
index 0bf4051..019d546 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -133,8 +133,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 48ed774..a3e3ee0 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 2018720..bdf2a6a 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>
<div class="login-form__section">
<label for="language">{{ $t('pageLogin.language') }}</label>
<b-form-select
@@ -83,9 +82,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 {
@@ -173,24 +174,8 @@
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 {