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

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
new 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
new 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
new 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
new 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
new 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
new 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
new 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>
+![Alert examples](/alert.png)
 
 ```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
+
+![Button examples](/button.png)
+
+### Disabled buttons
+
+![Disabled button examples](/button-disabled.png)
+
 
 ```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/>
+![Basic table example](/table.png)
+![Basic empty table example](/table-empty.png)
 
 ```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/>
+![Table sort example](/table-sort.png)
+
 
 ```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