Update dependency govuk-frontend to v5.9.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
govuk-frontend (source)	5.7.1 -> 5.9.0

---

Release Notes

alphagov/govuk-frontend (govuk-frontend)

v5.9.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 improved File upload component

We've added a JavaScript enhancement to the File upload component which:

• makes the component easier to use for drag and drop
• allows the text of the component to be translated
• fixes accessibility issues for users of Dragon, a speech recognition software

This improvement is opt-in, as it's a substantial visual change which risks shifting other content on the page.

To enable this improvement for your users, you'll first need to update the markup of your File upload component:

• if you use our Nunjucks macro, using the new javascript option of govukFileUpload

  {{ govukFileUpload({
    id: "file-upload",
    name: "photo",
    label: {
      text: "Upload your photo"
    },
    javascript: true
  }) }}

• if you're using HTML, wrapping the <input type="file"> of the File upload markup in a <div class="govuk-drop-zone" data-module="govuk-file-upload">

  <div class="govuk-form-group">
    <label class="govuk-label" for="file-upload-1">
      Upload your photo
    </label>
    <div class="govuk-drop-zone" data-module="govuk-file-upload">
      <input class="govuk-file-upload" id="file-upload" name="photo" type="file">
    </div>
  </div>

If you're importing components individually in your JavaScript, which we recommend for better performance, you'll then need to import and initialise the new FileUpload component.

import {FileUpload} from 'govuk-frontend'

createAll(FileUpload)

This change was introduced in pull request #​5305: Add progressively enhanced File Upload component

Form control components now have default id attributes

If you're using the included Nunjucks macros, these components now automatically use the value of the name parameter for the id parameter:

• Text input
• Textarea
• Password input
• Character count
• File upload
• Select

You’ll only have to provide the name parameters if they both have the same value.

The Date input component still requires an id attribute.

This change was introduced in pull request #​5658: Update form control components to set a default id based on name.

Deprecated features

Move service name and navigation links from the GOV.UK header to Service navigation component

We’ve deprecated the option to show a service name in the GOV.UK header component. This option will be removed from the GOV.UK header in the next breaking release of GOV.UK Frontend.

We recommend updating your service to use the Service navigation component as soon as possible.

Previously, we deprecated the option to show navigation links in the GOV.UK header component. This option will be removed as well, along with the GOV.UK header JavaScript component, since its only purpose was to make the navigation links responsive.

This change was introduced in pull request #​5721: Add deprecation field and deprecate header navigation.

Migrate to the new organisation colour palette

The legacy organisation colour palette has been deprecated and will be removed in the next major version.

If your service uses the organisation colour palette, make sure that things still look as expected with the $govuk-new-organisation-colours feature flag enabled.

This change was introduced in pull request #​5627: Deprecate legacy organisation colour palette.

Fixes

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

• #​5628: Add focused error state to Character count - thanks to @​edwardhorsford for reporting this issue
• #​5717: Fix prototype kit sass import path - thanks to @​joelanman
• #​5720: Fix summary card actions appearance when there are lots of links
• #​5728: Prevent menu button being overlaid at high zoom levels - thanks to @​govindmalurwardwp for reporting this issue

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

---

Configuration

📅 Schedule: Branch creation - "after 7am and before 11am every weekday" in timezone Europe/London, Automerge - At any time (no schedule defined).

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

♻ Rebasing: Whenever PR becomes conflicted, 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.