[Snyk] Upgrade govuk-frontend from 5.1.0 to 5.4.0 #93

timsaundersEY · 2024-06-19T22:59:51Z

This PR was automatically created by Snyk using the credentials of a real user.

![snyk-top-banner](https://github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)

Snyk has created this PR to upgrade govuk-frontend from 5.1.0 to 5.4.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

The recommended version is 4 versions ahead of your current version.
The recommended version was released on a month ago.

Release notes

Package name: govuk-frontend

5.4.0 - 2024-05-17
To install this version with npm, run npm install govuk-frontend@5.4.0. You can also find more information about how to stay up to date in our documentation.

This release includes new features to help you include only the components your service uses. Doing this can help reduce the size of the JavaScript and CSS files sent to users, improving their experience.

New features

Create individual components with createAll

We've added a new createAll function that lets you initialise specific components in the same way that initAll does.

The createAll function will:
- find all elements in the page with the corresponding data-module attribute
- instantiate a component object for each element
- catch errors and log them in the console
- return an array of all the successfully instantiated component objects.
import { createAll, Button, Checkboxes } from 'govuk-frontend'

createAll(Button)
createAll(Checkboxes)

You can also pass a config object and a scope within which to search for elements.

You can find out more about how to use the createAll function in our documentation.

This change was introduced in pull request #4975: Add createAll function to initialise individual components.

Use tabular numbers easily with govuk-!-font-tabular-numbers

We've added a new override class for tabular number styling: govuk-!-font-tabular-numbers.

Using tabular numbers can make it easier for users to read numbers intended for comparison to one another, or for numbers that dynamically update.

It was previously only possible to use tabular numbers by using the govuk-font-tabular-numbers Sass mixin.

This change was introduced in pull request #4973: Add override class for tabular numbers.

Deprecated features

Importing layers using all files

You'll see a warning when compiling your Sass if you import any of our layers using the all file. Importing using the all files is deprecated, and we’ll remove them in the next major release.

Update your import statements to refer to the index file for each layer rather than all:
```
@ import "node_modules/govuk-frontend/dist/govuk/base";
@ import "node_modules/govuk-frontend/dist/govuk/core/index";
@ import "node_modules/govuk-frontend/dist/govuk/objects/index";
@ import "node_modules/govuk-frontend/dist/govuk/components/index";
@ import "node_modules/govuk-frontend/dist/govuk/utilities/index";
@ import "node_modules/govuk-frontend/dist/govuk/overrides/index";
```
You do not need /index at the end of each import path if you’re using Dart Sass, LibSass 3.6.0 or higher, or Ruby Sass 3.6.0 or higher.

This change was introduced in pull request #4955: Rename all files to index for our Sass entry points.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:
- #4942: Remove duplicate errorMessage argument for the password input component - thanks to Tim South for contributing this change
- #4961: Fix tree-shaking when importing govuk-frontend
- #4963: Fix input value not being set if the value was '0' – thanks to @ dwp-dmitri-algazin for reporting this issue
- #4971: Fix Error Summary component outputting list HTML when no errorList is provided
- #442: Update content to streamline installation info
- #438: Split up the 'Import CSS, assets and JavaScript' page
5.3.1 - 2024-04-19
To install this version with npm, run npm install govuk-frontend@5.3.1. You can also find more information about how to stay up to date in our documentation.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:
5.3.0 - 2024-03-26
To install this version with npm, run npm install govuk-frontend@5.3.0. You can also find more information about how to stay up to date in our documentation.

New features

Use the Password input component to help users accessibly enter passwords

The Password input component allows users to choose:
- whether their passwords are visible or not
- to enter their passwords in plain text
This helps users use longer and more complex passwords without needing to remember what they've already typed.

This change was introduced in pull request #4442: Create password input component. Thanks to @ andysellick for the original contribution.

Recommended changes

Update the HTML for the Character count component

We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count" and its form group class="govuk-form-group" are now combined as the same <div>. The hint text used as the count message now appears directly after the <textarea>.

If you're not using Nunjucks macros, then you should:
- move all classes and attributes from the form group <div> to the component wrapper <div>
- remove the opening <div> and closing </div> tags used by the form group
- check the count message is now directly after the <textarea>
The following example shows some HTML and the difference once it’s updated.

HTML before:
```
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <div class="govuk-form-group">
    
  </div>
  
</div>
```
HTML after:
```
<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  
</div>
```
Check your changes against the Character count example in the Design System to make sure you’ve correctly implemented them.

This change was introduced in pull request #4566: Use Character count formGroup as module wrapper.

Remove redundant role attributes from elements

We've made minor changes to the HTML of the page template, as well as the header, footer and pagination components.

You can update your HTML to remove the role attribute from some elements. These include the:
- main role on the main element in the template
- banner role on the header element in the Header component
- contentinfo role on the footer element in the Footer component
- navigation role on the nav element in the Pagination component
These roles were present to support legacy browsers, such as older versions of Internet Explorer. GOV.UK Frontend no longer supports these browsers, so you can now remove these roles.

You do not need to change anything if you're using the Nunjucks versions of the page template or these components,

This change was introduced in pull request #4854: Remove redundant role attributes.

Fixes

We've fixed an upstream issue in the cssnano npm package that caused elements with transparency to render incorrectly in Internet Explorer 11. This affected the pre-compiled CSS files in the GOV.UK Frontend npm package and GitHub releases for versions 5.0, 5.1 and 5.2. This was fixed in:
- #1573: feat: add preset and plugin options for browserslist in the cssnano repository
- #4829: Bump the postcss group with 2 updates
We've made fixes to GOV.UK Frontend in the following pull requests:
5.2.0 - 2024-02-21
In this release, we’ve adjusted our responsive type scale, which is available behind a feature flag. The type scale change is to make text easier to read on smaller screens. We’ve also deprecated the useTudorCrown parameter.

To install this version with npm, run npm install govuk-frontend@5.2.0. You can also find more information about how to stay up to date in our documentation.

New features

We've adjusted our responsive type scale

We've made the following adjustments to our responsive type scale:
- point 16 now returns 16px across all screen sizes
- point 19 now returns 19px across all screen sizes
- point 24 remains as 24px on large screens
- point 24 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
- point 27 remains as 27px on large screens
- point 27 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
- point 36 remains as 27px on large screens
- point 36 now returns 27px on small screens instead of 24px and has a line height 30px instead of 25px
To enable these changes, set the feature flag variable $govuk-new-typography-scale to true before you import GOV.UK Frontend in your Sass files:
```
// application.scss
$govuk-new-typography-scale: true;
@ import "govuk-frontend/all";
```
If your service uses custom elements made using GOV.UK Frontend, test your service against the new typography scale to assess if you need to make any adjustments.

You can read more on upgrading your service to the new type scale in our upgrade guide.

This change was introduced in pull request #2421: Adjust the responsive type scale

Insert custom HTML into component form group wrappers

You can now insert custom HTML into form group wrappers for all components with form fields.
```
govukInput({
  formGroup: {
    beforeInput: {
      html: "example"
    },
    afterInput: {
      html: "example"
    },
  }
})
```
This change was introduced in pull request #4567: Add beforeInput(s) and beforeInput(s) options to form groups.

Deprecated features

Stop using the useTudorCrown parameter in the Heading component

The rollout for the revised GOV.UK logo has started and the Tudor crown logo is now shown by default. We’ve deprecated the useTudorCrown parameter and will remove it in the next major release.

You can now remove the useTudorCrown parameter, along with any other adjustments made to display the Tudor crown logo in your service.

This change was introduced in pull request #4740: Make Tudor Crown logo the default

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:
- #4768: Fix z-index of inputs in Radios and Checkboxes component
- #4784: Fix LibSass calc() compatibility in Radios and Checkboxes
5.1.0 - 2024-02-05
To install this version with npm, run npm install govuk-frontend@5.1.0. You can also find more information about how to stay up to date in our documentation.

New features

Update to the new GOV.UK logo

The GOV.UK logo has been updated to reflect the changing of the monarch. King Charles III uses the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II.

If your service uses GOV.UK branding, you must update your service between 19 February and 1 March 2024 to use the new logo.

These changes were made in the following pull requests:
- #4354: Implement the Tudor crown favicons (v5.x)
- #4297: Implement the Tudor crown in the Header component (v5.x)
Include the new logo assets

Multiple new image assets are included in this release. You’ll need to copy these to your service's image assets folder if they’re not being used directly from the Frontend package. 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 following files from /dist/assets/images into your assets folder. Any images with the same name as an existing image can be safely overwritten.
- favicon.ico
- favicon.svg
- govuk-icon-180.png
- govuk-icon-192.png
- govuk-icon-512.png
- govuk-icon-mask.svg
- govuk-opengraph-image.png
Update the logo in the header of your page

If you’re using the govukHeader Nunjucks macro in your service, add the useTudorCrown parameter to the macro instantiation. This will become the default in a future version of GOV.UK Frontend.
```
{{ govukHeader({
  ...
  useTudorCrown: true
}) }}
```
If you’re not using the Nunjucks macro, locate the SVG code for the existing logo and replace it with this updated SVG.
```
<svg
  focusable="false"
  role="img"
  class="govuk-header__logotype"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 148 30"
  height="30"
  width="148"
  aria-label="GOV.UK"
>
  <title>GOV.UK</title>
  <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
</svg>
```
Add attributes to component form group wrappers

You can now add attributes to the form group wrapper for all components with form fields.
```
govukRadios({
  formGroup: {
    attributes: {
      "data-attribute": "value"
    }
  }
})
```
This change was introduced in pull request #4565: Allow attributes option on form groups.

Use tabular numbers with the govuk-font-tabular-numbers mixin

You can now use tabular numbers in your authored Sass by including the new govuk-font-tabular-numbers mixin.

Previously, you’d use the govuk-font mixin with the $tabular parameter. However, the govuk-font mixin includes styles unrelated to tabular numbers, which are not needed in some contexts.

These additional styles are not included if you use govuk-font-tabular-numbers. Switching to the new mixin can reduce the size of your compiled CSS without affecting the appearance of pages.

This change was introduced in pull request #4307: Refactor tabular number activation into their own mixin.

Recommended changes

Replace instances of govuk-typography-responsive with govuk-font-size

We've renamed the Sass mixin govuk-typography-responsive to govuk-font-size and have deprecated govuk-typography-responsive. You can still use govuk-typography-responsive, but we'll remove it in a future breaking release (GOV.UK Frontend v6.0.0).

This is an experimental change to see if the name govuk-font-size better communicates the Sass mixin's intended use than the name govuk-typography-responsive.

We're interested in feedback from the community on this name change, so please let us know what you think through our usual channels.

This change was introduced in pull request #4291: Rename govuk-typography-responsive to govuk-font-size.

Remove the aria-labelledby attribute from accordion sections

If you’re not using our Nunjucks macros, remove the aria-labelledby attribute from all accordion sections (div elements that have the govuk-accordion__section-content class).

This change was introduced in pull request #4628: Remove aria-labelledby from accordion sections.

Deprecated features

Stop using the element parameter on buttons

We’ve deprecated the element Nunjucks parameter and will remove it in the next major release.

In the future, if the href parameter is set the component will automatically use the <a> element. If the href parameter is not set the component will automatically use the <button> element. It will not be possible to override this change.

This change was introduced in pull request #4646: Deprecate element parameter on button component.

Stop using govuk-body-xs, govuk-!-font-size-14 and '14' on the type scale

We’ve deprecated point 14 (14px large screens, 12px small screens) on the GOV.UK Frontend responsive type scale, including font override classes that use point 14:
- govuk-body-xs
- govuk-!-font-size-14
We’ll remove these classes and point 14 on the type scale in the next major release, GOV.UK Frontend release v6.0.0. With this change in the v6.0.0 release, you’ll no longer be able to call the Sass mixins govuk-font or govuk-font-size with $size set to '14'.

This change was introduced in #4649: Deprecate 14 on the type scale and #4713: Ensure govuk-font-size() handles string keys.

Fixes

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

from govuk-frontend GitHub release notes

Important

Check the changes in this PR to ensure they won't cause issues with your project.
This PR was automatically created by Snyk using the credentials of a real user.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

📜 Customise PR templates

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

Snyk has created this PR to upgrade govuk-frontend from 5.1.0 to 5.4.0. See this package in npm: govuk-frontend See this project in Snyk: https://app.snyk.io/org/timsaundersey/project/e73f74e0-fbab-4502-ab9b-48ef6660617e?utm_source=github&utm_medium=referral&page=upgrade-pr

timsaundersEY closed this Sep 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Snyk] Upgrade govuk-frontend from 5.1.0 to 5.4.0 #93

