LTD-4702 Upgrade lite-frontend to use govuk-frontend v4.8.0

[hnryjmes]

Aim

This upgrades lite-frontend to use govuk-frontend v4.8.0 which is a recent release for govuk-frontend including the crown logo changes.

The GOV.UK team released v5.0.0 after v4.7.0 so this was tried initially but as there are many breaking changes that may take time to resolve, we have opted for v4.8.0 which is the latest release for the 4.x series.

LTD-4702

Below is my original draft PR description:

My current plan to do the upgrade is to move lite-frontend through all major and minor (skipping patch) released versions of govuk-frontend, one version per commit, and seeing that the full test suite passes at each commit.

If there are no problems, then great.

If there are problems on a commit when it is tested, these can be fixed at that point, and the issues will be easier to identify as they can be related to a particular version change.

The major and minor versions (skipping patches) we should check are:

• GOV.UK Frontend v3.14.0
• GOV.UK Frontend v4.0.0
• GOV.UK Frontend v4.1.0
• GOV.UK Frontend v4.2.0
• GOV.UK Frontend v4.3.0
• GOV.UK Frontend v4.4.0
• GOV.UK Frontend v4.5.0
• GOV.UK Frontend v4.6.0
• GOV.UK Frontend v4.7.0
• GOV.UK Frontend v5.0.0
• GOV.UK Frontend v5.1.0

EDIT: we can now also upgrade to v5.2.0 as this has now become available

• GOV.UK Frontend v5.2.0

EDIT 2: we are now decided to go with v4.8.0 as this has the crown logo changes on it and there are many breaking changes in v5.0.0 that may take some time to resolve.

• GOV.UK Frontend v4.8.0

[kevincarrogan]

I'm presuming all of these border-width things are going because this variable doesn't exist anymore but what is setting the border width now instead?

[hnryjmes]

good question. this variable was overriding the border width but now there is no override. this change is explained here: https://github.com/alphagov/govuk-frontend/releases/tag/v4.0.0

Remove deprecated $govuk-border-width-form-element-error variable
In GOV.UK Frontend v3.8.0, we made the border width of form elements in their error state the same as for form elements in their normal state and deprecated the $govuk-border-width-form-element-error variable.

Before, an element's border got thicker to show the element was in an error state. However, elements in their focused state also have a thicker border. As a result, when users focused an element in an error state, the only visible border-change was from red to black. Not all users could perceive this change. So, we reduced the element border's width, to make sure its thickness changes when users focus.

We've now removed $govuk-border-width-form-element-error completely.

If you’re referencing $govuk-border-width-form-element-error in your own Sass, you must remove it. If you're also defining your own error state, you only need to change the border colour.

You should avoid overriding the border width. For example, replace border: $govuk-border-width-form-element-error solid $govuk-error-colour; with border-color: $govuk-error-colour;.

You should also remove any override of $govuk-border-width-form-element-error from your Sass. This override no longer does anything.

This change was introduced in alphagov/govuk-frontend#1963.