dev: move tabs to components and sort components by name

app/assets/sass/application.scss

@@ -24,15 +24,15 @@ $box-shadow:	    0 2px 10px rgba($text-colour, 0.5);
 @import "components/highlights";
 @import "components/table-multiselect";
 @import "components/confirm-pages";
+@import "components/tabs-horizontal";
+@import "components/tabs";
 
 // Patterns
 @import "patterns/case";
 @import "patterns/header";
 @import "patterns/flashcard";
 @import "patterns/modal";
 @import "patterns/navigation";
-@import "patterns/tabs-horizontal";
-@import "patterns/tabs";
 @import "patterns/tasks";
 @import "patterns/timeline";
 @import "patterns/help";

app/views/components/index.html

@@ -22,6 +22,12 @@ <h1 class="heading-section">Components</h1>
           label: "experimental",
           desc: "used when a user needs to take an action, submit data, or make a change to the page"
         },
+        {
+          name: "Tabs",
+          link: "/components/tabs",
+          label: "experimental",
+          desc: "switch between views of grouped content or hide content that doesn't always need to be shown"
+        },
         {
           name: "Confirmation pages",
           link: "/components/confirm-pages",
@@ -97,7 +103,7 @@ <h1 class="heading-section">Components</h1>
               </tr>
             {% endif %}
           {% endfor %}
-          {% for component in components|sort(attribute='label') %}
+          {% for component in components|sort(attribute='label')|sort(attribute='name') %}
             {% if component.label|lower == 'experimental' %}
               <tr>
                 <td><a href="{{ component.link }}">{{ component.name|capitalize  }}</a></td>

app/views/patterns/tabs.html → app/views/components/tabs.html

@@ -26,27 +26,27 @@ <h1 class="heading-section">In-page tabs</h1>
 
       <div class="example example-images" id="example-component">
         <div class="grid-row">
-          {% include "includes/patterns/tabs-list.html" %}
+          {% include "includes/components/tabs-list.html" %}
         </div>
       </div>
       <details>
         <summary>Show code snippet</summary>
-        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs-list.html" %}{% endfilter %}</code></pre>
+        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/components/tabs-list.html" %}{% endfilter %}</code></pre>
       </details>
 
       <h2 class="heading-medium" id="example-component">Horizontal tab</h2>
       <div class="example example-images">
         <div class="grid-row">
-          {% include "includes/patterns/tabs.html" %}
+          {% include "includes/components/tabs.html" %}
         </div>
       </div>
       <details>
         <summary>Show HTML snippet</summary>
-        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs.html" %}{% endfilter %}</code></pre>
+        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/components/tabs.html" %}{% endfilter %}</code></pre>
       </details>
       <details>
         <summary>Show SCSS snippet</summary>
-        <pre class="language-markup"><code class="language-markup">{{'./app/assets/sass/patterns/_tabs-horizontal.scss' | fileInclude }}</code></pre>
+        <pre class="language-markup"><code class="language-markup">{{'./app/assets/sass/components/_tabs-horizontal.scss' | fileInclude }}</code></pre>
       </details>
 
 

app/views/patterns/index.html

@@ -58,12 +58,6 @@ <h1 class="heading-section">Patterns</h1>
           label: "experimental",
           desc: "creates focus on a single interaction"
         },
-        {
-          name: "In-page tabs",
-          link: "/patterns/tabs",
-          label: "experimental",
-          desc: "switch between views of grouped content or hide content that doesn't always need to be shown"
-        },
         {
           name: "Service header",
           link: "/patterns/header",