diff options
| -rw-r--r-- | docs/.vuepress/bmcAppPlugin.js | 8 | ||||
| -rw-r--r-- | docs/.vuepress/components/BmcAlerts.vue | 15 | ||||
| -rw-r--r-- | docs/.vuepress/config.js | 5 | ||||
| -rw-r--r-- | docs/.vuepress/enhanceApp.js | 10 | ||||
| -rw-r--r-- | docs/guide/components/alert.md | 12 | ||||
| -rw-r--r-- | src/assets/styles/_alerts.scss | 58 | ||||
| -rw-r--r-- | src/assets/styles/_obmc-custom.scss | 1 | ||||
| -rw-r--r-- | src/components/Global/Alert.vue | 33 | ||||
| -rw-r--r-- | src/locales/en-US.json | 3 | ||||
| -rw-r--r-- | src/locales/es.json | 3 | ||||
| -rw-r--r-- | src/views/Login/Login.vue | 27 |
11 files changed, 149 insertions, 26 deletions
diff --git a/docs/.vuepress/bmcAppPlugin.js b/docs/.vuepress/bmcAppPlugin.js new file mode 100644 index 00000000..d068b055 --- /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 00000000..a0c95034 --- /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 5a8e601f..abcbeb9e 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -42,7 +42,10 @@ module.exports = { }, { 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 00000000..5a84f619 --- /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 diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md new file mode 100644 index 00000000..768aa873 --- /dev/null +++ b/docs/guide/components/alert.md @@ -0,0 +1,12 @@ +# 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 new file mode 100644 index 00000000..816ad33b --- /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 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/locales/en-US.json b/src/locales/en-US.json index 0bf40513..019d5461 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 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 2018720c..bdf2a6ac 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 @@ 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 { |