From c64d1cbf808b001d3ddc45e2dfa2759b1679550a Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Date: Fri, 24 Jun 2022 18:35:00 +0100
Subject: [PATCH] Add primary navigation component. Fixes #34

---
 README.md                                     |  2 +
 .../components/primary-navigation/README.md   | 42 ++++++++++++
 .../_primary-navigation.scss                  | 65 +++++++++++++++++++
 .../components/primary-navigation/macro.njk   |  3 +
 .../primary-navigation/template.njk           | 17 +++++
 5 files changed, 129 insertions(+)
 create mode 100644 x-govuk/components/primary-navigation/README.md
 create mode 100644 x-govuk/components/primary-navigation/_primary-navigation.scss
 create mode 100644 x-govuk/components/primary-navigation/macro.njk
 create mode 100644 x-govuk/components/primary-navigation/template.njk

diff --git a/README.md b/README.md
index 05692ee..c2c7962 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ GOV.UK Prototype Components contains the code you need to use common or experime
 | - | - |
 | [xGovukAutocomplete](https://x-govuk.github.io/govuk-prototype-components/autocomplete/) | Implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `<select>` element. |
 | [xGovukMasthead](https://x-govuk.github.io/govuk-prototype-components/masthead/) | Implements the masthead component [used on many GOV.UK product pages](https://github.com/alphagov/product-page-example). |
+| [xGovukPrimaryNavigation](https://x-govuk.github.io/govuk-prototype-components/primary-navigation/) | Implements the primary navigation component used on the GOV.UK Design System website. |
 | [xGovukRelatedNavigation](https://x-govuk.github.io/govuk-prototype-components/related-navigation/) | Implements [related navigation component](https://components.publishing.service.gov.uk/component-guide/related_navigation) found in the `govuk_publishing_components` gem. |
 | [xGovukSideNavigation](https://x-govuk.github.io/govuk-prototype-components/side-navigation/) | Implements the side navigation component used on the GOV.UK Design System website. |
 | [xGovukSummaryCard](https://x-govuk.github.io/govuk-prototype-components/summary-card/) | Implements a component [proposed for inclusion in the GOV.UK Design System](https://github.com/alphagov/govuk-design-system-backlog/issues/210). |
@@ -118,6 +119,7 @@ You can then import the component macros as you would those provided by GOV.UK F
 ```njk
 {% raw %}{% from "x-govuk/components/autocomplete/macro.njk" import xGovukAutocomplete with context %}
 {% from "x-govuk/components/masthead/macro.njk" import xGovukMasthead %}
+{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
 {% from "x-govuk/components/related-navigation/macro.njk" import xGovukRelatedNavigation %}
 {% from "x-govuk/components/side-navigation/macro.njk" import xGovukSideNavigation %}
 {% from "x-govuk/components/summary-card/macro.njk" import xGovukSummaryCard %}
diff --git a/x-govuk/components/primary-navigation/README.md b/x-govuk/components/primary-navigation/README.md
new file mode 100644
index 0000000..f3bef54
--- /dev/null
+++ b/x-govuk/components/primary-navigation/README.md
@@ -0,0 +1,42 @@
+# Primary navigation
+
+Implements the primary navigation component used on the GOV.UK Design System website.
+
+## Example usage
+
+```njk
+{{ xGovukPrimaryNavigation({
+  visuallyHiddenTitle: 'Navigation',
+  items: [{
+    text: "About this project",
+    href: "/about"
+  }, {
+    text: "Contact us",
+    href: "/contact"
+  }]
+}) }}
+```
+
+## 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 side navigation. See [items](#options-for-items). |
+| **classes** | string | Classes to add to the primary navigation container. |
+| **attributes** | object | HTML attributes (for example data attributes) to add to the primary navigation container. |
+| **visuallyHiddenTitle** | string | A hidden title for the side 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. |
+| **classes** | string | Classes to add to the navigation item. |
diff --git a/x-govuk/components/primary-navigation/_primary-navigation.scss b/x-govuk/components/primary-navigation/_primary-navigation.scss
new file mode 100644
index 0000000..938dcf4
--- /dev/null
+++ b/x-govuk/components/primary-navigation/_primary-navigation.scss
@@ -0,0 +1,65 @@
+.x-govuk-primary-navigation {
+  @include govuk-font(19, $weight: bold);
+  background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid $govuk-border-colour;
+}
+
+.govuk-phase-banner + .x-govuk-primary-navigation {
+  margin-top: -1px;
+}
+
+.x-govuk-primary-navigation__list {
+  @include govuk-clearfix;
+  left: govuk-spacing(-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  right: govuk-spacing(-3);
+  width: calc(100% + #{govuk-spacing(6)});
+}
+
+.x-govuk-primary-navigation__item {
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  line-height: 50px;
+  height: 50px;
+  padding: 0 govuk-spacing(3);
+  position: relative;
+}
+
+.x-govuk-primary-navigation__item--current {
+  border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
+
+  &:hover {
+    border-bottom-color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    border-bottom-color: $govuk-link-active-colour;
+  }
+}
+
+.x-govuk-primary-navigation__item--align-right {
+  @include govuk-media-query($from: tablet) {
+    float: right;
+  }
+}
+
+.x-govuk-primary-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  @include govuk-typography-weight-bold;
+
+  // Extend the touch area of the link to the list
+  &:after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
diff --git a/x-govuk/components/primary-navigation/macro.njk b/x-govuk/components/primary-navigation/macro.njk
new file mode 100644
index 0000000..f214602
--- /dev/null
+++ b/x-govuk/components/primary-navigation/macro.njk
@@ -0,0 +1,3 @@
+{% macro xGovukPrimaryNavigation(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/x-govuk/components/primary-navigation/template.njk b/x-govuk/components/primary-navigation/template.njk
new file mode 100644
index 0000000..7b8e239
--- /dev/null
+++ b/x-govuk/components/primary-navigation/template.njk
@@ -0,0 +1,17 @@
+<nav class="x-govuk-primary-navigation {%- if params.classes %} {{ params.classes }}{% endif -%}" aria-labelledby="x-govuk-primary-navigation-heading"
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="govuk-width-container">
+    <h2 class="govuk-visually-hidden" id="x-govuk-primary-navigation-heading">{{ params.visuallyHiddenTitle or "Menu" }}</h2>
+    <ul class="x-govuk-primary-navigation__list">
+      {%- for item in params.items %}
+        {% if item.href %}
+          <li class="x-govuk-primary-navigation__item {{ "x-govuk-primary-navigation__item--current" if item.current }}{% if item.classes %} {{ item.classes }}{% endif -%}">
+            <a class="x-govuk-primary-navigation__link" {{ "aria-current=page" if item.current }} href="{{ item.href }}">
+              {{- item.text -}}
+            </a>
+          </li>
+        {% endif %}
+      {% endfor -%}
+    </ul>
+  </div>
+</nav>