From 071de85a16af0c8d6a02d4bb8f2661d4d63d92eb Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 10 Jul 2024 14:15:12 +0100 Subject: [PATCH 1/7] Add account section to header --- ...header-transactional-service-signed-in.njk | 47 +++++++++++++++++++ app/pages/examples.njk | 1 + packages/components/header/_header.scss | 36 ++++++++++++++ packages/components/header/template.njk | 12 +++++ 4 files changed, 96 insertions(+) create mode 100644 app/components/header/header-transactional-service-signed-in.njk diff --git a/app/components/header/header-transactional-service-signed-in.njk b/app/components/header/header-transactional-service-signed-in.njk new file mode 100644 index 000000000..c9cd5ad94 --- /dev/null +++ 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 index 107616557..1297d6989 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -80,6 +80,7 @@
  • Header with a service name
  • Header with a service name, search and navigation
  • Header transactional with service name
    • +
  • Header transactional, signed in
  • Header organisational
  • Header organisational with white header
  • Header organisational with white header and navigation
    • diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 716e5c603..a8637ca11 100644 --- 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 index 68cfc941a..e91fbfc1b 100644 --- a/packages/components/header/template.njk +++ b/packages/components/header/template.njk @@ -56,6 +56,18 @@ {% endif -%} + {% if params.account %} +
    + {% if params.account.links %} + + {% endif %} +
    + {% endif %} + {% if showNav == "true" and params.primaryLinks and showSearch == "true" %}
    From 3f79b1f9c1ce1b81d004e6ff5f118ec9c32a3cca Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 10 Jul 2024 14:22:21 +0100 Subject: [PATCH 2/7] Fix typo --- packages/components/header/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index a8637ca11..6c0168d89 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -570,7 +570,7 @@ } .nhsuk-header__account-link:focus { - background-color: $nhsuk-focus-color;; + background-color: $nhsuk-focus-color; color: $nhsuk-focus-text-color; } From 1d92c9842328b0c6eb6d8cc75ea7dab754d2f379 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 10 Jul 2024 16:45:03 +0100 Subject: [PATCH 3/7] 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 %}