Header breaking changes nunjucks params

[frankieroberto]

This updates the params for the Header nunjucks component to no longer differentiate between 'transactional' and non-transactional services, and instead use the same Nunjucks params for both.

A separate additional option has been added for the logo param: includeWithServiceLink: true - this would enable the behaviour of combining the logo and the service name as a single link (matching the current non-transactional service name option). We’d create some separate guidance on when to use this option, although it will likely be context-dependent and up to teams to decide when to do this based on their research.

Finally, there’s also some smaller changes to the nunjucks params to make them more consistent and logical, such as changing homeHref to logo.href, service.name to service.text and organisation.logoURL to logo.src.

Full list of Nunjucks changes

Before	After
transactionalService.name	service.text
transactionalService.href	service.href
service.name	service.text and optionally logo.includeWithServiceLink: true
organisation.logoURL	logo.src
homeHref	logo.href

Remaining questions

• Currently logo.href and service.href default to / if not specified. Should we keep this, or is it better to not link at all if not specified?
• Should we also support service.html if you needed to add some <span>s or something? (No known use case so far)
• There’s a bunch of slightly-confusing param names under organisation - eg organisation.split. Should we change those too, or leave as-is?

Checklist

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

[paulrobertlloyd]

Perhaps you could outline what the expected params would be for the following headers:

• Logo only
• Logo only (linked)
• Logo and service name (only logo linked)
• Logo and service name (only service name linked – would this variant be possible?)
• Logo and service name (logo and service name have separate links)
• Logo and service name (logo and service name share the same link)

And in all cases ‘logo’ would be either the NHS logo, or an organisation logo.

Might we want to add/update the examples to include these different variants? (Might want to do this anyway to test that the suggested CSS changes work across these different scenarios, too).

[paulrobertlloyd]

Perhaps in a separate PR we can also rename primaryLinks to navigation? Given we’ve essentially changing a fair number of variables, might as well take the hit and address others parameter names, too.

[frankieroberto]

Perhaps you could outline what the expected params would be for the following headers:

@paulrobertlloyd here’s how that would look at the moment. There’s not currently (either in the current release or the work-in-progres) possible to not have either the NHS logo or the service name be a link, as they both default to /. We could remove the default and allow either to be un-linked though?

Example	Params
Logo only	Not currently possible - logo is always linked, defaults to /
Logo only (linked)	logo: { href: "#" }
Logo and service name (only logo linked)	Not currently possible - service name is always linked and defaults to /
Logo and service name (only service name linked – would this variant be possible?)	Not currently possible
Logo and service name (logo and service name have separate links)	logo: { href: "#" }, service: { text: "Service name", href: "#" }
Logo and service name (logo and service name share the same link)	logo: { includeWithServiceLink: true }, service: { text: "Service name", href: "#" }

Might we want to add/update the examples to include these different variants? (Might want to do this anyway to test that the suggested CSS changes work across these different scenarios, too).

I think most variations are already included, but we could add a few more.

[frankieroberto]

Perhaps in a separate PR we can also rename primaryLinks to navigation? Given we’ve essentially changing a fair number of variables, might as well take the hit and address others parameter names, too.

@paulrobertlloyd I don’t mind primaryLinks that much. Arguably it's clearer than navigation, which could be anything? Could shorten to primary though?

[anandamaryon1]

Given we've removed 'transactional' everywhere else, I wonder whether this should be renamed?

So that this one is titled 'header with service name' and the other, with combined link is 'Header with a service name combined with NHS logo', as you've named them.

[anandamaryon1]

Thanks for this @frankieroberto.

I can be tempted either way on navigation vs primaryLinks so maybe keep as-is for now.

On the defaulting of the logo to be linked: currently you'd have to customise the header to make the logo/name have no link right? (as is done on NHS Login). Not sure whether there are other examples (pages that act like dialogs, e.g. confirm delete)? So, maybe it would be helpful to not force a link. Interested in any other thinking on it though.

[frankieroberto]

@anandamaryon1:

I can be tempted either way on navigation vs primaryLinks so maybe keep as-is for now.

👍

On the defaulting of the logo to be linked: currently you'd have to customise the header to make the logo/name have no link right? (as is done on NHS Login). Not sure whether there are other examples (pages that act like dialogs, e.g. confirm delete)? So, maybe it would be helpful to not force a link. Interested in any other thinking on it though.

An option for no-link on either the NHS logo or the service name could be useful - and probably better to avoid teams having to do custom HTML to do this (which is harder to maintain).

To enable this we could just remove the default / href from the logo and service objects. That might break things for anyone currently relying on this, but then it’s a breaking change anyway...