Show account information and links in the header

[paulrobertlloyd]

Description

Adds the ability to include account information and links in the header.

Resolves nhsuk/nhsuk-service-manual-community-backlog#192

Provides the options for:

• Optional user information (account.user.[text|html]), always shown with a user icon and with the flex layout for this item taking precedence over items
• Optional items (account.items[].[text|html]), which can be optionally linked (account.items[].href)

These options should provide enough flexibility to use this area in a number of different ways.

Play with these 4 examples (linked from the Examples page) locally to see how layout adjusts in narrower viewports.

To do

• Decide if this is the right amount of flexibility, at least to begin with?
• Decide if this is the correct markup (should items use a list, use nav)?
• Decide if the correct option names
• Review accessibility
• Review across different browsers
• Prepare guidance for service manual
• Update backstop images
• Add new backstop images for account examples

Single link (example: logged out)

User info and multiple links (example: logged in)

Account, search, navigation and service name (example: the whole enchilada)

Account, search, navigation and organisation name (example: the whole enchilada, also available in white)

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[anandamaryon1]

@paulrobertlloyd
Active state makes the log in text unreadable (using Chrome):

[anandamaryon1]

Should the account.user. be linkable too? So that you could link eg. logged in user's name with a my account/profile type page? To save space and clutter if you had a busy header?

I suppose the html option allows this technically, but using it gives dodgy styling for a link:

Or as an account.items

[paulrobertlloyd]

• Fixed active state in Chrome
• Added ability to provide an optional link for the user item

[paulrobertlloyd]

@anandamaryon1 In f1492f1 I’ve spiked support for links appearing in item HTML. This is one to discuss; at its simplest we currently end up with differing focus states; we could make it such that all links in account items are styled such that focus is only applied to the text, not the container.

Anyway, here’s my first very quick pass at supporting links in item HTML and the resulting differing focus states:

[frankieroberto]

@paulrobertlloyd between about 642px and 647px width the header items seem to stack on top of each other, but with left-aligned text, which seems a bit odd?

I had a go at stuffing loads of account links in (which hopefully people won't do) - and the account section seems to get a bit too close to the service name. Maybe have a bigger minimum gap?

Also not totally sure about the masonry-style layout - you can end up with some odd alignment and some links having a lot more clickable whitespace than others. Maybe this is a reason to switch back to the idea of just having them as plain links with only the text being clickable?

I had a quick go here:

That gets tricky on mobile though!

On another note - from a nunjucks macro point of view, would it be better to just have the 'user' be an 'item', with an extra param to include the icon? Something like:

{{ header({
  items: [
    {
      href: "#",
      text: "Florence Nightingale",
      userIcon: true
    },
    {
      href: "#",
      text: "Log out"
    }
  ]
}) }}    

Then the order would be a bit more flexible?

[paulrobertlloyd]

Based on our meeting on 7 November, I have updated the account area such that:

• Layout: This has been adjusted so that logo/name, search and account areas are all direct children on .nhsuk-header__container (and the .nhsuk-header__content container has been removed).

  This means in cases where the account area contains a lot of information (such as user name, organisation and role) it can expand to take up the full width of the header.

• Links: These now share a common focus style, and only the text is clickable.

• Nunjucks macro: This now takes an items array, for which you can supply href, text|html and now icon, a boolean value which if set to true shows a user icon. (If we use this approach, guidance should state that this should only be used for one item, and only for text/link that identifies the currently logged in user). The previous user option has been removed.

• Markup: This now uses nav (with aria-label of ‘Account’), and an unordered list.

I think these changes address the above concerns and provide the greatest amount of flexibility while bringing consistency to how account-related information can be presented in the header.

There will always be edge cases, but there’s only so much that can be accounted for… things get especially tricky given the multitude of different items (and related markup) we include in the header, so have been chasing my tail a bit to account for all these possibilities!

Logged in

Full RBAC account information (user, role, organisation)

Item containing custom HTML

Note

If you use the html option, and want to include a link, you’ll need to manually add the nhsuk-header__account-link class. If you are using this option, you’re kinda on your own path, doing your own thing, and us forcing styles may conflict with any custom styles needed. This behaviour is consistent with other components (certainly those in the GOV.UK Design System, anyway).

Organisation header (white, ~tablet)

The very last item currently moves to the right-hand side, when the account is full-width and there is space to do so.

Organisation header (white, ~mobile)

The last item appears left-aligned when on its own row:

[anandamaryon1]

Currently we have a 'log in' version of the header, for when a user is not yet logged in, this seems on the face of it a no-brainer, but I'm wondering whether this is needed given that we have NHS Login and NHS CIS2, which both have their own guidance around logging in, and specific buttons to do so. I'm thinking that the log in link in the header might confuse and not align with the guidance for those two methods.

See also our other PR for a log in button: #992

I'm thinking we should remove it. Thoughts?

[frankieroberto]

@anandamaryon1 our service doesn’t have a login link in the header either but a separate button in the main body of the page (we don’t use CIS2 or NHS login but a separate system).

I suspect that having 'login' in the header would only be appropriate for more content based websites (like NHS.UK or possibly others) where you might conceivably want to be able to login from any of the public pages?

[lasara-d]

This looks really good some great work! The only thing i thought was slightly odd was that when there is few items in the header the hit box for the NHS header link/logo grows to fill the remaining space (images below) so a user may think they are clicking on empty space but its actually the hit box for the header link.
This might be something to do with the flex grow??? Sorry you may have already covered this previously :')

[paulrobertlloyd]

The only thing i thought was slightly odd was that when there is few items in the header the hit box for the NHS header link/logo grows to fill the remaining space (images below) so a user may think they are clicking on empty space but its actually the hit box for the header link.

@lasara-d Ooh, good spot! Yeah, that’s not good. Will look if I can come up with a way to achieve the same layout without this side-effect.

[paulrobertlloyd]

Ah, it was a 1-line fix; adding display: flex; to the .nhsuk-header__logo container. 👌

[frankieroberto]

This is looking good! A couple of minor points from me:

The icon really feels like it ought to be clickable to me? Could we include it within the clickable area if there’s an href present?

Both links and non-links in the account area are supported, with examples of both, and they’re differentiated by the presence of the underline. However if we were to drop the underline on all the links in the primary nav (as perhaps it’s unneeded there), would we also then drop the underline on links in the account section? 🤔

[frankieroberto]

Perhaps in this example the notification count out to be part of the link (so that it’s clickable and more accessible if the link is read out out-of-context)? Would save having to add the html for the link tag too.

Suggested change

	html: '<a class="nhsuk-header__account-link" href="#">Notifications</a> <span class="app-count">8</span>'
	href: "#",
	html: 'Notifications <span class="app-count">8</span>'

[paulrobertlloyd]

@frankieroberto Updated to include the icon in the href. Will have a look at creating an example with custom HTML for the item and a href.