Change primaryLinks to use href and text instead of url and label

CHANGELOG.md

@@ -15,10 +15,32 @@
 
 :wrench: **Fixes**
 
+- Remove the boolean `showNav`, `showSearch` and `transactional` options from the header component. Respective parts of the header are now shown if values for `primaryLinks`, `search` or `transactionalService` options are provided. Additionally, the `searchAction` option is renamed `search.action` and the `searchInputName` option is renamed `search.name`. Finally, the label, button and placeholder text for the search input can be updated using the new `search.visuallyHiddenLabel`, `search.visuallyHiddenButton` and `search.placeholder` options. ([PR 996](https://github.com/nhsuk/nhsuk-frontend/pull/996))
 - Fix navigation items not flowing into the overflow drop-down menu on desktop ([PR 1062](https://github.com/nhsuk/nhsuk-frontend/pull/1062))
 - Update header styles so that `.nhsuk-header__search-no-nav` class is no longer needed when header contains a search field but no navigation ([PR 1046](https://github.com/nhsuk/nhsuk-frontend/pull/1046))
 - Update navigation list item padding to vertically align navigation items with width container ([PR 1033](https://github.com/nhsuk/nhsuk-frontend/pull/1033))
 
+:boom: **Breaking changes**
+
+- The NHS logo in the header has been updated so that it can have higher contrast when focused. ([PR 1047]([https://github.com/nhsuk/nhsuk-frontend/pull/1047]))
+
+  Previously the logo used the following SVG:
+
+  ```svg
+  <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
+    <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
+    <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+  </svg>
+  ```
+
+  This has been updated to use the following SVG:
+
+  ```svg
+  <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100">
+    <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/>
+  </svg>
+  ```
+
 ## 9.0.1 - 9 October 2024
 
 :wrench: **Fixes**

app/_templates/page.njk

@@ -38,11 +38,8 @@
   }) }}
 
   {{ header({
-    "showNav": "false",
-    "showSearch": "false",
     "homeHref": baseUrl
-    })
-  }}
+  }) }}
 {% endblock %}
 
 

app/components/all.njk

@@ -36,28 +36,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-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'
         }
       ]
     })

app/components/header/header-logo.njk

@@ -5,10 +5,6 @@
 
 {% block body %}
 
-  {{ header({
-      "showNav": "false",
-      "showSearch": "false"
-    })
-  }}
+  {{ header() }}
 
 {% endblock %}

app/components/header/header-navigation.njk

@@ -6,8 +6,6 @@
 {% block body %}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "false",
       "primaryLinks": [
         {
           "url"  : "https://www.nhs.uk/conditions",
@@ -18,24 +16,24 @@
           }
         },
         {
-          '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/mental-health/',
-          'label' : 'Mental health'
+          href: 'https://www.nhs.uk/mental-health/',
+          text: 'Mental health'
         },
         {
-          '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/pregnancy/',
-          'label' : 'Pregnancy'
+          href: 'https://www.nhs.uk/pregnancy/',
+          text: 'Pregnancy'
         },
         {
-          'url' : 'https://www.nhs.uk/nhs-services/',
-          'label' : 'NHS services'
+          href: 'https://www.nhs.uk/nhs-services/',
+          text: 'NHS services'
         }
       ]
     })

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

@@ -6,8 +6,6 @@
 {% block body %}
 
 {{ header({
-    "showNav": "true",
-    "showSearch": "true",
     "classes": "nhsuk-header--white nhsuk-header--white-nav",
     "organisation": {
       "name": "Anytown Anyplace",
@@ -16,26 +14,29 @@
     },
     "primaryLinks": [
       {
-        "url"  : "#",
-        "label" : "Your hospital visit"
+        href: "#",
+        text: "Your hospital visit"
       },
       {
-        'url' : '#',
-        'label' : 'Wards and departments'
+        href: '#',
+        text: 'Wards and departments'
       },
       {
-        '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"
+    }
   })
 }}
 

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

@@ -6,8 +6,6 @@
 {% block body %}
 
 {{ header({
-    "showNav": "true",
-    "showSearch": "true",
     "classes": "nhsuk-header--white",
     "organisation": {
       "name": "Anytown Anyplace",
@@ -16,26 +14,29 @@
     },
     "primaryLinks": [
       {
-        "url"  : "#",
-        "label" : "Your hospital visit"
+        href: "#",
+        text: "Your hospital visit"
       },
       {
-        'url' : '#',
-        'label' : 'Wards and departments'
+        href: '#',
+        text: 'Wards and departments'
       },
       {
-        '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"
+    }
   })
 }}
 

app/components/header/header-org.njk

@@ -6,35 +6,36 @@
 {% block body %}
 
 {{ header({
-    "showNav": "true",
-    "showSearch": "true",
     "organisation": {
       "name": "Anytown Anyplace",
       "split": "Anywhere",
       "descriptor": "NHS Foundation Trust"
     },
     "primaryLinks": [
       {
-        "url"  : "#",
-        "label" : "Your hospital visit"
+        href: "#",
+        text: "Your hospital visit"
       },
       {
-        'url' : '#',
-        'label' : 'Wards and departments'
+        href: '#',
+        text: 'Wards and departments'
       },
       {
-        '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"
+    }
   })
 }}
 

app/components/header/header-search.njk

@@ -6,35 +6,7 @@
 {% block body %}
 
   {{ header({
-      "showNav": "false",
-      "showSearch": "true",
-      "primaryLinks": [
-        {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z"
-        },
-        {
-          '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'
-        }
-      ]
-    })
-  }}
+    "search": true
+  }) }}
 
 {% endblock %}

app/components/header/header-service-name-with-nav.njk

@@ -9,28 +9,29 @@
     "service": {
       "name": "Digital service manual"
     },
-    "showNav": "true",
-    "showSearch": "true",
+    "search": {
+      "visuallyHiddenLabel": "Search the NHS digital service manual"
+    },
     "primaryLinks": [
         {
-          "url"  : "#",
-          "label" : "Standards and technology"
+          href: "#",
+          text: "Standards and technology"
         },
         {
-          'url' : '#',
-          'label' : 'Design system'
+          href: '#',
+          text: 'Design system'
         },
         {
           'url'  : '#',
-          'label' : 'Content style guide'
+          text: 'Content style guide'
         },
         {
           'url'  : '#',
-          'label' : 'Accessibility'
+          text: 'Accessibility'
         },
         {
-          'url' : '#',
-          'label' : 'Community and contribution'
+          href: '#',
+          text: 'Community and contribution'
         }
       ]
     })

app/components/header/header-service-name.njk

@@ -6,10 +6,9 @@
 {% block body %}
 
   {{ header({
-      "service": {
-        "name": "Prototype kit"
-      }
-    })
-  }}
+    "service": {
+      "name": "Prototype kit"
+    }
+  }) }}
 
 {% endblock %}