[Snyk] Upgrade govuk-frontend from 5.1.0 to 5.4.0 #93

timsaundersEY commented Jun 19, 2024

New features

Create individual components with `createAll`

Use tabular numbers easily with `govuk-!-font-tabular-numbers`

Deprecated features

Importing layers using `all` files

Fixes

Fixes

New features

Use the Password input component to help users accessibly enter passwords

Recommended changes

Update the HTML for the Character count component

Remove redundant `role` attributes from elements

Fixes

New features

We've adjusted our responsive type scale

Insert custom HTML into component form group wrappers

Deprecated features

Stop using the `useTudorCrown` parameter in the Heading component

Fixes

New features

Update to the new GOV.UK logo

Include the new logo assets

Update the logo in the header of your page

Add attributes to component form group wrappers

Use tabular numbers with the `govuk-font-tabular-numbers` mixin

Recommended changes

Replace instances of `govuk-typography-responsive` with `govuk-font-size`

Remove the `aria-labelledby` attribute from accordion sections

Deprecated features

Stop using the `element` parameter on buttons

Stop using `govuk-body-xs`, `govuk-!-font-size-14` and '14' on the type scale

Fixes

[Snyk] Upgrade govuk-frontend from 5.1.0 to 5.4.0 #93

[Snyk] Upgrade govuk-frontend from 5.1.0 to 5.4.0 #93

