docs(component): refactor plural to singular in codebase

Author: Cathy Siller

docs/_data/nav.json5

@@ -14,47 +14,47 @@
         label: 'Components',
         path: 'components',
         children: [
-            { label: 'Accordions', path: 'accordions' },
-            { label: 'Alerts', path: 'alerts' },
-            { label: 'Badges', path: 'badges' },
+            { label: 'Accordion', path: 'accordion' },
+            { label: 'Alert', path: 'alert' },
+            { label: 'Badge', path: 'badge' },
             { label: 'Box', path: 'box' },
-            { label: 'Breadcrumbs', path: 'breadcrumbs' },
-            { label: 'Buttons', path: 'buttons' },
-            { label: 'Checkboxes', path: 'checkboxes' },
-            { label: 'Choice Tiles', path: 'choice-tiles' },
+            { label: 'Breadcrumb', path: 'breadcrumb' },
+            { label: 'Button', path: 'button' },
+            { label: 'Checkbox', path: 'checkbox' },
+            { label: 'Choice Tile', path: 'choice-tile' },
             { label: 'Dropdown Select', path: 'dropdown-select' },
-            { label: 'Files', path: 'files' },
+            { label: 'File', path: 'file' },
             { label: 'Grid', path: 'grid' },
-            { label: 'Icons', path: 'icons' },
+            { label: 'Icon', path: 'icon' },
             {
-                label: 'Layouts',
-                path: 'layouts',
+                label: 'Layout',
+                path: 'layout',
                 /* TODO: on hold until nav is updated to allow for link title + section toggle
                 children: [
                     { label: 'Horizontal', path: 'horizontal-layout-template.html' },
                     { label: 'Vertical', path: 'vertical-layout-template.html' },
                 ],
                 */
             },
-            { label: 'Lists', path: 'lists' },
-            { label: 'Loaders', path: 'loaders' },
-            { label: 'Menus', path: 'menus' },
-            { label: 'Modals', path: 'modals' },
+            { label: 'List', path: 'list' },
+            { label: 'Loader', path: 'loader' },
+            { label: 'Menu', path: 'menu' },
+            { label: 'Modal', path: 'modal' },
             { label: 'Navigation', path: 'navigation' },
             { label: 'Pagination', path: 'pagination' },
-            { label: 'Panels', path: 'panels' },
-            { label: 'Pills', path: 'pills' },
-            { label: 'Popovers', path: 'popovers' },
-            { label: 'Radios', path: 'radios' },
-            { label: 'Reveals', path: 'reveals' },
+            { label: 'Panel', path: 'panel' },
+            { label: 'Pill', path: 'pill' },
+            { label: 'Popover', path: 'popover' },
+            { label: 'Radio', path: 'radio' },
+            { label: 'Reveal', path: 'reveal' },
             { label: 'Search', path: 'search' },
-            { label: 'Selector Strips', path: 'selector-strips' },
-            { label: 'Tables', path: 'tables' },
-            { label: 'Tabs', path: 'tabs' },
+            { label: 'Selector Strip', path: 'selector-strip' },
+            { label: 'Table', path: 'table' },
+            { label: 'Tabset', path: 'tabset' },
             { label: 'Text Input', path: 'text-input' },
             { label: 'Textarea', path: 'textarea' },
-            { label: 'Toasts', path: 'toasts' },
-            { label: 'Tooltips', path: 'tooltips' },
+            { label: 'Toast', path: 'toast' },
+            { label: 'Tooltip', path: 'tooltip' },
             { label: 'Typography', path: 'typography' },
         ],
     },
