Implement transitional crown in the Header component (v5.0)

[querkmachine]

Implements transitional crown in Frontend 5.0. That is, an asset that utilises the new lockup agreed for Frontend v5 (#1739), but using the St. Edward's crown. Part of #4440.

Changes

• Adds the new GOV.UK logo lockup (with St. Edward's crown) to the Header component.
• Applies several changes to how the SVG is included to ensure it's visible to assistive technologies. This is needed as the 'GOV.UK' text is no longer present on the page as text.
  • This uses a combination of role="img" and an embedded <title> element. This combination appears to work consistently across screen readers in Deque's assessment of SVG implementations ("SVG pattern 5") and does not require the use of globally unique ids.
  • The inline fill="currentcolor" definition has been removed as the same style is being applied by CSS.
• Several HTML structure changes:
  • The .govuk-header__logotype span that wrapped both logo elements has been removed.
  • The .govuk-header__logotype-crown class has been renamed .govuk-header__logotype.
  • The .govuk-header__logotype-text span has been removed.
• Moves some of the styles applied to the crown icon to apply to the entire logotype.
  • Applies a few tweaks to the positioning as a result of this spike: [SPIKE] Tudor crown Safari position tweaks #4423
• Updates tests for the new SVG.
  • Modified the tests we run on the page's <title> element so that they don't conflict with the SVG's <title> element.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-5.0.0-beta.1.min.css	114 KiB
dist/govuk-frontend-5.0.0-beta.1.min.js	37.93 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	77.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	72.89 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.64 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.11 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	69.22 KiB
components/accordion/accordion.mjs	21.47 KiB
components/button/button.mjs	4.5 KiB
components/character-count/character-count.mjs	21.05 KiB
components/checkboxes/checkboxes.mjs	5.63 KiB
components/error-summary/error-summary.mjs	5.89 KiB
components/exit-this-page/exit-this-page.mjs	15.89 KiB
components/header/header.mjs	3.71 KiB
components/notification-banner/notification-banner.mjs	4.34 KiB
components/radios/radios.mjs	4.63 KiB
components/skip-link/skip-link.mjs	3.61 KiB
components/tabs/tabs.mjs	9.47 KiB

View stats and visualisations on the review app

---

Action run for e346a4a

[colinrotherham]

Thanks @querkmachine

Would you mind keeping the commit 058b443 separate for history sake? Extra information in the commit message

Did you want to slightly smaller (file size) logo from commit 8e0ce07 too?

[querkmachine]

Would you mind keeping the commit 058b443 separate for history sake? Extra information in the commit message

Done!

Did you want to slightly smaller (file size) logo from commit 8e0ce07 too?

Not done! Wrong crown for this PR. 😋

[colinrotherham]

Not done! Wrong crown for this PR. 😋

😎

[colinrotherham]

Think this is looking good @querkmachine

Added a few minor comments then will want a CHANGELOG entry and we're spot on

[colinrotherham]

Nice work with all this @querkmachine

Would you mind giving it a rebase with main? This PR and #4445 will need merging in order as both have ### Breaking changes but think we're happy to get them in the next v5 beta

[colinrotherham]

@claireashworth is keeping a Google Doc up to date with a re-ordered CHANGELOG so I'll flag this change too