Merge pull request #489 from rackerlabs/phase3-docs-part1

docs(*): update supporting files for upcoming docs updates

Author: CITguy

docs/_data/nav.json5

@@ -23,7 +23,6 @@
             { label: 'Checkboxes', path: 'checkboxes' },
             { label: 'Choice Tiles', path: 'choice-tiles' },
             { label: 'Dropdown Select', path: 'dropdown-select' },
-            //{ label: 'Colors', path: 'colors' },
             { label: 'Files', path: 'files' },
             { label: 'Grid', path: 'grid' },
             { label: 'Icons', path: 'icons' },
@@ -42,8 +41,8 @@
             { label: 'Menus', path: 'menus' },
             { label: 'Modals', path: 'modals' },
             { label: 'Navigation', path: 'navigation' },
-            { label: 'Panels', path: 'panels' },
             { label: 'Pagination', path: 'pagination' },
+            { label: 'Panels', path: 'panels' },
             { label: 'Pills', path: 'pills' },
             { label: 'Popovers', path: 'popovers' },
             { label: 'Radios', path: 'radios' },
@@ -105,15 +104,4 @@
             { label: '<hx-tooltip>', path: 'hx-tooltip' },
         ],
     },
-
-    /* COMING SOON...
-    {
-        label: 'API',
-        path: 'API',
-        children: [
-            { label: 'HXElement', path: 'HXElement' },
-            ...
-        ],
-    }
-    */
 ]

docs/_templates/application.njk

@@ -22,13 +22,13 @@
       </nav>
 
       {% block layout %}
-        <main role="main" id="content" class="hxBox hxMd">
+        <main role="main" id="content">
           {% block content %}
             {# page content goes here #}
           {% endblock %}
         </main>
 
-        <aside class="hxSiderail hxBox hxMd">
+        <aside class="hxSiderail">
           {% block sidebar %}
             {% include 'partials/sidebar.njk' %}
           {% endblock %}

docs/_templates/component.njk

@@ -1,13 +1,23 @@
 {% extends 'application.njk' %}
 
 {% block layout %}
-  <main id="content" class="hxBox hxMd component-content {{contentClasses}}">
+  <main id="content" class="component-content {{contentClasses}}">
     <header>
+      {% block breadcrumbs %}
+        {# breadcrumbs go here (optional) #}
+      {% endblock %}
+
       <h1>
         {{ page.title }}
         {% include 'partials/min-version.njk' %}
       </h1>
 
+      {% if page.beta %}
+        <hx-alert type="warning" status="BETA" persist>
+          This component is not recommended for production use.
+        </hx-alert>
+      {% endif %}
+
       {% block page_header %}
         {# extra header content goes here #}
       {% endblock %}
@@ -21,7 +31,7 @@
       {% include 'partials/see-also.njk' %}
     {% endif %}
   </main>
-  <aside class="hxSiderail hxBox hxMd">
+  <aside class="hxSiderail">
     {% include 'partials/sidebar.njk' %}
   </aside>
 {% endblock %}

docs/_templates/element.njk

@@ -1,8 +1,12 @@
 {% extends 'application.njk' %}
 
 {% block layout %}
-  <main id="content" class="hxBox hxMd">
+  <main id="content" class="element-content">
     <header>
+      {% block breadcrumbs %}
+        {# breadcrumbs go here (optional) #}
+      {% endblock %}
+
       <h1>
         {{ page.title }}
         {% include 'partials/min-version.njk' %}
@@ -58,7 +62,7 @@
     {% endif %}
   </main>
 
-  <aside class="hxSiderail hxBox hxMd">
+  <aside class="hxSiderail">
     <header>
       <h1 class="hxHeading-4">On this page:</h1>
     </header>

docs/_templates/guide.njk

@@ -1,8 +1,12 @@
 {% extends 'application.njk' %}
 
 {% block layout %}
-  <main id="content" class="hxBox hxMd">
+  <main id="content" class="guide-content">
     <header>
+      {% block breadcrumbs %}
+        {# breadcrumbs go here (optional) #}
+      {% endblock %}
+
       <h1>{{ page.title }}</h1>
 
       {% block page_header %}
@@ -18,7 +22,7 @@
       {% include 'partials/see-also.njk' %}
     {% endif %}
   </main>
-  <aside class="hxSiderail hxBox hxMd">
+  <aside class="hxSiderail">
     {% include 'partials/sidebar.njk' %}
   </aside>
 {% endblock %}

docs/_templates/test.njk

@@ -1,7 +1,7 @@
 {% extends 'application.njk' %}
 
 {% block layout %}
-  <main id="content" class="hxBox hxLg test-content {{contentClasses}}">
+  <main id="content" class="test-content {{contentClasses}}">
     <header>
       {% block breadcrumbs %}
         {# breadcrumbs go here #}
@@ -17,9 +17,17 @@
     {% block content %}
       {# freeform page content goes here #}
     {% endblock %}
+
+    <div class="banner warning">
+      <hx-icon type="exclamation-triangle" class="banner__icon"></hx-icon>
+      <div class="banner__body">
+        <b>UI TESTING:</b>
+        Do not replicate anything on this page within your application.
+      </div>
+    </div>
   </main>
 
-  <aside class="hxSiderail hxBox hxMd">
+  <aside class="hxSiderail">
     <header>
       <h1 class="hxHeading-4">On this page:</h1>
     </header>