Draft: Adding an 'account' section to header

[frankieroberto]

Description

This section would allow you to add 'account' related items at the top-right of the header, like this:

The items can be either links (if an href is present) or just text or HTML, in order to allow for maximum flexibility.

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

Checklist

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

[frankieroberto]

Our current thinking is to basically allow the account items to stack on the right on mobile at the point where they no longer fit.

The service name could also wrap onto 2 or more lines if needed, but remaining to the right of the logo instead of dropping beneath it.

Example here (spacing is all a bit rough still):

[Tosin-Balogun]

@frankieroberto this is wicked, I saw this from the slack thread around headers. Do you have a prototype hosted anywhere we can inspect?

[chrimesdev]

LGTM this would be useful on Screening & happy to test in our service.

[frankieroberto]

@frankieroberto this is wicked, I saw this from the slack thread around headers. Do you have a prototype hosted anywhere we can inspect?

@Tosin-Balogun Not yet - although if you clone this repo and checkout this branch and then run npm start you can see some working examples!

LGTM this would be useful on Screening & happy to test in our service.

@chrimesdev we’re not quite there yet, but hopefully soon!

[paulrobertlloyd]

Replaced by #1063.