From d4ce6d4e1294a853688657537d44dd37f9e4d708 Mon Sep 17 00:00:00 2001 From: Matt Simon Date: Fri, 15 Feb 2019 10:53:17 +0000 Subject: [PATCH] 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 | 4 +-- src/components/navigation/_macro.njk | 3 -- src/components/navigation/_navigation.scss | 20 ----------- src/components/navigation/_template.njk | 9 ----- src/components/navigation/index.njk | 3 -- .../section-navigation/_macro-options.md | 14 ++++++++ src/components/section-navigation/_macro.njk | 3 ++ .../_section-navigation.scss | 33 +++++++++++++++++++ .../section-navigation/_template.njk | 9 +++++ .../examples/section-navigation/index.njk | 22 +++++++++++++ src/components/section-navigation/index.njk | 25 ++++++++++++++ src/get-started/code/index.njk | 5 --- src/views/layouts/_page.njk | 1 - .../sub-navigation/_sub-navigaiton.scss | 7 ---- .../sub-navigation/_sub-navigation.scss | 29 ++++++++++++++++ .../partials/sub-navigation/_template.njk | 14 ++++---- 16 files changed, 144 insertions(+), 57 deletions(-) delete mode 100644 src/components/navigation/_macro.njk delete mode 100644 src/components/navigation/_navigation.scss delete mode 100644 src/components/navigation/_template.njk delete mode 100644 src/components/navigation/index.njk create mode 100644 src/components/section-navigation/_macro-options.md create mode 100644 src/components/section-navigation/_macro.njk create mode 100644 src/components/section-navigation/_section-navigation.scss create mode 100644 src/components/section-navigation/_template.njk create mode 100644 src/components/section-navigation/examples/section-navigation/index.njk create mode 100644 src/components/section-navigation/index.njk delete mode 100644 src/get-started/code/index.njk delete mode 100644 src/views/partials/sub-navigation/_sub-navigaiton.scss create mode 100644 src/views/partials/sub-navigation/_sub-navigation.scss diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md index b243e33012..e33723db33 100644 --- a/src/components/header/_macro-options.md +++ b/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 | diff --git a/src/components/navigation/_macro.njk b/src/components/navigation/_macro.njk deleted file mode 100644 index 08667b4ff1..0000000000 --- a/src/components/navigation/_macro.njk +++ /dev/null @@ -1,3 +0,0 @@ -{% macro onsNavigation(params) %} - {% include "components/navigation/_template.njk" %} -{% endmacro %} diff --git a/src/components/navigation/_navigation.scss b/src/components/navigation/_navigation.scss deleted file mode 100644 index 720679466f..0000000000 --- a/src/components/navigation/_navigation.scss +++ /dev/null @@ -1,20 +0,0 @@ -.nav--vertical-bare { - .nav__list { - list-style: none; - margin: 0; - padding: 0; - } - - .nav__item { - margin: 0; - padding: 0.25rem 0; - - &--active { - font-weight: 700; - } - } - - .nav__link { - text-decoration: none; - } -} diff --git a/src/components/navigation/_template.njk b/src/components/navigation/_template.njk deleted file mode 100644 index 6b0a265416..0000000000 --- a/src/components/navigation/_template.njk +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/src/components/navigation/index.njk b/src/components/navigation/index.njk deleted file mode 100644 index 486fed1e8a..0000000000 --- a/src/components/navigation/index.njk +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: Navigation ---- diff --git a/src/components/section-navigation/_macro-options.md b/src/components/section-navigation/_macro-options.md new file mode 100644 index 0000000000..1ac0492e09 --- /dev/null +++ b/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` | 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 | diff --git a/src/components/section-navigation/_macro.njk b/src/components/section-navigation/_macro.njk new file mode 100644 index 0000000000..8daeaf6154 --- /dev/null +++ b/src/components/section-navigation/_macro.njk @@ -0,0 +1,3 @@ +{% macro onsSectionNavigation(params) %} + {% include "components/section-navigation/_template.njk" %} +{% endmacro %} diff --git a/src/components/section-navigation/_section-navigation.scss b/src/components/section-navigation/_section-navigation.scss new file mode 100644 index 0000000000..25793e69e2 --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/section-navigation/_template.njk b/src/components/section-navigation/_template.njk new file mode 100644 index 0000000000..b2de3aba49 --- /dev/null +++ b/src/components/section-navigation/_template.njk @@ -0,0 +1,9 @@ + diff --git a/src/components/section-navigation/examples/section-navigation/index.njk b/src/components/section-navigation/examples/section-navigation/index.njk new file mode 100644 index 0000000000..fb23938aa1 --- /dev/null +++ b/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": "#/" + } + ] + }) +}} diff --git a/src/components/section-navigation/index.njk b/src/components/section-navigation/index.njk new file mode 100644 index 0000000000..2c5f40afe0 --- /dev/null +++ b/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 Design System forum. +{% endcall %} + +## Design System forum +[Discuss 'Section navigation' on GitHub](https://github.com/ONSdigital/pattern-library-v2/issues/174) diff --git a/src/get-started/code/index.njk b/src/get-started/code/index.njk deleted file mode 100644 index c212ae520e..0000000000 --- a/src/get-started/code/index.njk +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Writing code -sortOrder: 1 ---- -Lorem ipsum diff --git a/src/views/layouts/_page.njk b/src/views/layouts/_page.njk index c114466dd5..b79cfb2183 100644 --- a/src/views/layouts/_page.njk +++ b/src/views/layouts/_page.njk @@ -43,7 +43,6 @@ {% endif %} {{ patternlibSubNavigation({ - "classes": "nav--vertical-bare", "ariaLabel": "Sub menu", "ariraListLabel": "Child menu", "currentPath": pageInfo.path, diff --git a/src/views/partials/sub-navigation/_sub-navigaiton.scss b/src/views/partials/sub-navigation/_sub-navigaiton.scss deleted file mode 100644 index 0e21f5e6f5..0000000000 --- a/src/views/partials/sub-navigation/_sub-navigaiton.scss +++ /dev/null @@ -1,7 +0,0 @@ -.patterlib-subnav { - &__sub-items { - padding: 0 0 0 1rem; - list-style: none; - font-weight: normal; - } -} diff --git a/src/views/partials/sub-navigation/_sub-navigation.scss b/src/views/partials/sub-navigation/_sub-navigation.scss new file mode 100644 index 0000000000..b62db6da95 --- /dev/null +++ b/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; + } +} diff --git a/src/views/partials/sub-navigation/_template.njk b/src/views/partials/sub-navigation/_template.njk index f65b28853f..dece818a57 100644 --- a/src/views/partials/sub-navigation/_template.njk +++ b/src/views/partials/sub-navigation/_template.njk @@ -1,13 +1,13 @@ -