Update to GOV.UK Frontend v4.0.0

[vanitabarrett]

Closes #1851

Updates the Design System to use v4.0.0.

Note: the current PR updates the Design System to use the v4.0.0 pre-release. This PR will need to be updated for the actual release, to point to the version of GOV.UK Frontend published on npm.

Things I've checked

The Design System:

• does not use the govuk-main-wrapper or govuk-main-wrapper--l mixins
• does not use the $govuk-border-width-form-element-error variable
• does not individually import JavaScript files
• does not use HTML error messages
• does not use HTML hints
• does not use HTML skip link
• does not use iff Sass function
• does not use govuk-tag--inactive class
• does not import individual Sass files from core or overrides
• does not use HTML date input
• does not use the HTML cookie banner
• already uses aria-hidden="true" for SVGs in the header
• already styles custom HTML being passed to the cookie banner component
• already uses conditional reveals with unique id's per page
• uses the header HTML in non-standard ways (using custom navigation that doesn't sit inside the header like it does for the component) - I'm not sure the changes we've made to the component can be applied directly to the design system implementation
• has a PR raised to update the summary list guidance (Add a summary list example where only some rows have actions #1990)
• has a PR raised to update the accessibility statement for accordions (Delete accordion issue in accessibility statement #1825)
• has a PR raised to update the accordion guidance and examples for the new iteration (Update accordion guidance for v4.0.0 #1961)

I've added commits to:

• ensure character counts use unique ids
• add the width macro option to any footer components that need it

[vanitabarrett]

I've updated the Design System to the current pre-release and gone through the GOV.UK Frontend Changelog to double check any changes that need to be made. I don't think any changes need to be made.

Once all the changes are merged into GOV.UK Frontend, I'll generate a new pre-release and update to that one to cover the breaking changes merged in after the pre-release was shared with users on 07/12/2021

[netlify]

✔️ You can preview this change here:

🔨 Explore the source changes: 89a25d8

🔍 Inspect the deploy log: https://app.netlify.com/sites/govuk-design-system-preview/deploys/61bb056b60c6b200071d47bd

😎 Browse the preview: https://deploy-preview-1992--govuk-design-system-preview.netlify.app

[vanitabarrett]

I've updated this to the latest pre-release which includes the footer changes. I don't expect any more changes to go into the release, other than a fix to the implementation of the skip link JavaScript.

[36degrees]

I think we need to initialise the skip link JavaScript in src/javascripts/govuk-frontend.js.

[hannalaakso]

uses the header HTML in non-standard ways (using custom navigation that doesn't sit inside the header like it does for the component) - I'm not sure the changes we've made to the component can be applied directly to the design system implementation

As discussed irl, we'll raise a separate issue to investigate this later since it's not possible to directly apply the improvements to the Design System header.

The rest looks good 👍

Approving this now so it'll be ready to go when we've published GOV.UK Frontend v4.0, it shouldn't be merged until we've swapped the version number in the package lock.

[vanitabarrett]

Thanks @36degrees , good spot, I've added a commit to do that now