[Snyk] Upgrade govuk-frontend from 4.3.1 to 4.8.0 #157

beclamide · 2024-08-19T10:36:24Z

Snyk has created this PR to upgrade govuk-frontend from 4.3.1 to 4.8.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 6 versions ahead of your current version.
The recommended version was released on 6 months ago.

Release notes

Package name: govuk-frontend

4.8.0 - 2024-02-05

This release includes the ability to update the crown logo. You must do this between 19 February and 1 March 2024.

We’ll send reminders to our mailing list and cross-government Slack as soon as you can make this change.

New features

Update to the new GOV.UK logo (between 19 February and 1 March 2024)

We’ve updated the GOV.UK logo 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 to use the new crown.

These changes were made in the following pull requests:

#4376: Implement the Tudor crown favicons (v4.x)
#4278: Implement the Tudor crown in the Header component (v4.x)
#4677: Adjust the spacing of the new Tudor crown (v4.x) - thanks to @ MartinJJones and @ monicacrusellasfanlo for contributing this change

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 are 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
govuk-apple-touch-icon-152x152.png
govuk-apple-touch-icon-167x167.png
govuk-apple-touch-icon-180x180.png
govuk-apple-touch-icon.png
govuk-logotype-tudor-crown.png
govuk-mask-icon.svg
govuk-opengraph-image.png

Update the logo in the header of your page

If you are using the govukHeader Nunjucks macro in your service, add the useTudorCrown parameter to the macro instantiation.

{{ govukHeader({
  ...
  useTudorCrown: true
}) }}

If you are not using the Nunjucks macro, locate the HTML for the existing crown and replace it with this updated HTML. Make sure the URL for the new PNG fallback image is correct.

<!--[if gt IE 8]><!-->
<svg
  aria-hidden="true"
  focusable="false"
  class="govuk-header__logotype-crown"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 32 30"
  height="30"
  width="32"
>
  <path
    fill="currentColor" fill-rule="evenodd"
    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-.8"></path>
</svg>
<!--<![endif]-->
<!--[if IE 8]>
<img src="/assets/images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
<![endif]-->

4.7.0 - 2023-07-06
New features

Added the Exit This Page component to help users quickly exit a page or service

You can now choose to use the exit this page component to help users quickly leave a page or service which contains sensitive information.

This was added in pull request #2545: Add exit this page component.

Added inverse modifier for buttons on dark backgrounds

You can now choose to use the govuk-button--inverse class to style buttons on dark backgrounds with a white background colour.

This change was made in pull request #3556: Add inverse button styles.

Added inverse modifier for breadcrumbs on dark backgrounds

You can now choose to use the govuk-breadcrumbs--inverse class to style breadcrumbs on dark backgrounds with white text, links and arrows.

This change was made in pull request #3774: Add inverse breadcrumb and back link modifiers and styles.

Added inverse modifier for back links on dark backgrounds

You can now choose to use the govuk-back-link--inverse class to style back links on dark backgrounds with white links and arrows.

This change was made in pull request #3774: Add inverse breadcrumb and back link modifiers and styles.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:
- #3817: Fix package resolution in Node.js 17+
- #3836: Announce whitespace in screen reader announcements of visually hidden text
4.6.0 - 2023-04-20
New features

Updated the appearance of disabled form controls

We’ve updated the disabled state of Text Input, Textarea, Select and File Upload components so it is consistent across browsers and devices. They’re also now consistent with the existing disabled styles for Buttons, Checkboxes, and Radios.

Disabled form controls appear at 50% opacity and with an alternative cursor appearance when hovered over.

This was added in pull request #3187: Add disabled styles for form controls.

Added a top-level disabled parameter to form controls

We’ve updated the Nunjucks macros for Text Input, Textarea, Select and File Upload components to include a top-level disabled parameter. This will make it easier to enable the disabled state for these controls.
```
{{ govukInput({
  id: "disabled-input",
  name: "disabled-input",
  value: "Unchangeable value",
  disabled: true
}) }}
```
Disabled form controls have poor contrast and can confuse some users, so avoid them if possible.