@@ -63,12 +63,12 @@
         label: 'Custom Elements',
         path: 'elements',
         children: [
-            { label: '<hx-accordion-panel>', path: 'hx-accordion-panel' },
             { label: '<hx-accordion>', path: 'hx-accordion' },
+            { label: '<hx-accordion-panel>', path: 'hx-accordion-panel' },
             { label: '<hx-alert>', path: 'hx-alert' },
             { label: '<hx-busy>', path: 'hx-busy' },
-            { label: '<hx-checkbox-control>', path: 'hx-checkbox-control' },
             { label: '<hx-checkbox>', path: 'hx-checkbox' },
+            { label: '<hx-checkbox-control>', path: 'hx-checkbox-control' },
             { label: '<hx-disclosure>', path: 'hx-disclosure' },
             { label: '<hx-div>', path: 'hx-div' },
             { label: '<hx-drop-fence>', path: 'hx-drop-fence' },
@@ -84,14 +84,14 @@
             { label: '<hx-pill>', path: 'hx-pill' },
             { label: '<hx-popover>', path: 'hx-popover' },
             { label: '<hx-progress>', path: 'hx-progress' },
+            { label: '<hx-radio>', path: 'hx-radio' },
             { label: '<hx-radio-control>', path: 'hx-radio-control' },
             { label: '<hx-radio-set>', path: 'hx-radio-set' },
-            { label: '<hx-radio>', path: 'hx-radio' },
             { label: '<hx-reveal>', path: 'hx-reveal' },
-            { label: '<hx-search-assistance>', path: 'hx-search-assistance' },
             { label: '<hx-search>', path: 'hx-search' },
-            { label: '<hx-select-control>', path: 'hx-select-control' },
+            { label: '<hx-search-assistance>', path: 'hx-search-assistance' },
             { label: '<hx-select>', path: 'hx-select' },
+            { label: '<hx-select-control>', path: 'hx-select-control' },
             { label: '<hx-status>', path: 'hx-status' },
             { label: '<hx-tab>', path: 'hx-tab' },
             { label: '<hx-tabcontent>', path: 'hx-tabcontent' },

docs/_templates/application.njk

@@ -73,10 +73,15 @@
       <main role="main" id="content" class="{{mainClass}} {{contentClasses}}">
         {% block main %}
           <header>
-            {# TODO: use frontmatter to define breadcrumbs #}
-            {% block breadcrumbs %}
-              {# breadcrumbs go here (optional) #}
-            {% endblock %}
+            {% if page.crumbs %}
+              <nav class="hxBreadcrumb">
+                {% for crumb in page.crumbs %}
+                  <a href="{{crumb.path}}">{{crumb.label}}</a>
+                  <hx-icon class="delimiter" type="angle-right"></hx-icon>
+                {% endfor %}
+                <a href="#">{{page.title}}</a>
+              </nav>
+            {% endif %}
 
             <h1>
               {{ page.title }}

docs/components/accordions/accordion-demo.js renamed to docs/components/accordion/accordion-demo.js

@@ -1,8 +1,8 @@
 ---
-title: Accordions
+title: Accordion
 minver: 0.4.0
 also:
-  components/accordions/test.html: Testing - Accordions
+  components/accordion/test.html: Testing - Accordion
   elements/hx-accordion: <hx-accordion>
   elements/hx-accordion-panel: <hx-accordion-panel>
 ---

docs/components/accordions/index.html renamed to docs/components/accordion/index.html

@@ -1,17 +1,13 @@
 ---
-title: Testing - Accordions
+title: Testing - Accordion
+crumbs:
+  - path: components/accordion
+    label: Accordion
 ---
-{% set contentClasses = 'accordions-test' %}
 {% extends 'test.njk' %}
-{% block content %}
-  <section>
-    <nav class="hxBreadcrumb">
-      <a href="components/accordions">Accordions</a>
-      <hx-icon class="delimiter" type="angle-right"></hx-icon>
-      <a href="#">{{page.title}}</a>
-    </nav>
-  </section>
+{% set contentClasses = 'accordions-test' %}
 
+{% block content %}
   <section>
     <h2>Open Enabled</h2>
     <hx-accordion>

docs/components/accordions/test.html renamed to docs/components/accordion/test.html

@@ -1,8 +1,8 @@
 ---
-title: Alerts
+title: Alert
 minver: 0.1.1
 also:
-  components/alerts/test.html: Testing - Alerts
+  components/alert/test.html: Testing - Alert
   elements/hx-alert: <hx-alert>
 ---
 {% extends 'component.njk' %}

docs/components/alerts/alert-demo.js renamed to docs/components/alert/alert-demo.js

@@ -1,20 +1,17 @@
 ---
-title: Testing - Alerts
+title: Testing - Alert
+crumbs:
+  - path: components/alert
+    label: Alert
 ---
 {% extends 'test.njk' %}
-{% block content %}
-  <section>
-    <nav class="hxBreadcrumb">
-      <a href="components/alerts">Alerts</a>
-      <hx-icon class="delimiter" type="angle-right"></hx-icon>
-      <a href="#">{{page.title}}</a>
-    </nav>
-  </section>
 
+{% block content %}
   <section>
     <header>
       <h3>Light DOM White Space</h3>
     </header>
+
     <div class="hxRow">
       <div class="hxCol hxSpan-6-md">
         <hx-alert status="STATUS"> Message with leading white space (no trailing)</hx-alert>

docs/components/alerts/index.html renamed to docs/components/alert/index.html

@@ -1,9 +1,9 @@
 ---
-title: Badges
+title: Badge
 minver: 0.10.0
 also:
   guides/react-compatibility/#significant-white-space: Significant White Space (React Compatibility)
-  components/badges/test.html: Testing - Badges
+  components/badge/test.html: Testing - Badge
 ---
 {% extends 'component.njk' %}
 {% set contentClasses = 'docs-badge' %}

docs/components/alerts/test.html renamed to docs/components/alert/test.html

@@ -1,16 +1,12 @@
 ---
-title: Testing - Badges
+title: Testing - Badge
+crumbs:
+  - path: components/badge
+    label: Badge
 ---
 {% extends 'test.njk' %}
-{% block content %}
-  <section>
-    <nav class="hxBreadcrumb">
-      <a href="components/badges">Badges</a>
-      <hx-icon class="delimiter" type="angle-right"></hx-icon>
-      <a href="#">{{page.title}}</a>
-    </nav>
-  </section>
 
+{% block content %}
   <section class="hxRow">
     <div class="hxCol hxSpan-3-md">
       <h3>Light DOM White Space</h3>