From d35132d82d68acbbf83d95add7290f769d3b2436 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Wed, 11 Nov 2020 15:00:15 -0800
Subject: 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
---
 docs/guide/components/alert.md  |  4 +---
 docs/guide/components/button.md |  9 ++++++++-
 docs/guide/components/table.md  | 32 ++++----------------------------
 docs/guide/components/toast.md  |  2 +-
 4 files changed, 14 insertions(+), 33 deletions(-)

(limited to 'docs/guide')

diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md
index 1ad965bda..1892f3f85 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 6916d4380..3e61b7978 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 ddb1413f8..af464e46f 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 5dc2e0e99..fa8e56eeb 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
-- 
cgit v1.2.3