Only use disabled form controls if research shows it makes the user interface easier to understand.

This was added in pull request #3187: Add disabled styles for form controls.

Configure whether the Accordion remembers and restores sessions

By default, when a user leaves a page, the Accordion will remember the layout of expanded and collapsed sections selected by the user. If the user returns to the page, this layout will be restored and override any sections manually set as expanded in code.

You can now disable this functionality by using the rememberExpanded option in the govukAccordion Nunjucks macro.

If you're not using the Nunjucks macro, you can disable it using the data-remember-expanded HTML attribute.

This was added in pull request #3342: Add option to disable sessionState in Accordion.

Added id parameter to Buttons

We’ve updated the Button Nunjucks macro to include an optional id parameter.
```
{{ govukButton({
  text: "Save and continue",
  id: "continue-button"
}) }}
```
This was added in pull request #3344: Adding optional ‘id’ attribute to button component.

Thanks to @ TomBillingtonUK for this contribution.

Added a modifier for text input styles that accept sequences of digits

We've added a new .govuk-input--extra-letter-spacing class for Text Input. This increases readability of text inputs that receive sequences of digits (like security codes, references or phone numbers).

You can add it through the classes option when using Nunjucks, or directly in the class attribute of the <input> when using HTML.

This was added in pull request #2230: Add extra letter spacing modifier for inputs

Deprecated features

Stop using JavaScript API properties other than the init method

We have deprecated all of the JavaScript properties in the API, except for the init method for each component. We'll make all of the deprecated JavaScript properties private in our next main release.

Please let us know if you're using parts of the API other than the init method by filling in this form. We'll use this information when prioritising future additions to the public API.

This was added in pull request #3499: Deprecate all JavaScript instance properties the except init method.

Stop using the .govuk-button--disabled class on buttons

We have deprecated the .govuk-button--disabled class and will remove it in the next major release.

If a Button uses a <button> or <input> element, use the disabled HTML attribute instead.

You will not need to make any changes if you're using the govukButton Nunjucks macro.

Disabling links that are styled to look like buttons will not be supported by future releases.

This was added in pull request #3326: Deprecate govuk-button--disabled class.

Stop using the deprecated Internet Explorer 8 mixins and settings

The next main release of GOV.UK Frontend will remove support for Internet Explorer 8 (IE8). In preparation for this, we've deprecated the settings and mixins used when generating IE8 specific stylesheets.

You'll start seeing deprecation warnings if you're:
- using the govuk-if-ie8 and govuk-not-ie8 mixins in your own Sass code (for example @ include govuk-if-ie8)
- changing the $govuk-is-ie8 and $govuk-ie8-breakpoint settings to anything other than their default values
If you no longer need to support IE8, we recommend you stop generating an IE8 specific stylesheet and remove references to the IE8 mixins from your code.

You can also silence these deprecation warnings by adding ie8 to the $govuk-suppressed-warnings setting, but once we’ve released v5.0 you will need to address them as part of the upgrade process.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:
4.5.0 - 2023-01-31
New features

Use summary cards to visually separate multiple summary lists on a single page

You can now use the summary card. This new variant of the Summary list component can help you:
- design and build pages with multiple summary lists
- show visual dividers between summary lists
- allow users to apply actions to entire lists
This was added in pull request #2931: Add summary card enhancement to summary list.

Search within accordion content on supporting browsers

We've updated the Accordion component to use the new hidden="until-found" attribute value.

This allows the browser's native 'find in page' functionality to search within and automatically open sections of the accordion. Currently, this functionality is only supported by recent versions of Google Chrome, Microsoft Edge and Samsung Internet.

This was added in pull requests:
- #3053: Enhance the Accordion component with hidden='until-found'
- #3095: Hide Accordion content (again) during .js-enabled page load
Source maps for precompiled files

