Add sub navigation component

x-govuk/components/_all.scss

@@ -2,5 +2,6 @@
 @import "masthead/masthead";
 @import "related-navigation/related-navigation";
 @import "side-navigation/side-navigation";
+@import "sub-navigation/sub-navigation";
 @import "summary-card/summary-card";
 @import "task-list/task-list";

x-govuk/components/sub-navigation/README.md

@@ -0,0 +1,65 @@
+---
+eleventyExcludeFromCollections: true
+---
+
+# Sub navigation
+
+Implements the sub navigation component used on the GOV.UK Design System website.
+
+## Example usage
+
+```njk
+{{ xGovukSubNavigation({
+  visuallyHiddenTitle: 'Navigation',
+  items: [{
+    text: "About this project",
+    href: "/about"
+  }, {
+    text: "Contact us",
+    href: "/contact",
+    current: true,
+    parent: true,
+    children: [{
+      text: "By email",
+      href: "/contact/email",
+    }, {
+      text: "By telephone",
+      href: "/contact/telephone",
+    }]
+  }]
+}) }}
+```
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+Some options are required for the macro to work; these are marked as “Required” in the option description.
+
+If you’re using Nunjucks macros in production with `html` options, or ones ending with `html`, you must sanitise the HTML to protect against [cross-site scripting exploits](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting).
+
+| Name | Type | Description |
+| :--- | :--- | :---------- |
+| **items** | array | **Required**. An array of navigation links within the sub navigation. See [items](#options-for-items). |
+| **classes** | string | Classes to add to the related navigation. |
+| **attributes** | object | HTML attributes (for example data attributes) to add to the related navigation. |
+| **visuallyHiddenTitle** | string | A hidden title for the sub navigation. |
+
+### Options for items
+
+| Name | Type | Description |
+| :--- | :--- | :---------- |
+| **text** | string | **Required**. Text of the navigation link. |
+| **href** | array | **Required**. The value of the navigation link’s `href` attribute. |
+| **current** | boolean | Indicate that the item is the current page. |
+| **parent** | boolean | Indicate if the item is a parent. Use when the current item or any of its children are active. |
+| **theme** | string | A name to group items by. If several navigation items share the same theme, they will appear together under that name. |
+| **children** | string | An array of items as child navigation links. See [children](#options-for-children). |
+
+### Options for children
+
+| Name | Type | Description |
+| :--- | :--- | :---------- |
+| **text** | string | **Required**. Text of the navigation link. |
+| **href** | array | **Required**. The value of the navigation link’s `href` attribute. |
+| **current** | boolean | Indicate that the item is the current page. |

x-govuk/components/sub-navigation/_sub-navigation.scss

@@ -0,0 +1,58 @@
+.x-govuk-sub-navigation {
+  @include govuk-font(16);
+}
+
+.x-govuk-sub-navigation__section {
+  list-style-type: none;
+  margin: 0 0 govuk-spacing(4);
+  padding: 0;
+}
+
+.x-govuk-sub-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  padding-bottom: govuk-spacing(1);
+  padding-top: govuk-spacing(1);
+
+  &:not(:focus):hover {
+    color: $govuk-link-colour;
+  }
+}
+
+.x-govuk-sub-navigation__section-item {
+  margin-bottom: govuk-spacing(1);
+  padding-bottom: govuk-spacing(1);
+  padding-top: govuk-spacing(1);
+}
+
+.x-govuk-sub-navigation__section-item--current {
+  $_current-indicator-width: 4px;
+  background-color: govuk-colour("white");
+  border-left: $_current-indicator-width solid $govuk-brand-colour;
+  margin-left: -(govuk-spacing(2) + $_current-indicator-width);
+  padding-left: govuk-spacing(2);
+}
+
+.x-govuk-sub-navigation__link[aria-current] {
+  font-weight: bold;
+}
+
+.x-govuk-sub-navigation__section--nested {
+  margin-bottom: 0;
+  margin-top: govuk-spacing(2);
+  padding-left: govuk-spacing(4);
+}
+
+.x-govuk-sub-navigation__section--nested .x-govuk-sub-navigation__section-item:before {
+  color: govuk-colour("dark-grey");
+  content: "—";
+  margin-left: -(govuk-spacing(4));
+}
+
+.x-govuk-sub-navigation__theme {
+  @include govuk-font(19);
+  color: govuk-colour("dark-grey");
+  margin: 0;
+  padding: govuk-spacing(2) govuk-spacing(3) govuk-spacing(2) 0;
+}

x-govuk/components/sub-navigation/macro.njk

@@ -0,0 +1,3 @@
+{% macro xGovukSubNavigation(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

x-govuk/components/sub-navigation/template.njk

@@ -0,0 +1,25 @@
+<nav class="x-govuk-sub-navigation{%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="x-govuk-sub-navigation-heading"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{value}}"{% endfor %}>
+  <h2 class="govuk-visually-hidden" id="x-govuk-sub-navigation-heading">{{ params.visuallyHiddenTitle or "Pages in this section" }}</h2>
+  {% for theme, items in params.items | groupby("theme") %}
+    {% if theme != "undefined" %}
+      <h3 class="x-govuk-sub-navigation__theme">{{ theme }}</h3>
+    {% endif %}
+    <ul class="x-govuk-sub-navigation__section">
+      {% for item in items %}
+        <li class="x-govuk-sub-navigation__section-item{% if item.parent %} x-govuk-sub-navigation__section-item--current{% endif %}">
+          <a class="x-govuk-sub-navigation__link" href="{{ item.href }}"{% if item.current %} aria-current="true"{% endif %}>{{ item.text }}</a>
+          {% if item.parent and item.children | length > 0 %}
+            <ul class="x-govuk-sub-navigation__section x-govuk-sub-navigation__section--nested">
+              {% for child in item.children %}
+                <li class="x-govuk-sub-navigation__section-item">
+                  <a class="x-govuk-sub-navigation__link" href="{{ child.href }}"{% if child.current %} aria-current="true"{% endif %}>{{ child.text }}</a>
+                </li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endfor %}
+</nav>