Service navigation component

[querkmachine]

This PR supersedes #4950. This PR should be considered the working branch for the navigation work.

I opted to make a new PR as we've decided to remove or refactor many aspects of the previous PR. However, we may still integrate those aspects at a later date, so having the previous PR exist as-is as a point of reference and comparison is still useful.

Changes from the previous PR

• Rename component from Service Header to Service Navigation
• Refactor navigation links so active styles applied directly to link/span, rather than the list item
  • We ultimately decided to revert this change and continue using the previous active style handling
• Refactor class names to avoid the new navigation__navigation repetition
• Make navigation items mandatory, rework examples/tests to have nav items as default
• Darken link colour by 10% to increase perceptual contrast
• Remove the <section> element if a service name isn't present
• Undo changes and remove slots from the Header component
  • We later readded the full-width bottom border as a variant of the component

[seaemsi]

Looks good - have suggested some minor changes for style and clarity

[owenatgov]

A few minor comments. We're looking good. I've got a couple of extra points to make outside code. One thing I think we should do before the launch party and 3 things I'm willing to negotiate on and park for later:

Gotta do

The commit history could do with a tidy. I suspect this was on your radar already but just to enshrine it as a thing we should do.

Don't gotta do now

Firstly, I think an example of the service nav would be good. Either replacing the header nav in an existing example or creating a new one showing the header and the service nav together. The latter would be my preference.

Secondly, there's currently no way to translate the service nav. This can be an iteration but it's a common pattern in our components so we should do it eventually.

Finally, I noticed on mobile that the margin collapse isn't working between the service name and the menu button, creating a very slightly jarring, bigger than expected space:

I know why this is happening: the margin for the button is applied inside the nav element and it doesn't bubble out to its parent. This can be solved with a bit of margin wrangling on mobile which is annoying but doable. I don't know if it's intentional and if it isn't it's not a reason not to merge, it just looks a bit weird to my eye.

[querkmachine]

@owenatgov Which parts cannot be translated? I can't see anything hardcoded at a glance.

[owenatgov]

@querkmachine Ah whoops you're right! Sorry, habitual reviewing.

[owenatgov]

Code is looking sharp. Congratulations and well done ✨

I'm going to pop this note here that I unfortunately noticed another example of non-collapsing margin 🥲 This time at tablet when the nav itself overflows:

This one looks less weird and I suspect is even more annoying to fix so I don't think it's worth busting our backs to get rid of it given the time frames. Maybe worth reviewing post release when we've got a bit more time.

[querkmachine]

@owenatgov Yeah, that one is a lot trickier as the wrapping is a result of flex-wrap, which in turn happens (or doesn't happen) depending on the length of the service name and navigation items. It's not a case of being able to tweak styles for a specific breakpoint.