diff options
20 files changed, 14 insertions, 396 deletions
diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue deleted file mode 100644 index 795c837a..00000000 --- a/docs/.vuepress/components/BmcButtons.vue +++ /dev/null @@ -1,58 +0,0 @@ -<template> - <div> - <h3 class="h4">Enabled</h3> - <b-button variant="primary">Primary</b-button> - <b-button variant="primary"> - <icon-add /> - <span>Primary with icon</span> - </b-button> - <b-button variant="secondary">Secondary</b-button> - <b-button variant="danger">Danger</b-button> - <b-button variant="link">Link Button</b-button> - <b-button variant="link"> - <icon-add /> - <span>Link Button</span> - </b-button> - <b-button variant="link"> - <icon-trashcan /> - <span class="sr-only">Delete</span> - </b-button> - - <h3 class="h4">Disabled</h3> - <b-button disabled variant="primary">Primary</b-button> - <b-button disabled variant="primary"> - <icon-add /> - <span>Primary with icon</span> - </b-button> - <b-button disabled variant="secondary">Secondary</b-button> - <b-button disabled variant="danger">Danger</b-button> - <b-button disabled variant="link">Link Button</b-button> - <b-button disabled variant="link"> - <icon-add /> - <span>Link Button</span> - </b-button> - <b-button disabled variant="link"> - <icon-trashcan /> - <span class="sr-only">Delete</span> - </b-button> - </div> -</template> - -<script> -import IconAdd from '@carbon/icons-vue/es/add--alt/20'; -import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import IconArrowRight from '@carbon/icons-vue/es/arrow--right/16'; -export default { - name: 'BmcButtons', - components: { IconAdd, IconArrowRight, IconTrashcan } -} -</script> -<style scoped> - button { - margin-bottom: 1rem; - } - - h3 { - margin: .5rem 0 1rem; - } -</style>
\ No newline at end of file diff --git a/docs/.vuepress/components/BmcTable.vue b/docs/.vuepress/components/BmcTable.vue deleted file mode 100644 index 9cc7b645..00000000 --- a/docs/.vuepress/components/BmcTable.vue +++ /dev/null @@ -1,57 +0,0 @@ -<template> - <b-table - hover - show-empty - no-sort-reset - sort-icon-left - responsive="md" - head-variant="light" - table-variant="light" - sort-by="rank" - :items="items" - :fields="fields" - /> -</template> - -<script> -export default { - data() { - return { - items: [ - { - name: 'Veracruz All Natural', - rank: 1, - description: 'Authentic Mexican Food, Smoothies, and Juices' - }, - { - name: 'Torchy\'s Tacos', - rank: 3, - description: 'At Torchy\'s Tacos, we make food that breaks the mold.' - }, - { - name: 'Tacodeli', - rank: 2, - description: 'Tacodeli handcrafts Mexican-inspired, creative tacos with local and organic ingredients topped with award-winning salsas.' - }, - ], - fields: [ - { - key: 'name', - label: 'Name', - sortable: true - }, - { - key: 'rank', - label: 'Rank', - sortable: true - }, - { - key: 'description', - label: 'Description', - sortable: false - } - ] - } - } -} -</script>
\ No newline at end of file diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue deleted file mode 100644 index 6f90d1f1..00000000 --- a/docs/.vuepress/components/BmcToasts.vue +++ /dev/null @@ -1,36 +0,0 @@ -<template> - <div> - <b-button variant="success" @click="makeSuccessToast()">Show Success</b-button> - <b-button variant="danger" @click="makeErrorToast()">Show Error</b-button> - <b-button variant="warning" @click="makeWarningToast()">Show Warning</b-button> - <b-button variant="info" @click="makeInfoToast()">Show Info</b-button> - </div> -</template> - -<script> -import BVToastMixin from './app-imports/BVToastMixin'; -export default { - name: 'BmcToasts', - mixins: [BVToastMixin], - methods: { - makeSuccessToast() { - this.successToast('This is a success toast and will be dismissed after 10 seconds.'); - }, - makeErrorToast() { - this.errorToast('This is an error toast and must be dismissed by the user.'); - }, - makeWarningToast() { - this.warningToast('This is a warning toast and must be dismissed by the user.'); - }, - makeInfoToast() { - this.infoToast('This is an info toast and must be dismissed by the user.'); - }, - } -} -</script> -<style scoped> - button { - margin-right: .5rem; - margin-bottom: 1rem; - } -</style>
\ No newline at end of file diff --git a/docs/.vuepress/components/app-imports/BVToastMixin.js b/docs/.vuepress/components/app-imports/BVToastMixin.js deleted file mode 100644 index 10075658..00000000 --- a/docs/.vuepress/components/app-imports/BVToastMixin.js +++ /dev/null @@ -1,58 +0,0 @@ -import StatusIcon from './StatusIcon'; -const BVToastMixin = { - components: { - StatusIcon - }, - methods: { - toastTitle(title, status) { - // Create title with icon - const titleWithIcon = this.$createElement( - 'strong', - { class: 'toast-icon' }, - [ - this.$createElement('StatusIcon', { props: { status: status } }), - title - ] - ); - return titleWithIcon; - }, - successToast(message, title = 'Success') { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'success'), - variant: 'success', - autoHideDelay: 10000, //auto hide in milliseconds - isStatus: true, - solid: true - }); - }, - errorToast(message, title = 'Error') { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'danger'), - variant: 'danger', - noAutoHide: true, - isStatus: true, - solid: true - }); - }, - warningToast(message, title = 'Warning') { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'warning'), - variant: 'warning', - noAutoHide: true, - isStatus: true, - solid: true - }); - }, - infoToast(message, title = 'Informational') { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'info'), - variant: 'info', - noAutoHide: true, - isStatus: true, - solid: true - }); - } - } -}; - -export default BVToastMixin; diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue deleted file mode 100644 index ef2afb72..00000000 --- a/docs/.vuepress/components/app-imports/StatusIcon.vue +++ /dev/null @@ -1,65 +0,0 @@ -<template> - <span :class="['status-icon', status]"> - <icon-info v-if="status === 'info'" /> - <icon-success v-else-if="status === 'success'" /> - <icon-warning v-else-if="status === 'warning'" /> - <icon-danger v-else-if="status === 'danger'" /> - <icon-secondary v-else /> - </span> -</template> - -<script> -import IconInfo from '@carbon/icons-vue/es/information--filled/20'; -import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20'; -import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; -import IconError from '@carbon/icons-vue/es/error--filled/20'; -import IconMisuse from '@carbon/icons-vue/es/misuse/20'; - -export default { - name: 'StatusIcon', - components: { - IconInfo: IconInfo, - iconSuccess: IconCheckmark, - iconDanger: IconMisuse, - iconSecondary: IconError, - iconWarning: IconWarning - }, - props: { - status: { - type: String, - default: '' - } - } -}; -</script> - -<style lang="scss"> -@import "src/assets/styles/bmc/helpers"; -@import "src/assets/styles/bootstrap/helpers"; -.status-icon { - vertical-align: text-bottom; - &.info { - color: theme-color('info'); - } - &.success { - color: theme-color('success'); - } - &.danger { - color: theme-color('danger'); - } - &.secondary { - color: gray('600'); - - svg { - transform: rotate(-45deg); - } - } - &.warning { - color: theme-color('warning'); - } - - svg { - fill: currentColor; - } -} -</style> diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index c650d7e6..e4dd2004 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -61,12 +61,5 @@ module.exports = { ], "/themes/": ["", "customize", "env"] }, - }, - configureWebpack: { - resolve: { - alias: { - '@': path.resolve(__dirname, '../../src') - } - } } };
\ No newline at end of file diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js deleted file mode 100644 index 6ff87759..00000000 --- a/docs/.vuepress/enhanceApp.js +++ /dev/null @@ -1,24 +0,0 @@ - -import "./styles/_index.scss"; -import Alert from "../../src/components/Global/Alert"; -import StatusIcon from "./components/app-imports/StatusIcon"; - -// Bootstrap-vue Plugin imports -import { - AlertPlugin, - ButtonPlugin, - TablePlugin, - ToastPlugin - } from 'bootstrap-vue'; - - -export default ({ Vue }) => { - Vue.use(AlertPlugin); - Vue.use(ButtonPlugin); - Vue.use(TablePlugin); - Vue.use(ToastPlugin); - - // BMC Components and Mixins - Vue.component('Alert', Alert); - Vue.component('StatusIcon', StatusIcon); -}
\ No newline at end of file diff --git a/docs/.vuepress/public/alert.png b/docs/.vuepress/public/alert.png Binary files differnew file mode 100644 index 00000000..7a368f7f --- /dev/null +++ b/docs/.vuepress/public/alert.png diff --git a/docs/.vuepress/public/button-disabled.png b/docs/.vuepress/public/button-disabled.png Binary files differnew file mode 100644 index 00000000..70f3b152 --- /dev/null +++ b/docs/.vuepress/public/button-disabled.png diff --git a/docs/.vuepress/public/button.png b/docs/.vuepress/public/button.png Binary files differnew file mode 100644 index 00000000..d994e86d --- /dev/null +++ b/docs/.vuepress/public/button.png diff --git a/docs/.vuepress/public/table-empty.png b/docs/.vuepress/public/table-empty.png Binary files differnew file mode 100644 index 00000000..90ecfc14 --- /dev/null +++ b/docs/.vuepress/public/table-empty.png diff --git a/docs/.vuepress/public/table-sort.png b/docs/.vuepress/public/table-sort.png Binary files differnew file mode 100644 index 00000000..af6d831e --- /dev/null +++ b/docs/.vuepress/public/table-sort.png diff --git a/docs/.vuepress/public/table.png b/docs/.vuepress/public/table.png Binary files differnew file mode 100644 index 00000000..0160013e --- /dev/null +++ b/docs/.vuepress/public/table.png diff --git a/docs/.vuepress/public/toast.png b/docs/.vuepress/public/toast.png Binary files differnew file mode 100644 index 00000000..97f9bc4c --- /dev/null +++ b/docs/.vuepress/public/toast.png diff --git a/docs/.vuepress/styles/_index.scss b/docs/.vuepress/styles/_index.scss deleted file mode 100644 index 700c14e2..00000000 --- a/docs/.vuepress/styles/_index.scss +++ /dev/null @@ -1,42 +0,0 @@ -// Custom and Vendor helpers -@import "src/assets/styles/bmc/helpers/index"; -@import "src/assets/styles/bootstrap/helpers"; - -// Vendor styles -@import "~bootstrap/scss/root"; -@import "~bootstrap/scss/transitions"; - -// Components -@import "~bootstrap/scss/alert"; -@import "~bootstrap/scss/badge"; -@import "~bootstrap/scss/breadcrumb"; -@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/card"; -@import "~bootstrap/scss/close"; -@import "~bootstrap/scss/code"; -@import "~bootstrap/scss/custom-forms"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/forms"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/images"; -@import "~bootstrap/scss/input-group"; -@import "~bootstrap/scss/list-group"; -@import "~bootstrap/scss/media"; -@import "~bootstrap/scss/modal"; -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; -@import "~bootstrap/scss/pagination"; -@import "~bootstrap/scss/popover"; -@import "~bootstrap/scss/progress"; -@import "~bootstrap/scss/spinners"; -@import "~bootstrap/scss/tables"; -@import "~bootstrap/scss/toasts"; -@import "~bootstrap/scss/tooltip"; - -// Utils -@import "~bootstrap/scss/utilities"; -@import "~bootstrap-vue/src/index"; - -// Custom BMC styles -@import "src/assets/styles/bmc/custom/index"; diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl index d8b99f67..2a792757 100644 --- a/docs/.vuepress/styles/palette.styl +++ b/docs/.vuepress/styles/palette.styl @@ -1,21 +1,5 @@ // VuePress Theme overrides -// Needed for table component to render correctly. - -tr:nth-child(2n) - background-color transparent -table - border-collapse collapse - z-index 0 !important - width 100% - display table -th - border-right transparent - border-left transparent - text-align left -td - border none - // Change content to be left aligned .theme-default-content:not(.custom), .page-nav diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md index 1ad965bd..1892f3f8 100644 --- a/docs/guide/components/alert.md +++ b/docs/guide/components/alert.md @@ -3,9 +3,7 @@ An alert is an inline message that contains a short description that a user cann [Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert) -<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> + ```vue <alert show variant="warning">This is a warning message</alert> diff --git a/docs/guide/components/button.md b/docs/guide/components/button.md index 6916d438..3e61b797 100644 --- a/docs/guide/components/button.md +++ b/docs/guide/components/button.md @@ -4,7 +4,14 @@ Buttons are used to perform an action. The main buttons in the application are t [Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button) -<BmcButtons /> +### Enabled buttons + + + +### Disabled buttons + + + ```vue // Enabled Buttons diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md index ddb1413f..af464e46 100644 --- a/docs/guide/components/table.md +++ b/docs/guide/components/table.md @@ -17,29 +17,8 @@ There are a few required properties to maintain consistency across the applicati - `show-empty` *(required if table data is generated dynamically)* - shows an empty message if there are no items in the table - `empty-text` *(required if table data is generated dynamically)* - the translated empty message -<br/> - -<b-table - :fields="['Name', 'Age', 'Color']" - :items="[ - {Name: 'Babe', Age: '3 years', Color: 'white, orange, grey' }, - {Name: 'Grey Boy', Age: '4 months', Color: 'grey' } - ]" - hover - head-variant="light" - table-variant="light" -/> - -<b-table - show-empty - hover - :fields="['Name', 'Age', 'Color']" - head-variant="light" - table-variant="light" - empty-text="No items available" -/> - -<br/> + + ```vue <template> @@ -95,7 +74,8 @@ To enable table sort, include `sortable: true` in the fields array for sortable - `no-sort-reset` - `sort-icon-left` -<br/> + + ```vue <template> @@ -137,10 +117,6 @@ export default { </script> ``` -<br /> - -<BmcTable /> - <!-- ## Expandable row --> <!-- ## Pagination --> <!-- ## Row actions --> diff --git a/docs/guide/components/toast.md b/docs/guide/components/toast.md index 5dc2e0e9..fa8e56ee 100644 --- a/docs/guide/components/toast.md +++ b/docs/guide/components/toast.md @@ -3,7 +3,7 @@ Use a toast message to indicate the status of a user action. For example, a user There are different transitions for the toast messages. The `success` toast message will auto-hide after 10 seconds. The user must manually dismiss the `informational`, `warning`, and `error` toast messages. The `BVToastMixin` provides a simple API that generates a toast message that meets the transition guidelines. -<BmcToasts /> +<img :src="$withBase('/toast.png')" alt="Toast example" style="max-width:350px"> ```js{5} // Sample method from Reboot BMC page |
