Update dependency govuk-frontend to v5.8.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
govuk-frontend (source)	5.4.1 -> 5.8.0

---

Release Notes

alphagov/govuk-frontend (govuk-frontend)

v5.8.0

Compare Source

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Use our base configurable component to build your own configurable component

We've added a ConfigurableComponent class to help you build your own configurable components. It extends our Component class and allows you to focus on your components' specific features by handling these shared behaviours across components:

• checking that GOV.UK Frontend is supported
• checking that the component is not already initialised on its root element
• checking the type of the root element and storing it for access within the component as this.$root
• taking a configuration object as a parameter and then storing it for access within the component as this.config
• merging a passed configuration object with configuration options specified on the data attributes of the root element

We introduced this change in:

• #​5499: Rename GOVUKFrontendComponentConfigurable, export ConfigurableComponent
• #​5456: Refactor Accordion to extend from a GOVUKFrontendConfigurableComponent

Deprecated features

Importing Sass using govuk/all

You'll see a warning when compiling your Sass if you import all of GOV.UK Frontend's styling using govuk/all. Importing using the all file is deprecated, and we’ll remove it in the next major release.

In your import statements, use a trailing /index rather than /all to load GOV.UK Frontend's files:

• @import "govuk/index"; instead of @import "govuk/all";

You do not need /index at the end of each import path if you’re using Dart Sass.

This change was introduced in pull request #​5518: Deprecate govuk/all.scss and only reference govuk/index.scss internally.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5533: Fix UMD files overriding existing global

v5.7.1

Compare Source

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Recommended changes

Stop setting a value for File upload components

The File upload component currently supports a value parameter, which populates the value HTML attribute of the input.

However, since no modern browser supports passing a value to a file input, we've made the decision to remove this parameter. It has been deprecated and will be removed in a future version of GOV.UK Frontend.

We introduced this change in pull request #​5330: Deprecate File upload component's value parameter.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5396: Update various department brand colours

v5.7.0

Compare Source

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

The Royal Arms has been updated

The Royal Arms in the GOV.UK footer has been updated to reflect the version introduced by King Charles III.

If your service does not use the image directly from the Frontend package, you should ensure the new image is being copied to your service’s image assets folder. By default this folder is located at /assets/images.

If you’re using Nunjucks, the asset path may have been changed by the assetPath global variable or assetsPath parameter on the header component.

Copy the govuk-crest.svg file from /dist/assets/images into your assets folder.

You can safely delete the old image files, named govuk-crest.png and govuk-crest-2x.png.

We introduced this change in pull request #​5376: Update the Royal Arms graphic in footer (v5.x).

Components will not longer initialise twice on the same element

GOV.UK Frontend components now throw an error if they've already been initialised on the DOM Element they're receiving for initialisation.
This prevents components from being initialised more than once and therefore not working properly.

We introduced this change in pull request #​5272: Prevent multiple initialisations of a single component instance

Respond to initialisation errors when using createAll and initAll

We've added a new onError option for createAll and initAll that lets you respond to initialisation errors.
The functions will continue catching errors and initialising components further down the page if one component fails to initialise,
but this option will let you react to a component failing to initialise. For example, to allow reporting to an error monitoring service.

We introduced this change in:

• pull request #​5252: Add onError to createAll
• pull request #​5276: Add onError to initAll

Check if GOV.UK Frontend is supported

We've added the isSupported function to let you check if GOV.UK Frontend is supported in the browser running your script.
GOV.UK Frontend components have been checking this automatically since the release of v5.0.0, but you may want to use the isSupported function to avoid running some code when GOV.UK Frontend is not supported.

We introduced this change in pull request #​5250: Add isSupported to all.mjs

Use our base component to build your own components

We've added a Component class to help you build your own components. It allows you to focus on your components' specific features by handling these shared behaviours across components:

• checking that GOV.UK Frontend is supported
• checking that the component is not already initialised on its root element
• checking the type of the root element and storing it for access within the component as this.$root

We introduced this change in:

• pull request #​5350: Export a base Component class.
• pull request #​5354: Refactor the root type check in GOVUKFrontendComponent

New brand colour

We've added a brand colour for the Serious Fraud Office in pull request #​5389.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5278: Fix service navigation mobile toggle spacing
• #​5331: Fix Warning Text font weight when <strong> styles are reset
• #​5352: Only apply margin to details summary when open
• #​5089: Fix details expanded state not announced on iOS
• #​5332: Improve how licence description wraps in the footer

v5.6.0

Compare Source

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Make it easier to navigate complex services with the Service navigation component

We've added a new Service navigation component to help users to navigate services with multiple top-level sections. This replaces the navigation functions of the Header component, which will be deprecated in a future release of GOV.UK Frontend.

This component includes some features we consider experimental. We intend to iterate these features in response to user feedback. These are:

• moving the service name from the Header to the Service navigation
• providing slots for injecting custom HTML into specified locations within the component

We introduced this change in pull request #​5206: Service navigation component.

v5.5.0

Compare Source

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

We've updated the list of organisations and brand colours included in Frontend

We've overhauled the list of organisations and organisation brand colours that are shipped with GOV.UK Frontend.

The previous list was outdated and had not kept up with changes to the machinery of government. We’ve updated the list to:

• add all current government departments and their brand colours
• add variants of brand colours that meet a 4.5:1 contrast ratio against white, where required
• provide warnings if defunct organisations are still being referenced in your Sass code

To enable these changes, set the feature flag variable $govuk-new-organisation-colours to true before you import GOV.UK Frontend in your Sass files:

// application.scss
$govuk-new-organisation-colours: true;
@​import "govuk-frontend/all";

You can also silence warnings about defunct organisations by adding organisation-colours to the $govuk-suppressed-warnings setting.

We introduced this change in pull request #​3407: Update organisation colours.

Stop long words breaking out of components with govuk-!-text-break-word

We've added a new override class to help display long words with no obvious break points when the space is too narrow to display them on one line. An example of a long word might be an email address entered by a user.

Wrapping the content with the govuk-!-text-break-word class forces words that are too long for the parent element to break onto a new line.

A confirmation email will be sent to <span class="govuk-!-text-break-word">arthur_phillip_dent.42@&#8203;peoplepersonalitydivision.siriuscyberneticscorporation.corp</span>.

Sass users can also use the govuk-text-break-word mixin.

We introduced this change in pull request #​5159: Add break-word typography helper.

Recommended changes

Update the $websafe parameter on the govuk-organisation-colour function

The govuk-organisation-colour Sass function's $websafe parameter has been renamed to $contrast-safe.

This is to more accurately describe the functionality of the parameter.

The old parameter name will stop working in the next major version of GOV.UK Frontend.

We introduced this change in pull request #​3407: Update organisation colours.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5046: Skip ‘empty’ tasks in the task list
• #​5066: Fix whitespace affecting text alignment in pagination block variant
• #​5158: Remove ↑ up and ↓ down arrow key bindings from tabs
• #​5191: Fix rendering of Back link's href and text for falsy values

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.