Update component documentation

The component structure was not consistent. We determined how we
wanted to save image examples within the component directory, but not
all of the components were updated. The result was that some images
were not displaying on the component pages. This patchset resolves
that issue, along with removing the page component since it is not an
actual component within the application.

- Add directory for each component, move example images to the
directory, and update the image path
- Create a page-title and page-section directory and index.md for each
- Move content for page-title and page-section from the page.md file
into the index.md within the respective component directory
- Delete the page.md from the component directory as it is not a
component
- Update links to page.md in the page-anatomy.md file.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I1e554adf71abb4c84f423a30d3c3b598f678ade0

11 files changed, 42 insertions, 75 deletions

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e86a9d25..45e5088a 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -47,13 +47,14 @@ module.exports = {
             title: "Components",
             children: [
             "/guide/components/",
-            "/guide/components/alert",
+            "/guide/components/alerts/",
             "/guide/components/buttons/",
-            "/guide/components/page",
+            "/guide/components/info-tooltip/",
+            "/guide/components/page-section/",
+            "/guide/components/page-title/",
             "/guide/components/status-icon/",
             "/guide/components/table/",
-            "/guide/components/toast",
-            "/guide/components/tooltip"
+            "/guide/components/toasts/"
           ]
           },
           {
diff --git a/docs/.vuepress/public/alert.png b/docs/guide/components/alerts/alert.png
index 7a368f7f..7a368f7f 100644
--- a/docs/.vuepress/public/alert.png
+++ b/docs/guide/components/alerts/alert.png
diff --git a/docs/guide/components/alert.md b/docs/guide/components/alerts/index.md
index 1892f3f8..9273f8e2 100644
--- a/docs/guide/components/alert.md
+++ b/docs/guide/components/alerts/index.md
@@ -3,7 +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 examples](/alert.png)
+![Alert examples](./alert.png)
 
 ```vue
 <alert show variant="warning">This is a warning message</alert>
diff --git a/docs/guide/components/tooltip.md b/docs/guide/components/info-tooltip/index.md
index ebc1a16d..25425475 100644
--- a/docs/guide/components/tooltip.md
+++ b/docs/guide/components/info-tooltip/index.md
@@ -12,4 +12,4 @@ The `InfoTooltip` is a custom component that uses a Bootstrap-vue tooltip with a
 />
 ```
 
