Rename links to items

Allows the items to be more flexible
nhsuk · Jul 10, 2024 · 1d92c98 · 1d92c98
1 parent 3f79b1f
commit 1d92c98
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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 %}