Fix homepage active state in navigation and add parameter to allow th…

…is to work properly in the prototype kit (#401)
ONSdigital · Jun 4, 2019 · 49bdd90 · 49bdd90
1 parent cd0476f
commit 49bdd90
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 15 deletions.
diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md
@@ -14,14 +14,15 @@
 
 ## Navigation
 
-| Name          | Type          | Required | Description                                                |
-| ------------- | ------------- | -------- | ---------------------------------------------------------- |
-| currentPath   | string        | true     | Path to the default active page                            |
-| classes       | string        | false    | Additional css classes for the navigation element          |
-| id            | string        | true     | A unique ID for the navigation element                     |
-| ariaLabel     | string        | true     | The aria-label added to the navigation element             |
-| ariaListLabel | string        | true     | The aria-label added to the navigation list                |
-| itemsList     | `Array<Item>` | true     | An array of list items to render in the navigation element |
+| Name          | Type          | Required | Description                                                                                                                                 |
+| ------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| currentPath   | string        | true     | Path to the default active page                                                                                                             |
+| classes       | string        | false    | Additional css classes for the navigation element                                                                                           |
+| id            | string        | true     | A unique ID for the navigation element                                                                                                      |
+| ariaLabel     | string        | true     | The aria-label added to the navigation element                                                                                              |
+| ariaListLabel | string        | true     | The aria-label added to the navigation list                                                                                                 |
+| itemsList     | `Array<Item>` | true     | An array of list items to render in the navigation element                                                                                  |
+| siteBasePath  | string        | false    | If the base path for your site is not `/` (i.e. in a prototype), you can use this to get the active functionality working on your Home link |
 
 ## Item
 

diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
@@ -100,7 +100,7 @@
                   <nav class="header-nav header-nav--mobile js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel }}">
                       <ul class="header-nav__list" aria-label="{{ params.navigation.ariaListLabel }}" role="menubar">
                           {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
-                              <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url in params.navigation.currentPath) }}">
+                              <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
                                   <a href="{{ item.url }}" class="header-nav__link" role="menuitem">{{ item.title }}</a>
                               </li>
                           {% endfor %}

diff --git a/src/get-started/index.njk b/src/get-started/index.njk
@@ -1,6 +1,6 @@
 ---
 title: Get started
-sortOrder: 1
+sortOrder: 2
 ---
 You can start using the latest version of the ONS Design System in your service right now. All of the styles, assets and components are production ready. 
 

diff --git a/src/index.njk b/src/index.njk
@@ -1,6 +1,7 @@
 ---
-title: ONS Design System - Homepage
+title: Home
 layout: home
+sortOrder: 1
 ---
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/card/_macro.njk" import onsCard %}

diff --git a/src/patterns/index.njk b/src/patterns/index.njk
@@ -1,5 +1,6 @@
 ---
 title: Patterns
+sortOrder: 4
 ---
 Patterns are best practice, simple, and reusable solutions to users' commonly occurring tasks or problems,
 built up of [components](/components).
diff --git a/src/styles/index.njk b/src/styles/index.njk
@@ -1,5 +1,6 @@
 ---
 title: Styles
+sortOrder: 5
 ---
 
 Styles make up the foundations on which ONS digital products and services are built.  

diff --git a/src/views/layouts/_home.njk b/src/views/layouts/_home.njk
@@ -20,8 +20,7 @@
                 "ariraListLabel": "Navigation menu",
                 "currentPath": pageInfo.url,
                 "itemsList": helpers.navigationHelper({ 
-                    "pages": pageInfo.siteMap,
-                    "ignoreURLs": ["/"]
+                    "pages": pageInfo.siteMap
                 })
             }
         })

diff --git a/src/views/layouts/_page.njk b/src/views/layouts/_page.njk
@@ -20,8 +20,7 @@
                 "ariraListLabel": "Navigation menu",
                 "currentPath": pageInfo.url,
                 "itemsList": helpers.navigationHelper({ 
-                    "pages": pageInfo.siteMap,
-                    "ignoreURLs": ["/"]
+                    "pages": pageInfo.siteMap
                 })
             }
         })