RFC: Combine `service` and `transactionalService` header options and remove layout modifiers

[paulrobertlloyd]

Follow up to #996 and fixes #997

Description

Prior to any work on adding account links to the header, or refining its design, this PR aims to reduce the complexity of the component template by refactoring the different variants and reducing the number of different layout variants and associated modifiers in the markup and CSS.

[!Note] In general, the header component appears to have suffered from a sticking plaster approach to adding features, accumulating tactical fixes that over time have increased the complexity of the Nunjucks template, its public API, the markup and CSS.

Before adding account links, we should aim to simplify and fix what is already here.

This PR:

• Removes the transactional boolean option and the transactionalService option. The component API now accepts organisation and service options, these being the 2 significant variants of the header. This means there are now only 2 sizes of NHS logo, of which only the organisation variant uses the smaller size.
• Removes the following layout modifiers:
  • .nhsuk-header__logo--only
  • .nhsuk-header__transactional--logo
  • .nhsuk-header__link--service
  • ~~.nhsuk-header__search-no-nav~~ (fixed in #1046)
• Removes the .nhsuk-header__content#content-header container
• Removes the following transactional containers and styles:
  • .nhsuk-header__transactional-service-name
  • .nhsuk-header__transactional-service-name--link
• Adds a new .nhsuk-header__service-link style
• ~~Uses a single path NHS logo, allowing it to inherit link and focus styles~~ (broken out into #1047)
• Fixes weird clipping that occurs around the hover and/or focus state on the NHS logo
• ~~Fixes additional padding appearing at the bottom of the header when there is no navigation~~ (fixed in #1046)
• Ensures style rules for the white variant only modify colour properties
• Removes a number of media queries and uses flex layout a bit more – there’s a lot more that can be achieved using this approach, but tried not to go overboard!

Some of these changes can (and probably should) be pulled out into smaller, non-breaking PRs, if required.

Handling long service names

Here’s a preview of a header with both navigation, search and a long service name, which addresses #997:

280px

|

280px (organisation)

400px

640px

800px

800px (organisation)

1024px

I have added the text-wrap: balance to .nhsuk-header__service-link; this is a relatively new CSS value, but can be used as a progressive enhancement; the screenshots above show it being used, but if a browser doesn’t support this value, a (long) service name will break later in its title.

Logo focus styles

Before	After

Checklist

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