nhsuk
diff --git a/‎CHANGELOG.md
Lines changed: 34 additions & 0 deletions b/‎CHANGELOG.md
Lines changed: 34 additions & 0 deletions
diff --git a/‎app/_templates/example.njk
Lines changed: 4 additions & 0 deletions b/‎app/_templates/example.njk
Lines changed: 4 additions & 0 deletions
diff --git a/‎app/components/all.njk
Lines changed: 16 additions & 21 deletions b/‎app/components/all.njk
Lines changed: 16 additions & 21 deletions
diff --git a/‎app/components/header/header-account-logged-in.njk
Lines changed: 49 additions & 0 deletions b/‎app/components/header/header-account-logged-in.njk
Lines changed: 49 additions & 0 deletions
diff --git a/‎app/components/header/header-account-logged-out.njk
Lines changed: 21 additions & 0 deletions b/‎app/components/header/header-account-logged-out.njk
Lines changed: 21 additions & 0 deletions
diff --git a/‎app/components/header/header-account-rbac.njk
Lines changed: 53 additions & 0 deletions b/‎app/components/header/header-account-rbac.njk
Lines changed: 53 additions & 0 deletions
diff --git a/‎app/components/header/header-logo.njk
Lines changed: 1 addition & 7 deletions b/‎app/components/header/header-logo.njk
Lines changed: 1 addition & 7 deletions
diff --git a/‎app/components/header/header-navigation-justified.njk
Lines changed: 40 additions & 0 deletions b/‎app/components/header/header-navigation-justified.njk
Lines changed: 40 additions & 0 deletions
diff --git a/‎app/components/header/header-navigation.njk
Lines changed: 17 additions & 21 deletions b/‎app/components/header/header-navigation.njk
Lines changed: 17 additions & 21 deletions
@@ -2,10 +2,44 @@
 
 ## Unreleased
 
+:new: **New features**
+
+#### New header with account section
+
+We’ve updated the header component to support account information and links. As part of this work we’ve also made some other improvements to the header, detailed below:
+
+- Show account information and links in the header.
+- Show currently active section or page in the navigation.
+- Remove hardcoded home link from the navigation.
+- Align navigation items to the left by default.
+- Update navigation label from ’Primary navigation’ to ‘Menu’, and remove superfluous `role` and `id` attributes.
+- Update NHS logo in the header to have higher contrast when focused.
+- Refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element.
+
+This was added in [pull request #1058: New header with account section](https://github.com/nhsuk/nhsuk-frontend/pull/1058).
+
 :boom: **Breaking changes**
 
 You must make the following changes when you migrate to this release, or your service might break.
 
+#### Update header component params
+
+If you’re using the `header` Nunjucks macro in your service, you must:
+
+- Remove the boolean `showNav`, `showSearch`, `transactional` and `transactionalService` options from the header component as respective parts of the header are shown automatically when `primaryLinks` or `search` options are provided.
+- Remove the `.nhsuk-header__navigation-list--left-aligned` modifier class, navigation items are now aligned left by default.
+- Replace the `searchAction` option with the nested `search.action` option.
+- Replace the `searchInputName` option with the nested `search.name` option.
+- Replace the `primaryLinks` option with the nested `navigation.items` option, using `text` and `href` instead of `label` and `url`.
+
+To restore the previous justified alignment, where navigation items appeared evenly spaced out, add the new `nhsuk-header__navigation--justified` modifier class to the nested `navigation.classes` option.
+
+#### Update header component HTML markup
+
+You do not need to do anything if you’re using Nunjucks macros.
+
+If you are not using Nunjucks macros, update your HTML markup using the [header examples in the NHS digital service manual](https://service-manual.nhs.uk/design-system/components/header).
+
 #### Rename component `HTML` param to `html`
 
 If you're using the `card`, `details`, `insetText` or `warningCallout` Nunjucks macros, you need to rename the `HTML` param to `html`.
 
@@ -1,2 +1,6 @@
 {% extends 'layout.njk' %}
+
 {% set htmlAttributes = {"style": "background-color: #f0f4f5;"} %}
+
+{# Turn the skip link off #}
+{% block skipLink %}{% endblock %}
@@ -3,38 +3,33 @@
 {% set title = 'Components' %}
 
 {% block header %}
-  {{ skipLink({
-    "URL": "#maincontent",
-    "heading": "Skip to main content"
-  }) }}
-
   {{ header({
-      "showNav": "true",
-      "showSearch": "true",
-      "primaryLinks": [
+    search: true,
+    navigation: {
+      items: [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z"
+          href: "https://www.nhs.uk/conditions",
+          text: "Health A to Z"
         },
         {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
+          href: 'https://www.nhs.uk/live-well/',
+          text: 'Live Well'
         },
         {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          href: 'https://www.nhs.uk/conditions/social-care-and-support/',
+          text: 'Care and support'
         },
         {
-          'url'  : 'https://www.nhs.uk/news/',
-          'label' : 'Health news'
+          href: 'https://www.nhs.uk/news/',
+          text: 'Health news'
         },
         {
-          'url' : 'https://www.nhs.uk/service-search',
-          'label' : 'Services near you'
+          href: 'https://www.nhs.uk/service-search',
+          text: 'Services near you'
         }
       ]
-    })
-  }}
+    }
+  }) }}
 {% endblock %}
 
 {% block beforeContent %}
