Support form submission from header account items

nhsuk · Feb 22, 2025 · e39fa33 · e39fa33
1 parent a57b40f
commit e39fa33
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 5 deletions.
diff --git a/app/components/header/header-account-custom-html.njk b/app/components/header/header-account-custom-html.njk
@@ -32,7 +32,7 @@
           html: '<a class="nhsuk-header__account-link" href="#">Notifications</a> <span class="app-count">8</span>'
         },
         {
-          href: "#",
+          action: "#",
           text: "Log out"
         }
       ]

diff --git a/app/components/header/header-account-logged-in.njk b/app/components/header/header-account-logged-in.njk
@@ -16,7 +16,7 @@
           icon: true
         },
         {
-          href: "#",
+          action: "#",
           text: "Log out"
         }
       ]

diff --git a/app/components/header/header-account-rbac.njk b/app/components/header/header-account-rbac.njk
@@ -27,7 +27,7 @@
           text: "Change role"
         },
         {
-          href: "#",
+          action: "#",
           text: "Log out"
         }
       ]

diff --git a/app/components/header/header-org-white-account.njk b/app/components/header/header-org-white-account.njk
@@ -22,7 +22,7 @@
           icon: true
         },
         {
-          href: "#",
+          action: "#",
           text: "Log out"
         }
       ]

diff --git a/app/components/header/header-service-name-with-account-search-nav.njk b/app/components/header/header-service-name-with-account-search-nav.njk
@@ -18,7 +18,7 @@
           icon: true
         },
         {
-          href: "#",
+          action: "#",
           text: "Log out"
         }
       ]

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -123,12 +123,26 @@
   flex-grow: 0;
 }
 
+.nhsuk-header__account-button,
 .nhsuk-header__account-link {
   @include nhsuk-link-style-header;
   display: flex;
   gap: nhsuk-spacing(2);
 }
 
+.nhsuk-header__account-button {
+  @include nhsuk-font(16);
+  background: none;
+  border: 0;
+  padding: 0;
+  text-decoration: underline;
+
+  &:hover {
+    cursor: pointer;
+    text-decoration: none;
+  }
+}
+
 /// Search
 
 .nhsuk-header__search {

diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
@@ -81,6 +81,10 @@
           <a class="nhsuk-header__account-link" href="{{ item.href }}">
             {{ _accountItem(item) }}
           </a>
+        {% elif item.action %}
+          <button class="nhsuk-header__account-button" formaction="{{ item.action }}" formmethod="{{ item.method or "post" }}">
+            {{ _accountItem(item) }}
+          </button>
         {% else %}
           {{ _accountItem(item) }}
         {% endif %}