summaryrefslogtreecommitdiff
path: root/guide
diff options
context:
space:
mode:
authorGitHub Action <action@github.com>2022-03-25 21:22:29 +0300
committerGitHub Action <action@github.com>2022-03-25 21:22:29 +0300
commit6d8f40c4ac31386460f33d0b4522ea8357e03894 (patch)
treedead2423a6c240256a28d4eb9c55cac2b45d71d0 /guide
downloadwebui-vue-gh-pages.tar.xz
deploygh-pages
Diffstat (limited to 'guide')
-rw-r--r--guide/coding-standards/accessibility.html68
-rw-r--r--guide/coding-standards/index.html46
-rw-r--r--guide/components/alerts/index.html45
-rw-r--r--guide/components/buttons/index.html76
-rw-r--r--guide/components/file-upload/index.html48
-rw-r--r--guide/components/index.html44
-rw-r--r--guide/components/info-tooltip/index.html44
-rw-r--r--guide/components/page-section/index.html43
-rw-r--r--guide/components/page-title/index.html54
-rw-r--r--guide/components/status-icon/index.html53
-rw-r--r--guide/components/table/index.html563
-rw-r--r--guide/components/toasts/index.html87
-rw-r--r--guide/guidelines/colors.html52
-rw-r--r--guide/guidelines/internationalization.html71
-rw-r--r--guide/guidelines/motion.html63
-rw-r--r--guide/guidelines/typography.html38
-rw-r--r--guide/index.html43
-rw-r--r--guide/quickstart/forms.html132
-rw-r--r--guide/quickstart/page-anatomy.html82
-rw-r--r--guide/quickstart/store-anatomy.html113
-rw-r--r--guide/unit-testing/index.html85
21 files changed, 1850 insertions, 0 deletions
diff --git a/guide/coding-standards/accessibility.html b/guide/coding-standards/accessibility.html
new file mode 100644
index 000000000..ca27b994a
--- /dev/null
+++ b/guide/coding-standards/accessibility.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Accessibility Conventions and Standards | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/24.7c316dcb.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Coding Standards</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/coding-standards/" aria-current="page" class="sidebar-link">JavaScript and SASS</a></li><li><a href="/webui-vue/guide/coding-standards/accessibility.html" aria-current="page" class="active sidebar-link">Accessibility</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#accessibility-principles" class="sidebar-link">Accessibility Principles</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#semantic-html" class="sidebar-link">Semantic HTML</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#testing" class="sidebar-link">Testing</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#tools" class="sidebar-link">Tools</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#screen-readers" class="sidebar-link">Screen Readers</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#resources" class="sidebar-link">Resources</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="accessibility-conventions-and-standards"><a href="#accessibility-conventions-and-standards" class="header-anchor">#</a> Accessibility Conventions and Standards</h1> <p>It is important that the OpenBMC Web UI meet accessibility guidelines
+established by the <a href="https://www.w3.org/" target="_blank" rel="noopener noreferrer">World Wide Web Consortium (W3C)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. These
+guidelines are known as the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines
+(WCAG)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. 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.</p> <h2 id="accessibility-principles"><a href="#accessibility-principles" class="header-anchor">#</a> Accessibility Principles</h2> <p>These
+<a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/" target="_blank" rel="noopener noreferrer">principles<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+reference a set of international standards from the <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener noreferrer">W3C Web Accessibility
+Intitiative (WAI)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <ul><li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable" target="_blank" rel="noopener noreferrer">Perceiveable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#operable" target="_blank" rel="noopener noreferrer">Operable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#understandable" target="_blank" rel="noopener noreferrer">Understandable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#robust" target="_blank" rel="noopener noreferrer">Robust<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="semantic-html"><a href="#semantic-html" class="header-anchor">#</a> Semantic HTML</h2> <p>Coding the UI using semantic markup is the most important step in creating an
+inclusive interface. The use of
+<a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank" rel="noopener noreferrer">WAI-ARIA<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> can help make an
+interface accessible to assistive technologies. However, there are two critical
+rules to follow:</p> <ol><li>Always favor semantic markup over ARIA</li> <li>No ARIA is better than Bad ARIA</li></ol> <h2 id="testing"><a href="#testing" class="header-anchor">#</a> Testing</h2> <p>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.</p> <p>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 <a href="https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose" target="_blank" rel="noopener noreferrer">create an issue in the Bootstrap-vue
+repo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+Contributing to the Bootstrap-Vue open-source library, when possible, is
+strongly encouraged.</p> <h2 id="tools"><a href="#tools" class="header-anchor">#</a> Tools</h2> <ul><li><a href="https://www.deque.com/axe/" target="_blank" rel="noopener noreferrer">Deque Axe<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector" target="_blank" rel="noopener noreferrer">Firefox Accessibility
+Inspector<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.ibm.com/able/toolkit/tools" target="_blank" rel="noopener noreferrer">IBM Accessibility Tools<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developers.google.com/web/tools/lighthouse" target="_blank" rel="noopener noreferrer">Lighthouse<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="screen-readers"><a href="#screen-readers" class="header-anchor">#</a> Screen Readers</h2> <ul><li><a href="https://webaim.org/articles/jaws/" target="_blank" rel="noopener noreferrer">Jaws - (Windows only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1" target="_blank" rel="noopener noreferrer">Narrator - (Windows
+only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://webaim.org/articles/nvda/" target="_blank" rel="noopener noreferrer">NVDA (Windows only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://webaim.org/articles/voiceover/" target="_blank" rel="noopener noreferrer">Voiceover (Mac only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="resources"><a href="#resources" class="header-anchor">#</a> Resources</h2> <ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank" rel="noopener noreferrer">Mozilla Developer Network -
+Accessibility<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines
+(WCAG)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/TR/wai-aria-practices/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics" target="_blank" rel="noopener noreferrer">WAI-ARIA
+Basics<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://webaim.org/articles/" target="_blank" rel="noopener noreferrer">WebAIM Articles<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://a11yproject.com/" target="_blank" rel="noopener noreferrer">A11Y Project<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.ibm.com/able/" target="_blank" rel="noopener noreferrer">IBM Accessibility<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://inclusive-components.design/" target="_blank" rel="noopener noreferrer">Inclusive Components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/coding-standards/" class="prev router-link-active">
+ JavaScript and SASS
+ </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/colors.html">
+ Colors
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/24.7c316dcb.js" defer></script>
+ </body>
+</html>
diff --git a/guide/coding-standards/index.html b/guide/coding-standards/index.html
new file mode 100644
index 000000000..d088939f2
--- /dev/null
+++ b/guide/coding-standards/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>JavaScript and SASS | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/25.79d3357c.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Coding Standards</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/coding-standards/" aria-current="page" class="active sidebar-link">JavaScript and SASS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/#overrides" class="sidebar-link">Overrides</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/#running-the-lint-test" class="sidebar-link">Running the lint test</a></li></ul></li><li><a href="/webui-vue/guide/coding-standards/accessibility.html" class="sidebar-link">Accessibility</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="javascript-and-sass"><a href="#javascript-and-sass" class="header-anchor">#</a> JavaScript and SASS</h1> <p>This project uses the following libraries to determine the best practices and
+guidelines for both SCSS and JavaScript syntax.</p> <ul><li><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://prettier.io/" target="_blank" rel="noopener noreferrer">Prettier<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://eslint.vuejs.org/" target="_blank" rel="noopener noreferrer">ESLint Plugin for Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>The guidelines we are following are:</p> <ul><li><a href="https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-3-x" target="_blank" rel="noopener noreferrer">Vue
+Recommended<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://eslint.org/docs/rules/" target="_blank" rel="noopener noreferrer">ESLint Recommended<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://prettier.io/docs/en/options.html" target="_blank" rel="noopener noreferrer">Prettier<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>The rules are applied in the following order:</p> <ol><li>Vue rules</li> <li>ESLint recommended</li> <li>Prettier</li></ol> <h2 id="overrides"><a href="#overrides" class="header-anchor">#</a> Overrides</h2> <p>Any overrides to a rule are located in the ESLint configuration file,
+<code>.eslintrc.js</code>, located in the root directory.</p> <h2 id="running-the-lint-test"><a href="#running-the-lint-test" class="header-anchor">#</a> Running the lint test</h2> <p>To test all files for linting, run <code>npm run lint</code>. This command will evaluate
+the syntax of all files and update any code that that does not require manual
+review.</p> <p>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
+<code>format-code.sh</code> that installs node package dependencies and runs the test
+script in your CI.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/" class="prev router-link-active">
+ Getting Started
+ </a></span> <span class="next"><a href="/webui-vue/guide/coding-standards/accessibility.html">
+ Accessibility
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/25.79d3357c.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/alerts/index.html b/guide/components/alerts/index.html
new file mode 100644
index 000000000..dc8da3915
--- /dev/null
+++ b/guide/components/alerts/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Alerts | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/17.067a94f4.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" aria-current="page" class="active sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="alerts"><a href="#alerts" class="header-anchor">#</a> Alerts</h1> <p>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.</p> <p><a href="https://bootstrap-vue.js.org/docs/components/alert" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap-vue alert
+options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><img src="/webui-vue/assets/img/alert.9abfc445.png" alt="Alert examples"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>alert</span> <span class="token attr-name">show</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This is a warning message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>alert</span> <span class="token attr-name">show</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This is an error message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>alert</span> <span class="token attr-name">show</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This is an info message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/" class="prev router-link-active">
+ Overview
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/buttons/">
+ Buttons
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/17.067a94f4.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/buttons/index.html b/guide/components/buttons/index.html
new file mode 100644
index 000000000..a3f1a070c
--- /dev/null
+++ b/guide/components/buttons/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Buttons | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/15.9a576a5a.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" aria-current="page" class="active sidebar-link">Buttons</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="buttons"><a href="#buttons" class="header-anchor">#</a> Buttons</h1> <p>Buttons are used to perform an action. The main buttons in the application are
+the <code>primary</code> and <code>secondary</code> buttons. Buttons, like all Boostrap-vue components
+can be themed by setting the <code>variant</code> prop on the component to one of the
+<a href="/guide/guidelines/colors">theme-color map keys</a>. To create a button that looks
+like a link, set the variant value to <code>link</code>.</p> <p><a href="https://bootstrap-vue.js.org/docs/components/button" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap-vue
+buttons<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="icon-only-buttons"><a href="#icon-only-buttons" class="header-anchor">#</a> Icon only buttons</h3> <p>Add <code>btn-icon-only</code> class to the button and add <code>title</code> attribute to get helper
+text on hover over the button.</p> <h3 id="enabled-buttons"><a href="#enabled-buttons" class="header-anchor">#</a> Enabled buttons</h3> <p><img src="data:image/png;base64,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" alt="Button examples"></p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Enabled Buttons
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Primary with icon<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Delete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-icon-only<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-trashcan</span> <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="disabled-buttons"><a href="#disabled-buttons" class="header-anchor">#</a> Disabled buttons</h3> <p><img src="data:image/png;base64,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" alt="Disabled button examples"></p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Disabled Buttons
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Primary with icon<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Delete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-icon-only<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-trashcan</span> <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/alerts/" class="prev">
+ Alerts
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/file-upload/">
+ FormFile
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/15.9a576a5a.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/file-upload/index.html b/guide/components/file-upload/index.html
new file mode 100644
index 000000000..043e88c1f
--- /dev/null
+++ b/guide/components/file-upload/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>FormFile | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/18.88267105.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" aria-current="page" class="active sidebar-link">FormFile</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/file-upload/#example-of-form-file" class="sidebar-link">Example of form file</a></li></ul></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="formfile"><a href="#formfile" class="header-anchor">#</a> FormFile</h1> <p><code>FormFile</code> is a custom component wrapper around the Bootstrap-vue Form File
+component. The purpose of this component is to upload files to the BMC.</p> <p>To use this component:</p> <ol><li>Import it into the single file component (SFC)</li> <li>Add the <code>&lt;form-file /&gt;</code> tag</li> <li>Add the optional <code>id</code> , <code>disabled</code>, <code>accept</code> and <code>state</code> prop as required</li></ol> <p><a href="https://bootstrap-vue.org/docs/components/form-file" target="_blank" rel="noopener noreferrer">Learn more about the Bootstrap-vue Form File
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="optional-properties"><a href="#optional-properties" class="header-anchor">#</a> Optional properties</h3> <ul><li><code>id</code>- Used to set the <code>id</code> attribute on the rendered content, and used as the
+base to generate any additional element IDs as needed</li> <li><code>disabled</code> - When set to <code>true</code>, disables the component's functionality and
+places it in a disabled state</li> <li><code>accept</code> - Set value to specify which file types to allow</li> <li><code>state</code> - Controls the validation state appearance of the component. <code>true</code>
+for valid, <code>false</code> for invalid, or <code>null</code> for no validation state</li></ul> <h2 id="example-of-form-file"><a href="#example-of-form-file" class="header-anchor">#</a> Example of form file</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form-file</span>
+ <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image-file<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>.tar<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form-file</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,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" alt="Formfile example in firmware"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/buttons/" class="prev">
+ Buttons
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/info-tooltip/">
+ InfoTooltip
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/18.88267105.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/index.html b/guide/components/index.html
new file mode 100644
index 000000000..36151e8df
--- /dev/null
+++ b/guide/components/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Overview | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/28.e8d46e0f.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="active sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="overview"><a href="#overview" class="header-anchor">#</a> Overview</h1> <p>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.</p> <p><a href="https://vuejs.org/v2/guide/components.html" target="_blank" rel="noopener noreferrer">Learn more about Vue components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/unit-testing/" class="prev">
+ Unit Testing
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/alerts/">
+ Alerts
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/28.e8d46e0f.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/info-tooltip/index.html b/guide/components/info-tooltip/index.html
new file mode 100644
index 000000000..18707a001
--- /dev/null
+++ b/guide/components/info-tooltip/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>InfoTooltip | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/19.781066f3.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" aria-current="page" class="active sidebar-link">InfoTooltip</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/info-tooltip/#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="infotooltip"><a href="#infotooltip" class="header-anchor">#</a> InfoTooltip</h1> <p>The <code>InfoTooltip</code> 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.</p> <p><a href="https://bootstrap-vue.org/docs/components/tooltip" target="_blank" rel="noopener noreferrer">Read more about the Bootstrap-vue tooltip
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-vue extra-class"><pre class="language-vue"><code>&lt;info-tooltip
+ :title=&quot;Title&quot; //should be translated
+/&gt;
+</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABzCAIAAAD/mgCTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAABAfSURBVHhe7ZwJdFNVGse/+9KSNnRJ29AWGJFlDkOrDHpGGIZdBRFHhyOboOOgcOZAHcHhUECwyFo2URFHxGVAZURlZ6wwHmndUXFB0FFAWhQLNF0oNCRNE/Lu/F/uIxO7JTXJS6T52xPfve++l9zf+7Z708IuXLhAoRfnXJIkg8GgtkMpm80myzJjTG2HUtrhw3xiYmLUdih18eJF8XZqO5TSCB+EKUFqI5QCOG3YQdrhuyzlFz7NDCdCJIzXHxP2jQ/gYmNj9Xq92m4d8jP/+MaHjFlTUzNlyhSTyaR2Xday2+3Z2dkzZswAPrWrafnGB9MrKSnJysrSJm+GVzA3p9M5cODAt956y+Vy+QxZfuH74YcfunfvnpmZibtf3kEQE4SrDR48eOfOnaIAUk80IUn9vx/CvS5vdpCYI6S2fakF+KJqqCi+gBTFF5Ci+AJSFF9AiuILSFF8ASmKLyBF8QWkKL6AFMUXkKL4AtIvEp8/+8DaKPz4OOcul8uf3SEII81m85kzZ2pqaiIBYvDxgYLVaj3rh+rq6jDY4XDo9XqDwWC325vf4AU7jFyxYsW2bdtuvfXW8+fPqyfCpxZsl2ZkZPh84MABO+rdu3ePHj2cTqfa25gA4r333vvqq6/Gjx//wgsvoGfSpElbtmxJTEwUA8R7eZskbpiUlLRv376uXbuuXr161qxZ7du398dmWySxXbpr1y5/HCL4+Gw2G3CMGjVK7Wpaubm5jz766JIlS/Ly8tB8/PHH58yZk5aWhmPcB06Kg5iYmHbt2olpAF/btm0LCgp69uy5cOHCRYsWhR1f8L++0Ol0RUVFeIULo4k5d+jQYdiwYTjetGkTHoAkKREjPj4epgdbgx2VlJTgIW3YsCE1NRWn4KS4avny5Q8++OD06dM3btyYkJCAfsjz/Hw+SG0UZOuD8MQQ17w994YbbigsLMRBvcsBBfgA69y5c7gqJSVFkEVMBNxTp07heOLEidu3bxcejXviktdffx3WB9ODATZqfeJdfrZVtsj6gp868OnhgJgYBLsDCHifOIUHYDKZxCkILPD5MD45ORnsPNMGUBDEK5pIJjiAfH5tiAuRhURehiorK8UdQqpQFS6YDIQ541XtcneKHiH0oAkhjSDG4UBgQoCLi4sTAyA8AHgADLMZHDDM6upqo9EIq4SzIw7cf//9oInsjBuqg0KgUOHzU8gzffr0+fHHH+GqQ4YMqaioGDRo0OnTp0tLS8XXygiXCAU4i6SMwR6m3kLFU1tbC2rFxcXz58+/55577r33XiQixIRx48bhcnVcCBRmfHBYBF/MH8cIOngFqffff3/37t2C1IEDBxCGEDr37t3b6Pf0MElgwvg777wTzfz8/AEDBtx0002ffPIJmqgB+vfvL+4cCoUZn5CIehCK56NHj8IAR48eLVx12bJlt99+O3CsXbsWHu0Z6RF8FnXP0KFDYYC4EMeHDx/ev39/3759USFiwNatW5sy28AVEfi8BUYoX5B8BClkFWSY9PR0JN967NBEyENeGjt2LJrPPvsszBbJCiNxFQpsrE/QjwEoG4SBB10Rhw+qZynNGA7wYXmTlZWFY5TceEXcFILDfvrppydOnEBnr169WhE+/wUH79KlC/IyjgEIoL2FtIuzONWtWzdkYfcVQdYvGx/kyScImseOHfvOS2ii8+TJk4iPAnHQ9YvH5zGrm2++GQkErx6NGDHilltuQScWKoiGYlhwFen44IPqUWPCyhphThTGiICoFhHy4LMeoabB8gPLL4wUlwRXEYrPk2SBBsceiU6P4JLffvvtkSNHcDxp0iSwxpg2bmElgyZKFhRDzT+DQKQFvhZ9egzG+sxjL5mZmairxTLWe/mFYRACX1lZGSpq9IwZM2bu3LlYt4jBsEqsN9avXz98+HCf2yI/W1rg8zhOQ/OBAEvEdbHdAgFKVVXVZ599huPVq1evW7fuVbdE8SEGi4yBG6K+Q8nyzTffoIkaG867atWqpUuXYq0CvhMnTkQh2cxiOUCFHB/YwYOQ+xCJAKgeQWFox48fR35EEScIYgxKX8wca2E0c3Jy7rjjDpgeRuIURiKcWSwWEAQg0MTga6+9FnzxFjieNWvWQw89NHLkSLPZvGPHDqw9PNuFQVfw9/vqCU8ed0hJScH84Vmg6X0TdAKZ0WjEKxB7x3gAwjsiIWA8VFJSApcEMgzGK87CGD2DkX/R07NnT6w6RI+4BIUL2MEARac/gv2GbbO+UQnDwQFu1fAOnrOAIqzPI9ijpy7BtUgImI+YFcB52Amh07NLKIQb4pKWfuYW4dMi9gGKOxk2PhPP2XrsICBre0kYgB7cQXCsxw7CKViZOtotJN+WsmuptMB3GSuKLyBF8QWkKL6AFMUXkKL4AlIUX0CK4gtIUXwBKYovIEXxBaQW4MP6MbhS7xsMqXcMntT7+pJfOy7FxcXZ2dlqO3jCkt5oNPr/WRsV59xisdhsNrUdDPXr16+wsFD+6e83NSrf+CRJwodbvnx5SkqKz9v5r7i4uEOHDm3evNlkMjXca/FT+DxVVVUjRozo37+/s9nfBfZTeJZ1dXWdO3eeMGEC8Km9Tcs3PnzEmJiYFu04+q8FCxYsXrwYBPEWaldLVFZW9sADD6xZs0ZtB0+wGODz6Rm+8UFBNDqPcE+dTmcwGPLy8vLz89PT01tqg2A3efLk559/3uFwwGQCDAIN5c8N/cIXInnsesmSJQ8//LD/BHGh2WyeMmXK+vXrAQ5uG3R2fko3b9489VBzYc5ip37o0KGwxIKCAqD0hyDYzZgx48knnwwvOyic+CDMHKYEBCCIg71798Kdm8cBn4XdRQI76GemvCBKEESoXrRoEYJgeXl5UykPw8Bu6tSpYfdZj8KPDwIFILNarXAFQVB891ZP8Nnc3Nynn346QthBYXZej4QNAsqNN96IJrw4Pj7eOw7C7u677z7UKJHDDooI6xMSBOHFCxcuXLZsWUVFhfBi4bM5OTlPPfWU3W6PHHZQBOGDwEV48dy5c1euXAkvBiz47OzZs9etWwd2cOrIYQdFivN6JGwQ1K6//npUM3v27Jk2bdpjjz0Gn400dpB2ZbPg4uf8MRIVtV6vP3DgwHXXXQea/rOD/WpGWSN8mI/FYoEFtWhiGIxCGlc1Vco0FEaK3yFS2yGWdvgQ0bA49bmoEKtrD2OYodJS/vNLLpcrOTm5pcvnn61ISR2ghB+dRHGxlKinpHgyJig/yW1ZQrzSGSOpYyJKEWF9Mid9DCUaqPwc/8FMx0qp+Aw/fRZXUWoCdf8Vy+pE7dOok4lZasnuVCyxqRigsfWFGZ9iUESZRqqy0NNv8P1f88+PU1W1u9fjxoyMSXR1FzbgKvrbbax9Kis/r1zYKMFWhA8I4JJpybT7Iz77OX7Oyq126vMbNn4wXfNr1iVDAXe6ir44zre8Qx8f4TE6lpLIZ46Rcm5hFTV00dUIwdaCT2Gno3g9LdgkP/Vvnm5kt/Wh3LFS185UZyGrg7DqBR2JkSGO4hPpbCXPf4Xv/JBOlNHEYbQ2hzldrA6O/FOCrQIf2IFLpolynpA3/Ic6ZdCaqezm61iNjWzuP90z6BWydiePkdh5m+LI+lgyJVPhF3zei/zrEzR2IK3JkZwucrope3T5Z16wg9KS6NFt/JUiyurEt+ZJN/Ri5eeotk5hEdeGqmqo9/1yn2ly0WFuiCUmkeMinami32ezgsVS9yv4zv30yDaeGP//G4ZFYcAHwbg++Jqv3cGTE/mGmVKPjlR9QaEg7CghjrZ/KJ8op1OV7MvvuKRTUy0o1VgVM3xzqS4jlVZtkd8+xI1t3XcMk8KADyDaxNLGfRxpYeZo6dpu7CziBwrjSz6I6uT2fmzcIBp/PY3qz5zOS0nYPeZCLSUYaNGfKSWRLfkXh48jDoTLALWOfYxJMJ9TVTQk19U5kz58TIfQhiWZh50AERuDElpZcWCVjOjGvVYd6ER1Havjf11DhV/Km2ZLN17DzlnVO1zmsQ9wEPU2F3FLLZt2m3RRrs8Ox4ho8F+DnsW1YS5ZucTDDsIAdMbr2ZhBXB/LdnzIsR5GZ1gMUGt8yvtJ9M5huXMGy76Sw7K8BQqoZt78nL+4T960T97+gVzrUGytIRpUiIN6gi//3swqzytXhUWa4gMEzLP8LJmrqVO6nJEiwY7qqY2Ontkjz3yGFr5MT+yiC3beqCOiZjYlsW4dqOysstQD4rBI27dFuaejmlqy2OHCEha5yp9QeXsmkVOm0QOk2eMoJYFiYxkioHrCSzBSLJORfzqmEkKnxdY4Yg2k9dvi/VDcORxKcdcmpn5cg5PCne8dxhZMluLbcLmRr9tUKRdKFB9HdQ5S1h5qt9bSGp+LU1sswvQKREwbb+8d10QGqLaSpVrJD01REdBlF1lrKQ7rkzbk725qsKUtPjidi5INlBCPgCXXwOmaCPng2JxFudd8DiedrCCjgZIMTMm+4ZCm+AAElUpaCmWmUmmFZK5uNuTDxrwMs17yRWF4plrZHGyfSu2MLGR/Lu5DWjsv5HLS8N9JJ8zyF8cZwr+3wAhAkZ0VrO41Bg507qbwa2WMeyQiwNsHud3JunXkpmTlqYRFmuNjdNZCE4awDCN7YpcMXwYslYt7C8vm4DY7t9a5PxmjWjt+eK2DA5/qze5dwvNWvvV9LEj4hMEMhTeuVfxdc2mNT/FfF3VIoz/9gb4vY2t3y+kpSj/mD4bpRlr6Mv/LKj7xEbnOyZBeZv2T7l7Fl27Gsk1JtQJ0cgK98Qk/cJT36sqG9FJ28MOlMDgvEKA6mTRcujKdryvgRV9yU5I4gaJZ2VV+9zO+51N+7BQdLeX7vuBvH+AfH1EKPWFfYPejmea/pJjkiklSjTVspgeFbbu0nZFee5dP/wdPS+LrpkswIqy9YJhXdGjsmXIqMxPSqzGRvjfzP+bJ561s/l0s51ZWVfMTdq1ltxlzRtKc/5K88lXqaKK8u2jycKnGpuzoXQpyXuLKln2qkV4t5Mtfo+9K+eQRlH+PZHfU/8ajFX3XgUNjW3pit7x4E0+IZ32zaPHdUq9sqrugfBspfsMPyUQfS3GJVHqK5z7L3z1M5nP876PYqskSUlDDb4taCz5IsUGi9ib66Bs+6zl+tJQqK3iPbmzMQPptF3ZlOi5TNhcOFvMdH9Ch73hyorJJM+cOaeQAdrpcuUPDkNeK8EHIFohoqYnKGm7Hfl50kL91kCqr3Fy9ZEyiAVezEb2VzWdjAoPdQQ3ZQa0LnxDMEE6KShjJ1GJDaKP/nuQnK0nihKTcsxu7qpMS+xLjGOpBsUXYKDuoNeKDQBDCShbFXVyMez8mVrFNrMZqHcoPBohfs2oKnFArxectgdJbzSPzlsb4NHqbFgmw6v1ErLSzPrxRXV1dqO1ClmVYX8N/4SpE0ggf5HQ64VlqI5Rq9F8TC5E0wid+qxlS26GU+xdSNZJ21qfZrLR5SELa4bssFYmZ9xekKL6AFMUXkKL4AhDR/wBX7Gu7ecOiBAAAAABJRU5ErkJggg==" alt="Tooltip example"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/file-upload/" class="prev">
+ FormFile
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/page-section/">
+ Page section
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/19.781066f3.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/page-section/index.html b/guide/components/page-section/index.html
new file mode 100644
index 000000000..6eed604bc
--- /dev/null
+++ b/guide/components/page-section/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Page section | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/26.c82c48a9.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" aria-current="page" class="active sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-section"><a href="#page-section" class="header-anchor">#</a> Page section</h1> <p>The <code>&lt;page-section&gt;</code> component will render semantic HTML. By adding a
+<code>:section-title</code> prop to the <code>&lt;page-section&gt;</code> component, the localized text
+string will be rendered in an <code>h2</code> header element.</p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Example: `src/views/AccessControl/Ldap/Ldap.vue`
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageLdap.settings<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue" target="_blank" rel="noopener noreferrer">View the page section component source
+code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/info-tooltip/" class="prev">
+ InfoTooltip
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/page-title/">
+ Page title
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/26.c82c48a9.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/page-title/index.html b/guide/components/page-title/index.html
new file mode 100644
index 000000000..299ea7162
--- /dev/null
+++ b/guide/components/page-title/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Page title | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/27.f4d5e099.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" aria-current="page" class="active sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-title"><a href="#page-title" class="header-anchor">#</a> Page title</h1> <p>The <code>&lt;page-title&gt;</code> component will automatically render the page title that
+corresponds with the title property set in the route record's meta field in
+<code>src/router/routes.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/router/routes.js</span>
+ <span class="token punctuation">{</span>
+ path<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'login'</span><span class="token punctuation">,</span>
+ component<span class="token operator">:</span> Login<span class="token punctuation">,</span>
+ meta<span class="token operator">:</span> <span class="token punctuation">{</span>
+ title<span class="token operator">:</span> i18n<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'appPageTitle.login'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre></div><p>Optional page descriptions can be included by using the description prop
+<code>:description</code> prop and passing in the i18n localized text string. Translations
+are found in the <code>src/locales</code> folder.</p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Example: `src/views/AccessControl/Ldap/Ldap.vue`
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-title</span> <span class="token attr-name">:description</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageLdap.pageDescription<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue" target="_blank" rel="noopener noreferrer">View the page title component source
+code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/page-section/" class="prev">
+ Page section
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/status-icon/">
+ StatusIcon
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/27.f4d5e099.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/status-icon/index.html b/guide/components/status-icon/index.html
new file mode 100644
index 000000000..033ccbf48
--- /dev/null
+++ b/guide/components/status-icon/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>StatusIcon | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/4.e088be67.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" aria-current="page" class="active sidebar-link">StatusIcon</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-default-status" class="sidebar-link">Status icon with default status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-success-status" class="sidebar-link">Status icon with success status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-info-status" class="sidebar-link">Status icon with info status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-warning-status" class="sidebar-link">Status icon with warning status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-danger-status" class="sidebar-link">Status icon with danger status</a></li></ul></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="statusicon"><a href="#statusicon" class="header-anchor">#</a> StatusIcon</h1> <p>The StatusIcon component is used to add an icon that represents one of the
+following statuses:</p> <ul><li>success</li> <li>info</li> <li>warning</li> <li>danger</li></ul> <p>To use this component:</p> <ol><li>Import it into the single file component (SFC)</li> <li>Add the <code>&lt;status-icon /&gt;</code> tag</li> <li>Add the optional status prop and set the value to one of the statuses</li> <li>Add the translated text to associate with the icon</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code>import StatusIcon from '@/components/Global/StatusIcon'
+</code></pre></div><h2 id="status-icon-with-default-status"><a href="#status-icon-with-default-status" class="header-anchor">#</a> Status icon with default status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span> <span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAnCAYAAAB5XdqFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAS0SURBVFhH1ZhJTxRbFIAPIAiKIFMkYhAIG4ZIGARDJHGByLAQEkwMG/8crCAhhHlw4woCMUAYFsgCkFkZVSbhvfedVEF3VXVT3dUxzy8hTd+qrvvVPeeee6ui/vkP+QuINj7/90RsRL98+SIrKytyfHwsMTExkpKSIgUFBZKWlmac4Y2wRH/+/Cl7e3vy8eNH2d3dVbE7d+7oZ1RUlJ5zdXUlv3//lsvLS/2srq6W4uJivYFwCFl0YWFBJicnVTQ+Pl7lboMuLi4u5Pz8XJ49eyb5+fmSk5NjHHWHa9EfP35IT0+PHBwcSHR0tCtBK6Ywv62oqJDnz58bR27Hleja2pq0t7fLw4cPVdIMb7iQFowu1/rw4YM8ePDAOBKYW0WXlpZkaGhI4uLiPAtaIXdjY2OlpaVF0tPTjVZngpYnRnJ0dFQvFmlJIAVIhd7eXk2pYAQU3dnZkY6ODg0Pf74QBBcZcyvcPLJUkU+fPhmtzgQUZeKYOekLguQY7ZQeryBLWi0vL8vMzIzRasdRdHx8XJPdGm4kT05O5MWLF/L69Ws9HglZSEhIkImJCeObHZsogl+/flUJqyjJX15eLqWlpVoH3717p6Gj3Sv0Rd+Dg4NGiz82UZZCRJ3qJOHe3NzUUQWWx/r6ei38XmUR5fpnZ2eOUbKJMvtYDq2jCVyISdbX1ye/fv3StuzsbKmtrdXK4FWWwVlfX9d8teInyuz7/PmzduoE8hzb3t6Wrq4u+fbtm7Yj29raqnnmRZbrm3sDK36iTBanSeQLx5il7JIGBgbk6OhI29lsNDQ0yL179zzJErXDw0Pj2w1+okgEk/SFkUWyv79f9wGQmZkpdXV1eiMU8nAg/Cw01t/bcjQUEGIX1dnZKVtbW9r2+PFjrQas3+HIMqLfv3+3RcWTKDCyTKzh4WHtAJKTk6WpqUkSExPDkiX9rCufZ1FAlvCTBmZ+UbrevHmjORuKLIJ37961paBtMoULskww0mBjY0PbyFnSIDU1VUfJDSzPGRkZej1fbCOKbLjCXByhkZGR65wl/KRBUlKSq5GlPLHqUct98RNlyLOysvSuwoUOyFmWwv39fW1DsrGxUSeYU/75Qt/UYyt+ooxISUmJ6zAFAlmWWRaF1dVVbWNjzKLw6NEjndFOsqbk/fv3jZYbbKHnRP68jCogS6jHxsauZZlYzc3N+ukkStgpb0+fPjVabrCJchJ3HYntG7Knp6f6KGOWLr6z8bDOalM8NzdXP604PjOxMeju7tZUcLtSBYObRrqwsFDm5+c1WhR2XziH+tvW1ma0+GMbUWBCFRUVec5VE5ZFRKanpx0lgdLGljEQjqJQU1Nz3UEkQI4IWSUJKJKvXr3SehuIgKKE6v3793rhSMlaQZJ8ZVAqKyuNVmcCigJ3+PbtW/3fy9YtECy7CN4mCa7elLCdY2kkRDx2OOWYW+iOCCHJk0FZWZlxJDiu3z3B7OysTE1NaSds8UIRNgWprZSgly9fBs1JKyGJAs9Uc3Nzsri4eC1MPgcqY8xyqgeSeXl5WtBDeTlmErKoCds5JHgHwKtILmOV5TiPKFVVVfLkyRNdGrmxcAhb9E8T/qz4w/wloiL/AiewfGYa++arAAAAAElFTkSuQmCC" alt="StatusIcon default icon example"></p> <h2 id="status-icon-with-success-status"><a href="#status-icon-with-success-status" class="header-anchor">#</a> Status icon with success status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,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" alt="StatusIcon success icon example"></p> <h2 id="status-icon-with-info-status"><a href="#status-icon-with-info-status" class="header-anchor">#</a> Status icon with info status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAkCAYAAAD/yagrAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAVESURBVFhH1Zh/bFNVFMe//b2u29rNdWWMgcvc3CJoMCYuoH/4h4kEMfCPEoJR4w8MMxpFMYSIxEwxUZxGiehiQpAQjInGqImIEDVkRgXU6RICYTKQjc2127quP9979Zy7t6zre699bVHiJ7nrdtrd++2555x77rOkCfwPuCJCv/0lht//TMFmtcCi2hhZSaO60oYNd3rm2YuhaKGj4zK2vT+O0JSC88MSQmEFFqv6pgrP7HJY0Npoh8tpwUN3VeLuFW713cIoWOgICezYNIzpRBpejwVW8qLdBlgt5E0dtyk0vSTTqwLEEgqGgzK+fj2AjhtcKC/L+mY5MC00kUrjtYNh7PsqAocdNIrbTF4tGJZxa7sLe5+tQaCaJjOBaaG3dV7GUFCC22URsVgKvGKUvOursOKLV+tQf01+sXmFSnIa7fdfEr+XUZxZ9PZXRaHkicRnpuPY5JGLJO0S79SBF/xYudSlWvXJKXQqqmBj1xj6zyfhdlp1Y3AWFsls3eBFSkrjm5NxnDqTzCuWhdZUWvFJF3uWgt2AnEL3H45gxwcTqCzP7UkmElPQua4KW+6rEn9Pk2eb1/+FumrjxWfhJPN6rDjRs1C1aDFMuwEqOZvfCJoSOUtm6HKYmMXtsmJsUsFTb4dUixZDj656bkSIzbd1s/DW80Q7H/RRSQK++zWOIyfiIvnMwP+flIDjexagzqfdBV2hA0MprH5+lLKbvFRAhvNJxDHHNZWnLcsT15nw52NUm++9w4NXHqtWrXPobv2uA5MiIwsRyXDZctOWuxy89eZFMhxevN7giCSSMRvDGLXZzK/CyTA2KYsRpKOURzROR1GBOOkL/nw6SSETUy1zaIT2/pHAqbNJcfqYgUWuu70cP+6tx7E3F4jxw7v1eHxtJaapEhQChwzPx8dzNhqhF/+WMBKSTZ8+MmkJUAlqrLOjbbFDjCUBu6iJUuFOFdufMCO00ASyU4icuSjh6MkYDv80t2UyNSLF4KCE7xtIimM2E8MYNQsnTm9/Ak++FcJL+yZUa/HwF+87l6IDY/52lCx05jBIixDgVq5U2JNeala4dcykZKHMTGnhV9VQAtwEtTU6RHnLRCOUaxh/+GrBCdi2WFtyNEKXX+dEK31Q0im6/wUyOUmvhmuEti1xYlmTE8mr4FU+grnbWlSrPes1QpmKcjKnZ87rfHCY8PnOg5uKWSRuMlQ7DzPw52+53okVy8pUyxy6Qnc9Wi1OpnxZzCIb/DYRLjc1O7G0iWqVit9L9hYnbmx24OZWZ16x7BS+bLdf61Qt8zFs817+cAI9n0dQRQ2tERMRBe9tqcGqjnLVYkztmgtYWGt8LnNs8o6cPdigWuZjqGLrei/iybRuJ5MJ956lwr4aomv0oRf9qkVLzqvI6cEU1m4fFTWST4xsOKaWtzjQVO/IWdKcdisOHYvo3uN5+XA0jYdXV2DHAz7VqiWnUOaz41E8805IdOp6PQCLNVN3jR428LW5qd6Oj3b66ZJnfL/KK5TZ82kY23sm0EBlo5A+NRf8BCVOXRI3Qf37G3R3LBNTQpnvf4ujsztIDXEaHrdhaJuC455XbaR28MjugGrNjWmhTN+5BLo/nsKXvTH4fdaCvcsrhaMzV+OuR7y4Z6VHfSc/BQlluIwcPRXHE90h8QzJV8mdDldAmox+iDCmwbNyReBXHnzvH59SsG1jFTatqUKgxjge9ShYaDZPU6INXpZEm8dPVnjw07sKt0XUYL7f81bv3lyDFuqKiqVkoZlcGpNxYSQlrr2L/HaRzcU+9cvmigr99wD+AWcAYQB6puA5AAAAAElFTkSuQmCC" alt="StatusIcon info icon example"></p> <h2 id="status-icon-with-warning-status"><a href="#status-icon-with-warning-status" class="header-anchor">#</a> Status icon with warning status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAIAAAAnX375AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAQPSURBVFhHvZdfTBxFHMdnZvd2j+M4/hRtU4xKJXDEpvBiamKbNjE10Zj6atPHmj6Aib40fZIno/jsn5g04cGQ+u9BTTQanvzTNvWlqYoE1BgBoQWEE7jb278z/mZnbuG4ub3FFj7Z3M7vl5357u83v52Zw4wxtL8Qed9HdhFl+c9L/voP0CW8KtBy6tCFdNfL0kxAA0kWbLpL46WZIUQRrpcRhsQYuSdvaek+rGVCb13iJJ2F9+zZkcBaxSnp4dFti1AQDcAcpHc8nu5+wzhwVrpUqCWpt1L+Y9hd/BRp9YNTwQL+Tkbn2eajX0hXDQrJwJrZuJnn0RCEa2JqCIzHfJTqPJUd+FbZe2cIgTW1fiPP3f9LD4BeWEfeP98Vb5+UrmqqJIPSdPH2CegAyaynx4OoXPWAviSFvNVrmz+dkq5tVEk6f79J7UJtgURwGQhCa8LExMSIUQXCWL+3ps5Ju8KWpLvycXn2A14vMfmkSG893XbCajtp547PMk+6lfAMa8grfB0Ub0lXyJakNfUiMWP1BNQWd+atiEYMMEGBve4svCvtECnpLV+lvmjeZyC99vwYdRelHUmW59+KKZl7gY+Jkbs8Lm0hSe155P8bUzX3CARanr4sDSHprnwUlOb2TnIHXJJRD8p9L7IqgIEZ1FHpV2FyScwR5p6BYWX4TDRl+ew1EFFQ/Fm090UyTCH1lkNjfyTDdVEzHwkNUT6wdsaultVU3jLauBMA42u5p0Sb98dIg/JJpMofs5m/QZ1Fav8lMtYQvhcwZB6+KEy+RfsbPxYnn2VeIUndMgqra9gifIdKAgTDXNRxRsbEo9Rzx4n5KOwSSYB1EVZ/fiXPK4P9p1e2o4nRs4PRQa0hPFCf/yZBhJgdmJB2JJnpG4vf/CLgQEUy3ebDw8R8gB+uGgIhtvdjrUOakSSQ6RuBd48HIgO9lsGbmZ53mvMfYqM1PlYeoo+Mw0NYb5Gu7ZLGQ68SAzdIF4NZ7CLGg9DU259Od70SUwF8migyDj6z4yy/JUn09uzAdf4ZxKhCSVdSASN6a99sG0AFRs39n8h2hZ3nWGfpaumX8/CVKz8YeJbouRQcxolJ3bvu0lfquoV8wo+DsseuGIdeks4KiqOzPfe69dtr4mhZi0gXHzI8TSkAPShpiprzb5uqv0fqPwje2kRp8jnmByC8K2AwSLyeyzd1j6Y6X5DeatSSACxJzvyovfA5MXhAQMzaJMcI9cyu85ne97GWDV0K6koKvNUvrelzgV2USQZVIR+mlgO3sMW/16b23BPTop5jaCApCJwFa/J5pGWYX6Dl31nggwBMJE5lSfoIJmmSfiyTH8fKya8hkWQECyyvMMHcO8xfw6mDpKlHbztdP99qdid5H0DoP4bpoyBCzuShAAAAAElFTkSuQmCC" alt="StatusIcon warning icon example"></p> <h2 id="status-icon-with-danger-status"><a href="#status-icon-with-danger-status" class="header-anchor">#</a> Status icon with danger status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,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" alt="StatusIcon danger icon example"></p> <h3 id="example-of-appheader-with-status-icon"><a href="#example-of-appheader-with-status-icon" class="header-anchor">#</a> Example of AppHeader with status icon</h3> <p><img src="/webui-vue/assets/img/appHeaderWithStatusIcon.8a62f412.png" alt="AppHeader with status icon example"></p> <h3 id="example-of-event-logs-with-status-icon"><a href="#example-of-event-logs-with-status-icon" class="header-anchor">#</a> Example of Event logs with status icon</h3> <p><img src="/webui-vue/assets/img/eventLogsWithSatusIcon.52c6d53a.png" alt="EventLogs with status icon example"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/page-title/" class="prev">
+ Page title
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/table/">
+ Table
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/4.e088be67.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/table/index.html b/guide/components/table/index.html
new file mode 100644
index 000000000..64453b07f
--- /dev/null
+++ b/guide/components/table/index.html
@@ -0,0 +1,563 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Table | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/3.4aa24478.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" aria-current="page" class="active sidebar-link">Table</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#basic-table" class="sidebar-link">Basic table</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#sort" class="sidebar-link">Sort</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#expandable-rows" class="sidebar-link">Expandable rows</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#search" class="sidebar-link">Search</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#row-actions" class="sidebar-link">Row actions</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#filters" class="sidebar-link">Filters</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#batch-actions" class="sidebar-link">Batch actions</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#pagination" class="sidebar-link">Pagination</a></li></ul></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="table"><a href="#table" class="header-anchor">#</a> Table</h1> <p>All tables in the application are using the <a href="https://bootstrap-vue.org/docs/components/table" target="_blank" rel="noopener noreferrer">BoostrapVue table
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>To use the component, include the <code>&lt;b-table&gt;</code> tag in the template. The component
+is registered globally so does not need to be imported in each SFC.</p> <h2 id="basic-table"><a href="#basic-table" class="header-anchor">#</a> Basic table</h2> <p>There are a few required properties to maintain consistency across the
+application. The full list of options can be viewed on the <a href="https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props" target="_blank" rel="noopener noreferrer">Bootstrap-vue table
+component's documentation
+page<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h3 id="required-properties"><a href="#required-properties" class="header-anchor">#</a> Required properties</h3> <ul><li><code>items</code> - renders table items</li> <li><code>fields</code> - renders table header</li> <li><code>hover</code> - enables table row hover state</li> <li><code>responsive</code> or <code>stacked</code> - makes the table responsive (enables horizontal
+scrolling or stacked view) at the defined breakpoint</li> <li><code>show-empty</code> <em>(required if table data is generated dynamically)</em> - shows an
+empty message if there are no items in the table</li> <li><code>empty-text</code> <em>(required if table data is generated dynamically)</em> - the
+translated empty message</li></ul> <p><img src="/webui-vue/assets/img/table.2f5c6005.png" alt="Basic table example"> <img src="/webui-vue/assets/img/table-empty.239c6ec7.png" alt="Basic empty tableexample"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">show-empty</span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:empty-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.emptyMessage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+ <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Babe'</span><span class="token punctuation">,</span>
+ age<span class="token operator">:</span> <span class="token string">'3 years'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'white, orange, grey'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Grey Boy'</span><span class="token punctuation">,</span>
+ age<span class="token operator">:</span> <span class="token string">'4 months'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'grey'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.name'</span><span class="token punctuation">)</span> <span class="token comment">//translated label</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.age'</span><span class="token punctuation">)</span> <span class="token comment">//translated label</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.color'</span><span class="token punctuation">)</span> <span class="token comment">// translated label</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="sort"><a href="#sort" class="header-anchor">#</a> Sort</h2> <p>To enable table sort, include <code>sortable: true</code> in the fields array for sortable
+columns and add the following props to the <code>&lt;b-table&gt;</code> component:</p> <ul><li><code>sort-by</code></li> <li><code>no-sort-reset</code></li> <li><code>sort-icon-left</code></li></ul> <p><img src="/webui-vue/assets/img/table-sort.6a74b1a4.png" alt="Table sort example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">no-sort-reset</span>
+ <span class="token attr-name">sort-icon-left</span>
+ <span class="token attr-name">sort-by</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rank<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> <span class="token comment">//should be translated</span>
+ sortable<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'rank'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token string">'Rank'</span><span class="token punctuation">,</span> <span class="token comment">//should be translated</span>
+ sortable<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token string">'Description'</span><span class="token punctuation">,</span> <span class="token comment">//should be translated</span>
+ sortable<span class="token operator">:</span> <span class="token boolean">false</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="expandable-rows"><a href="#expandable-rows" class="header-anchor">#</a> Expandable rows</h2> <p>To add an expandable row in the table, add a column for the expand button in the
+fields array. Include the tdClass <code>table-row-expand</code> to ensure icon rotation is
+handled. Use the built in <a href="https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots" target="_blank" rel="noopener noreferrer">cell
+slot<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to
+target the expand button column and add a button with the chevron icon.</p> <p>Include the
+<a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js" target="_blank" rel="noopener noreferrer">TableRowExpandMixin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+The mixin contains the dynamic <code>aria-label</code> and <code>title</code> attribute values that
+need to be included with the expand button. The <code>toggleRowDetails</code> method should
+be the button's click event callback. Be sure to pass the <code>row</code> object to the
+function.</p> <p>Use the <a href="https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots" target="_blank" rel="noopener noreferrer">row-details
+slot<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to
+format the expanded row content. The slot has access to the row <code>item</code> property.</p> <h3 id="summary"><a href="#summary" class="header-anchor">#</a> Summary</h3> <ol><li>Add a column for the expansion row button with the tdClass,
+<code>table-row-expand</code></li> <li>Include the <code>TableRowExpandMixin</code> to handle the dynamic aria label, title,
+and row expansion toggling</li> <li>Use the <code>#cell</code> slot to target the expandable row column and add the button
+with accessible markup and click handler</li> <li>Use the <code>#row-details</code> slot to format expanded row content</li></ol> <p><img src="/webui-vue/assets/img/table-expand-row.fa48151d.png" alt="Table row expand example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell(expandRow)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span>
+ <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>expandRowLabel<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>expandRowLabel<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleRowDetails(row)<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-chevron</span> <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#row-details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>Expanded row details<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
+ {{ row.item }}
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-table</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> IconChevron <span class="token keyword">from</span> <span class="token string">'@carbon/icons-vue/es/chevron--down/20'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableRowExpandMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span> expandRowLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/TableRowExpandMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span> IconChevron <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ mixins<span class="token operator">:</span> <span class="token punctuation">[</span> TableRowExpandMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'expandRow'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+ tdClass<span class="token operator">:</span> <span class="token string">'table-row-expand'</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token operator">...</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ expandRowLabel
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="search"><a href="#search" class="header-anchor">#</a> Search</h2> <p>The table is leveraging <a href="https://bootstrap-vue.org/docs/components/table#filtering" target="_blank" rel="noopener noreferrer">BootstrapVue table
+filtering<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for
+search. Add the
+<a href="https://bootstrap-vue.org/docs/components/table#filter-events" target="_blank" rel="noopener noreferrer">@filtered<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> event
+listener onto the <code>&lt;b-table&gt;</code> component. The event callback should track the
+total filtered items count.</p> <p>Import the <code>&lt;search&gt;</code> and <code>&lt;table-cell-count&gt;</code> components and include them in
+the template above the <code>&lt;b-table&gt;</code> component.</p> <p>Include the
+<a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFilterMixin.js" target="_blank" rel="noopener noreferrer">SearchFilterMixin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+Add the <code>@change-search</code> and <code>@clear-search</code> event listeners on the <code>&lt;search&gt;</code>
+component and use the corresponding <code>onChangeSearchInput</code> and
+<code>onClearSearchInput</code> methods as the event callbacks. The table should also
+include the dynamic <code>:filter</code> prop with <code>searchFilter</code> set as the value.</p> <p>The <code>&lt;table-cell-count&gt;</code> component requires two properties, total table item
+count and total filtered items count.</p> <p>Add the <code>:empty-filtered-text</code> prop to the table to show the translated message
+if there are no search matches.</p> <p><img src="/webui-vue/assets/img/table-search.50bb96ff.png" alt="Table search example"></p> <p><img src="/webui-vue/assets/img/table-search-active.8622acb6.png" alt="Table search active example"></p> <p><img src="/webui-vue/assets/img/table-search-empty.a9a05017.png" alt="Table search empty example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>search</span>
+ <span class="token attr-name">@changeSearch</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onChangeSearchInput<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@clearSearch</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onClearSearchInput<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-cell-count</span>
+ <span class="token attr-name">:filtered-items-count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItemsCount<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:total-number-of-cells</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.length<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>searchFilter<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:empty-filtered-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.emptySearchMessage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@filtered</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onFiltered<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> Search <span class="token keyword">from</span> <span class="token string">'@/components/Global/Search'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableCellCount <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableCellCount'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> SearchFilterMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span> searchFilter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/SearchFilterMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span> Search<span class="token punctuation">,</span> TableCellCount <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ mixins<span class="token operator">:</span> <span class="token punctuation">[</span> SearchFilterMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ searchFilter<span class="token punctuation">,</span>
+ filteredItems<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">filteredItemsCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>filteredItems<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">onFiltered</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span>filteredItems <span class="token operator">=</span> items<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="row-actions"><a href="#row-actions" class="header-anchor">#</a> Row actions</h2> <p>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 <code>value</code> and <code>title</code>
+property.</p> <p>Import the <code>&lt;table-row-action&gt;</code> component. Provide the <code>value</code> and <code>title</code> props
+to the component and use the named <code>#icons</code> slot to include an icon. The
+component will emit a <code>@click-table-action</code> with the event value.</p> <p><img src="/webui-vue/assets/img/table-row-actions.cfff2d58.png" alt="Table row actions example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsWithActions<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell(actions)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-row-action</span>
+ <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(action, index) in row.item.actions<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.value<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.title<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@click-table-action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTableRowAction($event, row.item)<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-edit</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.value === <span class="token punctuation">'</span>edit<span class="token punctuation">'</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-delete</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.value === <span class="token punctuation">'</span>delete<span class="token punctuation">'</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table-row-action</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-table</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> IconDelete <span class="token keyword">from</span> <span class="token string">'@carbon/icons-vue/es/trash-can/20'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> IconEdit <span class="token keyword">from</span> <span class="token string">'@carbon/icons-vue/es/edit/20'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableRowAction <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableRowAction'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span> IconDelete<span class="token punctuation">,</span> IconEdit<span class="token punctuation">,</span> TableRowAction <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token operator">...</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'actions'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+ tdClass<span class="token operator">:</span> <span class="token string">'text-right text-nowrap'</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">itemsWithActions</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ <span class="token operator">...</span>item<span class="token punctuation">,</span>
+ actions<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token string">'edit'</span><span class="token punctuation">,</span>
+ title<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.edit'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token string">'delete'</span><span class="token punctuation">,</span>
+ title<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.delete'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">onTableRowAction</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// row action callback</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="filters"><a href="#filters" class="header-anchor">#</a> Filters</h2> <p>To add a table dropdown filter:</p> <ol><li>Import the <code>&lt;table-filter&gt;</code>component and TableFilterMixin.</li> <li>Add a filters prop to the <code>&lt;table-filters&gt;</code> component. This prop should be an
+array of filter groups–each required to have a key, label, and values prop.</li></ol> <p>The <code>label</code> prop value should be the translated filter group label. The <code>key</code>
+prop will usually match the filtered by table column key. The <code>values</code> prop
+should be an array of filter values that will render as a list of checkbox items
+in the dropdown.</p> <p>The component will emit a <code>@filter-change</code> 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.</p> <p><img src="/webui-vue/assets/img/table-filter.9b3a7161.png" alt="Table filter example"></p> <p><img src="/webui-vue/assets/img/table-filter-active.e3119ef9.png" alt="Table filter active example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-filter</span>
+ <span class="token attr-name">:filters</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableFilters<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTableFilterChange<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItems<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> TableFilter <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableFilter'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableFilterMixin <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/TableFilterMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span> TableFilter <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ mixins<span class="token operator">:</span> <span class="token punctuation">[</span> TableFilterMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ tableFilters<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.status'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ key<span class="token operator">:</span> status<span class="token punctuation">,</span>
+ values<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Open'</span><span class="token punctuation">,</span> <span class="token string">'Closed'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ activeFilters<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">filteredItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getFilteredTableData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activeFilters<span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">onTableFilterChange</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> activeFilters <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span>activeFilters <span class="token operator">=</span> activeFilters<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="date-filter"><a href="#date-filter" class="header-anchor">#</a> Date filter</h3> <p>To add a date filter, import the <code>&lt;table-date-filter&gt;</code> component. It will emit a
+<code>@change</code> event with the user input date values. There is a date filter method,
+<code>getFilteredTableDataByDate</code>, in the <code>TableFilterMixin</code>.</p> <h2 id="batch-actions"><a href="#batch-actions" class="header-anchor">#</a> Batch actions</h2> <p>Batch actions allow a user to take a single action on many items in a table at
+once.</p> <p>To add table batch actions:</p> <ol><li>Import the <code>&lt;table-toolbar&gt;</code>component and BVTableSelectableMixin</li> <li>Add the <code>selectable</code>, <code>no-select-on-click</code> props and a unique <code>ref</code> to the
+table. The table will emit a <code>@row-selected</code> event. Use the <code>onRowSelected</code>
+mixin method as a callback and provide the <code>$event</code> as the first argument and
+the total table items count as the second argument.</li> <li>Add a table column for checkboxes. The table header checkbox should use the
+<code>tableHeaderCheckboxModel</code> and <code>tableHeaderCheckboxIndeterminate</code> values
+provided by the mixin. The table header checkbox should also use the
+<code>onChangeHeaderCheckbox</code> method as a callback for the <code>@change</code> event with
+the table <code>ref</code> passed as an argument. The table row checkboxes should use
+the <code>toggleSelectRow</code> method as a callback for the <code>@change</code> event with the
+table <code>ref</code> passed as the first argument and the row index passed as the
+second argument.</li> <li>Add an actions prop to the <code>&lt;table-toolbar&gt;</code> component. This prop should be
+an array of toolbar actions–required to have a value and label prop. Add the
+<code>selected-items-count</code> prop to the <code>&lt;table-toolbar&gt;</code> component. The component
+will emit a <code>@batch-action</code> event that will provide the user selected action.
+It will also emit a <code>@clear-selected</code> event. Provide the <code>clearSelectedRows</code>
+as a callback with the table <code>ref</code> passed as an argument.</li></ol> <p><img src="/webui-vue/assets/img/table-batch-action.97b76488.png" alt="Table batch action example"></p> <p><img src="/webui-vue/assets/img/table-batch-action-active.f9a8c36f.png" alt="Table batch action active example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-toolbar</span>
+ <span class="token attr-name">:selected-items-count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectedRows.length<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:actions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableToolbarActions<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@clear-selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearSelectedRows($refs.table)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@batch-action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onBatchAction<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">selectable</span>
+ <span class="token attr-name">no-select-on-click</span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItems<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@row-selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onRowSelected($event, items.length)<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#head(checkbox)</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-checkbox</span>
+ <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableHeaderCheckboxModel<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:indeterminate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableHeaderCheckboxIndeterminate<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onChangeHeaderCheckbox($refs.table)<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell(checkbox)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-checkbox</span>
+ <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row.rowSelected<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleSelectRow($refs.table, row.index)<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-table</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> TableToolbar <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableToolbar'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> BVTableSelectableMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ tableHeaderCheckboxModel<span class="token punctuation">,</span>
+ tableHeaderCheckboxIndeterminate<span class="token punctuation">,</span>
+ selectedRows
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/BVTableSelectableMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span> TableToolbar <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ mixins<span class="token operator">:</span> <span class="token punctuation">[</span> BVTableSelectableMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ key<span class="token operator">:</span> <span class="token string">'checkbox'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token operator">...</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ tableToolbarActions<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token string">'edit'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.edit'</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token string">'delete'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.delete'</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ tableHeaderCheckboxModel<span class="token punctuation">,</span>
+ tableHeaderCheckboxIndeterminate<span class="token punctuation">,</span>
+ selectedRows
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">onBatchAction</span><span class="token punctuation">(</span><span class="token parameter">action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Do something with selected batch action and selected rows</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="pagination"><a href="#pagination" class="header-anchor">#</a> Pagination</h2> <p>To add table pagination:</p> <ol><li>Import the BVPaginationMixin</li> <li>Add the <code>per-page</code> and <code>current-page</code> props to the <code>&lt;table&gt;</code> component.</li> <li>Add the below HTML snippet to the template. Make sure to update the
+<code>total-rows</code> prop.</li></ol> <div class="language-vue extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-group</span>
+ <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-pagination-select<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.itemsPerPage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">label-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-select</span>
+ <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsPerPageOptions<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-group</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-pagination</span>
+ <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentPage<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">first-number</span>
+ <span class="token attr-name">last-number</span>
+ <span class="token attr-name">:per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:total-rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getTotalRowCount(items.length)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-event-logs<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><img src="/webui-vue/assets/img/table-pagination.7f542578.png" alt="Table pagination example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+ <span class="token attr-name">hover</span>
+ <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItems<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:current-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentPage<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-group</span>
+ <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-pagination-select<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.itemsPerPage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">label-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-select</span>
+ <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsPerPageOptions<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-group</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-pagination</span>
+ <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentPage<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">first-number</span>
+ <span class="token attr-name">last-number</span>
+ <span class="token attr-name">:per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:total-rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getTotalRowCount(items.length)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-event-logs<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> BVPaginationMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ currentPage<span class="token punctuation">,</span>
+ perPage<span class="token punctuation">,</span>
+ itemsPerPageOptions
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/BVPaginationMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ mixins<span class="token operator">:</span> <span class="token punctuation">[</span> BVPaginationMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ fields<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ currentPage<span class="token punctuation">,</span>
+ perPage<span class="token punctuation">,</span>
+ itemsPerPageOptions
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/status-icon/" class="prev">
+ StatusIcon
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/toasts/">
+ Toasts
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/3.4aa24478.js" defer></script>
+ </body>
+</html>
diff --git a/guide/components/toasts/index.html b/guide/components/toasts/index.html
new file mode 100644
index 000000000..fdd07ddd0
--- /dev/null
+++ b/guide/components/toasts/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Toasts | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/16.8d8a2baa.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" aria-current="page" class="active sidebar-link">Toasts</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/toasts/#additional-options" class="sidebar-link">Additional options</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="toasts"><a href="#toasts" class="header-anchor">#</a> Toasts</h1> <p>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 <code>success</code> variant is
+displayed. If the user action was not successful, a toast message with the
+<code>danger</code> variant is displayed.</p> <p>There are different transitions for the toast messages. The <code>success</code> toast
+message will auto-hide after 10 seconds. The user must manually dismiss the
+<code>informational</code>, <code>warning</code>, and <code>error</code> toast messages. The <code>BVToastMixin</code>
+provides a simple API that generates a toast message that meets the transition
+guidelines.</p> <img src="/webui-vue/assets/img/toast.9ff5053e.png" alt="Toast message examples" style="max-width:350px;"> <div class="language-js extra-class"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token comment">// Sample method from Reboot BMC page</span>
+<span class="token function">rebootBmc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span>$store
+ <span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'controls/rebootBmc'</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">message</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">successToast</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">errorToast</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// Methods used in this example</span>
+methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">makeSuccessToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">successToast</span><span class="token punctuation">(</span><span class="token string">'This is a success toast and will be dismissed after 10 seconds.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function">makeErrorToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">errorToast</span><span class="token punctuation">(</span><span class="token string">'This is an error toast and must be dismissed by the user.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function">makeWarningToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">warningToast</span><span class="token punctuation">(</span><span class="token string">'This is a warning toast and must be dismissed by the user.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function">makeInfoToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">infoToast</span><span class="token punctuation">(</span><span class="token string">'This is an info toast and must be dismissed by the user.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="additional-options"><a href="#additional-options" class="header-anchor">#</a> Additional options</h2> <p>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.</p> <p>The BVToastMixin also accepts additional options as a second argument. Pass an
+object with a <code>title</code> property to change the default toast title. Include a
+<code>refreshAction</code> property, set to true, to include a link that refreshes the
+application. Include a <code>timestamp</code> property, set to true, to include a timestamp
+in the toast.</p> <p><img src="/webui-vue/assets/img/toast-options.5d0a9c44.png" alt="Toast message options example" style="max-width:350px;"></p> <div class="language-js extra-class"><pre class="language-js"><code>
+methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token function">makeInfoToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">infoToast</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ <span class="token string">'This is a toast with multi-lined body content.'</span><span class="token punctuation">,</span>
+ <span class="token string">'Just pass an array of strings!'</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token string">'This is an example'</span><span class="token punctuation">,</span>
+ refreshAction<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ timestamp<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/table/" class="prev">
+ Table
+ </a></span> <span class="next"><a href="/webui-vue/guide/quickstart/forms.html">
+ Forms
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/16.8d8a2baa.js" defer></script>
+ </body>
+</html>
diff --git a/guide/guidelines/colors.html b/guide/guidelines/colors.html
new file mode 100644
index 000000000..19b242820
--- /dev/null
+++ b/guide/guidelines/colors.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Colors | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/29.a85a251f.js" as="script"><link rel="preload" href="/webui-vue/assets/js/7.2afc0a47.js" as="script"><link rel="preload" href="/webui-vue/assets/js/6.c4bd7641.js" as="script"><link rel="preload" href="/webui-vue/assets/js/8.50aab72d.js" as="script"><link rel="preload" href="/webui-vue/assets/js/9.9f3d8ba6.js" as="script"><link rel="preload" href="/webui-vue/assets/js/11.f760a167.js" as="script"><link rel="preload" href="/webui-vue/assets/js/5.666cf43b.js" as="script"><link rel="preload" href="/webui-vue/assets/js/10.eff1bc3e.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" aria-current="page" class="active sidebar-link">Colors</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#grays" class="sidebar-link">Grays</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#blues" class="sidebar-link">Blues</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#greens" class="sidebar-link">Greens</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#reds" class="sidebar-link">Reds</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#yellows" class="sidebar-link">Yellows</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#all-colors" class="sidebar-link">All Colors</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#theme-colors" class="sidebar-link">Theme Colors</a></li></ul></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" class="sidebar-link">Internationalization</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" class="sidebar-link">Motion</a></li><li><a href="/webui-vue/guide/guidelines/typography.html" class="sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="colors"><a href="#colors" class="header-anchor">#</a> Colors</h1> <p>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 <code>.scss</code> component files use these accent
+colors to override default styles set by the Bootstrap library.</p> <ul><li><a href="/webui-vue/customization/theme/">Learn more about theme customization</a></li> <li><a href="https://github.com/openbmc/webui-vue/issues/new/choose" target="_blank" rel="noopener noreferrer">Open an issue in the OpenBMC webui-vue
+repo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to request a
+change</li> <li><a href="https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+colors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="grays"><a href="#grays" class="header-anchor">#</a> Grays</h2> <div><div class="color-tile-container"><div><div class="color-tile color-tile--border" style="background-color:#f4f4f4;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-100</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#f4f4f4</dd></dl></div><div><div class="color-tile" style="background-color:#e6e6e6;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-200</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#e6e6e6</dd></dl></div><div><div class="color-tile" style="background-color:#d8d8d8;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-300</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#d8d8d8</dd></dl></div><div><div class="color-tile" style="background-color:#cccccc;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-400</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#cccccc</dd></dl></div><div><div class="color-tile" style="background-color:#b3b3b3;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#b3b3b3</dd></dl></div><div><div class="color-tile" style="background-color:#999999;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-600</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#999999</dd></dl></div><div><div class="color-tile" style="background-color:#666666;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-700</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#666666</dd></dl></div><div><div class="color-tile" style="background-color:#3f3f3f;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-800</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#3f3f3f</dd></dl></div><div><div class="color-tile" style="background-color:#161616;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-900</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#161616</dd></dl></div></div></div> <h2 id="blues"><a href="#blues" class="header-anchor">#</a> Blues</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$blue-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#2d60e5</dd></dl></div></div></div> <h2 id="greens"><a href="#greens" class="header-anchor">#</a> Greens</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#0a7d06;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$green-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#0a7d06</dd></dl></div></div></div> <h2 id="reds"><a href="#reds" class="header-anchor">#</a> Reds</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#da1416;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$red-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#da1416</dd></dl></div></div></div> <h2 id="yellows"><a href="#yellows" class="header-anchor">#</a> Yellows</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#efc100;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$yellow-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#efc100</dd></dl></div></div></div> <h2 id="all-colors"><a href="#all-colors" class="header-anchor">#</a> All Colors</h2> <p><code>All Colors</code> is the term Bootstrap uses to describe the colors that make up the
+<code>colors</code> map. These colors and the Grays color variables define the
+<code>theme-colors</code> map colors.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors" target="_blank" rel="noopener noreferrer">Learn more about the Bootstrap color
+maps<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+<div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$blue</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$blue-500</dd></dl></div><div><div class="color-tile" style="background-color:#0a7d06;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$green</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$green-500</dd></dl></div><div><div class="color-tile" style="background-color:#da1416;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$red</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$red-500</dd></dl></div><div><div class="color-tile" style="background-color:#efc100;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$yellow</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$yellow-500</dd></dl></div></div></div></p> <h2 id="theme-colors"><a href="#theme-colors" class="header-anchor">#</a> Theme Colors</h2> <p>The theme colors are keys in the <code>theme-colors</code> map. Bootstrap-Vue has a variant
+prop that accepts any of the <code>theme-colors</code> keys to set the theme of a
+component.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors" target="_blank" rel="noopener noreferrer">Learn more about the Bootstrap theme-colors
+maps<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$primary</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$blue</dd></dl></div><div><div class="color-tile" style="background-color:#3f3f3f;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$secondary</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-800</dd></dl></div><div><div class="color-tile color-tile--border" style="background-color:#f4f4f4;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$light</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-100</dd></dl></div><div><div class="color-tile" style="background-color:#161616;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$dark</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-900</dd></dl></div><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$info</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$blue</dd></dl></div><div><div class="color-tile" style="background-color:#0a7d06;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$success</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$green</dd></dl></div><div><div class="color-tile" style="background-color:#efc100;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$warning</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$yellow</dd></dl></div><div><div class="color-tile" style="background-color:#da1416;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$danger</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$red</dd></dl></div></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/coding-standards/accessibility.html" class="prev">
+ Accessibility
+ </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/internationalization.html">
+ Internationalization
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/29.a85a251f.js" defer></script><script src="/webui-vue/assets/js/7.2afc0a47.js" defer></script><script src="/webui-vue/assets/js/6.c4bd7641.js" defer></script><script src="/webui-vue/assets/js/8.50aab72d.js" defer></script><script src="/webui-vue/assets/js/9.9f3d8ba6.js" defer></script><script src="/webui-vue/assets/js/11.f760a167.js" defer></script><script src="/webui-vue/assets/js/5.666cf43b.js" defer></script><script src="/webui-vue/assets/js/10.eff1bc3e.js" defer></script>
+ </body>
+</html>
diff --git a/guide/guidelines/internationalization.html b/guide/guidelines/internationalization.html
new file mode 100644
index 000000000..7dd3200be
--- /dev/null
+++ b/guide/guidelines/internationalization.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Internationalization | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/30.994c9683.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" aria-current="page" class="active sidebar-link">Internationalization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/internationalization.html#key-naming-convention" class="sidebar-link">Key naming convention</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/internationalization.html#using-the-vue-i18n-plugin" class="sidebar-link">Using the Vue I18n plugin</a></li></ul></li><li><a href="/webui-vue/guide/guidelines/motion.html" class="sidebar-link">Motion</a></li><li><a href="/webui-vue/guide/guidelines/typography.html" class="sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="internationalization"><a href="#internationalization" class="header-anchor">#</a> Internationalization</h1> <p>The OpenBMC Web UI implements internationalization and separates the language-
+specific parts of the interface from the rest of the code, so they can be
+easily replaced. The OpenBMC Web UI uses the following library for
+internationalization:</p> <ul><li><a href="https://kazupon.github.io/vue-i18n/introduction.html" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="key-naming-convention"><a href="#key-naming-convention" class="header-anchor">#</a> Key naming convention</h2> <p>The OpenBMC Web UI follows the following key naming conventions:</p> <ul><li>Page specific labels should be nested in an object with a key prefixed <code>page</code>
+followed by the page title. Formatting in this manner provides a systematic
+structure and improves readability of the language file.
+<ul><li>e.g. <code>pageLocalUserManagement.editUser</code></li></ul></li> <li>Any 'major' child components should be nested inside page specific objects
+(ex. table, modal)
+<ul><li>e.g. <code>pageEventLogs.table.eventType</code></li></ul></li> <li>Avoid any complex linked locale messages.</li> <li>Alphabetize object keys. This helps in locating the keys.</li> <li>We use the <code>$t()</code> function in markup and <code>this.$t</code> in scripts (which Vue I18n
+provides to our components) for outputting translation messages.</li></ul> <h2 id="using-the-vue-i18n-plugin"><a href="#using-the-vue-i18n-plugin" class="header-anchor">#</a> Using the Vue I18n plugin</h2> <ul><li>A new <code>src/i18n.js</code> file is added and it registers Vue I18n as a plugin to
+our Vue instance via the <code>Vue.use()</code> function.</li> <li>The CLI creates a <code>src/locales/en-US.json</code> file, which contains our default
+translation messages.</li> <li>The keys are placed in the <code>src/locales/en-US.json</code> file and then the <code>$t()</code>
+function is used to output the translation messages.</li> <li>After adding or removing calls to <code>$t</code> please run this to ensure consistent
+English translation (note: using variable expansion in key names is not
+handled automatically, you need to manually check them):</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v <span class="token string">'src/**/*.?(js|vue)'</span> -l <span class="token string">'src/locales/en-US.json'</span>
+</code></pre></div><ul><li>If you're working on updating a translation for another language (e.g.
+Russian), run this to see the omissions (as well as cruft) and add the
+necessary keys automatically:</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v <span class="token string">'src/**/*.?(js|vue)'</span> -l <span class="token string">'src/locales/ru-RU.json'</span> -a
+</code></pre></div><div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;pageDumps&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token property">&quot;dumpsAvailableOnBmc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Dumps available on BMC&quot;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-Vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageDumps.dumpsAvailableOnBmc<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><ul><li>Vue I18n’s <code>$tc()</code> function can help with displaying plurals.
+<a href="https://kazupon.github.io/vue-i18n/guide/pluralization.html" target="_blank" rel="noopener noreferrer">Learn more about
+pluralization.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;modal&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token property">&quot;deleteDump&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Delete dump | Delete dumps&quot;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-JS extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$bvModal
+ <span class="token punctuation">.</span><span class="token function">msgBoxConfirm</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$tc</span><span class="token punctuation">(</span><span class="token string">'pageDumps.modal.deleteDumpConfirmation'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$tc</span><span class="token punctuation">(</span><span class="token string">'pageDumps.modal.deleteDump'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ okTitle<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$tc</span><span class="token punctuation">(</span><span class="token string">'pageDumps.modal.deleteDump'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ cancelTitle<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.cancel'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/guidelines/colors.html" class="prev">
+ Colors
+ </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/motion.html">
+ Motion
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/30.994c9683.js" defer></script>
+ </body>
+</html>
diff --git a/guide/guidelines/motion.html b/guide/guidelines/motion.html
new file mode 100644
index 000000000..8342bb5e5
--- /dev/null
+++ b/guide/guidelines/motion.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Motion | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/31.06af27be.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" class="sidebar-link">Internationalization</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" aria-current="page" class="active sidebar-link">Motion</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/motion.html#easing" class="sidebar-link">Easing</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/motion.html#duration" class="sidebar-link">Duration</a></li></ul></li><li><a href="/webui-vue/guide/guidelines/typography.html" class="sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="motion"><a href="#motion" class="header-anchor">#</a> Motion</h1> <p>The motion guidelines are based on Carbon Design System guidelines. These
+guidelines avoid easing curves that are unnatural, distracting, or purely
+decorative. <a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">The documentation below is attributed to Carbon's animation
+documentation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="easing"><a href="#easing" class="header-anchor">#</a> Easing</h2> <h3 id="productive-motion"><a href="#productive-motion" class="header-anchor">#</a> Productive motion</h3> <p>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.</p> <h3 id="expressive-motion"><a href="#expressive-motion" class="header-anchor">#</a> Expressive motion</h3> <p>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.</p> <h3 id="easing-tokens"><a href="#easing-tokens" class="header-anchor">#</a> Easing tokens</h3> <div class="language- extra-class"><pre class="language-text"><code>$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
+$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
+$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
+$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
+$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
+$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
+</code></pre></div><h2 id="duration"><a href="#duration" class="header-anchor">#</a> Duration</h2> <p>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.</p> <h3 id="duration-tokens"><a href="#duration-tokens" class="header-anchor">#</a> Duration tokens</h3> <div class="language- extra-class"><pre class="language-text"><code>$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
+$duration--fast-02: 110ms; //Micro-interactions such as fade
+$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
+$duration--moderate-02: 240ms; //Expansion, system communication, toast
+$duration--slow-01: 400ms; //Large expansion, important system notifications
+$duration--slow-02: 700ms; //Background dimming
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/guidelines/internationalization.html" class="prev">
+ Internationalization
+ </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/typography.html">
+ Typography
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/31.06af27be.js" defer></script>
+ </body>
+</html>
diff --git a/guide/guidelines/typography.html b/guide/guidelines/typography.html
new file mode 100644
index 000000000..d8a46127b
--- /dev/null
+++ b/guide/guidelines/typography.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Typography | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/32.57a17f1c.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" class="sidebar-link">Internationalization</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" class="sidebar-link">Motion</a></li><li><a href="/webui-vue/guide/guidelines/typography.html" aria-current="page" class="active sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="typography"><a href="#typography" class="header-anchor">#</a> Typography</h1></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/guidelines/motion.html" class="prev">
+ Motion
+ </a></span> <span class="next"><a href="/webui-vue/guide/unit-testing/">
+ Unit Testing
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/32.57a17f1c.js" defer></script>
+ </body>
+</html>
diff --git a/guide/index.html b/guide/index.html
new file mode 100644
index 000000000..2cfd2056b
--- /dev/null
+++ b/guide/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Getting Started | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/36.dbed5155.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="active sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting Started</h1> <p>This guide outlines the architecture and technologies used to build the OpenBMC
+Web UI. This guide exists to serve the following goals:</p> <ol><li>Improve contributor efficiency while maintaining the quality and consistency
+of the user interface</li> <li>Act as a collection of community agreed-upon standards</li></ol> <h2 id="coding-standards"><a href="#coding-standards" class="header-anchor">#</a> Coding Standards</h2> <p>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:</p> <ul><li><a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuex.vuejs.org/" target="_blank" rel="noopener noreferrer">Vuex<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://router.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">Axios<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.js.org/" target="_blank" rel="noopener noreferrer">Bootstrap-vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuelidate.js.org/" target="_blank" rel="noopener noreferrer">Vuelidate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="custom-block tip"><p class="custom-block-title">Acquiring an understanding of these technologies will also be necessary.</p></div> <p>You will find more information about the standards and best practices in the
+<a href="/webui-vue/guide/coding-standards/">Coding Standards section of this guide</a>.</p> <h2 id="guidelines"><a href="#guidelines" class="header-anchor">#</a> Guidelines</h2> <p>The <a href="/webui-vue/guide/guidelines/colors.html">guidelines section</a> 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 <a href="/webui-vue/customization/">Customization</a>.</p> <h2 id="components"><a href="#components" class="header-anchor">#</a> Components</h2> <p>The <a href="/webui-vue/guide/components/">components section</a> is a guide to using both custom Vue
+components and components from the Bootstrap-Vue library.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/webui-vue/guide/coding-standards/">
+ JavaScript and SASS
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/36.dbed5155.js" defer></script>
+ </body>
+</html>
diff --git a/guide/quickstart/forms.html b/guide/quickstart/forms.html
new file mode 100644
index 000000000..43e2c2564
--- /dev/null
+++ b/guide/quickstart/forms.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Forms | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/33.b9e5db10.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Quick Start</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/quickstart/forms.html" aria-current="page" class="active sidebar-link">Forms</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#form-component" class="sidebar-link">Form component</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#form-group-component" class="sidebar-link">Form group component</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#validation" class="sidebar-link">Validation</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#complete-form" class="sidebar-link">Complete form</a></li></ul></li><li><a href="/webui-vue/guide/quickstart/page-anatomy.html" class="sidebar-link">Page Anatomy</a></li><li><a href="/webui-vue/guide/quickstart/store-anatomy.html" class="sidebar-link">Store Anatomy</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="forms"><a href="#forms" class="header-anchor">#</a> Forms</h1> <p>Forms are created using the <a href="https://bootstrap-vue.org/docs/components/form" target="_blank" rel="noopener noreferrer">bootstrap-vue form
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+and validated with the <a href="https://vuelidate.js.org/#sub-installation" target="_blank" rel="noopener noreferrer">Vuelidate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+plugin.</p> <h2 id="form-component"><a href="#form-component" class="header-anchor">#</a> Form component</h2> <p>When creating a new form, use the <code>&lt;b-form&gt;</code> <a href="https://bootstrap-vue.org/docs/components/form" target="_blank" rel="noopener noreferrer">form
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Use the <code>.prevent</code>
+event modifier on submit to prevent the submit event from reloading the page.</p> <h2 id="form-group-component"><a href="#form-group-component" class="header-anchor">#</a> Form group component</h2> <p>The <code>&lt;b-form-group&gt;</code> <a href="https://bootstrap-vue.org/docs/components/form-group" target="_blank" rel="noopener noreferrer">form group
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+pairs form controls with a legend or label, helper text, invalid/valid
+feedback text, and visual validation state feedback. Learn more about
+commonly used form components:</p> <ul><li><a href="https://bootstrap-vue.org/docs/components/form-checkbox" target="_blank" rel="noopener noreferrer">Form checkbox<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.org/docs/components/form-input" target="_blank" rel="noopener noreferrer">Form input<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.org/docs/components/form-radio" target="_blank" rel="noopener noreferrer">Form radio<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.org/docs/components/form-select" target="_blank" rel="noopener noreferrer">Form select<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="/guide/components/file-upload">Form file custom component</a></li></ul> <p>When helper text is provided, use the <code>&lt;b-form-text&gt;</code> component and <code>aria-describedby</code> on the
+form group component the helper text describes.</p> <h2 id="validation"><a href="#validation" class="header-anchor">#</a> Validation</h2> <p>For custom form validation messages, disable browser native HTML5
+validation by setting the <code>novalidate</code> prop on <code>&lt;b-form&gt;</code>. Use Vuelidate to
+check the form validation state and add
+custom validation messages in the <code>&lt;b-form-invalid-feedback&gt;</code> component.</p> <p>When creating a new form add the <code>VuelidateMixin</code>
+to the <code>scripts</code> block and import any
+<a href="https://vuelidate.js.org/#validators" target="_blank" rel="noopener noreferrer">validators<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> needed
+such as: <code>required</code>, <code>requiredIf</code>, etc. The use of built-in validators is
+preferred.</p> <h2 id="complete-form"><a href="#complete-form" class="header-anchor">#</a> Complete form</h2> <p>A complete form will look like this.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form</span> <span class="token attr-name">novalidate</span> <span class="token attr-name">@submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-group</span>
+ <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.form.inputLabel<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">label-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-id<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-text</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-helper-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ {{ $t('pageName.form.helperText') }}
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-text</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-input</span>
+ <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-id<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.input<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-helper-text<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">:state</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getValidationState($v.form.input)<span class="token punctuation">&quot;</span></span>
+ <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$v.form.input.$touch()<span class="token punctuation">&quot;</span></span>
+ <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-invalid-feedback</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>!$v.form.input.required<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ {{ $t('global.form.fieldRequired') }}
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-invalid-feedback</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-group</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ {{ $t('global.action.save') }}
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> VuelidateMixin <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/VuelidateMixin'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> required <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuelidate/lib/validators'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'PageName'</span><span class="token punctuation">,</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token operator">...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ mixins<span class="token operator">:</span> <span class="token punctuation">[</span>VuelidateMixin<span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+ form<span class="token operator">:</span> <span class="token punctuation">{</span>
+ input<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function">validations</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ form<span class="token operator">:</span> <span class="token punctuation">{</span>
+ input<span class="token operator">:</span> <span class="token punctuation">{</span> required <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token operator">...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token operator">...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ methods<span class="token operator">:</span><span class="token punctuation">{</span>
+ <span class="token function">handleSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span>$v<span class="token punctuation">.</span><span class="token function">$touch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$v<span class="token punctuation">.</span>$invalid<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span>$store
+ <span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>
+ <span class="token string">'pageName/updateFormData'</span><span class="token punctuation">,</span>
+ formData
+ <span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">success</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">successToast</span><span class="token punctuation">(</span>success<span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">errorToast</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span>$v<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">$reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">endLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/components/toasts/" class="prev">
+ Toasts
+ </a></span> <span class="next"><a href="/webui-vue/guide/quickstart/page-anatomy.html">
+ Page Anatomy
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/33.b9e5db10.js" defer></script>
+ </body>
+</html>
diff --git a/guide/quickstart/page-anatomy.html b/guide/quickstart/page-anatomy.html
new file mode 100644
index 000000000..27e5a63ea
--- /dev/null
+++ b/guide/quickstart/page-anatomy.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Page Anatomy | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/34.0e496acd.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Quick Start</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/quickstart/forms.html" class="sidebar-link">Forms</a></li><li><a href="/webui-vue/guide/quickstart/page-anatomy.html" aria-current="page" class="active sidebar-link">Page Anatomy</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#template-block" class="sidebar-link">Template block</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#scripts-block" class="sidebar-link">Scripts block</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#style-block" class="sidebar-link">Style block</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#complete-single-file-component-sfc" class="sidebar-link">Complete single-file component (SFC)</a></li></ul></li><li><a href="/webui-vue/guide/quickstart/store-anatomy.html" class="sidebar-link">Store Anatomy</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-anatomy"><a href="#page-anatomy" class="header-anchor">#</a> Page Anatomy</h1> <p>Single-file components (SFC) consist of a <code>template</code>, <code>script</code> and <code>style</code>
+block.</p> <h2 id="template-block"><a href="#template-block" class="header-anchor">#</a> Template block</h2> <p>When creating a new page, each template consists of at least 3 components:</p> <ul><li><code>&lt;b-container&gt;</code></li> <li><code>&lt;page-title&gt;</code></li> <li><code>&lt;page-section&gt;</code></li></ul> <p>Learn more about the <a href="/guide/components/page-title">page title</a>and <a href="/guide/components/page-section">page
+section</a> components.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span> <span class="token attr-name">fluid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-title</span> <span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.sectionTitle<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ // Page content goes here
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>page-section</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="scripts-block"><a href="#scripts-block" class="header-anchor">#</a> Scripts block</h2> <p>In the scripts section, be sure to import the <code>PageTitle</code> and <code>PageSection</code>
+components and declare them in the <code>components</code> property.</p> <p>Importing <code>BContainer</code> in the <a href="#scripts-block">scripts block</a> is not required as
+it is already registered globally.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> PageTitle <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageTitle'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> PageSection <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageSection'</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'PageName'</span><span class="token punctuation">,</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span> PageTitle<span class="token punctuation">,</span> PageSection <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="style-block"><a href="#style-block" class="header-anchor">#</a> Style block</h2> <p>Add the <code>scoped</code> attribute to the style block to keep the styles isolated to the
+SFC. While the <code>scoped</code> attribute is optional, it is preferred and global
+changes should be done in global style sheets.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="complete-single-file-component-sfc"><a href="#complete-single-file-component-sfc" class="header-anchor">#</a> Complete single-file component (SFC)</h2> <p>The final SFC will look like this.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span> <span class="token attr-name">fluid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-title</span> <span class="token attr-name">:description</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.pageDescription<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.sectionTitle<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+ // Page content goes here
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>page-section</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> PageTitle <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageTitle'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> PageSection <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageSection'</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'PageName'</span><span class="token punctuation">,</span>
+ components<span class="token operator">:</span> <span class="token punctuation">{</span> PageTitle<span class="token punctuation">,</span> PageSection <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+ <span class="token selector">.example-class</span> <span class="token punctuation">{</span>
+ <span class="token comment">/* Styles go here */</span>
+ <span class="token punctuation">}</span>
+ </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/quickstart/forms.html" class="prev">
+ Forms
+ </a></span> <span class="next"><a href="/webui-vue/guide/quickstart/store-anatomy.html">
+ Store Anatomy
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/34.0e496acd.js" defer></script>
+ </body>
+</html>
diff --git a/guide/quickstart/store-anatomy.html b/guide/quickstart/store-anatomy.html
new file mode 100644
index 000000000..d8af5808b
--- /dev/null
+++ b/guide/quickstart/store-anatomy.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Store Anatomy | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/35.49b0ff49.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Quick Start</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/quickstart/forms.html" class="sidebar-link">Forms</a></li><li><a href="/webui-vue/guide/quickstart/page-anatomy.html" class="sidebar-link">Page Anatomy</a></li><li><a href="/webui-vue/guide/quickstart/store-anatomy.html" aria-current="page" class="active sidebar-link">Store Anatomy</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/store-anatomy.html#store" class="sidebar-link">Store</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/store-anatomy.html#complete-store" class="sidebar-link">Complete store</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="store-anatomy"><a href="#store-anatomy" class="header-anchor">#</a> Store Anatomy</h1> <h2 id="store"><a href="#store" class="header-anchor">#</a> Store</h2> <p>A &quot;store&quot; is a container that holds the application's state. <a href="https://vuex.vuejs.org/" target="_blank" rel="noopener noreferrer">Learn more about
+Vuex.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token comment"># Store structure</span>
+└── store
+ ├── api.js <span class="token comment"># axios requests</span>
+ ├── index.js <span class="token comment"># import store modules</span>
+ ├── plugins
+ └── modules
+ └── FeatureName <span class="token comment"># feature module</span>
+ ├── FeatureStore.js <span class="token comment"># feature store</span>
+ ├── AdditionalFeatureStore.js <span class="token comment"># additional features per store</span>
+ ├── AnotherFeatureStore.js <span class="token comment"># additional features per store</span>
+</code></pre></div><h3 id="modules"><a href="#modules" class="header-anchor">#</a> Modules</h3> <p>The application store is divided into modules to prevent the store from getting
+bloated. Each module contains its own state, mutations, actions, and getters.
+<a href="https://vuex.vuejs.org/guide/modules.html" target="_blank" rel="noopener noreferrer">Learn more about Vuex modules.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="module-anatomy"><a href="#module-anatomy" class="header-anchor">#</a> Module Anatomy</h4> <ul><li><strong>State:</strong> You cannot directly mutate the store's state. <a href="https://vuex.vuejs.org/guide/state.html" target="_blank" rel="noopener noreferrer">Learn more about
+state.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><strong>Getters:</strong> Getters are used to compute derived state based on store state.
+<a href="https://vuex.vuejs.org/guide/getters.html" target="_blank" rel="noopener noreferrer">Learn more about getters.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><strong>Mutations:</strong> The only way to mutate the state is by committing mutations,
+which are synchronous transactions. <a href="https://vuex.vuejs.org/guide/mutations.html" target="_blank" rel="noopener noreferrer">Learn more about
+mutations.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><strong>Actions:</strong> Asynchronous logic should be encapsulated in, and can be composed
+with actions. <a href="https://vuex.vuejs.org/guide/actions.html" target="_blank" rel="noopener noreferrer">Learn more about
+actions.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Import new store modules in <code>src/store/index.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// `src/store/index.js`</span>
+
+<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">import</span> FeatureNameStore <span class="token keyword">from</span> <span class="token string">'./modules/FeatureNameStore'</span><span class="token punctuation">;</span>
+
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ state<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ mutations<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ actions<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ modules<span class="token operator">:</span> <span class="token punctuation">{</span>
+ feature<span class="token operator">:</span> FeatureNameStore<span class="token punctuation">,</span> <span class="token comment">// store names can be renamed for brevity</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h2 id="complete-store"><a href="#complete-store" class="header-anchor">#</a> Complete store</h2> <p>A store module will look like this.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> api <span class="token keyword">from</span> <span class="token string">'@/store/api'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> i18n <span class="token keyword">from</span> <span class="token string">'@/i18n'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> FeatureNameStore <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <span class="token comment">// getters, actions, and mutations will be namespaced</span>
+ <span class="token comment">// based on the path the module is registered at</span>
+ namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ state<span class="token operator">:</span> <span class="token punctuation">{</span>
+ exampleValue<span class="token operator">:</span> <span class="token string">'Off'</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ getters<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// namespace -&gt; getters['featureNameStore/getExampleValue']</span>
+ <span class="token function-variable function">getExampleValue</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>exampleValue<span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ mutations<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// namespace -&gt; commit('featureNameStore/setExampleValue)</span>
+ <span class="token function-variable function">setExampleValue</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>exampleValue<span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ actions<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// namespace -&gt; dispatch('featureNameStore/getExampleValue')</span>
+ <span class="token keyword">async</span> <span class="token function">getExampleValue</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token keyword">await</span> api
+ <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/redfish/v1/../..'</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+ <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setExampleValue'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>Value<span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// namespace -&gt; ('featureNameStore/saveExampleValue', payload)</span>
+ <span class="token keyword">async</span> <span class="token function">saveExampleValue</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token keyword">await</span> api
+ <span class="token punctuation">.</span><span class="token function">patch</span><span class="token punctuation">(</span><span class="token string">'/redfish/v1/../..'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> Value<span class="token operator">:</span> payload <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+ <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setExampleValue'</span><span class="token punctuation">,</span> payload<span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> FeatureNameStore<span class="token punctuation">;</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/quickstart/page-anatomy.html" class="prev">
+ Page Anatomy
+ </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/35.49b0ff49.js" defer></script>
+ </body>
+</html>
diff --git a/guide/unit-testing/index.html b/guide/unit-testing/index.html
new file mode 100644
index 000000000..8fcac6c11
--- /dev/null
+++ b/guide/unit-testing/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Unit Testing | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/37.c48db488.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" aria-current="page" class="active sidebar-link">Unit Testing</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#test-libraries" class="sidebar-link">Test Libraries</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#test-specification-location-and-naming-conventions" class="sidebar-link">Test specification location and naming conventions</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#running-tests" class="sidebar-link">Running Tests</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#guidelines" class="sidebar-link">Guidelines</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#components" class="sidebar-link">Components</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#vuex-store" class="sidebar-link">Vuex Store</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#vue-router" class="sidebar-link">Vue Router</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#resources" class="sidebar-link">Resources</a></li></ul></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="unit-testing"><a href="#unit-testing" class="header-anchor">#</a> Unit Testing</h1> <p>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.</p> <blockquote><p>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.</p> <p>-- <cite>Ed Yerburgh, Testing Vue Applications (New York: Manning
+Publications, 2019)</cite></p></blockquote> <h2 id="test-libraries"><a href="#test-libraries" class="header-anchor">#</a> Test Libraries</h2> <p>The OpenBMC Web UI unit test framework uses the Jest test runner and relies on
+the following libraries:</p> <ul><li>@vue/cli-plugin-unit-jest</li> <li>@vue/test-utils</li></ul> <h2 id="test-specification-location-and-naming-conventions"><a href="#test-specification-location-and-naming-conventions" class="header-anchor">#</a> Test specification location and naming conventions</h2> <ul><li>Create the test files in the /tests/unit directory</li> <li>The naming convention is to replicate the folder and component name</li></ul> <h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3> <ul><li>The AppHeader.vue single-file component's (SFC) spec file is named
+<code>AppHeader.spec.js</code></li> <li>Create a global component like <code>PageSection.vue</code> in the <code>/tests/global</code>
+directory with the name <code>PageSection.spec.js</code></li> <li>Create a mixin like BVToastMixin in the <code>/tests/mixins</code> directory with the
+name <code>BVToastMixin.spec.js</code> Running Tests</li></ul> <h2 id="running-tests"><a href="#running-tests" class="header-anchor">#</a> Running Tests</h2> <p>The <code>test:unit</code> 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.</p> <h3 id="debugging-a-failed-test"><a href="#debugging-a-failed-test" class="header-anchor">#</a> Debugging a failed test</h3> <p>The <code>test:unit:debugger</code> script will help to debug failing tests using the
+Chrome Developer Tools. To debug a test:</p> <ol><li>Add a <code>debugger</code> statement in the specifications file</li> <li>Run the unit test in debugger mode</li> <li>Open the Chrome browser and go to <code>chrome://inspect</code></li></ol> <h3 id="fixing-failed-snapshot-tests"><a href="#fixing-failed-snapshot-tests" class="header-anchor">#</a> Fixing failed snapshot tests</h3> <p>The <code>test:update</code> 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 <code>test:update</code> can be dangerous,
+as it will update all snapshot tests.</p> <p>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, <code>npm run test:unit -- --watch</code> and verify each snapshot.</p> <h2 id="guidelines"><a href="#guidelines" class="header-anchor">#</a> Guidelines</h2> <ul><li>Avoid coupling test code to source code when testing functionality
+<ul><li>If test cases fail during refactoring, the test case may be tightly
+coupled with the application structure.</li></ul></li> <li>A test should not break if the functionality it tests has not changed</li> <li>To maintain test readability, only pass in the data needed for the test to
+work in your mock object</li> <li>Avoid the creation of side-effects whenever possible</li> <li>There is no return on investment for testing presentational HTML</li> <li>Use <code>shallowMount</code> rather than mount unless child component rendering is
+required</li> <li>Avoid leaky tests by using <code>localVue</code> for all plugin installs, for example,
+when testing a plugin like Vuex</li></ul> <h2 id="components"><a href="#components" class="header-anchor">#</a> Components</h2> <h3 id="what-to-test"><a href="#what-to-test" class="header-anchor">#</a> What to test</h3> <ol><li>Test the function's inputs and outputs
+<ul><li>Test only dynamically generated output</li> <li>Test only output that is part of the component contract</li></ul></li> <li>Test any side-effects</li> <li>Test correct rendering using a snapshot test</li></ol> <h3 id="what-not-to-test"><a href="#what-not-to-test" class="header-anchor">#</a> What not to test</h3> <ol><li>Don't test third-party functionality</li> <li>Don't test the internals of your components or that specific functions are
+called. This can lead to unnecessary refactoring.</li> <li>Don't go beyond the input and outputs of the component</li> <li>Don't test the functionality of other libraries</li> <li>Static components do not need unit tests, use snapshot testing</li></ol> <h3 id="strategy"><a href="#strategy" class="header-anchor">#</a> Strategy</h3> <ol><li>Define a component contract that is based upon the component API</li> <li>Create smaller functions with a specific purpose to make testing easier</li> <li>Test the component API by writing tests first and then writing code to fix
+the tests</li> <li>Add a snapshot test once the presentational layer is validated through manual
+visual testing</li></ol> <h3 id="snapshot-testing"><a href="#snapshot-testing" class="header-anchor">#</a> Snapshot Testing</h3> <p>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.</p> <p>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.</p> <h2 id="vuex-store"><a href="#vuex-store" class="header-anchor">#</a> Vuex Store</h2> <p>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 <code>test store parts separately</code>.</p> <h3 id="testing-store-parts-separately"><a href="#testing-store-parts-separately" class="header-anchor">#</a> Testing Store Parts Separately</h3> <p>Testing the parts separately is easy since each of the parts is a JavaScript
+function. Store parts to test include <code>actions</code>, <code>getters</code>, and <code>mutations</code>.</p> <h4 id="actions"><a href="#actions" class="header-anchor">#</a> Actions</h4> <p>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.</p> <h4 id="getters"><a href="#getters" class="header-anchor">#</a> Getters</h4> <p>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.</p> <h4 id="mutations"><a href="#mutations" class="header-anchor">#</a> Mutations</h4> <p>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.</p> <h4 id="pros"><a href="#pros" class="header-anchor">#</a> Pros</h4> <ul><li>Easier to debug</li> <li>Smaller tests</li></ul> <h4 id="cons"><a href="#cons" class="header-anchor">#</a> Cons</h4> <ul><li>Requires extreme mocking when testing actions</li> <li>Tightly coupled with implementation details</li> <li>More maintenance required when refactoring</li></ul> <h3 id="testing-store-instance"><a href="#testing-store-instance" class="header-anchor">#</a> Testing Store Instance</h3> <ul><li>Uses mutations and actions as inputs</li> <li>State is the output</li> <li>Requires the use of <code>localVue</code> when creating the store to avoid leaky tests</li></ul> <h4 id="pros-2"><a href="#pros-2" class="header-anchor">#</a> Pros</h4> <ul><li>Avoids mocking and brittle tests</li> <li>Refactoring does not break test unless contract changes</li></ul> <h4 id="cons-2"><a href="#cons-2" class="header-anchor">#</a> Cons</h4> <ul><li>Debugging is more difficult</li></ul> <h2 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> Vue Router</h2> <ul><li>Our current structure does not warrant testing the vue router</li> <li>If there is logic used for creating <code>RouteLink</code> items, we should unit test
+that functionality, which requires stubbing</li> <li>When testing a vue router, it is important to use localVue</li></ul> <p><a href="https://vuex.vuejs.org/guide/testing.html" target="_blank" rel="noopener noreferrer">Vuex Testing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="resources"><a href="#resources" class="header-anchor">#</a> Resources</h2> <ul><li><a href="https://vue-test-utils.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Test Utils<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuejsdevelopers.com/2019/08/26/vue-what-to-unit-test-components/" target="_blank" rel="noopener noreferrer">Knowing What To Test — Vue Component Unit
+Testing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.dev-tips-and-tricks.com/how-to-unit-test-a-vuex-store" target="_blank" rel="noopener noreferrer">How to unit test a vuex
+Store<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/guide/guidelines/typography.html" class="prev">
+ Typography
+ </a></span> <span class="next"><a href="/webui-vue/guide/components/">
+ Overview
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/37.c48db488.js" defer></script>
+ </body>
+</html>