Conversation

timsaundersEY commented Jun 19, 2024

Snyk has created this PR to upgrade govuk-frontend from 5.1.0 to 5.4.0.

New features

Create individual components with createAll

Use tabular numbers easily with govuk-!-font-tabular-numbers

Deprecated features

Importing layers using all files

Fixes

Fixes

New features

Use the Password input component to help users accessibly enter passwords

Recommended changes

Update the HTML for the Character count component

Remove redundant role attributes from elements

Fixes

New features

We've adjusted our responsive type scale

Insert custom HTML into component form group wrappers

Deprecated features

Stop using the useTudorCrown parameter in the Heading component

Fixes

New features

Update to the new GOV.UK logo

Include the new logo assets

Update the logo in the header of your page

Add attributes to component form group wrappers

Use tabular numbers with the govuk-font-tabular-numbers mixin

Recommended changes

Replace instances of govuk-typography-responsive with govuk-font-size

Remove the aria-labelledby attribute from accordion sections

Deprecated features

Stop using the element parameter on buttons

Stop using govuk-body-xs, govuk-!-font-size-14 and '14' on the type scale

Fixes

Create individual components with `createAll`

Use tabular numbers easily with `govuk-!-font-tabular-numbers`

Importing layers using `all` files

Remove redundant `role` attributes from elements

Stop using the `useTudorCrown` parameter in the Heading component

Use tabular numbers with the `govuk-font-tabular-numbers` mixin

Replace instances of `govuk-typography-responsive` with `govuk-font-size`

Remove the `aria-labelledby` attribute from accordion sections

Stop using the `element` parameter on buttons

Stop using `govuk-body-xs`, `govuk-!-font-size-14` and '14' on the type scale