@@ -45,7 +40,7 @@
         href: "#"
       },
       {
-        text: "Health A-Z",
+        text: "Health A to Z",
         href: "#"
       }
     ]
 
@@ -0,0 +1,49 @@
+{% set title = "Header with account (logged in)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Manage patients"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "florence.nightingale@nhs.net",
+          icon: true
+        },
+        {
+          action: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Home"
+        },
+        {
+          href: "#",
+          text: "Services"
+        },
+        {
+          href: "#",
+          text: "Your health"
+        },
+        {
+          href: "#",
+          text: "Messages"
+        }, {
+          href: "#",
+          text: "Help and support"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
@@ -0,0 +1,21 @@
+{% set title = "Header with account (logged out)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Manage patients"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "Log in"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
@@ -0,0 +1,53 @@
+{% set title = "Header with account (logged in, RBAC)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Manage patients"
+    },
+    search: {
+      placeholder: "NHS number, date of birth",
+      visuallyHiddenLabel: "Search for a user"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "Florence Nightingale",
+          icon: true
+        },
+        {
+          text: "RA Manager, Hull and East Yorkshire Hospitals NHS Trust (RWA)"
+        },
+        {
+          href: "#",
+          text: "Change role"
+        },
+        {
+          action: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Home"
+        },
+        {
+          href: "#",
+          text: "Create user"
+        },
+        {
+          href: "#",
+          text: "Find user"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
@@ -3,11 +3,5 @@
 {% extends 'example.njk' %}
 
 {% block main %}
-
-  {{ header({
-      "showNav": "false",
-      "showSearch": "false"
-    })
-  }}
-
+  {{ header() }}
 {% endblock %}
@@ -0,0 +1,40 @@
+{% set title = 'Header with navigation' %}
+{% from 'components/header/macro.njk' import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    navigation: {
+      classes: "nhsuk-header__navigation--justified",
+      items: [
+        {
+          href: "#",
+          text: "Health A to Z"
+        },
+        {
+          href: "#",
+          text: "Live Well"
+        },
+        {
+          href: "#",
+          text: "Mental health"
+        },
+        {
+          href: "#",
+          text: "Care and support"
+        },
+        {
+          href: "#",
+          text: "Pregnancy",
+          active: true
+        },
+        {
+          href: "#",
+          text: "NHS services"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
@@ -5,39 +5,35 @@
 {% block main %}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "false",
-      "primaryLinks": [
+    navigation: {
+      items: [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z",
-          "classes": "app-header__navigation-item--current",
-          "attributes": {
-            "aria-current": "true"
-          }
+          href: "#",
+          text: "Health A to Z"
         },
         {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
+          href: "#",
+          text: "Live Well"
         },
         {
-          'url' : 'https://www.nhs.uk/mental-health/',
-          'label' : 'Mental health'
+          href: "#",
+          text: "Mental health"
         },
         {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          href: "#",
+          text: "Care and support"
         },
         {
-          'url'  : 'https://www.nhs.uk/pregnancy/',
-          'label' : 'Pregnancy'
+          href: "#",
+          text: "Pregnancy",
+          active: true
         },
         {
-          'url' : 'https://www.nhs.uk/nhs-services/',
-          'label' : 'NHS services'
+          href: "#",
+          text: "NHS services"
         }
       ]
-    })
-  }}
+    }
+  }) }}
 
 {% endblock %}