Update VuePress configuration
We are moving away from importing application components directly into
the VuePress docs. We will document code snippets and add screenshots
as a visual example.
This commit removes all code and configurations that supported importing
dynamic components into VuePress and added images in place of a working
component example on the page.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9a75c5d51de8b6d941e4df7ae977d78c043d36e1
diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue
deleted file mode 100644
index 795c837..0000000
--- 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 9cc7b64..0000000
--- 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 6f90d1f..0000000
--- 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 1007565..0000000
--- 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 ef2afb7..0000000
--- 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 c650d7e..e4dd200 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -61,12 +61,5 @@
],
"/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 6ff8775..0000000
--- 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
new file mode 100644
index 0000000..7a368f7
--- /dev/null
+++ b/docs/.vuepress/public/alert.png
Binary files differ
diff --git a/docs/.vuepress/public/button-disabled.png b/docs/.vuepress/public/button-disabled.png
new file mode 100644
index 0000000..70f3b15
--- /dev/null
+++ b/docs/.vuepress/public/button-disabled.png
Binary files differ
diff --git a/docs/.vuepress/public/button.png b/docs/.vuepress/public/button.png
new file mode 100644
index 0000000..d994e86
--- /dev/null
+++ b/docs/.vuepress/public/button.png
Binary files differ
diff --git a/docs/.vuepress/public/table-empty.png b/docs/.vuepress/public/table-empty.png
new file mode 100644
index 0000000..90ecfc1
--- /dev/null
+++ b/docs/.vuepress/public/table-empty.png
Binary files differ
diff --git a/docs/.vuepress/public/table-sort.png b/docs/.vuepress/public/table-sort.png
new file mode 100644
index 0000000..af6d831
--- /dev/null
+++ b/docs/.vuepress/public/table-sort.png
Binary files differ
diff --git a/docs/.vuepress/public/table.png b/docs/.vuepress/public/table.png
new file mode 100644
index 0000000..0160013
--- /dev/null
+++ b/docs/.vuepress/public/table.png
Binary files differ
diff --git a/docs/.vuepress/public/toast.png b/docs/.vuepress/public/toast.png
new file mode 100644
index 0000000..97f9bc4
--- /dev/null
+++ b/docs/.vuepress/public/toast.png
Binary files differ
diff --git a/docs/.vuepress/styles/_index.scss b/docs/.vuepress/styles/_index.scss
deleted file mode 100644
index 700c14e..0000000
--- 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 d8b99f6..2a79275 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 1ad965b..1892f3f 100644
--- a/docs/guide/components/alert.md
+++ b/docs/guide/components/alert.md
@@ -3,9 +3,7 @@
[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 6916d43..3e61b79 100644
--- a/docs/guide/components/button.md
+++ b/docs/guide/components/button.md
@@ -4,7 +4,14 @@
[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 ddb1413..af464e4 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table.md
@@ -17,29 +17,8 @@
- `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 @@
- `no-sort-reset`
- `sort-icon-left`
-<br/>
+
+
```vue
<template>
@@ -137,10 +117,6 @@
</script>
```
-<br />
-
-<BmcTable />
-
<!-- ## Expandable row -->
<!-- ## Pagination -->
<!-- ## Row actions -->
diff --git a/docs/guide/components/toast.md b/docs/guide/components/toast.md
index 5dc2e0e..fa8e56e 100644
--- a/docs/guide/components/toast.md
+++ b/docs/guide/components/toast.md
@@ -3,7 +3,7 @@
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
