From 1d92c9842328b0c6eb6d8cc75ea7dab754d2f379 Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie@frankieroberto.com>
Date: Wed, 10 Jul 2024 16:45:03 +0100
Subject: [PATCH] Rename links to items

Allows the items to be more flexible
---
 .../header-transactional-service-signed-in.njk      |  2 +-
 packages/components/header/_header.scss             | 13 ++++++++-----
 packages/components/header/template.njk             | 12 ++++++++----
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/components/header/header-transactional-service-signed-in.njk b/app/components/header/header-transactional-service-signed-in.njk
index c9cd5ad94..0f60c35c1 100644
--- a/app/components/header/header-transactional-service-signed-in.njk
+++ b/app/components/header/header-transactional-service-signed-in.njk
@@ -12,7 +12,7 @@
       "showNav": "true",
       "showSearch": "false",
       "account": {
-        "links": [
+        "items": [
           {
             label: {
               text: "My account"
diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
index 6c0168d89..c1cc09c1e 100644
--- a/packages/components/header/_header.scss
+++ b/packages/components/header/_header.scss
@@ -551,29 +551,32 @@
   justify-content: center;
 }
 
-.nhsuk-header__account-link {
+.nhsuk-header__account-item {
   @include nhsuk-font(16);
   border-bottom: nhsuk-spacing(1) solid transparent;
   border-top: nhsuk-spacing(1) solid transparent;
   color: $color_nhsuk-white;
   font-size: inherit;
   padding: nhsuk-spacing(3) 0;
-  text-decoration: underline;
   white-space: nowrap;
   margin-left: nhsuk-spacing(4);
 }
 
-.nhsuk-header__account-link:hover {
+a.nhsuk-header__account-item {
+  text-decoration: underline;
+}
+
+.nhsuk-header__account-item:hover {
   box-shadow: none;
   color: $color_nhsuk-white;
   text-decoration: none;
 }
 
-.nhsuk-header__account-link:focus {
+.nhsuk-header__account-item:focus {
   background-color: $nhsuk-focus-color;
   color: $nhsuk-focus-text-color;
 }
 
-.nhsuk-header__account-link:visited {
+.nhsuk-header__account-item:visited {
   color: $color_nhsuk-white;
 }
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index e91fbfc1b..3e0745eb8 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -58,10 +58,14 @@
 
     {% if params.account %}
       <div class="nhsuk-header__account {%- if params.account.classes %} {{ params.account.classes }}{% endif %}">
-        {% if params.account.links %}
-          <div class="nhsuk-header__account-links">
-            {% for link in params.account.links %}
-              <a href="{{ link.href }}" class="nhsuk-header__account-link {%- if link.classes %} {{ link.classes }}{% endif %}">{{ link.label.html | safe if link.label.html else link.label.text }}</a>
+        {% if params.account.items %}
+          <div class="nhsuk-header__account-items">
+            {% for item in params.account.items %}
+              {% if item.href %}
+                <a href="{{ item.href }}" class="nhsuk-header__account-item {%- if item.classes %} {{ item.classes }}{% endif %}">{{ item.label.html | safe if item.label.html else item.label.text }}</a>
+              {% else %}
+                <span class="nhsuk-header__account-item {%- if item.classes %} {{ item.classes }}{% endif %}">{{ item.label.html | safe if item.label.html else item.label.text }}</span>
+              {% endif %}
             {% endfor %}
           </div>
         {% endif %}