-![Tooltip example](/tooltip.png)
+![Tooltip example](./info-tooltip.png)
diff --git a/docs/.vuepress/public/tooltip.png b/docs/guide/components/info-tooltip/info-tooltip.png
index 7af1b7ae..7af1b7ae 100644
--- a/docs/.vuepress/public/tooltip.png
+++ b/docs/guide/components/info-tooltip/info-tooltip.png
diff --git a/docs/guide/components/page-section/index.md b/docs/guide/components/page-section/index.md
new file mode 100644
index 00000000..ccf654e1
--- /dev/null
+++ b/docs/guide/components/page-section/index.md
@@ -0,0 +1,10 @@
+# Page section
+
+The `<page-section>` component will render semantic HTML. By adding a `:section-title` prop to the `<page-section>` component, the localized text string will be rendered in an `h2` header element.
+
+``` vue
+// Example: `src/views/AccessControl/Ldap/Ldap.vue`
+    <page-section :section-title="$t('pageLdap.settings')">
+```
+
+[View the page section component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue).
\ No newline at end of file
diff --git a/docs/guide/components/page-title/index.md b/docs/guide/components/page-title/index.md
new file mode 100644
index 00000000..b51ab640
--- /dev/null
+++ b/docs/guide/components/page-title/index.md
@@ -0,0 +1,23 @@
+# Page title
+The `<page-title>` component will automatically render the page title that corresponds with the title property set in the route record's meta field in `src/router/routes.js`.
+
+```js
+// src/router/routes.js
+  {
+    path: '',
+    name: 'login',
+    component: Login,
+    meta: {
+      title: i18n.t('appPageTitle.login'),
+    },
+  },
+```
+
+Optional page descriptions can be included by using the description prop `:description` prop and passing in the i18n localized text string. Translations are found in the `src/locales` folder.
+
+``` vue
+// Example: `src/views/AccessControl/Ldap/Ldap.vue`
+  <page-title :description="$t('pageLdap.pageDescription')" />
+```
+
+[View the page title component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue).
diff --git a/docs/guide/components/page.md b/docs/guide/components/page.md
deleted file mode 100644
index 83106e37..00000000
--- a/docs/guide/components/page.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Page
-
-The essential building blocks of each page, or single-file component, consist of:
-- `<b-container>`
-- `<page-title>`
-- `<page-section>`
-
-```vue
-<template>
-  <b-container fluid="xl">
-    <page-title />
-    <page-section :section-title="$t('pageName.sectionTitle')">
-      // Page content goes here
-    </page-section>
-  </b-container>
-</template>
-```
-
-## Page container
-Use the `fluid="xl"` prop on the `<b-container>` component to render a container that is always 100% width on larger screen sizes. [Learn more about BootstrapVue containers](https://bootstrap-vue.org/docs/components/layout#responsive-fluid-containers).
-
-```vue
-<template>
-  <b-container fluid="xl">
-  </b-container>
-</template>
-```
-
-
-Within the page container, include the [page title](#/page-title) and [page section](#page-section) components.
-
-## Page title
-The `<page-title>` component will automatically render the page title that corresponds with the title property set in the route record's meta field in `src/router/routes.js`.
-
-```js
-// src/router/routes.js
-  {
-    path: '',
-    name: 'login',
-    component: Login,
-    meta: {
-      title: i18n.t('appPageTitle.login'),
-    },
-  },
-```
-
-Optional page descriptions can be included by using the description prop `:description` prop and passing in the i18n localized text string. Translations are found in the `src/locales` folder.
-
-``` vue
-// Example: `src/views/AccessControl/Ldap/Ldap.vue`
-  <page-title :description="$t('pageLdap.pageDescription')" />
-```
-
-[View the page title component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue).
-
-## Page section
-
-The `<page-section>` component will render semantic HTML. By adding a `:section-title` prop to the `<page-section>` component, the localized text string will be rendered in an `h2` header element.
-
-``` vue
-// Example: `src/views/AccessControl/Ldap/Ldap.vue`
-    <page-section :section-title="$t('pageLdap.settings')">
-```
-
-[View the page section component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue).
-
- [Visit the quick start guide](/guide/quickstart/page-anatomy) to learn how to build a single-file component using this page anatomy.
\ No newline at end of file
diff --git a/docs/guide/components/toast.md b/docs/guide/components/toasts/index.md
index fa8e56ee..271155a9 100644
--- a/docs/guide/components/toast.md
+++ b/docs/guide/components/toasts/index.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.
 
-<img :src="$withBase('/toast.png')" alt="Toast example" style="max-width:350px">
+<img src="./toast.png" alt="Toast message examples" style="max-width:350px">
 
 ```js{5}
 // Sample method from Reboot BMC page
diff --git a/docs/.vuepress/public/toast.png b/docs/guide/components/toasts/toast.png
index 97f9bc4c..97f9bc4c 100644
--- a/docs/.vuepress/public/toast.png
+++ b/docs/guide/components/toasts/toast.png
diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md
index ed17c04e..120bf70b 100644
--- a/docs/guide/quickstart/page-anatomy.md
+++ b/docs/guide/quickstart/page-anatomy.md
@@ -7,7 +7,7 @@ When creating a new page, each template consists of at least 3 components:
 - `<page-title>`
 - `<page-section>`
 
-Learn more about the [page container, page title and page section](/guide/components/page) components.
+Learn more about the [page title](/guide/components/page-title)and [page section](/guide/components/page-section) components.
 
 ```vue
 <template>