Update text wrapping in documentation

To meet best practices and standards for markdown, this commit updates all markdown files used for the VuePress documentation so that each line is limited to 80 characters. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I0cadb33343ce1bc331dfefd096d8137a04c33604
author: Derick Montague <derick.montague@ibm.com> 2021-03-17 03:52:33 +0300
committer: Derick Montague <derick.montague@ibm.com> 2021-03-22 16:27:10 +0300
commit: 492875622b39cb2cf04bbb9248b6ed0c52ced2df (patch)
tree: 665449e11841591a8aae5f4f347a3a88936a2d7a /docs
parent: b0fadef1f96df99ff5eb0637527f04bc793c8d6e (diff)
download: webui-vue-492875622b39cb2cf04bbb9248b6ed0c52ced2df.tar.xz
21 files changed, 580 insertions, 205 deletions
diff --git a/docs/guide/coding-standards/accessibility.md b/docs/guide/coding-standards/accessibility.md
index d53bf08d..0a9a1a75 100644
--- a/docs/guide/coding-standards/accessibility.md
+++ b/docs/guide/coding-standards/accessibility.md
@@ -1,9 +1,19 @@
 # Accessibility Conventions and Standards
 
-It is important that the OpenBMC Web UI meet accessibility guidelines established by the [World Wide Web Consortium (W3C)](https://www.w3.org/). These guidelines are known as the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/). Making the Web UI accessible to as many users as possible is the right thing to do. In many countries, it is also legally required. Organizations providing interfaces that users with permanent or temporary disabilities can not use, may lose sales or be susceptible to discriminatory lawsuits.
+It is important that the OpenBMC Web UI meet accessibility guidelines
+established by the [World Wide Web Consortium (W3C)](https://www.w3.org/). These
+guidelines are known as the [Web Content Accessibility Guidelines
+(WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/). Making the Web UI
+accessible to as many users as possible is the right thing to do. In many
+countries, it is also legally required. Organizations providing interfaces that
+users with permanent or temporary disabilities can not use, may lose sales or be
+susceptible to discriminatory lawsuits.
 
 ## Accessibility Principles
-These [principles](https://www.w3.org/WAI/fundamentals/accessibility-principles/) reference a set of international standards from the [W3C Web Accessibility Intitiative (WAI)](https://www.w3.org/WAI/).
+These
+[principles](https://www.w3.org/WAI/fundamentals/accessibility-principles/)
+reference a set of international standards from the [W3C Web Accessibility
+Intitiative (WAI)](https://www.w3.org/WAI/).
 
 - [Perceiveable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable)
 - [Operable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#operable)
@@ -11,33 +21,53 @@ These [principles](https://www.w3.org/WAI/fundamentals/accessibility-principles/
 - [Robust](https://www.w3.org/WAI/fundamentals/accessibility-principles/#robust)
 
 ## Semantic HTML
-Coding the UI using semantic markup is the most important step in creating an inclusive interface. The use of [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) can help make an interface accessible to assistive technologies. However, there are two critical rules to follow:
+Coding the UI using semantic markup is the most important step in creating an
+inclusive interface. The use of
+[WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) can help make an
+interface accessible to assistive technologies. However, there are two critical
+rules to follow:
 
 1. Always favor semantic markup over ARIA
 2. No ARIA is better than Bad ARIA
 
 ## Testing
-Assuring the Web UI meets accessibility guidelines requires a combination of automated and manual testing. Automated tests will test the application against common problems such as color contrast and ARIA use. Automated testing can be built into the CI process, integrated with code editors, and run using browser extensions.
+Assuring the Web UI meets accessibility guidelines requires a combination of
+automated and manual testing. Automated tests will test the application against
+common problems such as color contrast and ARIA use. Automated testing can be
+built into the CI process, integrated with code editors, and run using browser
+extensions.
 
-The OpenBMC Web UI developers should test their development pages using one of the tools listed in the tools section below. If using Chrome, the Lighthouse application comes bundled with the browser and also includes testing for performance and best practices. If there is an issue that is created when using a Bootstrap-Vue component, we can [create an issue in the Bootstrap-vue repo](https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose). Contributing to the Bootstrap-Vue open-source library, when possible, is strongly encouraged.
+The OpenBMC Web UI developers should test their development pages using one of
+the tools listed in the tools section below. If using Chrome, the Lighthouse
+application comes bundled with the browser and also includes testing for
+performance and best practices. If there is an issue that is created when using
+a Bootstrap-Vue component, we can [create an issue in the Bootstrap-vue
+repo](https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose).
+Contributing to the Bootstrap-Vue open-source library, when possible, is
+strongly encouraged.
 
 ## Tools
 - [Deque Axe](https://www.deque.com/axe/)
-- [Firefox Accessibility Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
+- [Firefox Accessibility
+  Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
 - [IBM Accessibility Tools](https://www.ibm.com/able/toolkit/tools)
 - [Lighthouse](https://developers.google.com/web/tools/lighthouse)
 
 ## Screen Readers
 - [Jaws - (Windows only)](https://webaim.org/articles/jaws/)
-- [Narrator - (Windows only)](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)
+- [Narrator - (Windows
+  only)](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)
 - [NVDA (Windows only)](https://webaim.org/articles/nvda/)
 - [Voiceover (Mac only)](https://webaim.org/articles/voiceover/)
 
 ## Resources
-- [Mozilla Developer Network - Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
-- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- [Mozilla Developer Network -
+  Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [Web Content Accessibility Guidelines
+  (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
 - [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/)
-- [WAI-ARIA Basics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [WAI-ARIA
+  Basics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
 - [WebAIM Articles](https://webaim.org/articles/)
 - [A11Y Project](https://a11yproject.com/)
 - [IBM Accessibility](https://www.ibm.com/able/)
diff --git a/docs/guide/coding-standards/readme.md b/docs/guide/coding-standards/readme.md
index b183256d..a6ab3669 100644
--- a/docs/guide/coding-standards/readme.md
+++ b/docs/guide/coding-standards/readme.md
@@ -1,11 +1,13 @@
 # JavaScript and SASS
-This project uses the following libraries to determine the best practices and guidelines for both SCSS and JavaScript syntax.
+This project uses the following libraries to determine the best practices and
+guidelines for both SCSS and JavaScript syntax.
 - [ESLint](https://eslint.org/)
 - [Prettier](https://prettier.io/)
 - [ESLint Plugin for Vue](https://eslint.vuejs.org/)
 
 The guidelines we are following are:
-- [Vue Recommended](https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-3-x)
+- [Vue
+  Recommended](https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-3-x)
 - [ESLint Recommended](https://eslint.org/docs/rules/)
 - [Prettier](https://prettier.io/docs/en/options.html)
 
@@ -15,9 +17,15 @@ The rules are applied in the following order:
 1. Prettier
 
 ## Overrides
-Any overrides to a rule are located in the ESLint configuration file, `.eslintrc.js`, located in the root directory.
+Any overrides to a rule are located in the ESLint configuration file,
+`.eslintrc.js`, located in the root directory.
 
 ## Running the lint test
-To test all files for linting, run `npm run lint`. This command will evaluate the syntax of all files and update any code that that does not require manual review.
+To test all files for linting, run `npm run lint`. This command will evaluate
+the syntax of all files and update any code that that does not require manual
+review.
 
-The linting script runs when code is committed,  during pre-commit, and when the CI tool runs after a push to Gerrit. There is a shell script named `format-code.sh` that installs node package dependencies and runs the test script in your CI.
-\ No newline at end of file
+The linting script runs when code is committed,  during pre-commit, and when the
+CI tool runs after a push to Gerrit. There is a shell script named
+`format-code.sh` that installs node package dependencies and runs the test
+script in your CI.
+\ No newline at end of file
diff --git a/docs/guide/components/alerts/index.md b/docs/guide/components/alerts/index.md
index 9273f8e2..aa2c5e13 100644
--- a/docs/guide/components/alerts/index.md
+++ b/docs/guide/components/alerts/index.md
@@ -1,7 +1,11 @@
 # Alerts
-An alert is an inline message that contains a short description that a user cannot manually dismiss. With exception to the error message on the login page, alerts are not triggered by user action. Success and error notifications based on user actions are created using a toast component.
+An alert is an inline message that contains a short description that a user
+cannot manually dismiss. With exception to the error message on the login page,
+alerts are not triggered by user action. Success and error notifications based
+on user actions are created using a toast component.
 
-[Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert)
+[Learn more about Bootstrap-vue alert
+options](https://bootstrap-vue.js.org/docs/components/alert)
 
 ![Alert examples](./alert.png)
 
diff --git a/docs/guide/components/buttons/index.md b/docs/guide/components/buttons/index.md
index da569a15..83b8e8a7 100644
--- a/docs/guide/components/buttons/index.md
+++ b/docs/guide/components/buttons/index.md
@@ -1,11 +1,17 @@
 # Buttons
 
-Buttons are used to perform an action. The main buttons in the application are the `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components can be themed by setting the `variant` prop on the component to one of the [theme-color map keys](/guide/guidelines/colors). To create a button that looks like a link, set the variant value to `link`.
+Buttons are used to perform an action. The main buttons in the application are
+the `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components
+can be themed by setting the `variant` prop on the component to one of the
+[theme-color map keys](/guide/guidelines/colors). To create a button that looks
+like a link, set the variant value to `link`.
 
-[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button)
+[Learn more about Bootstrap-vue
+buttons](https://bootstrap-vue.js.org/docs/components/button)
 
 ### Icon only buttons
-Add `btn-icon-only` class to the button and add `title` attribute to get helper text on hover over the button.
+Add `btn-icon-only` class to the button and add `title` attribute to get helper
+text on hover over the button.
 
 ### Enabled buttons
 
diff --git a/docs/guide/components/file-upload/readme.md b/docs/guide/components/file-upload/readme.md
index 49945308..fb833648 100644
--- a/docs/guide/components/file-upload/readme.md
+++ b/docs/guide/components/file-upload/readme.md
@@ -1,19 +1,24 @@
 # FormFile
 
-`FormFile` is a custom component wrapper around the Bootstrap-vue Form File component. The purpose of this component is to upload files to the BMC.
+`FormFile` is a custom component wrapper around the Bootstrap-vue Form File
+component. The purpose of this component is to upload files to the BMC.
 
 To use this component:
 1. Import it into the single file component (SFC)
 2. Add the `<form-file />` tag
 3. Add the optional `id` , `disabled`, `accept` and `state` prop as required
 
-[Learn more about the Bootstrap-vue Form File component](https://bootstrap-vue.org/docs/components/form-file)
+[Learn more about the Bootstrap-vue Form File
+component](https://bootstrap-vue.org/docs/components/form-file)
 ### Optional properties
 
-- `id`- Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
-- `disabled` - When set to `true`, disables the component's functionality and places it in a disabled state
+- `id`- Used to set the `id` attribute on the rendered content, and used as the
+  base to generate any additional element IDs as needed
+- `disabled` - When set to `true`, disables the component's functionality and
+  places it in a disabled state
 - `accept` - Set value to specify which file types to allow
-- `state` - Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+- `state` - Controls the validation state appearance of the component. `true`
+  for valid, `false` for invalid, or `null` for no validation state
 
 ## Example of form file
 
diff --git a/docs/guide/components/info-tooltip/index.md b/docs/guide/components/info-tooltip/index.md
index 25425475..b6117924 100644
--- a/docs/guide/components/info-tooltip/index.md
+++ b/docs/guide/components/info-tooltip/index.md
@@ -1,8 +1,11 @@
 # InfoTooltip
 
-The `InfoTooltip` is a custom component that uses a Bootstrap-vue tooltip with an info icon. This custom component requires a title property containing the tooltip text to display to the user.
+The `InfoTooltip` is a custom component that uses a Bootstrap-vue tooltip with
+an info icon. This custom component requires a title property containing the
+tooltip text to display to the user.
 
-[Read more about the Bootstrap-vue tooltip component](https://bootstrap-vue.org/docs/components/tooltip)
+[Read more about the Bootstrap-vue tooltip
+component](https://bootstrap-vue.org/docs/components/tooltip)
 
 ## Example
 
diff --git a/docs/guide/components/page-section/index.md b/docs/guide/components/page-section/index.md
index ccf654e1..2a8a22ef 100644
--- a/docs/guide/components/page-section/index.md
+++ b/docs/guide/components/page-section/index.md
@@ -1,10 +1,13 @@
 # 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.
+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
+[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
index b51ab640..db43f29f 100644
--- a/docs/guide/components/page-title/index.md
+++ b/docs/guide/components/page-title/index.md
@@ -1,5 +1,7 @@
 # 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`.
+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
@@ -13,11 +15,14 @@ The `<page-title>` component will automatically render the page title that corre
   },
 ```
 
-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.
+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).
+[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/readme.md b/docs/guide/components/readme.md
index f10a1317..aef688af 100644
--- a/docs/guide/components/readme.md
+++ b/docs/guide/components/readme.md
@@ -1,4 +1,10 @@
 # Overview
-Vue components are the building blocks of the OpenBMC Web UI. It uses both Boostrap-Vue components, as well as custom components. Using these components assures consistency throughout the application. They also improve the developer experience and increase efficiency. Review the existing components before using HTML markup. If the feature you're working on includes a new layout pattern, rather than adding raw markup to the page, consider creating a component that other sections of the application can use as well.
+Vue components are the building blocks of the OpenBMC Web UI. It uses both
+Boostrap-Vue components, as well as custom components. Using these components
+assures consistency throughout the application. They also improve the developer
+experience and increase efficiency. Review the existing components before using
+HTML markup. If the feature you're working on includes a new layout pattern,
+rather than adding raw markup to the page, consider creating a component that
+other sections of the application can use as well.
 
 [Learn more about Vue components](https://vuejs.org/v2/guide/components.html)
 \ No newline at end of file
diff --git a/docs/guide/components/status-icon/readme.md b/docs/guide/components/status-icon/readme.md
index 0c9cc394..aef1f93c 100644
--- a/docs/guide/components/status-icon/readme.md
+++ b/docs/guide/components/status-icon/readme.md
@@ -1,6 +1,7 @@
 # StatusIcon
 
-The StatusIcon component is used to add an icon that represents one of the following statuses:
+The StatusIcon component is used to add an icon that represents one of the
+following statuses:
 
 - success
 - info
diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index cd1ba202..614ef60f 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -1,11 +1,16 @@
 # Table
 
-All tables in the application are using the [BoostrapVue table component](https://bootstrap-vue.org/docs/components/table).
+All tables in the application are using the [BoostrapVue table
+component](https://bootstrap-vue.org/docs/components/table).
 
-To use the component, include the `<b-table>` tag in the template. The component is registered globally so does not need to be imported in each SFC.
+To use the component, include the `<b-table>` tag in the template. The component
+is registered globally so does not need to be imported in each SFC.
 
 ## Basic table
-There are a few required properties to maintain consistency across the application. The full list of options can be viewed on the [Bootstrap-vue table component's documentation page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
+There are a few required properties to maintain consistency across the
+application. The full list of options can be viewed on the [Bootstrap-vue table
+component's documentation
+page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
 
 
 ### Required properties
@@ -13,12 +18,15 @@ There are a few required properties to maintain consistency across the applicati
 - `items` - renders table items
 - `fields` - renders table header
 - `hover` - enables table row hover state
-- `responsive` or `stacked` - makes the table responsive (enables horizontal scrolling or stacked view) at the defined breakpoint
-- `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
+- `responsive` or `stacked` - makes the table responsive (enables horizontal
+  scrolling or stacked view) at the defined breakpoint
+- `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
 
-![Basic table example](./table.png)
-![Basic empty table example](./table-empty.png)
+![Basic table example](./table.png) ![Basic empty table
+example](./table-empty.png)
 
 ```vue
 <template>
@@ -68,7 +76,8 @@ There are a few required properties to maintain consistency across the applicati
 
 ## Sort
 
-To enable table sort, include `sortable: true` in the fields array for sortable columns and add the following props to the `<b-table>` component:
+To enable table sort, include `sortable: true` in the fields array for sortable
+columns and add the following props to the `<b-table>` component:
 
 - `sort-by`
 - `no-sort-reset`
@@ -119,17 +128,31 @@ export default {
 
 ## Expandable rows
 
-To add an expandable row in the table, add a column for the expand button in the fields array. Include the tdClass `table-row-expand` to ensure icon rotation is handled. Use the built in [cell slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to target the expand button column and add a button with the chevron icon.
+To add an expandable row in the table, add a column for the expand button in the
+fields array. Include the tdClass `table-row-expand` to ensure icon rotation is
+handled. Use the built in [cell
+slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to
+target the expand button column and add a button with the chevron icon.
 
-Include the [TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js). The mixin contains the dynamic `aria-label` and `title` attribute values that need to be included with the expand button. The `toggleRowDetails` method should be the button's click event callback. Be sure to pass the `row` object to the function.
+Include the
+[TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js).
+The mixin contains the dynamic `aria-label` and `title` attribute values that
+need to be included with the expand button. The `toggleRowDetails` method should
+be the button's click event callback. Be sure to pass the `row` object to the
+function.
 
-Use the [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to format the expanded row content. The slot has access to the row `item` property.
+Use the [row-details
+slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to
+format the expanded row content. The slot has access to the row `item` property.
 
 ### Summary
 
-1. Add a column for the expansion row button with the tdClass, `table-row-expand`
-2. Include the `TableRowExpandMixin` to handle the dynamic aria label, title, and row expansion toggling
-3. Use the `#cell` slot to target the expandable row column and add the button with accessible markup and click handler
+1. Add a column for the expansion row button with the tdClass,
+   `table-row-expand`
+2. Include the `TableRowExpandMixin` to handle the dynamic aria label, title,
+   and row expansion toggling
+3. Use the `#cell` slot to target the expandable row column and add the button
+   with accessible markup and click handler
 4. Use the `#row-details` slot to format expanded row content
 
 ![Table row expand example](./table-expand-row.png)
@@ -185,15 +208,28 @@ export default {
 
 ## Search
 
-The table is leveraging [BootstrapVue table filtering](https://bootstrap-vue.org/docs/components/table#filtering) for search. Add the [@filtered](https://bootstrap-vue.org/docs/components/table#filter-events) event listener onto the `<b-table>` component. The event callback should track the total filtered items count.
+The table is leveraging [BootstrapVue table
+filtering](https://bootstrap-vue.org/docs/components/table#filtering) for
+search. Add the
+[@filtered](https://bootstrap-vue.org/docs/components/table#filter-events) event
+listener onto the `<b-table>` component. The event callback should track the
+total filtered items count.
 
-Import the `<search>` and `<table-cell-count>` components and include them in the template above the `<b-table>` component.
+Import the `<search>` and `<table-cell-count>` components and include them in
+the template above the `<b-table>` component.
 
-Include the [SearchFilterMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFilterMixin.js). Add the `@change-search` and `@clear-search` event listeners on the `<search>` component and use the corresponding `onChangeSearchInput` and `onClearSearchInput` methods as the event callbacks. The table should also include the dynamic `:filter` prop with `searchFilter` set as the value.
+Include the
+[SearchFilterMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFilterMixin.js).
+Add the `@change-search` and `@clear-search` event listeners on the `<search>`
+component and use the corresponding `onChangeSearchInput` and
+`onClearSearchInput` methods as the event callbacks. The table should also
+include the dynamic `:filter` prop with `searchFilter` set as the value.
 
-The `<table-cell-count>` component requires two properties, total table item count and total filtered items count.
+The `<table-cell-count>` component requires two properties, total table item
+count and total filtered items count.
 
-Add the `:empty-filtered-text` prop to the table to show the translated message if there are no search matches.
+Add the `:empty-filtered-text` prop to the table to show the translated message
+if there are no search matches.
 
 ![Table search example](./table-search.png)
 
@@ -261,9 +297,14 @@ export default {
 
 ## Row actions
 
-To add table row actions, add a column for the action buttons in the table. Then in the array of table items, add a corresponding array of actions for each item. The array should have each desired row action with a `value` and `title` property.
+To add table row actions, add a column for the action buttons in the table. Then
+in the array of table items, add a corresponding array of actions for each item.
+The array should have each desired row action with a `value` and `title`
+property.
 
-Import the `<table-row-action>` component. Provide the `value` and `title` props to the component and use the named `#icons` slot to include an icon. The component will emit a `@click-table-action` with the event value.
+Import the `<table-row-action>` component. Provide the `value` and `title` props
+to the component and use the named `#icons` slot to include an icon. The
+component will emit a `@click-table-action` with the event value.
 
 ![Table row actions example](./table-row-actions.png)
 
@@ -343,11 +384,17 @@ export default {
 
 To add a table dropdown filter:
 1. Import the `<table-filter> `component and TableFilterMixin.
-1. Add a filters prop to the `<table-filters>` component. This prop should be an array of filter groups–each required to have a key, label, and values prop.
+1. Add a filters prop to the `<table-filters>` component. This prop should be an
+   array of filter groups–each required to have a key, label, and values prop.
 
-The `label` prop value should be the translated filter group label. The `key` prop will usually match the filtered by table column key. The `values` prop should be an array of filter values that will render as a list of checkbox items in the dropdown.
+The `label` prop value should be the translated filter group label. The `key`
+prop will usually match the filtered by table column key. The `values` prop
+should be an array of filter values that will render as a list of checkbox items
+in the dropdown.
 
-The component will emit a `@filter-change` event that will provide the filter group and all selected values in the group. Use the getFilteredTableData method from the TableFilterMixin to show the filtered table data.
+The component will emit a `@filter-change` event that will provide the filter
+group and all selected values in the group. Use the getFilteredTableData method
+from the TableFilterMixin to show the filtered table data.
 
 ![Table filter example](./table-filter.png)
 
@@ -410,18 +457,36 @@ export default {
 
 ### Date filter
 
-To add a date filter, import the `<table-date-filter>` component. It will emit a `@change` event with the user input date values. There is a date filter method, `getFilteredTableDataByDate`, in the `TableFilterMixin`.
+To add a date filter, import the `<table-date-filter>` component. It will emit a
+`@change` event with the user input date values. There is a date filter method,
+`getFilteredTableDataByDate`, in the `TableFilterMixin`.
 
 
 ## Batch actions
 
-Batch actions allow a user to take a single action on many items in a table at once.
+Batch actions allow a user to take a single action on many items in a table at
+once.
 
 To add table batch actions:
 1. Import the `<table-toolbar> `component and BVTableSelectableMixin
-1. Add the `selectable`, `no-select-on-click` props and a unique `ref` to the table. The table will emit a `@row-selected` event. Use the `onRowSelected` mixin method as a callback and provide the `$event` as the first argument and the total table items count as the second argument.
-1. Add a table column for checkboxes. The table header checkbox should use the `tableHeaderCheckboxModel` and `tableHeaderCheckboxIndeterminate` values provided by the mixin. The table header checkbox should also use the `onChangeHeaderCheckbox` method as a callback for the `@change` event with the table `ref` passed as an argument. The table row checkboxes should use the `toggleSelectRow` method as a callback for the `@change` event with the table `ref` passed as the first argument and the row index passed as the second argument.
-1. Add an actions prop to the `<table-toolbar>` component. This prop should be an array of toolbar actions–required to have a value and label prop. Add the `selected-items-count` prop to the `<table-toolbar>` component. The component will emit a `@batch-action` event that will provide the user selected action. It will also emit a `@clear-selected` event. Provide the `clearSelectedRows` as a callback with the table `ref` passed as an argument.
+1. Add the `selectable`, `no-select-on-click` props and a unique `ref` to the
+   table. The table will emit a `@row-selected` event. Use the `onRowSelected`
+   mixin method as a callback and provide the `$event` as the first argument and
+   the total table items count as the second argument.
+1. Add a table column for checkboxes. The table header checkbox should use the
+   `tableHeaderCheckboxModel` and `tableHeaderCheckboxIndeterminate` values
+   provided by the mixin. The table header checkbox should also use the
+   `onChangeHeaderCheckbox` method as a callback for the `@change` event with
+   the table `ref` passed as an argument. The table row checkboxes should use
+   the `toggleSelectRow` method as a callback for the `@change` event with the
+   table `ref` passed as the first argument and the row index passed as the
+   second argument.
+1. Add an actions prop to the `<table-toolbar>` component. This prop should be
+   an array of toolbar actions–required to have a value and label prop. Add the
+   `selected-items-count` prop to the `<table-toolbar>` component. The component
+   will emit a `@batch-action` event that will provide the user selected action.
+   It will also emit a `@clear-selected` event. Provide the `clearSelectedRows`
+   as a callback with the table `ref` passed as an argument.
 
 ![Table batch action example](./table-batch-action.png)
 
@@ -512,7 +577,8 @@ export default {
 To add table pagination:
 1. Import the BVPaginationMixin
 1. Add the `per-page` and `current-page` props to the `<table>` component.
-1. Add the below HTML snippet to the template. Make sure to update the `total-rows` prop.
+1. Add the below HTML snippet to the template. Make sure to update the
+   `total-rows` prop.
 
 ```vue{21}
 <b-row>
diff --git a/docs/guide/components/toasts/index.md b/docs/guide/components/toasts/index.md
index 2e695f6a..3f0c815d 100644
--- a/docs/guide/components/toasts/index.md
+++ b/docs/guide/components/toasts/index.md
@@ -1,7 +1,14 @@
 # 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.
+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.
+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">
 
@@ -33,11 +40,18 @@ methods: {
 
 ## Additional options
 
-The first argument for each method will be the toast body content. It accepts a string value or an array of strings for toasts needing to display multiple lines of content.
+The first argument for each method will be the toast body content. It accepts a
+string value or an array of strings for toasts needing to display multiple lines
+of content.
 
-The BVToastMixin also accepts additional options as a second argument. Pass an object with a `title` property to change the default toast title. Include a `refreshAction` property, set to true, to include a link that refreshes the application. Include a `timestamp` property, set to true, to include a timestamp in the toast.
+The BVToastMixin also accepts additional options as a second argument. Pass an
+object with a `title` property to change the default toast title. Include a
+`refreshAction` property, set to true, to include a link that refreshes the
+application. Include a `timestamp` property, set to true, to include a timestamp
+in the toast.
 
-<img src="./toast-options.png" alt="Toast message options example" style="max-width:350px">
+<img src="./toast-options.png" alt="Toast message options example"
+style="max-width:350px">
 
 ```js
 
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index 7ef6c153..d73a0373 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -1,9 +1,16 @@
 # Colors
-This color palette has been agreed upon by the OpenBMC community and differs from the Bootstrap color patterns. The OpenBMC palette includes custom hex values, along with additional blue, green, red, and yellow color variables used as accent colors for components. The `.scss` component files use these accent colors to override default styles set by the Bootstrap library.
+This color palette has been agreed upon by the OpenBMC community and differs
+from the Bootstrap color patterns. The OpenBMC palette includes custom hex
+values, along with additional blue, green, red, and yellow color variables used
+as accent colors for components. The `.scss` component files use these accent
+colors to override default styles set by the Bootstrap library.
 
 - [Learn more about theme customization](/themes/)
-- [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a change
-- [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
+- [Open an issue in the OpenBMC webui-vue
+  repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a
+  change
+- [Learn more about Bootstrap
+  colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
 
 ## Grays
 <colors-grays/>
@@ -21,15 +28,21 @@ This color palette has been agreed upon by the OpenBMC community and differs fro
 <colors-yellows/>
 
 ## All Colors
-`All Colors` is the term Bootstrap uses to describe the colors that make up the `colors` map. These colors and the Grays color variables define the  `theme-colors` map colors.
+`All Colors` is the term Bootstrap uses to describe the colors that make up the
+`colors` map. These colors and the Grays color variables define the
+`theme-colors` map colors.
 
-[Learn more about the Bootstrap color maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
+[Learn more about the Bootstrap color
+maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
 <colors-all/>
 
 ## Theme Colors
-The theme colors are keys in the `theme-colors` map. Bootstrap-Vue has a variant prop that accepts any of the `theme-colors` keys to set the theme of a component.
+The theme colors are keys in the `theme-colors` map. Bootstrap-Vue has a variant
+prop that accepts any of the `theme-colors` keys to set the theme of a
+component.
 
-[Learn more about the Bootstrap theme-colors maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).
+[Learn more about the Bootstrap theme-colors
+maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).
 
 <colors-theme/>
 
diff --git a/docs/guide/guidelines/motion.md b/docs/guide/guidelines/motion.md
index 22450f1d..4e176293 100644
--- a/docs/guide/guidelines/motion.md
+++ b/docs/guide/guidelines/motion.md
@@ -1,14 +1,23 @@
 # Motion
-The motion guidelines are based on Carbon Design System guidelines. These guidelines avoid easing curves that are unnatural, distracting, or purely decorative. [The documentation below is attributed to Carbon's animation documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
+The motion guidelines are based on Carbon Design System guidelines. These
+guidelines avoid easing curves that are unnatural, distracting, or purely
+decorative. [The documentation below is attributed to Carbon's animation
+documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
 
 
 ## Easing
 
 ### Productive motion
-Productive motion creates a sense of efficiency and responsiveness, while remaining subtle and out of the way. Productive motion is appropriate for moments when the user needs to focus on completing tasks.
+Productive motion creates a sense of efficiency and responsiveness, while
+remaining subtle and out of the way. Productive motion is appropriate for
+moments when the user needs to focus on completing tasks.
 
 ### Expressive motion
-Expressive motion delivers enthusiastic, vibrant, and highly visible movement. Use expressive motion for significant moments such as opening a new page, clicking the primary action button, or when the movement itself conveys a meaning. System alerts and the appearance of notification boxes are great cases for expressive motion.
+Expressive motion delivers enthusiastic, vibrant, and highly visible movement.
+Use expressive motion for significant moments such as opening a new page,
+clicking the primary action button, or when the movement itself conveys a
+meaning. System alerts and the appearance of notification boxes are great cases
+for expressive motion.
 
 ### Easing tokens
 ```
@@ -21,7 +30,11 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
 ```
 
 ## Duration
-Duration is calculated based on the style and size of the motion. Among the two motion styles, productive motion is significantly faster than expressive motion. Motion’s duration should be dynamic based on the size of the animation; the larger the change in distance (traveled) or size (scaling) of the element, the longer the animation takes.
+Duration is calculated based on the style and size of the motion. Among the two
+motion styles, productive motion is significantly faster than expressive motion.
+Motion’s duration should be dynamic based on the size of the animation; the
+larger the change in distance (traveled) or size (scaling) of the element, the
+longer the animation takes.
 
 ### Duration tokens
 ```
diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md
index 120bf70b..fd49a8f5 100644
--- a/docs/guide/quickstart/page-anatomy.md
+++ b/docs/guide/quickstart/page-anatomy.md
@@ -1,5 +1,6 @@
 # Page Anatomy
-Single-file components (SFC) consist of a `template`, `script` and `style` block.
+Single-file components (SFC) consist of a `template`, `script` and `style`
+block.
 
 ## Template block
 When creating a new page, each template consists of at least 3 components:
@@ -7,7 +8,8 @@ When creating a new page, each template consists of at least 3 components:
 - `<page-title>`
 - `<page-section>`
 
-Learn more about the [page title](/guide/components/page-title)and [page section](/guide/components/page-section) components.
+Learn more about the [page title](/guide/components/page-title)and [page
+section](/guide/components/page-section) components.
 
 ```vue
 <template>
@@ -20,9 +22,11 @@ Learn more about the [page title](/guide/components/page-title)and [page section
 </template>
 ```
 ## Scripts block
-In the scripts section, be sure to import the `PageTitle` and `PageSection` components and declare them in the `components` property.
+In the scripts section, be sure to import the `PageTitle` and `PageSection`
+components and declare them in the `components` property.
 
-Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally.
+Importing `BContainer` in the [scripts block](#scripts-block) is not required as
+it is already registered globally.
 
 ```vue
 <script>
@@ -36,7 +40,9 @@ export default {
 ```
 
 ## Style block
-Add the `scoped` attribute to the style block to keep the styles isolated to the SFC. While the `scoped` attribute is optional, it is preferred and global changes should be done in global style sheets.
+Add the `scoped` attribute to the style block to keep the styles isolated to the
+SFC. While the `scoped` attribute is optional, it is preferred and global
+changes should be done in global style sheets.
 ```vue
 <style lang="scss" scoped> </style>
 ```
diff --git a/docs/guide/quickstart/store-anatomy.md b/docs/guide/quickstart/store-anatomy.md
index 63b48542..3ad5694f 100644
--- a/docs/guide/quickstart/store-anatomy.md
+++ b/docs/guide/quickstart/store-anatomy.md
@@ -2,7 +2,8 @@
 
 ## Store
 
-A "store" is a container that holds the application's state. [Learn more about Vuex.](https://vuex.vuejs.org/)
+A "store" is a container that holds the application's state. [Learn more about
+Vuex.](https://vuex.vuejs.org/)
 
 ```sh
 # Store structure
@@ -19,14 +20,22 @@ A "store" is a container that holds the application's state. [Learn more about V
 
 ### Modules
 
-The application store is divided into modules to prevent the store from getting bloated. Each module contains its own state, mutations, actions, and getters. [Learn more about Vuex modules.](https://vuex.vuejs.org/guide/modules.html)
+The application store is divided into modules to prevent the store from getting
+bloated. Each module contains its own state, mutations, actions, and getters.
+[Learn more about Vuex modules.](https://vuex.vuejs.org/guide/modules.html)
 
 #### Module Anatomy
 
-- **State:** You cannot directly mutate the store's state. [Learn more about state.](https://vuex.vuejs.org/guide/state.html)
-- **Getters:** Getters are used to compute derived state based on store state. [Learn more about getters.](https://vuex.vuejs.org/guide/getters.html)
-- **Mutations:** The only way to mutate the state is by committing mutations, which are synchronous transactions. [Learn more about mutations.](https://vuex.vuejs.org/guide/mutations.html)
-- **Actions:** Asynchronous logic should be encapsulated in, and can be composed with actions. [Learn more about actions.](https://vuex.vuejs.org/guide/actions.html)
+- **State:** You cannot directly mutate the store's state. [Learn more about
+  state.](https://vuex.vuejs.org/guide/state.html)
+- **Getters:** Getters are used to compute derived state based on store state.
+  [Learn more about getters.](https://vuex.vuejs.org/guide/getters.html)
+- **Mutations:** The only way to mutate the state is by committing mutations,
+  which are synchronous transactions. [Learn more about
+  mutations.](https://vuex.vuejs.org/guide/mutations.html)
+- **Actions:** Asynchronous logic should be encapsulated in, and can be composed
+  with actions. [Learn more about
+  actions.](https://vuex.vuejs.org/guide/actions.html)
 
 Import new store modules in `src/store/index.js`.
 
diff --git a/docs/guide/readme.md b/docs/guide/readme.md
index 301dc9a4..bba15749 100644
--- a/docs/guide/readme.md
+++ b/docs/guide/readme.md
@@ -4,13 +4,17 @@ sidebarDepth: 0
 
 # Getting Started
 
-This guide outlines the architecture and technologies used to build the OpenBMC Web UI. This guide exists to serve the following goals:
+This guide outlines the architecture and technologies used to build the OpenBMC
+Web UI. This guide exists to serve the following goals:
 
-1. Improve contributor efficiency while maintaining the quality and consistency of the user interface
+1. Improve contributor efficiency while maintaining the quality and consistency
+   of the user interface
 1. Act as a collection of community agreed-upon standards
 
 ## Coding Standards
-Having an understanding of semantic HTML, CSS, and JavaScript is the critical knowledge required to contribute to this project. The frameworks and libraries used to build this UI include:
+Having an understanding of semantic HTML, CSS, and JavaScript is the critical
+knowledge required to contribute to this project. The frameworks and libraries
+used to build this UI include:
 - [Vue](https://vuejs.org/)
 - [Vuex](https://vuex.vuejs.org/)
 - [Vue Router](https://router.vuejs.org/)
@@ -19,15 +23,19 @@ Having an understanding of semantic HTML, CSS, and JavaScript is the critical kn
 - [Vuelidate](https://vuelidate.js.org/)
 - [Vue I18n](https://kazupon.github.io/vue-i18n/)
 
-::: tip
-Acquiring an understanding of these technologies will also be necessary.
+::: tip Acquiring an understanding of these technologies will also be necessary.
 :::
 
-You will find more information about the standards and best practices in the [Coding Standards section of this guide](/guide/coding-standards/).
+You will find more information about the standards and best practices in the
+[Coding Standards section of this guide](/guide/coding-standards/).
 
 ## Guidelines
-The [guidelines section](/guide/guidelines/colors) contains the OpenBMC community agreed-upon decisions on color, motion, and typography within the application. How to theme the application to meet company brand guidelines is documented in [Themes](/themes).
+The [guidelines section](/guide/guidelines/colors) contains the OpenBMC
+community agreed-upon decisions on color, motion, and typography within the
+application. How to theme the application to meet company brand guidelines is
+documented in [Themes](/themes).
 
 ## Components
-The [components section](/guide/components/) is a guide to using both custom Vue components and components from the Bootstrap-Vue library.
+The [components section](/guide/components/) is a guide to using both custom Vue
+components and components from the Bootstrap-Vue library.
 
diff --git a/docs/guide/unit-testing/readme.md b/docs/guide/unit-testing/readme.md
index 7ec635a6..b8ca4533 100644
--- a/docs/guide/unit-testing/readme.md
+++ b/docs/guide/unit-testing/readme.md
@@ -1,13 +1,21 @@
 # Unit Testing
 
- The goal of a unit test is to improve code quality and assure future development or refactoring does not result in broken builds and functionality. Tests that require consistent updating when refactoring code are likely tightly coupled to the internals of the component.
-
- > Writing unit tests is a constant struggle between writing enough tests and not writing too many. I call this the unit testing Goldilocks rule—not too many, not too few, but just enough. Thousands of tests for a small application can be as damaging to development time as no tests.
+ The goal of a unit test is to improve code quality and assure future
+ development or refactoring does not result in broken builds and functionality.
+ Tests that require consistent updating when refactoring code are likely tightly
+ coupled to the internals of the component.
+
+ > Writing unit tests is a constant struggle between writing enough tests and
+ > not writing too many. I call this the unit testing Goldilocks rule—not too
+ > many, not too few, but just enough. Thousands of tests for a small
+ > application can be as damaging to development time as no tests.
  >
- > -- <cite>Ed Yerburgh, Testing Vue Applications (New York: Manning Publications, 2019)</cite>
+ > -- <cite>Ed Yerburgh, Testing Vue Applications (New York: Manning
+ > Publications, 2019)</cite>
 
 ## Test Libraries
-The OpenBMC Web UI unit test framework uses the Jest test runner and relies on the following libraries:
+The OpenBMC Web UI unit test framework uses the Jest test runner and relies on
+the following libraries:
 
 - @vue/cli-plugin-unit-jest
 - @vue/test-utils
@@ -17,36 +25,53 @@ The OpenBMC Web UI unit test framework uses the Jest test runner and relies on t
 - The naming convention is to replicate the folder and component name
 
 ### Examples
-- The AppHeader.vue single-file component's (SFC) spec file is named `AppHeader.spec.js`
-- Create a global component like `PageSection.vue` in the `/tests/global` directory with the name `PageSection.spec.js`
-- Create a mixin like BVToastMixin  in the `/tests/mixins` directory with the name `BVToastMixin.spec.js` Running Tests
+- The AppHeader.vue single-file component's (SFC) spec file is named
+  `AppHeader.spec.js`
+- Create a global component like `PageSection.vue` in the `/tests/global`
+  directory with the name `PageSection.spec.js`
+- Create a mixin like BVToastMixin  in the `/tests/mixins` directory with the
+  name `BVToastMixin.spec.js` Running Tests
 
  ## Running Tests
 
-The `test:unit` script will run all the test suites. Until the integration of the test script with the continuous integration tool is complete, it needs to be run manually before pushing up code for review. If you are working on fixing a test that is failing, follow the guidelines for debugging a failed tests or fixing failed snapshot tests.
+The `test:unit` script will run all the test suites. Until the integration of
+the test script with the continuous integration tool is complete, it needs to be
+run manually before pushing up code for review. If you are working on fixing a
+test that is failing, follow the guidelines for debugging a failed tests or
+fixing failed snapshot tests.
 
 
 ### Debugging a failed test
-The `test:unit:debugger` script will help to debug failing tests using the Chrome Developer Tools. To debug a test:
+The `test:unit:debugger` script will help to debug failing tests using the
+Chrome Developer Tools. To debug a test:
 
 1. Add a `debugger` statement in the specifications file
 1. Run the unit test in debugger mode
 1. Open the Chrome browser and go to `chrome://inspect`
 
 ### Fixing failed snapshot tests
-The `test:update` script will update snapshot tests. If the UI has changed and the snapshot tests are failing, after manually verifying the UI changes, run the update script to update the snapshots. Running `test:update` can be dangerous, as it will update all snapshot tests.
+The `test:update` script will update snapshot tests. If the UI has changed and
+the snapshot tests are failing, after manually verifying the UI changes, run the
+update script to update the snapshots. Running `test:update` can be dangerous,
+as it will update all snapshot tests.
 
-It is critical to verify all snapshot tests before running the update script. The easiest way is to run the unit test in watch mode, `npm run test:unit -- --watch` and verify each snapshot.
+It is critical to verify all snapshot tests before running the update script.
+The easiest way is to run the unit test in watch mode, `npm run test:unit --
+--watch` and verify each snapshot.
 
 ## Guidelines
 - Avoid coupling test code to source code when testing functionality
-    - If test cases fail during refactoring, the test case may be tightly coupled with the application structure.
+    - If test cases fail during refactoring, the test case may be tightly
+      coupled with the application structure.
 - A test should not break if the functionality it tests has not changed
-- To maintain test readability, only pass in the data needed for the test to work in your mock object
+- To maintain test readability, only pass in the data needed for the test to
+  work in your mock object
 - Avoid the creation of side-effects whenever possible
 - There is no return on investment for testing presentational HTML
-- Use `shallowMount` rather than mount unless child component rendering is required
-- Avoid leaky tests by using `localVue` for all plugin installs, for example, when testing a plugin like Vuex
+- Use `shallowMount` rather than mount unless child component rendering is
+  required
+- Avoid leaky tests by using `localVue` for all plugin installs, for example,
+  when testing a plugin like Vuex
 
 ## Components
 
@@ -59,7 +84,8 @@ It is critical to verify all snapshot tests before running the update script. Th
 
 ### What not to test
 1. Don't test third-party functionality
-1. Don't test the internals of your components or that specific functions are called. This can lead to unnecessary refactoring.
+1. Don't test the internals of your components or that specific functions are
+   called. This can lead to unnecessary refactoring.
 1. Don't go beyond the input and outputs of the component
 1. Don't test the functionality of other libraries
 1. Static components do not need unit tests, use snapshot testing
@@ -67,29 +93,47 @@ It is critical to verify all snapshot tests before running the update script. Th
 ### Strategy
 1. Define a component contract that is based upon the component API
 1. Create smaller functions with a specific purpose to make testing easier
-1. Test the component API by writing tests first and then writing code to fix the tests
-1. Add a snapshot test once the presentational layer is validated through manual visual testing
+1. Test the component API by writing tests first and then writing code to fix
+   the tests
+1. Add a snapshot test once the presentational layer is validated through manual
+   visual testing
 
 ### Snapshot Testing
-A snapshot test is a comparison of the code from two different points in time. When the view is rendering as expected, a snapshot is taken and when the test suite is run, this snapshot is compared to the current code to make sure nothing has changed.
+A snapshot test is a comparison of the code from two different points in time.
+When the view is rendering as expected, a snapshot is taken and when the test
+suite is run, this snapshot is compared to the current code to make sure nothing
+has changed.
 
-This type of testing is good for testing that static content output has not changed due to any code updates or refactoring. Too many snapshots can slow down development during refactors. Typically, these are written once the UI presentational layer is complete and validated.
+This type of testing is good for testing that static content output has not
+changed due to any code updates or refactoring. Too many snapshots can slow down
+development during refactors. Typically, these are written once the UI
+presentational layer is complete and validated.
 
 ## Vuex Store
 
-There are two testing strategies for testing a Vuex store, which include testing store parts separately or testing a running store instance. Each strategy has its pros and cons. Given the size of the store and the number of developers that could potentially contribute to the project, the suggested strategy is to `test store parts separately`.
+There are two testing strategies for testing a Vuex store, which include testing
+store parts separately or testing a running store instance. Each strategy has
+its pros and cons. Given the size of the store and the number of developers that
+could potentially contribute to the project, the suggested strategy is to `test
+store parts separately`.
 
 ### Testing Store Parts Separately
-Testing the parts separately is easy since each of the parts is a JavaScript function. Store parts to test include `actions`, `getters`, and `mutations`.
+Testing the parts separately is easy since each of the parts is a JavaScript
+function. Store parts to test include `actions`, `getters`, and `mutations`.
 
 #### Actions
-Since HTTP calls should never be used in a test, actions require extreme mocking. Mocking tests rely on assumptions and can lead to faulty tests.
+Since HTTP calls should never be used in a test, actions require extreme
+mocking. Mocking tests rely on assumptions and can lead to faulty tests.
 
 #### Getters
-Getters are JavaScript functions that return an output. These are basic functions that may not require testing unless there is getter logic. Any logic in a getter should be tested.
+Getters are JavaScript functions that return an output. These are basic
+functions that may not require testing unless there is getter logic. Any logic
+in a getter should be tested.
 
 #### Mutations
-Mutations are JavaScript functions that mutate the store state. These are basic functions that may not require testing unless there is mutation logic. Any logic in a mutation should be tested.
+Mutations are JavaScript functions that mutate the store state. These are basic
+functions that may not require testing unless there is mutation logic. Any logic
+in a mutation should be tested.
 
 #### Pros
 - Easier to debug
@@ -114,7 +158,8 @@ Mutations are JavaScript functions that mutate the store state. These are basic
 
 ## Vue Router
 - Our current structure does not warrant testing the vue router
-- If there is logic used for creating `RouteLink` items, we should unit test that functionality, which requires stubbing
+- If there is logic used for creating `RouteLink` items, we should unit test
+  that functionality, which requires stubbing
 - When testing a vue router, it is important to use localVue
 
 
@@ -122,5 +167,7 @@ Mutations are JavaScript functions that mutate the store state. These are basic
 
 ## Resources
 - [Vue Test Utils](https://vue-test-utils.vuejs.org/)
-- [Knowing What To Test — Vue Component Unit Testing](https://vuejsdevelopers.com/2019/08/26/vue-what-to-unit-test-components/)
-- [How to unit test a vuex Store](https://www.dev-tips-and-tricks.com/how-to-unit-test-a-vuex-store)
-\ No newline at end of file
+- [Knowing What To Test — Vue Component Unit
+  Testing](https://vuejsdevelopers.com/2019/08/26/vue-what-to-unit-test-components/)
+- [How to unit test a vuex
+  Store](https://www.dev-tips-and-tricks.com/how-to-unit-test-a-vuex-store)
+\ No newline at end of file
diff --git a/docs/themes/customize.md b/docs/themes/customize.md
index bee769a5..763333d9 100644
--- a/docs/themes/customize.md
+++ b/docs/themes/customize.md
@@ -1,14 +1,22 @@
 # How to customize
-Customization of the application requires knowledge of Sass and CSS. It also will require becoming familiar with the Bootstrap and Bootstrap-Vue component libraries. This section outlines the global options and variables that can be removed or updated to meet organizational brand guidelines.
+Customization of the application requires knowledge of Sass and CSS. It also
+will require becoming familiar with the Bootstrap and Bootstrap-Vue component
+libraries. This section outlines the global options and variables that can be
+removed or updated to meet organizational brand guidelines.
 
 ## Environment specific builds
-Any organization can create a build that meets their branding and other customization needs. This includes customization of the state store, routing, application navigation, and theming.
+Any organization can create a build that meets their branding and other
+customization needs. This includes customization of the state store, routing,
+application navigation, and theming.
 
 ### Configuring environment specific builds
-The complete instructions can be found in the `env` directory in a file called env.md or by viewing the [Configuring environment specific builds page](./env.md)
+The complete instructions can be found in the `env` directory in a file called
+env.md or by viewing the [Configuring environment specific builds
+page](./env.md)
 
 ## Bootstrap Sass Options
-The Bootstrap Sass options are global styling toggles. The naming convention for these built-in variables is `enabled-*`.
+The Bootstrap Sass options are global styling toggles. The naming convention for
+these built-in variables is `enabled-*`.
 
 ### $enable-rounded
 This option enables or disables the border-radius styles on various components.
@@ -16,15 +24,20 @@ This option enables or disables the border-radius styles on various components.
 - Set to `false` to remove rounded corners on all container elements and buttons
 
 ### $enable-validation-icons
-This option enables or disables background-image icons within textual inputs and some custom forms for validation states.
+This option enables or disables background-image icons within textual inputs and
+some custom forms for validation states.
 
 - Set to `false` due to inability to style icons using CSS
 
 ### More information
-- [View all the Bootstrap Sass Options](https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options)
+- [View all the Bootstrap Sass
+  Options](https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options)
 
 ## Bootstrap Sass Variables
-These are global variables that Bootstrap defines in the `/node_modules/bootstrap/scss/variables.scss` helper file. Adding a variable listed in this file to the `/src/assets/styles/bmc/helpers/_variables.scss` file will override the Bootstrap defined value.
+These are global variables that Bootstrap defines in the
+`/node_modules/bootstrap/scss/variables.scss` helper file. Adding a variable
+listed in this file to the `/src/assets/styles/bmc/helpers/_variables.scss` file
+will override the Bootstrap defined value.
 
 ### $transition-base
 This variable sets the base CSS transition style throughout the application.
@@ -36,18 +49,23 @@ This variable sets the transition when showing and hiding elements.
 - Set to `opacity $duration--moderate-01 $standard-easing--productive`
 
 ### $transition-collapse
-This variable sets the CSS transitions throughout the application when expanding and collapsing elements.
+This variable sets the CSS transitions throughout the application when expanding
+and collapsing elements.
 
 - Set to `height $duration--slow-01 $standard-easing--expressive`
 
 ### More Information
-- [Carbon Design System Motion Guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
-- [Including Animation In Your Design System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
+- [Carbon Design System Motion
+  Guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
+- [Including Animation In Your Design
+  System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
 
 ## OpenBMC Custom Sass Options
 
 ### $responsive-layout-bp
-This variable determines when the primary navigation is hidden and when the hamburger menu is displayed. The breakpoint is defined using a Bootstrap function that only accepts a key from the Bootstrap `$grid-breakpoints` map.
+This variable determines when the primary navigation is hidden and when the
+hamburger menu is displayed. The breakpoint is defined using a Bootstrap
+function that only accepts a key from the Bootstrap `$grid-breakpoints` map.
 
 - xs - Navigation is always displayed
 - sm - Navigation displayed when the viewport is greater than 576px
@@ -56,9 +74,12 @@ This variable determines when the primary navigation is hidden and when the hamb
 - xl - Navigation displayed when the viewport is less than 1200px
 
 #### Responsive Resources
-- [Bootstrap responsive breakpoints](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
-- [Bootstrap Sass Mixins](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
-- [Customizing the Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
+- [Bootstrap responsive
+  breakpoints](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
+- [Bootstrap Sass
+  Mixins](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
+- [Customizing the Bootstrap
+  Grid](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
 
 ### $header-height
 This variable determines the height of the OpenBMC Web UI header element.
@@ -71,7 +92,8 @@ This variable determines the width of the primary navigation menu when expanded.
 - Default value: 300px
 
 ### $container-bgd
-This option sets the background of page containers. Changing the value of this variable will change the background color for the following elements:
+This option sets the background of page containers. Changing the value of this
+variable will change the background color for the following elements:
 -  Login page
 - Primary navigation section
 - Quick links section on the overview page
@@ -80,30 +102,64 @@ This option sets the background of page containers. Changing the value of this v
 - Default value: $gray-200
 
 ### $primary-nav-hover
-The semantic naming of this variable identifies its purpose. This color should always be slightly darker than the `$container-bgd` value.
+The semantic naming of this variable identifies its purpose. This color should
+always be slightly darker than the `$container-bgd` value.
 
 - Default value: $gray-300
 
 ## Updating Colors
-Supporting a different color palette is a simple process. The default color palette is supported using the Sass variables outlined in the color guidelines and color maps outlined in the theme's overview.  The following sections provide directions to update the settings to meet your organization's needs.
+Supporting a different color palette is a simple process. The default color
+palette is supported using the Sass variables outlined in the color guidelines
+and color maps outlined in the theme's overview.  The following sections provide
+directions to update the settings to meet your organization's needs.
 
 ### Color
-The OpenBMC Web UI uses Sass variables and maps to build its layout and components. Bootstrap variables and maps use the `!default` flag to allow for overrides. There are three Sass maps created to establish the color palette. These include the `color` map, `theme-color` map, and `gray` map. These maps are used by Bootstrap to build the application's CSS stylesheets.
+The OpenBMC Web UI uses Sass variables and maps to build its layout and
+components. Bootstrap variables and maps use the `!default` flag to allow for
+overrides. There are three Sass maps created to establish the color palette.
+These include the `color` map, `theme-color` map, and `gray` map. These maps are
+used by Bootstrap to build the application's CSS stylesheets.
 
 #### All Colors
-The OpenBMC Web UI custom colors are available as Sass variables and a Sass map in `/src/assets/styles/bmc/helpers/_variables.scss`. The OpenBMC theme only requires a subset of the colors to create the look and feel of the application. Adding, removing, or updating the color variables and map is how the application color palette can be customized. Using these variables outside of the helper files is discouraged to avoid tightly coupling the OpenBMC Web UI theme to specific colors.
-
-The `color` map is not as important as the `theme-color` map. A tight-coupling of the Sass variable name to the color name makes it hard to use the `color` map keys for customization. Using these keys in Sass stylesheets or single-file components is discouraged.
+The OpenBMC Web UI custom colors are available as Sass variables and a Sass map
+in `/src/assets/styles/bmc/helpers/_variables.scss`. The OpenBMC theme only
+requires a subset of the colors to create the look and feel of the application.
+Adding, removing, or updating the color variables and map is how the application
+color palette can be customized. Using these variables outside of the helper
+files is discouraged to avoid tightly coupling the OpenBMC Web UI theme to
+specific colors.
+
+The `color` map is not as important as the `theme-color` map. A tight-coupling
+of the Sass variable name to the color name makes it hard to use the `color` map
+keys for customization. Using these keys in Sass stylesheets or single-file
+components is discouraged.
 
 #### Theme Colors
-The theme color variables and the `theme-color` map consist of a subset of the color variables. This smaller color palette creates a scheme that is not dependent on specific colors like blue or green. Several of the Bootstrap `theme-color` map keys are required to generate the CSS styles. The OpenBMC Web UI `theme-color` map has the same keys as the Bootstrap `theme-color` map with custom values.
-
-The `theme-color` map is used heavily throughout the application. The Bootstrap-Vue components `variant` prop also utilizes the `theme-color` map. This map is the key to customizing the application's color palette. Take a look at the [color guidelines](/guide/guidelines/colors) to better understand default theme-colors map.
+The theme color variables and the `theme-color` map consist of a subset of the
+color variables. This smaller color palette creates a scheme that is not
+dependent on specific colors like blue or green. Several of the Bootstrap
+`theme-color` map keys are required to generate the CSS styles. The OpenBMC Web
+UI `theme-color` map has the same keys as the Bootstrap `theme-color` map with
+custom values.
+
+The `theme-color` map is used heavily throughout the application. The
+Bootstrap-Vue components `variant` prop also utilizes the `theme-color` map.
+This map is the key to customizing the application's color palette. Take a look
+at the [color guidelines](/guide/guidelines/colors) to better understand default
+theme-colors map.
 
 #### Gray Colors
-The gray color palette contains nine shades of gray that range from light to dark. Bootstrap sets a default gray color value for each color variable from 100-900 in increments of one hundred, for example, `$gray-100`, `$gray-200`, `$gray-300` through `gray-900`. Bootstrap does not create a color map for any of the colors except gray. The Bootstrap documentation indicates that adding color maps for all the default colors is scheduled to be delivered in a future patch. The OpenBMC Web UI color theme overrides all shades of the Bootstrap default gray variable values.
-
-[Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
+The gray color palette contains nine shades of gray that range from light to
+dark. Bootstrap sets a default gray color value for each color variable from
+100-900 in increments of one hundred, for example, `$gray-100`, `$gray-200`,
+`$gray-300` through `gray-900`. Bootstrap does not create a color map for any of
+the colors except gray. The Bootstrap documentation indicates that adding color
+maps for all the default colors is scheduled to be delivered in a future patch.
+The OpenBMC Web UI color theme overrides all shades of the Bootstrap default
+gray variable values.
+
+[Learn more about Bootstrap
+colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
 
 ### Bootstrap Color Functions
 - `color('<color map key>)`
@@ -120,6 +176,12 @@ The gray color palette contains nine shades of gray that range from light to dar
 }
 ```
 
-[Learn more about using Bootstrap functions](https://getbootstrap.com/docs/4.0/getting-started/theming/#functions)
+[Learn more about using Bootstrap
+functions](https://getbootstrap.com/docs/4.0/getting-started/theming/#functions)
 ## Adding a logo
-The updated page header can include a small logo. The guidelines for adding a logo and the suggested logo dimensions are currently in progress. It may be challenging to meet all organization brand guidelines due to the minimal height of the page header. The company logo might be able to be set in the primary navigation, but a design supporting that option will be the focus of future design work.
+The updated page header can include a small logo. The guidelines for adding a
+logo and the suggested logo dimensions are currently in progress. It may be
+challenging to meet all organization brand guidelines due to the minimal height
+of the page header. The company logo might be able to be set in the primary
+navigation, but a design supporting that option will be the focus of future
+design work.
diff --git a/docs/themes/env.md b/docs/themes/env.md
index e315109d..fb1a7562 100644
--- a/docs/themes/env.md
+++ b/docs/themes/env.md
@@ -1,6 +1,7 @@
 # Configuring environment specific builds
 
-This document provides instructions for how to add environment specific modifications to the Web UI.
+This document provides instructions for how to add environment specific
+modifications to the Web UI.
 
 - [Setup](#setup)
 - [Store](#store)
@@ -25,14 +26,19 @@ VUE_APP_ENV_NAME=ibm
 
 ## Store
 
-> [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls.
+> [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the
+> application's API calls.
 
-1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file.
+1. If making customizations to the default store, add `CUSTOM_STORE=true` key
+   value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/store`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file.
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+    > .env file. The store import in `src/main.js` will resolve to this new
+    > file.
 3. Import the base store
 4. Import environment specific store modules
-5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` and `unregisterModule` instance methods to add/remove store modules
+5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule`
+   and `unregisterModule` instance methods to add/remove store modules
 6. Add default export
 
 Example `src/env/store/ibm.js`:
@@ -48,35 +54,59 @@ export default store;
 
 ## Router
 
-> [Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI.
+> [Vue Router](https://router.vuejs.org/guide/) determines which pages are
+> accessible in the UI.
 
-1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file.
+1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key
+   value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/router`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The routes import in `src/router/index.js` will resolve to this new file.
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+    > .env file. The routes import in `src/router/index.js` will resolve to this
+    > new file.
 3. Define new [routes](https://router.vuejs.org/api/#routes).
-    > Use static imports (over lazy-loading routes) to avoid creating separate JS chunks. Static imports also helps to keep the total build size down.
+    > Use static imports (over lazy-loading routes) to avoid creating separate
+    > JS chunks. Static imports also helps to keep the total build size down.
 4. Add default export
 
 ## App navigation
 
-The Vue Router definition is closely tied to the app navigation but should be configured separately.
-The Vue Router is responsible for defining the application routes which is not always the same as what is visible in the app navigation.
-This configuration will make customizations to the rendered markup in src/components/AppNavigation/AppNavigation.vue.
+The Vue Router definition is closely tied to the app navigation but should be
+configured separately. The Vue Router is responsible for defining the
+application routes which is not always the same as what is visible in the app
+navigation. This configuration will make customizations to the rendered markup
+in src/components/AppNavigation/AppNavigation.vue.
 
-1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file.
+1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key
+   value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file.
-3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each navigation object should have an `id` and `label` property defined. Optionally it can include `icon`, `route`, or `children` properties.
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+    > .env file. The AppNavigationMixin import in
+    > `src/components/AppNavigation/AppNavigation.vue` will resolve to this new
+    > file.
+3. Your custom mixin should follow a very similar structure to the default
+   AppNavigationMixin.js file. It should include a data property named
+   `navigationItems` that should be an array of of navigation objects. Each
+   navigation object should have an `id` and `label` property defined.
+   Optionally it can include `icon`, `route`, or `children` properties.
 4. Add default export
 
 ## Theming
 
->[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) allows for easy visual customizations.
+>[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/)
+>allows for easy visual customizations.
 
-1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file.
+1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key
+   value pair to the new .env file.
 2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name.
-3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) for details about [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) and [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options).
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+    > .env file. The webpack sass loader will attempt to import a file with this
+    > name.
+3. Add style customizations. Refer to [bootstrap
+   documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/)
+   for details about [color
+   overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults)
+   and [other customizable
+   options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options).
 
 Example for adding custom colors
 
@@ -91,7 +121,8 @@ $success: lime;
 
 ## Local development
 
-1. Add the same `VUE_APP_ENV_NAME` key value pair to your `env.development.local` file.
+1. Add the same `VUE_APP_ENV_NAME` key value pair to your
+   `env.development.local` file.
 2. Use serve script
     ```
     npm run serve
@@ -99,7 +130,9 @@ $success: lime;
 
 ## Production build
 
-Run npm build script with vue-cli `--mode` [option flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires [corresponding .env file to exist](#setup).
+Run npm build script with vue-cli `--mode` [option
+flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires
+[corresponding .env file to exist](#setup).
 
 
 ```
diff --git a/docs/themes/readme.md b/docs/themes/readme.md
index 5557ec2a..bc4d7648 100644
--- a/docs/themes/readme.md
+++ b/docs/themes/readme.md
@@ -1,9 +1,11 @@
 
 # Overview
 
- This section discusses the structure and purpose of the theme files and how to customize the application using Bootstrap theming.
+ This section discusses the structure and purpose of the theme files and how to
+ customize the application using Bootstrap theming.
 
-[Read more about Bootstrap Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
+[Read more about Bootstrap
+Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
 
 
 ## SCSS File Structure
@@ -21,7 +23,8 @@
 ```
 
 ## bmc
-This folder contains Sass helpers and default styles for customizing the OpenBMC Web UI.
+This folder contains Sass helpers and default styles for customizing the OpenBMC
+Web UI.
 
 ```
 .
@@ -54,13 +57,20 @@ This folder contains Sass helpers and default styles for customizing the OpenBMC
                └─ _variables.scss
 ```
 ### custom
-The `custom` directory imports all the styles needed to customize the UI. These are small changes used to reach parity with the OpenBMC Design Workgroup's agreed-upon design. The file naming convention closely follows the Bootstrap or Boostrap-vue library file naming since most of the ruleset selectors in these files are based on these two libraries.
+The `custom` directory imports all the styles needed to customize the UI. These
+are small changes used to reach parity with the OpenBMC Design Workgroup's
+agreed-upon design. The file naming convention closely follows the Bootstrap or
+Boostrap-vue library file naming since most of the ruleset selectors in these
+files are based on these two libraries.
 
 ### helpers
-The helper's folder contains a set of Sass helper files containing Sass variables that establish the custom theme of the application.
+The helper's folder contains a set of Sass helper files containing Sass
+variables that establish the custom theme of the application.
 
 #### _colors.scss
-The colors.scss file sets all the SASS variables and color maps for the OpenBMC Web UI. Any color settings needed to meet company brand guidelines will happen in this file.
+The colors.scss file sets all the SASS variables and color maps for the OpenBMC
+Web UI. Any color settings needed to meet company brand guidelines will happen
+in this file.
 
 ##### Sass Color Variables
 ```scss
@@ -129,14 +139,19 @@ $theme-colors: (
   "warning": $warning,
 );
 ```
-
 ##### Color Resources
-- [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
-- [Learn more about Bootstrap variables](https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables)
-- [View the color palette and hex values in the color guidelines](/guide/guidelines/colors)
+- [Learn more about Bootstrap
+  colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
+- [Learn more about Bootstrap
+  variables](https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables)
+- [View the color palette and hex values in the color
+  guidelines](/guide/guidelines/colors)
 
 #### _functions.scss
-Two functions provide a customized way to set color highlights. The `theme-color-light` and `theme-color-dark` are custom functions used to create colors for the `alert`, `badge`, `card`, and `toast` components. They have also set color highlights for some pseudo-elements like `: hover`.
+Two functions provide a customized way to set color highlights. The
+`theme-color-light` and `theme-color-dark` are custom functions used to create
+colors for the `alert`, `badge`, `card`, and `toast` components. They have also
+set color highlights for some pseudo-elements like `: hover`.
 
 ##### Functions
 ```scss
@@ -174,7 +189,9 @@ fill: theme-color("info");
 ```
 
 #### _motion.scss
-This bezier curves and durations in this file determine the motion styles throughout the application. These guidelines from the Cabon Design System avoid easing curves that are unnatural, distracting, or purely decorative.
+This bezier curves and durations in this file determine the motion styles
+throughout the application. These guidelines from the Cabon Design System avoid
+easing curves that are unnatural, distracting, or purely decorative.
 
 ##### Motion Styles
 ```scss
@@ -208,14 +225,20 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
 }
 ```
 ##### Motion Resources
-- [Including Animation In Your Design System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
-- [Carbon Design System motion guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
+- [Including Animation In Your Design
+  System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
+- [Carbon Design System motion
+  guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
 
 #### _variables.scss
-This file contains all the global Sass options. There are Bootstrap option overrides, Bootstrap global variable overrides, and custom BMC global variables. Read more about these in the [theme customization section](/themes/customize).
+This file contains all the global Sass options. There are Bootstrap option
+overrides, Bootstrap global variable overrides, and custom BMC global variables.
+Read more about these in the [theme customization section](/themes/customize).
 
 ### bootstrap
-The `bootstrap` directory contains all the import references. The references are split into multiple files to support import order based on dependency. Helper styles need to be imported before all other styles.
+The `bootstrap` directory contains all the import references. The references are
+split into multiple files to support import order based on dependency. Helper
+styles need to be imported before all other styles.
 
 ```
 .
@@ -226,12 +249,12 @@ The `bootstrap` directory contains all the import references. The references are
             ├─ _helpers.scss
             └─ _index.scss
 ```
-
 #### _helpers.scss
 This file contains all the helper import references for Bootstrap.
 
 #### _index.scss
-This file contains all the import references needed to support the base, components, and utility styles.
+This file contains all the import references needed to support the base,
+components, and utility styles.
 
 ### _helpers.scss
 ```
@@ -241,7 +264,12 @@ This file contains all the import references needed to support the base, compone
       ├─ styles
          ├─ _helpers.scss
 ```
-The `_helpers.scss` file is an import file needed when building single-file components that require the use of BMC or Bootstrap Sass variables and functions. This file needs to be imported as part of the `<style>` block to support Sass compilation. Although it is possible to prepend these helpers in webpack, it will break any use of imported single-file components used in the Vuepress documentation.
+The `_helpers.scss` file is an import file needed when building single-file
+components that require the use of BMC or Bootstrap Sass variables and
+functions. This file needs to be imported as part of the `<style>` block to
+support Sass compilation. Although it is possible to prepend these helpers in
+webpack, it will break any use of imported single-file components used in the
+Vuepress documentation.
 
 ### _obmc-custom.scss```
 ```
@@ -251,14 +279,22 @@ The `_helpers.scss` file is an import file needed when building single-file comp
       ├─ styles
          └─ _obmc-custom.scss
 ```
-The `obmc-custom.scss` file defines all of the presentational layer dependencies.
+The `obmc-custom.scss` file defines all of the presentational layer
+dependencies.
 
-- [Read more about Bootstrap options](https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options)
-- [Read more about Importing](https://getbootstrap.com/docs/4.0/getting-started/theming/#importing)
+- [Read more about Bootstrap
+  options](https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options)
+- [Read more about
+  Importing](https://getbootstrap.com/docs/4.0/getting-started/theming/#importing)
 
 ## Component / View Styles
 
-Some stylistic changes only apply to a single-file component or view instance. In this case, rather than adding a Sass file, the scoped styles include the styles in the component's `<style>` block. It is required to import the `_helpers` Sass file when using a BMC or Bootstrap variable in the component's `<style>` block. Without this import, webpack cannot  compile the OpenBMC Web UI CSS styles correctly.
+Some stylistic changes only apply to a single-file component or view instance.
+In this case, rather than adding a Sass file, the scoped styles include the
+styles in the component's `<style>` block. It is required to import the
+`_helpers` Sass file when using a BMC or Bootstrap variable in the component's
+`<style>` block. Without this import, webpack cannot  compile the OpenBMC Web UI
+CSS styles correctly.
 
 
 ### Scoped style block using SASS
@@ -301,6 +337,3 @@ You might notice that there is an HTML element, `<h2>`, used in the example. Thi
 :::
 
 [Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html)
-
-
-
author	Derick Montague <derick.montague@ibm.com>	2021-03-17 03:52:33 +0300
committer	Derick Montague <derick.montague@ibm.com>	2021-03-22 16:27:10 +0300
commit	492875622b39cb2cf04bbb9248b6ed0c52ced2df (patch)
tree	665449e11841591a8aae5f4f347a3a88936a2d7a /docs
parent	b0fadef1f96df99ff5eb0637527f04bc793c8d6e (diff)
download	webui-vue-492875622b39cb2cf04bbb9248b6ed0c52ced2df.tar.xz