Release v4.8.0

[querkmachine]

GOV.UK Frontend v4.8.0 (Feature release)

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 Martin Jones and Mónica Crusellas 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]-->

[owenatgov]

Diff attached as file
dist.diff.zip

[colinrotherham]

I looked into the Autoprefixer output differences just in case

As part of our support/4.x releases we bump caniuse-lite to avoid:

  console.warn
    Browserslist: caniuse-lite is outdated. Please run:
      npx update-browserslist-db@latest
      Why you should do it regularly: https://github.com/browserslist/update-db#readme

This will update the package-lock.json version and was logged as:

Latest version:     1.0.30001584
Installed version:  1.0.30001431

Browserslist changes

Updating caniuse-lite will see android 4.4.3-4.4.4 dropped from the npx browserslist results

We reviewed the CSS output in ./dist and accepted various changes that matched the updated browser data

Releases to v4.x

Vendor prefix -webkit-transform is no longer necessary:

.js-enabled .govuk-accordion-nav__chevron--down {
- -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

Releases to v5.x

Vendor prefixes -ms-transform and -webkit-transform are no longer necessary:

.js-enabled .govuk-accordion-nav__chevron--down {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}