Add account section to header

nhsuk · Jul 10, 2024 · 071de85 · 071de85
1 parent 8c22734
commit 071de85
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 0 deletions.
diff --git a/app/components/header/header-transactional-service-signed-in.njk b/app/components/header/header-transactional-service-signed-in.njk
@@ -0,0 +1,47 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Header transactional service that is signed in' %}
+{% from 'components/header/macro.njk' import header %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  {{ header({
+      "service": {
+        "name": "Invite patients to a consultation"
+      },
+      "showNav": "true",
+      "showSearch": "false",
+      "account": {
+        "links": [
+          {
+            label: {
+              text: "My account"
+            },
+            href: "#"
+          },
+          {
+            label: {
+              text: "Sign out"
+            },
+            href: "#"
+          }
+        ]
+      },
+      "primaryLinks": [
+        {
+          "url"  : "#",
+          "label" : "Find a patient"
+        },
+        {
+          'url' : '#',
+          'label' : 'Consultation schedule'
+        },
+        {
+          'url'  : '#',
+          'label' : 'Settings'
+        }
+      ]
+    })
+  }}
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -80,6 +80,7 @@
     <li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
     <li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
     <li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
+    <li><a href="../components/header/header-transactional-service-signed-in.html">Header transactional, signed in</a></li>
     <li><a href="../components/header/header-org.html">Header organisational</a></li>
     <li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
     <li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -541,3 +541,39 @@
     justify-content: initial;
   }
 }
+
+// Account section
+.nhsuk-header__account {
+  margin-right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.nhsuk-header__account-link {
+  @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 {
+  box-shadow: none;
+  color: $color_nhsuk-white;
+  text-decoration: none;
+}
+
+.nhsuk-header__account-link:focus {
+  background-color: $nhsuk-focus-color;;
+  color: $nhsuk-focus-text-color;
+}
+
+.nhsuk-header__account-link:visited {
+  color: $color_nhsuk-white;
+}
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
@@ -56,6 +56,18 @@
 
     {% endif -%}
 
+    {% 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>
+            {% endfor %}
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
+
     {% if showNav == "true" and params.primaryLinks and showSearch == "true" %}
 
       <div class="nhsuk-header__content" id="content-header">