feat(tabbed-view-documents): tabbed view documentation (#989)

* feat(tabbed-view-documents): Eleventy short codes to create 'tabs' - sub navigation at the moment

* Moved to using tab component and updated sub navigation styles to use mixins so that we can use it for our usage of tabs (giving the style of sub nav) in a tabbed documentation page

* Styled sub nav for small screens

* Hide the tabs title, use tab nav focus styles, set margin bottom to 40px

* Moved documentation styles into correct location

* scroll margin top - so space above tabbed section

* Fix focus box shadow on link

* Refactored to remove mixins now that it is in a single file and separated from component styles

* removed unused file

* Tidied up and commented

* Corrected margin

* Examples moved to within overview tab

* Removed margin bottom from li on mobile screens

* Keep mobile background

* only remove when not focused

* Added roles

* Replaced newline to prevent empty <p> tags

* Apply non javascript menu

* Add hr to bottom so help section is clearly separated from tabs

* Removed tabs from date picker

.eleventy.js

@@ -132,6 +132,53 @@ module.exports = function (eleventyConfig) {
     return releasePackage.version;
   });
 
+  // Temp storage for tabs
+  let tabsStorage = [];
+
+  // Generate govuk tabs
+  eleventyConfig.addPairedShortcode("tabs", function (content, label = "Contents") {
+    const tabId = (tab) => {
+      return `${tab.label.toLowerCase().replace(/ /g, "-")}-tab`
+    }
+    const tabsList = tabsStorage.map((tab, index) => {
+      const isSelected = index === 0 ? '--selected' : '';
+      return `
+      <li class="govuk-tabs__list-item${isSelected} app-navigation__item" role="presentation">
+        <a class="govuk-tabs__tab app-navigation__link app-navigation__link" href="#${tabId(tab)}" role="tab" >
+          ${tab.label}
+        </a>
+      </li>
+    `.trim();
+    }).join("\n").trim();
+
+    const tabPanels = tabsStorage.map((tab, index) => {
+      const isHidden = index === 0 ? '' : ' govuk-tabs__panel--hidden';
+      return `
+      <div class="govuk-tabs__panel${isHidden}" id="${tabId(tab)}" role="tabpanel">
+        ${tab.content}
+      </div>
+    `.trim();
+    }).join("").trim();
+
+    tabsStorage = [];
+
+    return `
+    <div class="govuk-tabs app-navigation no-govuk-tabs-styles" data-module="govuk-tabs">
+      <h2 class="govuk-tabs__title">${label}</h2>
+      <ul class="govuk-tabs__list app-navigation__list" role="tabpanel">
+        ${tabsList}
+      </ul>
+      ${tabPanels}
+    </div>
+  `.trim();
+  });
+
+  // Find and store govuk tab for above tabs
+  eleventyConfig.addPairedShortcode("tab", function (content, label) {
+    tabsStorage.push({ label, content });
+    return "";
+  });
+
   eleventyConfig.addPairedShortcode("banner", function (content, title) {
     return `
       <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
@@ -185,7 +232,7 @@ module.exports = function (eleventyConfig) {
   `.trim();
   });
 
-// Find and store govuk tab for above tabs
+  // Find and store govuk tab for above tabs
   eleventyConfig.addPairedShortcode("accordionSection", function (content, label) {
     accordionSections.push({ label, content });
     return "";

docs/_includes/layouts/tabbed-component.njk

@@ -0,0 +1,14 @@
+{% extends "./base.njk" %}
+
+{% block content %}
+    <div class="app-layout__content">
+        <h1 class="govuk-heading-xl">
+          {% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
+          {{ title }}
+        </h1>
+
+        {{ content | safe }}
+
+        {% include "./partials/get-help-and-contribute.njk" %}
+    </div>
+{% endblock %}

docs/assets/stylesheets/application.scss

@@ -29,6 +29,7 @@ $govuk-assets-path: "../" !default;
 @import "./components/page";
 @import "./components/menu-toggle";
 @import "./components/app-card";
+@import "./components/documentation_tabs";
 
 
 @view-transition {