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
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e86a9d2..45e5088 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -47,13 +47,14 @@
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
similarity index 100%
rename from docs/.vuepress/public/alert.png
rename to docs/guide/components/alerts/alert.png
Binary files differ
diff --git a/docs/guide/components/alert.md b/docs/guide/components/alerts/index.md
similarity index 94%
rename from docs/guide/components/alert.md
rename to docs/guide/components/alerts/index.md
index 1892f3f..9273f8e 100644
--- a/docs/guide/components/alert.md
+++ b/docs/guide/components/alerts/index.md
@@ -3,7 +3,7 @@
[Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert)
-
+
```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
similarity index 90%
rename from docs/guide/components/tooltip.md
rename to docs/guide/components/info-tooltip/index.md
index ebc1a16..2542547 100644
--- a/docs/guide/components/tooltip.md
+++ b/docs/guide/components/info-tooltip/index.md
@@ -12,4 +12,4 @@
/>
```
-
+
diff --git a/docs/.vuepress/public/tooltip.png b/docs/guide/components/info-tooltip/info-tooltip.png
similarity index 100%
rename from docs/.vuepress/public/tooltip.png
rename to docs/guide/components/info-tooltip/info-tooltip.png
Binary files differ
diff --git a/docs/guide/components/page-section/index.md b/docs/guide/components/page-section/index.md
new file mode 100644
index 0000000..ccf654e
--- /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 0000000..b51ab64
--- /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 83106e3..0000000
--- 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
similarity index 93%
rename from docs/guide/components/toast.md
rename to docs/guide/components/toasts/index.md
index fa8e56e..271155a 100644
--- a/docs/guide/components/toast.md
+++ b/docs/guide/components/toasts/index.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.
-<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
similarity index 100%
rename from docs/.vuepress/public/toast.png
rename to docs/guide/components/toasts/toast.png
Binary files differ
diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md
index ed17c04..120bf70 100644
--- a/docs/guide/quickstart/page-anatomy.md
+++ b/docs/guide/quickstart/page-anatomy.md
@@ -7,7 +7,7 @@
- `<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>
