Merge pull request #4740 from alphagov/make-tudor-crown-default

Make Tudor Crown logo the default

CHANGELOG.md

@@ -48,6 +48,14 @@ govukInput({
 
 This change was introduced in [pull request #4567: Add `beforeInput(s)` and `beforeInput(s)` options to form groups](https://github.com/alphagov/govuk-frontend/pull/4567).
 
+### Deprecated features
+
+#### Stop using the `useTudorCrown` parameter in the Heading component
+
+As the beginning of the GOV.UK logo rollout has passed, the Tudor crown logo is now shown by default and the `useTudorCrown` parameter has been deprecated. We will remove it in the next major release.
+
+The `useTudorCrown` parameter, along with any other adjustments made to display the Tudor crown logo in your service, can now be removed.
+
 ## 5.1.0 (Feature release)
 
 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](https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version).

packages/govuk-frontend/src/govuk/components/header/header.yaml

@@ -71,7 +71,7 @@ params:
   - name: useTudorCrown
     type: boolean
     required: false
-    description: If `true`, the header uses the Tudor crown from King Charles III's royal cypher. This will become the default in a future version of GOV.UK Frontend.
+    description: Deprecated. If `true`, uses the Tudor crown from King Charles III's royal cypher. Otherwise, uses the St. Edward's crown. Default is `true`.
 
 previewLayout: full-width
 accessibilityCriteria: |
@@ -98,10 +98,10 @@ examples:
     description: The standard header as used on information pages on GOV.UK
     options: {}
 
-  - name: with Tudor crown
-    description: Standard header with King Charles III's crown.
+  - name: with St Edward's crown
+    description: Legacy header with Queen Elizabeth II's crown.
     options:
-      useTudorCrown: true
+      useTudorCrown: false
 
   - name: with service name
     description: If your service is more than a few pages long, you can help users understand where they are by adding the service name.

packages/govuk-frontend/src/govuk/components/header/template.njk

@@ -45,7 +45,7 @@
 
         We use a single compound path for the logo to prevent subpixel rounding
         shifting different elements unevenly relative to one another. #}
-        {{ (_tudorCrown if params.useTudorCrown else _stEdwardsCrown) | safe | trim | indent(8) }}
+        {{ (_stEdwardsCrown if (params.useTudorCrown !== undefined and params.useTudorCrown === false) else _tudorCrown) | safe | trim | indent(8) }}
         {% if (params.productName) %}
         <span class="govuk-header__product-name">
           {{ params.productName }}

packages/govuk-frontend/src/govuk/components/header/template.test.js

@@ -281,8 +281,8 @@ describe('header', () => {
       $svg = $('.govuk-header__logotype')
     })
 
-    it("defaults to St Edward's crown", () => {
-      expect($svg.attr('viewBox')).toEqual('0 0 152 30')
+    it('defaults to Tudor crown', () => {
+      expect($svg.attr('viewBox')).toEqual('0 0 148 30')
     })
 
     it('sets focusable="false" so that IE does not treat it as an interactive element', () => {
@@ -301,11 +301,11 @@ describe('header', () => {
       expect($svg.html()).toContain('<title>GOV.UK</title>')
     })
 
-    it('uses the Tudor Crown if useTudorCrown is set', () => {
-      $ = render('header', examples['with Tudor crown'])
+    it("uses the St Edward's Crown if useTudorCrown is false", () => {
+      $ = render('header', examples["with St Edward's crown"])
       $svg = $('.govuk-header__logotype')
 
-      expect($svg.attr('viewBox')).toEqual('0 0 148 30')
+      expect($svg.attr('viewBox')).toEqual('0 0 152 30')
     })
   })
 })