Implement the Tudor crown in the header component

alphagov · Oct 24, 2023 · 568a6d2 · 568a6d2
1 parent 6cb6a1e
commit 568a6d2
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 32 deletions.
diff --git a/src/govuk/assets/images/govuk-logotype-tudor-crown.png b/src/govuk/assets/images/govuk-logotype-tudor-crown.png
diff --git a/src/govuk/components/header/_index.scss b/src/govuk/components/header/_index.scss
@@ -62,13 +62,28 @@
     vertical-align: top;
   }
 
+  // Spacing adjustment for Tudor crown, as the new graphic is narrower than the
+  // existing crown. In Frontend v5, this rule should replace the equivalent in
+  // the block above.
+  .govuk-header__logotype-crown[width="32"] {
+    margin-right: 4px;
+  }
+
   .govuk-header__logotype-crown-fallback-image {
     width: 36px;
     height: 32px;
     border: 0;
     vertical-align: bottom;
   }
 
+  // Sizing adjustment for Tudor crown, as the new graphic is smaller than the
+  // existing crown. In Frontend v5, these rules should replace their
+  // equivalents in the block above.
+  .govuk-header__logotype-crown-fallback-image[width="32"] {
+    width: 32px;
+    height: 30px;
+  }
+
   .govuk-header__product-name {
     @include govuk-font($size: 24, $line-height: 1);
     display: inline-table;

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
@@ -72,6 +72,10 @@ params:
     type: object
     required: false
     description: HTML attributes (for example data attributes) to add to the header container.
+  - 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.
 
 previewLayout: full-width
 accessibilityCriteria: |
@@ -98,6 +102,11 @@ examples:
     description: The standard header as used on information pages on GOV.UK
     data: {}
 
+  - name: with Tudor crown
+    description: Standard header with King Charles III's crown.
+    data:
+      useTudorCrown: true
+
   - 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.
     data:

diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk
@@ -1,42 +1,79 @@
 {% set menuButtonText = params.menuButtonText if params.menuButtonText else 'Menu' %}
 
+{#- We use an inline SVG for the crown so that we can cascade the
+currentColor into the crown whilst continuing to support older browsers
+which do not support external SVGs without a Javascript polyfill. This
+adds approximately 1kb to every page load.
+
+We use currentColour so that we can easily invert it when printing and
+when the focus state is applied. This also benefits users who override
+colours in their browser as they will still see the crown.
+
+The SVG needs `focusable="false"` so that Internet Explorer does not
+treat it as an interactive element - without this it will be
+'focusable' when using the keyboard to navigate. #}
+
+{% set _stEdwardsCrown %}
+<!--[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 132 97"
+  height="30"
+  width="36"
+>
+  <path
+    fill="currentColor" fill-rule="evenodd"
+    d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+  ></path>
+</svg>
+<!--<![endif]-->
+<!--[if IE 8]>
+<img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32" alt="">
+<![endif]-->
+{% endset %}
+
+{% set _tudorCrown %}
+<!--[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">
+  <symbol id="j">
+    <circle fill="currentColor" fill-rule="evenodd" cx="1.85" cy="1.85" r="1.85"/>
+  </symbol>
+  <symbol id="c">
+    <path fill="currentColor" fill-rule="evenodd" d="M16 0v11.79c-.09 0-.18 0-.27-.02h-.05c-1.05-.16-1.86-1.06-1.86-2.15 0-.22.03-.44.1-.64v-.02l1.34-4.04c-.09-.07-.17-.15-.24-.24S12.69 5.9 12.69 5.9V2.46l2.33.74c.06-.09.14-.17.23-.24S14.31 0 14.31 0h1.68Zm-2.67 18.89s1.7 1.9 2.08 3.05c-1.11-.04-2.12-.25-3.22-1.4l.37 4.28c1.02-1.42 2.2-2.04 2.87-1.92-.07 1.54-.23 3.39-2.92 3.63-1.88.16-3.38-.76-3.54-1.9-.19-1.31.99-2.18 1.88-.8.69-2.28-1.23-3.04-2.46-1.63.95-2.25.93-3.85-1.19-5.47-1.52 2.02-1.3 3.68.58 5.56-1.22-.68-3.13.04-2 2.32.59-1.42 1.84-1.1 2.1.12.18.86-.35 1.88-1.49 2.09-.93.17-2.38-.47-3.53-2.95.65.02 1.22.34 1.96.85l-1.21-4.04c-.31 1.13-.7 1.88-1.11 2.28-.28-.82-.24-1.41 0-2.68l-2.5.89c1.33 1.81 2.62 4.36 3.67 8.81 3.73-.53 7.91-.83 12.32-.83V18.87h-2.67Z"/>
+  </symbol>
+  <use href="#c" x="0" y="0"/>
+  <use href="#c" x="-32" y="0" transform="scale(-1,1)"/>
+  <use href="#j" x="0" y="14.7"/>
+  <use href="#j" x="3.3" y="9.8"/>
+  <use href="#j" x="8.26" y="6.85"/>
+  <use href="#j" x="14.15" y="13.52"/>
+  <use href="#j" x="20.04" y="6.85"/>
+  <use href="#j" x="25" y="9.8"/>
+  <use href="#j" x="28.3" y="14.7"/>
+</svg>
+<!--<![endif]-->
+<!--[if IE 8]>
+<img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
+<![endif]-->
+{% endset %}
+
 <header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="govuk-header"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
     <div class="govuk-header__logo">
       <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-          <!--[if gt IE 8]><!-->
-          {#- We use an inline SVG for the crown so that we can cascade the
-          currentColor into the crown whilst continuing to support older browsers
-          which do not support external SVGs without a Javascript polyfill. This
-          adds approximately 1kb to every page load.
-
-          We use currentColour so that we can easily invert it when printing and
-          when the focus state is applied. This also benefits users who override
-          colours in their browser as they will still see the crown.
-
-          The SVG needs `focusable="false"` so that Internet Explorer does not
-          treat it as an interactive element - without this it will be
-          'focusable' when using the keyboard to navigate. #}
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            class="govuk-header__logotype-crown"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 132 97"
-            height="30"
-            width="36"
-          >
-            <path
-              fill="currentColor" fill-rule="evenodd"
-              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
-            ></path>
-          </svg>
-          <!--<![endif]-->
-          <!--[if IE 8]>
-          <img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32" alt="">
-          <![endif]-->
+          {{ (_tudorCrown if params.useTudorCrown else _stEdwardsCrown) | safe }}
           <span class="govuk-header__logotype-text">
             GOV.UK
           </span>

diff --git a/src/govuk/components/header/template.test.js b/src/govuk/components/header/template.test.js
@@ -238,7 +238,7 @@ describe('header', () => {
     })
   })
 
-  describe('SVG logo', () => {
+  describe('St. Edward\'s crown logo', () => {
     let $
     let $svg
 
@@ -262,4 +262,33 @@ describe('header', () => {
       })
     })
   })
+
+  describe('Tudor crown logo', () => {
+    let $
+    let $svg
+
+    beforeAll(() => {
+      $ = render('header', examples['with Tudor crown'])
+      $svg = $('.govuk-header__logotype-crown')
+    })
+
+    it('uses Tudor crown if configured to do so', () => {
+      expect($svg.attr('viewBox')).toEqual('0 0 32 30')
+    })
+
+    it('sets focusable="false" so that IE does not treat it as an interactive element', () => {
+      expect($svg.attr('focusable')).toEqual('false')
+    })
+
+    it('sets aria-hidden="true" so that it is ignored by assistive technologies', () => {
+      expect($svg.attr('aria-hidden')).toEqual('true')
+    })
+
+    describe('fallback PNG', () => {
+      it('is invisible to modern browsers', () => {
+        const $fallbackImage = $('.govuk-header__logotype-crown-fallback-image')
+        expect($fallbackImage.length).toEqual(0)
+      })
+    })
+  })
 })