Use service navigation component for navigation

x-govuk · Sep 2, 2024 · 813ba42 · 813ba42
1 parent 5055a41
commit 813ba42
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 182 deletions.
diff --git a/components/header/_header.scss b/components/header/_header.scss
@@ -2,10 +2,6 @@
 // See: https://github.com/alphagov/govuk-design-system/blob/master/src/stylesheets/components/_header.scss
 
 @include govuk-exports("app-header") {
-  .app-header--full-width-border {
-    border-bottom: $govuk-border-width-wide solid $govuk-brand-colour;
-  }
-
   .app-header--no-border {
     border-bottom: 0;
   }

diff --git a/components/header/template.njk b/components/header/template.njk
@@ -1,10 +1,10 @@
 {%- from "../site-search/macro.njk" import appSiteSearch -%}
 {%- if options.navigation -%}
-  {%- set headerType = "full-width-border" -%}
+  {%- set headerClasses = " govuk-header--full-width-border" -%}
 {% elif layout == "product" or layout == "collection" %}
-  {%- set headerType = "no-border" -%}
+  {%- set headerClasses = " app-header--no-border" -%}
 {%- endif -%}
-<header class="govuk-header app-header{% if headerType %} app-header--{{ headerType }}{% endif %}" role="banner" data-module="govuk-header">
+<header class="govuk-header app-header{{ headerClasses }}" role="banner" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container app-header__container">
     <div class="govuk-header__logo app-header__logo">
       <a href="{{ params.homepageUrl | default("/") }}" class="govuk-header__link govuk-header__link--homepage">

diff --git a/layouts/base.njk b/layouts/base.njk
@@ -21,9 +21,9 @@
 {# Components #}
 {% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
 {% from "govuk/components/pagination/macro.njk" import govukPagination %}
+{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
 
 {% 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/sub-navigation/macro.njk" import xGovukSubNavigation %}
 
@@ -65,9 +65,9 @@
 
 {% block header %}
   {{ appHeader(options.header) }}
-  {{ xGovukPrimaryNavigation({
-    visuallyHiddenTitle: options.navigation.visuallyHiddenTitle,
-    items: options.navigation.items | currentPage(page.url)
+  {{ govukServiceNavigation({
+    navigationLabel: options.navigation.visuallyHiddenTitle,
+    navigation: options.navigation.items | currentPage(page.url)
   }) if options.navigation }}
 {% endblock %}
 

diff --git a/lib/filters/current-page.js b/lib/filters/current-page.js
@@ -6,7 +6,7 @@
  */
 module.exports = (array, pageUrl) => {
   return array.map((item) => {
-    item.current =
+    item.active =
       item.href === '/'
         ? pageUrl === '/' // Page is home page
         : pageUrl.startsWith(item.href) // Page is within navigation section