Bump govuk-frontend from 5.0.0 to 5.1.0

[dependabot]

Bumps govuk-frontend from 5.0.0 to 5.1.0.

Release notes

Sourced from govuk-frontend's releases.

GOV.UK Frontend v5.1.0

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"
</tr></table> 

... (truncated)

Changelog

Sourced from govuk-frontend's changelog.

GOV.UK Frontend v5.1.0 (Feature release)

New features

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.

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"
</tr></table> 

... (truncated)

Commits

• eb8b345 Merge pull request #4734 from alphagov/release-5.1.0
• 3ee36fd Release v5.1.0
• 876a4b8 Merge pull request #4721 from alphagov/querkmachine-patch-1
• 6fa2b67 Fix broken team docs link
• 18cc100 Merge pull request #4693 from alphagov/dependabot/npm_and_yarn/test-80503005ef
• 7bf27e6 Merge pull request #4713 from alphagov/deprecate-14-strings
• ffbfd86 Update changelog entry
• 220a4c0 Remove duplicate font declarations for point 14
• 02f5803 Add new $size-internal-use-only for deprecated font sizes
• 1ed26b0 Ensure govuk-font-size() handles string keys
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore <dependency name> major version will close this group update PR and stop Dependabot creating any more for the specific dependency's major version (unless you unignore this specific dependency's major version or upgrade to it yourself)
• @dependabot ignore <dependency name> minor version will close this group update PR and stop Dependabot creating any more for the specific dependency's minor version (unless you unignore this specific dependency's minor version or upgrade to it yourself)
• @dependabot ignore <dependency name> will close this group update PR and stop Dependabot creating any more for the specific dependency (unless you unignore this specific dependency or upgrade to it yourself)
• @dependabot unignore <dependency name> will remove all of the ignore conditions of the specified dependency
• @dependabot unignore <dependency name> <ignore condition> will remove the ignore condition of the specified dependency and ignore conditions

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	28cce47
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/65c23114a1bd550008e48a63
😎 Deploy Preview	https://deploy-preview-3525--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[colinrotherham]

@owenatgov @querkmachine I've added some fixes:

1. Replace govuk-typography-responsive() with govuk-font-size()
2. Temporarily use image assets from GOV.UK Frontend v5.0.0 (not v5.1.0)
3. Fix broken link to non-existent hint or label page for components with subset options

Can drop or revert 2) as necessary, but means we can merge this PR ahead of potential new guidance

[querkmachine]

Can I be real persnickety and request that 6e4e44e and 1f42bde be rebased into a single commit for ease of reversion when we do get to switch on the new logo?

Otherwise, all looking good to me.

[colinrotherham]

Thanks @querkmachine, both consolidated into b4c8440 now

Good to merge?

[querkmachine]

@colinrotherham Go for it!