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

1 files changed, 32 insertions, 0 deletions

diff --git a/docs/guide/components/toasts/index.md b/docs/guide/components/toasts/index.md
new file mode 100644
index 00000000..271155a9
--- /dev/null
+++ b/docs/guide/components/toasts/index.md
@@ -0,0 +1,32 @@
+# Toasts
+Use a toast message to indicate the status of a user action. For example, a user saves a form successfully, a toast message with the `success` variant is displayed.  If the user action was not successful, a toast message with the `danger` variant is displayed.
+
+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="./toast.png" alt="Toast message examples" style="max-width:350px">
+
+```js{5}
+// Sample method from Reboot BMC page
+rebootBmc() {
+  this.$store
+  .dispatch('controls/rebootBmc')
+  .then(message => this.successToast(message))
+  .catch(({ message }) => this.errorToast(message));
+}
+
+// Methods used in this example
+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.');
+  },
+}
+```
\ No newline at end of file