Header updates - breaking changes

CHANGELOG.md

@@ -164,6 +164,29 @@ We've made fixes to NHS.UK frontend in the following pull requests:
 
 :new: **New features**
 
+#### Updated header
+
+We've added a new header variant to show 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.
+- The primary navigation in the header now lets you show which item is the current section or page.
+- Update header navigation label from ’Primary navigation’ to ‘Menu’, and remove superfluous `role` and `id` attributes.
+- Update header navigation to align items to the left. To restore the previous behaviour, where navigation items appeared evenly spaced out, use the new `.nhsuk-header__navigation-list--justified` modifier class. If you are using the `.nhsuk-header__navigation-list--left-aligned` modifier class, this can now be removed.
+
+:boom: **Header breaking changes**
+
+- 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.
+- Replace the `searchAction` option with the nested `search.action` option
+- Replace the `searchInputName` option with the nested `search.name` option
+- Update `primaryLinks` in the header to use `text` and `href` instead of `label` and `url`.
+- We've changed the NHS logo in the header to have higher contrast when focused.
+- Remove hardcoded home link from navigation.
+- Refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element.
+
+To update your header, compare it with the [HTML markup for the header on the service manual website](https://service-manual.nhs.uk/design-system/components/header).
+
+[These changes were added in pull request #1058: Header updates - breaking changes.](https://github.com/nhsuk/nhsuk-frontend/pull/1058)
+
 #### Define negative spacing using the `nhsuk-spacing()` function
 
 You can now pass the negative equivalent of a point from the typography scale to the `nhsuk-spacing()` function to get negative spacing.

app/components/all.njk

@@ -9,28 +9,27 @@
   }) }}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "true",
+      "search": true,
       "primaryLinks": [
         {
-          "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'
         }
       ]
     })
@@ -45,7 +44,7 @@
         href: "#"
       },
       {
-        text: "Health A-Z",
+        text: "Health A to Z",
         href: "#"
       },
       {

app/components/header/header-account-logged-in.njk

@@ -0,0 +1,45 @@
+{% 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"
+        }
+      ]
+    },
+    primaryLinks: [
+      {
+        href: "#",
+        text: "Home"
+      },
+      {
+        href: "#",
+        text: "Services"
+      },
+      {
+        href: "#",
+        text: "Your health"
+      },
+      {
+        href: "#",
+        text: "Messages"
+      }, {
+        href: "#",
+        text: "Help and support"
+      }
+    ]
+  }) }}
+{% endblock %}

app/components/header/header-account-logged-out.njk

@@ -0,0 +1,19 @@
+{% 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 %}

app/components/header/header-account-rbac.njk

@@ -0,0 +1,49 @@
+{% 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"
+        }
+      ]
+    },
+    primaryLinks: [
+      {
+        href: "#",
+        text: "Home"
+      },
+      {
+        href: "#",
+        text: "Create user"
+      },
+      {
+        href: "#",
+        text: "Find user"
+      }
+    ]
+  }) }}
+{% endblock %}

app/components/header/header-logo.njk

@@ -3,11 +3,5 @@
 {% extends 'example.njk' %}
 
 {% block main %}
-
-  {{ header({
-      "showNav": "false",
-      "showSearch": "false"
-    })
-  }}
-
+  {{ header() }}
 {% endblock %}

app/components/header/header-navigation.njk

@@ -5,39 +5,32 @@
 {% block main %}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "false",
-      "primaryLinks": [
-        {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z",
-          "classes": "app-header__navigation-item--current",
-          "attributes": {
-            "aria-current": "true"
-          }
-        },
-        {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
-        },
-        {
-          'url' : 'https://www.nhs.uk/mental-health/',
-          'label' : 'Mental health'
-        },
-        {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
-        },
-        {
-          'url'  : 'https://www.nhs.uk/pregnancy/',
-          'label' : 'Pregnancy'
-        },
-        {
-          'url' : 'https://www.nhs.uk/nhs-services/',
-          'label' : 'NHS services'
-        }
-      ]
-    })
-  }}
-
+    primaryLinks: [
+      {
+        href: "#",
+        text: "Health A to Z"
+      },
+      {
+        href: "#",
+        text: "Live Well"
+      },
+      {
+        href: "#",
+        text: "Mental health"
+      },
+      {
+        href: "#",
+        text: "Care and support",
+        active: true
+      },
+      {
+        href: "#",
+        text: "Pregnancy"
+      },
+      {
+        href: "#",
+        text: "NHS services"
+      }
+    ]
+  }) }}
 {% endblock %}

app/components/header/header-org-white-account.njk

@@ -0,0 +1,54 @@
+{% set title = "Header organisational with white header and account" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+  {{ header({
+    classes: "nhsuk-header--white nhsuk-header--white-navigation",
+    logo: {
+      href: "#"
+    },
+    organisation: {
+      name: "Anytown Anyplace",
+      split: "Anywhere",
+      descriptor: "NHS Foundation Trust"
+    },
+    search: {
+      visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+    },
+    account: {
+      items: [
+        {
+          text: "Florence Nightingale",
+          icon: true
+        },
+        {
+          action: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    primaryLinks: [
+      {
+        href: "#",
+        text: "Your hospital visit"
+      },
+      {
+        href: "#",
+        text: "Wards and departments"
+      },
+      {
+        href: "#",
+        text: "Conditions and treatments"
+      },
+      {
+        href: "#",
+        text: "Our people"
+      },
+      {
+        href: "#",
+        text: "Our research"
+      }
+    ]
+  }) }}
+{% endblock %}

app/components/header/header-org-white-nav.njk

@@ -3,39 +3,41 @@
 {% extends 'example.njk' %}
 
 {% block main %}
-
-{{ header({
-    "showNav": "true",
-    "showSearch": "true",
-    "classes": "nhsuk-header--white nhsuk-header--white-nav",
-    "organisation": {
-      "name": "Anytown Anyplace",
-      "split": "Anywhere",
-      "descriptor": "NHS Foundation Trust"
+  {{ header({
+    classes: "nhsuk-header--white nhsuk-header--white-navigation",
+    logo: {
+      href: "#"
+    },
+    organisation: {
+      name: "Anytown Anyplace",
+      split: "Anywhere",
+      descriptor: "NHS Foundation Trust"
     },
-    "primaryLinks": [
+    primaryLinks: [
       {
-        "url"  : "#",
-        "label" : "Your hospital visit"
+        href: "#",
+        text: "Your hospital visit"
       },
       {
-        'url' : '#',
-        'label' : 'Wards and departments'
+        href: "#",
+        text: "Wards and departments",
+        active: true
       },
       {
-        'url'  : '#',
-        'label' : 'Conditions and treatments'
+        href: "#",
+        text: "Conditions and treatments"
       },
       {
-        'url'  : '#',
-        'label' : 'Our people'
+        href: "#",
+        text: "Our people"
       },
       {
-        'url' : '#',
-        'label' : 'Our research'
+        href: "#",
+        text: "Our research"
       }
-    ]
-  })
-}}
-
+    ],
+    search: {
+      visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+    }
+  }) }}
 {% endblock %}