[Snyk] Upgrade govuk-frontend from 4.7.0 to 4.8.0

[beclamide]

Snyk has created this PR to upgrade govuk-frontend from 4.7.0 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 1 version ahead of your current version.

• The recommended version was released on 7 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

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