Skip to content

Commit

Permalink
Add account links to header
Browse files Browse the repository at this point in the history
  • Loading branch information
paulrobertlloyd committed Oct 31, 2024
1 parent 1d394a5 commit 55a55f7
Show file tree
Hide file tree
Showing 10 changed files with 304 additions and 27 deletions.
44 changes: 44 additions & 0 deletions app/components/header/header-account-logged-in.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{% set html_style = "background-color: #f0f4f5;" %}
{% set title = "Header with account (logged in)" %}
{% from "components/header/macro.njk" import header %}
{% extends "layout.njk" %}

{% block body %}
{{ header({
account: {
user: {
text: "[email protected]"
},
items: [
{
href: "#",
text: "Account and settings"
}, {
href: "#",
text: "Log out"
}
]
},
primaryLinks: [
{
url: "#",
label: "Home"
},
{
url: "#",
label: "Services"
},
{
url: "#",
label: "Your health"
},
{
url: "#",
label: "Messages"
}, {
url: "#",
label: "Help and support"
}
]
}) }}
{% endblock %}
17 changes: 17 additions & 0 deletions app/components/header/header-account-logged-out.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% set html_style = "background-color: #f0f4f5;" %}
{% set title = "Header with account (logged out)" %}
{% from "components/header/macro.njk" import header %}
{% extends "layout.njk" %}

{% block body %}
{{ header({
account: {
items: [
{
href: "#",
text: "Log in"
}
]
}
}) }}
{% endblock %}
54 changes: 54 additions & 0 deletions app/components/header/header-org-white-account.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{% set html_style = "background-color: #f0f4f5;" %}
{% set title = "Header organisational with account (logged in)" %}
{% from "components/header/macro.njk" import header %}
{% extends "layout.njk" %}

{% block body %}

{{ header({
classes: "nhsuk-header--white nhsuk-header--white-nav",
account: {
user: {
text: "Florence Nightingale"
},
items: [
{
href: "#",
text: "Log out"
}
]
},
organisation: {
name: "Anytown Anyplace",
split: "Anywhere",
descriptor: "NHS Foundation Trust"
},
primaryLinks: [
{
url: "#",
label: "Your hospital visit"
},
{
url: "#",
label: "Wards and departments"
},
{
url: "#",
label: "Conditions and treatments"
},
{
url: "#",
label: "Our people"
},
{
url: "#",
label: "Our research"
}
],
search: {
visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
}
})
}}

{% endblock %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{% set html_style = "background-color: #f0f4f5;" %}
{% set title = "Header with account, navigation and search" %}
{% from "components/header/macro.njk" import header %}
{% extends "layout.njk" %}

{% block body %}
{{ header({
account: {
user: {
text: "Florence Nightingale"
},
items: [
{
href: "#",
text: "Log out"
}
]
},
service: {
name: "Digital service manual"
},
search: true,
primaryLinks: [
{
url: "#",
label: "NHS service standard"
},
{
url: "#",
label: "Design system"
},
{
url: "#",
label: "Design principles"
},
{
url: "#",
label: "Content guide"
},
{
url: "#",
label: "Accessibility"
},
{
url: "#",
label: "Community and contribution"
}
]
}) }}
{% endblock %}
6 changes: 5 additions & 1 deletion app/pages/examples.njk
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,16 @@
<li><a href="../components/header/index.html">Header (default)</a></li>
<li><a href="../components/header/header-navigation.html">Header with navigation</a></li>
<li><a href="../components/header/header-search.html">Header with search</a></li>
<li><a href="../components/header/header-account-logged-in.html">Header with account (logged in)</a></li>
<li><a href="../components/header/header-account-logged-out.html">Header with account (logged out)</a></li>
<li><a href="../components/header/header-logo.html">Header with logo only</a></li>
<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-service-name-with-account-search-nav.html">Header with a service name, account, 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-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-account.html">Header organisational with white header and account (logged in)</a></li>
<li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>
<li><a href="../components/hero/index.html">Hero</a></li>
<li><a href="../components/hero/hero-image.html">Hero with image</a></li>
Expand Down Expand Up @@ -131,7 +135,7 @@
<li><a href="../components/warning-callout/index.html">Warning callout</a></li>
<li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
</ul>

{% endblock %}

{% block footer %}
Expand Down
38 changes: 19 additions & 19 deletions packages/components/header/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/></svg>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
Expand Down Expand Up @@ -240,9 +240,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/></svg>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
Expand Down Expand Up @@ -346,9 +346,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
Expand Down Expand Up @@ -458,19 +458,19 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
</div>
</div>
</div>
<div class="nhsuk-navigation-container">
Expand Down Expand Up @@ -571,9 +571,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
Expand Down
12 changes: 12 additions & 0 deletions packages/components/header/_header-white.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,18 @@
}
}

.nhsuk-header__account-item {
background-color: $color_nhsuk-grey-5;
}

.nhsuk-header__account-link {
@include nhsuk-link-style-no-visited-state;

&:active {
background-color: $color_nhsuk-grey-4;
}
}

.nhsuk-search__input {
border-color: $color_nhsuk-grey-3;

Expand Down
68 changes: 64 additions & 4 deletions packages/components/header/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,74 @@
}

/**
* Content area (top-right)
* Search/account content area (top-right)
*/
.nhsuk-header__content {
display: flex;
flex-direction: column;
gap: nhsuk-spacing(3);
justify-content: end;

@include mq($from: tablet) {
align-items: end;
flex: 1;
margin-left: auto;
}

@include mq($from: large-desktop) {
align-items: start;
flex-direction: row;
}
}

/**
* Account
*/
.nhsuk-header__account {
border-radius: $nhsuk-border-radius;
display: flex;
flex-wrap: wrap;
gap: 1px;
overflow: hidden;

.nhsuk-icon {
flex-shrink: 0;
position: relative;
top: 1px;
}
}

.nhsuk-header__account-item {
align-items: stretch;
background-color: shade($nhsuk-link-color, 20%);
display: flex;
flex-grow: 1;
justify-content: stretch;
}

.nhsuk-header__account-item--user {
display: inline-flex;
flex-basis: 999;
flex-grow: 999;
gap: nhsuk-spacing(2);
}

.nhsuk-header__account-item--user,
.nhsuk-header__account-link,
.nhsuk-header__account-text {
padding: nhsuk-spacing(2) nhsuk-spacing(3);
}

.nhsuk-header__account-link {
@include nhsuk-link-style-header;

&:active {
background-color: $nhsuk-link-active-color;
}

&:focus {
box-shadow: inset 0 -4px 0 0 $nhsuk-focus-text-color;
}
}

/**
Expand Down Expand Up @@ -158,9 +220,7 @@

&:focus {
@include nhsuk-focused-button();
box-shadow:
0 -2px $nhsuk-focus-color,
0 $nhsuk-focus-width $nhsuk-focus-text-color;
box-shadow: inset 0 -4px 0 0 $nhsuk-focus-text-color;
}

&:active {
Expand Down
Loading

0 comments on commit 55a55f7

Please sign in to comment.