docs(cookie banner): align cookie banner content left

[chrispymm]

This PR overrides the govuk cookie banner styles to left align the content to match the rest of the site.

It also makes a small adjustment to add the hidden attribute to the banner by default. This ensures the banner stays hidden and is only revealed by the JS if the user needs to accept or reject. This will prevent the "flash of cookie banner" sometimes visible on the site currently, where the banner displays, and is then hidden by the JS when it realises it's not needed.

Before:

After:

[robertjmccarthy]

Could you look at the width of the cookie content container please? It's wrapping a single word which doesn't look to be wrapping at the same width as the max width of the body container below it.

[chrispymm]

@robertjmccarthy the tricky thing here is that the cookie banner is just using a 2/3 grid container. This is also why it doesn't line up with the body copy - the lines of text start in a different place, so for a good reading width they will end at different points too.

I don't really want to muck around with the standard width just for one word - the web is responsive and there will always be orphans at some point....

...which is why the css property text-wrap: pretty was introduced recently 🎉 it uses a better (and slightly slower) algorithm for text wrapping specifically to reduce orphans (across all break points)

[gregtyler]

🎉 This PR is included in version 3.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