15 section navigation (#175)

* Added examples of the header component

* Added macro options

* Added macro options amend

* Added mobile nav functionality

* Started to add tests for nav js

* Merge with master

* Sorted white logo svg code

* Unit test for mobile nav

* fixed collapsible test

* Added text for header

* Added more docs

* Split navigation scss

* Fixes for PR

* Updated examples with fullWidth param

* Created section nav component

* Added section nav and cleaned up navigation scss

* Updated mq scss

src/components/header/_macro-options.md

@@ -27,5 +27,5 @@
 | Name    | Type   | Required | Description                                       |
 | ------- | ------ | -------- | ------------------------------------------------- |
 | classes | string | false    | Additional css classes for the navigation element |
-| path    | string | true     | The value of the description term                 |
-| title   | string | true     | The value of the description term                 |
+| path    | string | true     | The path to the linked page                       |
+| title   | string | true     | The text for the link                             |

src/components/section-navigation/_macro-options.md

@@ -0,0 +1,14 @@
+| Name          | Type          | Required | Description                                                        |
+| ------------- | ------------- | -------- | ------------------------------------------------------------------ |
+| currentPath   | string        | true     | Path to the default active page                                    |
+| ariaLabel     | string        | true     | The aria-label added to the section navigation element             |
+| ariaListLabel | string        | true     | The aria-label added to the section navigation list                |
+| items         | `Array<Item>` | true     | An array of list items to render in the section navigation element |
+
+## Item
+
+| Name    | Type   | Required | Description                                               |
+| ------- | ------ | -------- | --------------------------------------------------------- |
+| classes | string | false    | Additional css classes for the section navigation element |
+| path    | string | true     | The path to the linked page                               |
+| title   | string | true     | The text for the link                                     |

src/components/section-navigation/_macro.njk

@@ -0,0 +1,3 @@
+{% macro onsSectionNavigation(params) %}
+  {% include "components/section-navigation/_template.njk" %}
+{% endmacro %}

src/components/section-navigation/_section-navigation.scss

@@ -0,0 +1,33 @@
+.section-nav {
+  border-bottom: 1px solid $color-borders;
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    font-size: 1rem;
+    display: inline-block;
+    margin: 0 0 0 1rem;
+    text-align: center;
+    &:hover,
+    &--active {
+      border-bottom: 4px solid $color-dark-blue;
+      a {
+        color: $color-dark-blue;
+      }
+    }
+    &--active {
+      font-weight: bold;
+    }
+  }
+
+  &__link {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

src/components/section-navigation/_template.njk

@@ -0,0 +1,9 @@
+<nav class="section-nav" id="{{ params.id }}" aria-label="{{ params.ariaLabel }}">
+    <ul class="section-nav__list" aria-label="{{ params.ariaListLabel }}" role="menubar">
+       {% for item in params.items %}
+            <li class="section-nav__item {{ item.classes }}{{ ' section-nav__item--active' if (item.path == params.currentPath) or (item.path in params.currentPath) }}">
+                <a href="{{ item.path }}" class="section-nav__link" role="menuitem">{{ item.title }}</a>
+            </li>
+       {% endfor %}
+    </ul>
+</nav>

src/components/section-navigation/examples/section-navigation/index.njk

@@ -0,0 +1,22 @@
+{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}
+{{ 
+    onsSectionNavigation({
+        "ariaLabel": "Section menu",
+        "ariraListLabel": "Navigation menu",
+        "currentPath": "#",
+        "items": [
+            {
+                "title": "Section 1",
+                "path": "#"
+            },
+            {
+                "title": "Section 2",
+                "path": "#/"
+            },
+            {
+                "title": "Section 3",
+                "path": "#/"
+            }
+        ]
+    })
+}}

src/components/section-navigation/index.njk

@@ -0,0 +1,25 @@
+---
+title: Section navigation
+---
+Navigation to move across pages from within a main section.
+
+{% from "views/partials/example/_macro.njk" import patternlibExample %}
+
+{{
+    patternlibExample({"path": "components/section-navigation/examples/section-navigation/index.njk"})
+}}
+
+## When to use this component
+This component should be used to allow users to move between pages that are not necessarily at a global/site wide level but are within a specific context and need to be grouped at the same level.
+
+## How to use this component
+This component can be implemented with main navigation in the [Header](/components/header#external-with-navigation) component to give hierarchy to the content within a service. It can however, be used without any parent level navigation as a way to switch across pages of the same type, for example, moving between different views on a survey list (completed, to do, archived etc).
+
+## Research on this component
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% call onsPanel() %}
+   If you have conducted any user research using this component, please feed back your findings via the <a href="https://github.com/ONSdigital/pattern-library-v2/issues/174" target="_blank">Design System forum</a>.
+{% endcall %}
+
+## Design System forum 
+[Discuss 'Section navigation' on GitHub](https://github.com/ONSdigital/pattern-library-v2/issues/174)

src/views/layouts/_page.njk

@@ -43,7 +43,6 @@
                     {% endif %}
                     {{
                         patternlibSubNavigation({
-                            "classes": "nav--vertical-bare",
                             "ariaLabel": "Sub menu",
                             "ariraListLabel": "Child menu",
                             "currentPath": pageInfo.path,

src/views/partials/sub-navigation/_sub-navigation.scss

@@ -0,0 +1,29 @@
+.patternlib-subnav {
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    margin: 0;
+    padding: 0.25rem 0;
+
+    &--active {
+      font-weight: 700;
+    }
+  }
+
+  &__link {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &__sub-items {
+    padding: 0 0 0 1rem;
+    list-style: none;
+    font-weight: normal;
+  }
+}

src/views/partials/sub-navigation/_template.njk

@@ -1,13 +1,13 @@
-<nav class="nav {{ params.classes }}" aria-label="{{ params.ariaLabel }}">
-    <ul class="nav__list" aria-label="{{ params.ariaListLabel }}" role="menubar">
+<nav class="patternlib-subnav" aria-label="{{ params.ariaLabel }}">
+    <ul class="patternlib-subnav__list" aria-label="{{ params.ariaListLabel }}" role="menubar">
        {% for item in params.items %}
-            <li class="nav__item {{ ' nav__item--active' if (item.path == params.currentPath) or (item.path in params.currentPath) }}">
-                <a href="{{ item.path }}" class="nav__link" role="menuitem">{{ item.title }}</a>
+            <li class="patternlib-subnav__item {{ ' patternlib-subnav__item--active' if (item.path == params.currentPath) or (item.path in params.currentPath) }}">
+                <a href="{{ item.path }}" class="patternlib-subnav__link" role="menuitem">{{ item.title }}</a>
                 {% if item.anchors %}
-                    <ul class="patterlib-subnav__sub-items">
+                    <ul class="patternlib-subnav__sub-items">
                         {% for anchor in item.anchors %}
-                            <li class="nav__item">
-                                <a href="{{ anchor.path }}" class="nav__link" role="menuitem">{{ anchor.title }}</a>
+                            <li class="patternlib-subnav__item">
+                                <a href="{{ anchor.path }}" class="patternlib-subnav__link" role="menuitem">{{ anchor.title }}</a>
                             </li>
                         {% endfor %}
                     </ul>