You can now use source maps to help identify errors and console messages from GOV.UK Frontend precompiled files.

This was added in pull request #3023: Add source maps to compiled JavaScript and CSS.

Fixes

We've fixed errors in IE8 caused by updates to our precompiled JavaScript. The issue prevented some polyfills from running, but was limited to the release-v4.4.1.zip and release-v4.4.0.zip assets on GitHub releases:
- #3137: Enable UglifyJS compatibility workarounds
- #3013: Swap JavaScript minifier from UglifyJS to terser
We've made fixes to GOV.UK Frontend in the following pull requests:
4.4.1 - 2022-12-16
4.4.0 - 2022-11-14
4.3.1 - 2022-08-18

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 4.3.1 to 4.8.0. See this package in npm: govuk-frontend See this project in Snyk: https://app.snyk.io/org/beclamide/project/0ce0c7e1-6b54-4b82-ba1d-aea016793bf3?utm_source=github&utm_medium=referral&page=upgrade-pr

johnwatson484 closed this Oct 31, 2024

johnwatson484 deleted the snyk-upgrade-75095725905d4b925821be5c55b7249a branch October 31, 2024 18:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Snyk] Upgrade govuk-frontend from 4.3.1 to 4.8.0 #157

[Snyk] Upgrade govuk-frontend from 4.3.1 to 4.8.0 #157

beclamide commented Aug 19, 2024

New features

Update to the new GOV.UK logo (between 19 February and 1 March 2024)

Include the new logo assets

Update the logo in the header of your page

New features

Added the Exit This Page component to help users quickly exit a page or service

Added inverse modifier for buttons on dark backgrounds

Added inverse modifier for breadcrumbs on dark backgrounds

Added inverse modifier for back links on dark backgrounds

Fixes

New features

Updated the appearance of disabled form controls

Added a top-level `disabled` parameter to form controls

Configure whether the Accordion remembers and restores sessions

Added `id` parameter to Buttons

Added a modifier for text input styles that accept sequences of digits

Deprecated features

Stop using JavaScript API properties other than the `init` method

Stop using the `.govuk-button--disabled` class on buttons

Stop using the deprecated Internet Explorer 8 mixins and settings

Fixes

New features

Use summary cards to visually separate multiple summary lists on a single page

Search within accordion content on supporting browsers

Source maps for precompiled files

Fixes

[Snyk] Upgrade govuk-frontend from 4.3.1 to 4.8.0 #157

[Snyk] Upgrade govuk-frontend from 4.3.1 to 4.8.0 #157

Conversation

beclamide commented Aug 19, 2024

Snyk has created this PR to upgrade govuk-frontend from 4.3.1 to 4.8.0.

New features

Update to the new GOV.UK logo (between 19 February and 1 March 2024)

Include the new logo assets

Update the logo in the header of your page

New features

Added the Exit This Page component to help users quickly exit a page or service

Added inverse modifier for buttons on dark backgrounds

Added inverse modifier for breadcrumbs on dark backgrounds

Added inverse modifier for back links on dark backgrounds

Fixes

New features

Updated the appearance of disabled form controls

Added a top-level disabled parameter to form controls

Configure whether the Accordion remembers and restores sessions

Added id parameter to Buttons

Added a modifier for text input styles that accept sequences of digits

Deprecated features

Stop using JavaScript API properties other than the init method

Stop using the .govuk-button--disabled class on buttons

Stop using the deprecated Internet Explorer 8 mixins and settings

Fixes

New features

Use summary cards to visually separate multiple summary lists on a single page

Search within accordion content on supporting browsers

Source maps for precompiled files

Fixes

Added a top-level `disabled` parameter to form controls

Added `id` parameter to Buttons

Stop using JavaScript API properties other than the `init` method

Stop using the `.govuk-button--disabled` class on buttons