Add support for GOV.UK June 2025 rebrand (#15)

matteason · web-flow · commit 7a1a9f98cb81 · 2025-06-07T14:04:27.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "govuk-vue",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
   "author": {
     "name": "Matt Eason"
@@ -32,7 +32,7 @@
     "copyfiles": "^2.4.1",
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.9.0",
-    "govuk-frontend": "^5.9.0",
+    "govuk-frontend": "^5.10.2",
     "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
diff --git a/src/App.vue b/src/App.vue
@@ -155,48 +155,52 @@ watch(files, () => {
 </script>
 
 <template>
-  <gv-cookie-banner
-    :message-class="{ foo: false, baz: true }"
-    heading="Cookies?"
-    cookie-information="GOV.UK Vue doesn't use cookies, but here's a cookie banner anyway."
-    accept-button-text="Accept some cookies"
-    reject-button-text="Reject some cookies"
-    view-cookies-link-text="View cookies"
-    view-cookies-link-href="/cookies"
-    @acceptClicked="acceptCookies"
-    @rejectClicked="rejectCookies"
-    @viewCookiesClicked="viewCookies"
-  >
-    <template #accepted><p class="govuk-body">You've accepted cookies</p></template>
-    <template #rejected><p class="govuk-body">You've rejected cookies</p></template>
-  </gv-cookie-banner>
-  <gv-skip-link href="#skiplinktarget">Skip to the skip link target</gv-skip-link>
-  <gv-header
-    product-name="Test"
-    homepage-url="foo"
-    service-name="Test service name"
-    service-url="bar"
-    menu-button-text="Menu button text"
-    menu-button-label="Menu button label"
-    navigation-label="Test navigation label"
-    navigation-id="main-navigation"
-  >
-    <gv-header-navigation-item href="x">Test navigation item 1</gv-header-navigation-item>
-    <gv-header-navigation-item href="y" text="This should never be shown" :active="true"
-      >Test navigation item 2</gv-header-navigation-item
+  <div class="govuk-template--rebranded">
+    <gv-cookie-banner
+      :message-class="{ foo: false, baz: true }"
+      heading="Cookies?"
+      cookie-information="GOV.UK Vue doesn't use cookies, but here's a cookie banner anyway."
+      accept-button-text="Accept some cookies"
+      reject-button-text="Reject some cookies"
+      view-cookies-link-text="View cookies"
+      view-cookies-link-href="/cookies"
+      @acceptClicked="acceptCookies"
+      @rejectClicked="rejectCookies"
+      @viewCookiesClicked="viewCookies"
     >
-    <gv-header-navigation-item text="Test navigation item 3 without href" />
-  </gv-header>
+      <template #accepted><p class="govuk-body">You've accepted cookies</p></template>
+      <template #rejected><p class="govuk-body">You've rejected cookies</p></template>
+    </gv-cookie-banner>
+    <gv-skip-link href="#skiplinktarget">Skip to the skip link target</gv-skip-link>
+
+    <gv-header
+      :rebrand="true"
+      product-name="Test"
+      homepage-url="foo"
+      service-name="Test service name"
+      service-url="bar"
+      menu-button-text="Menu button text"
+      menu-button-label="Menu button label"
+      navigation-label="Test navigation label"
+      navigation-id="main-navigation"
+    >
+      <gv-header-navigation-item href="x">Test navigation item 1</gv-header-navigation-item>
+      <gv-header-navigation-item href="y" text="This should never be shown" :active="true"
+        >Test navigation item 2</gv-header-navigation-item
+      >
+      <gv-header-navigation-item text="Test navigation item 3 without href" />
+    </gv-header>
+    <gv-service-navigation service-name="Service name" service-url="https://govukvue.org">
+      <gv-service-navigation-item :active="true" :current="true" href="http://bbc.co.uk"
+        >Link one</gv-service-navigation-item
+      >
+      <gv-service-navigation-item>Text item</gv-service-navigation-item>
+      <gv-service-navigation-item href="http://bbc.co.uk" text="Link 2 (prop)" />
+    </gv-service-navigation>
+  </div>
   <gv-phase-banner tag="Pre-alpha" text="This should never be shown">
     This library is still in early development
   </gv-phase-banner>
-  <gv-service-navigation service-name="Service name" service-url="https://govukvue.org">
-    <gv-service-navigation-item :active="true" :current="true" href="http://bbc.co.uk"
-      >Link one</gv-service-navigation-item
-    >
-    <gv-service-navigation-item>Text item</gv-service-navigation-item>
-    <gv-service-navigation-item href="http://bbc.co.uk" text="Link 2 (prop)" />
-  </gv-service-navigation>
   <gv-error-summary title="Uh oh..." description="This should never be shown">
     <template #title>Title slot</template>
     <template #description>Error summary description slot</template>
@@ -927,7 +931,7 @@ How would you like to be contacted?
   Password shown: {{ passwordShown }}
   <button @click="() => (passwordShown = !passwordShown)">Toggle password visibility</button>
 
-  <gv-footer copyright-href="xyz" copyright-text="Test copyright text">
+  <gv-footer copyright-href="xyz" copyright-text="Test copyright text" :show-crown="true">
     <template v-slot:navigation>
       <gv-footer-navigation title="Section 1" width="one-third">
         <gv-footer-navigation-item href="abc" text="This should never be shown"
diff --git a/src/components/govuk-vue/footer/GvFooter.vue b/src/components/govuk-vue/footer/GvFooter.vue
@@ -21,7 +21,14 @@ defineProps({
   /**
    * The copyright information. Defaults to Crown Copyright.
    */
-  copyright: String
+  copyright: String,
+  /**
+   * Whether to show the GOV.UK crown at the top of the footer.
+   */
+  showCrown: {
+    type: Boolean,
+    default: false
+  }
 })
 
 //We don't use the usual hasSlot() function here because in this case we don't care if the slot has content or not.
@@ -40,6 +47,31 @@ const hasCopyrightSlot = computed(() => {
 <template>
   <footer class="govuk-footer">
     <div class="govuk-width-container" :class="containerClass">
+      <svg
+        v-if="showCrown"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        role="presentation"
+        viewBox="0 0 64 60"
+        height="30"
+        width="32"
+        fill="currentcolor"
+        class="govuk-footer__crown"
+      >
+        <g>
+          <circle cx="20" cy="17.6" r="3.7"></circle>
+          <circle cx="10.2" cy="23.5" r="3.7"></circle>
+          <circle cx="3.7" cy="33.2" r="3.7"></circle>
+          <circle cx="31.7" cy="30.6" r="3.7"></circle>
+          <circle cx="43.3" cy="17.6" r="3.7"></circle>
+          <circle cx="53.2" cy="23.5" r="3.7"></circle>
+          <circle cx="59.7" cy="33.2" r="3.7"></circle>
+          <circle cx="31.7" cy="30.6" r="3.7"></circle>
+          <path
+            d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"
+          ></path>
+        </g>
+      </svg>
       <template v-if="hasSlot('navigation')">
         <div class="govuk-footer__navigation">
           <!-- @slot A list of `GvFooterNavigation` columns, each containing a list of `GvFooterNavigationItem`s -->
diff --git a/src/components/govuk-vue/header/GvHeader.vue b/src/components/govuk-vue/header/GvHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import hasSlot from '@/composables/useHasSlot'
-import { computed, onMounted, ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { useIsDesktop } from '@/composables/useIsDesktop'
 import { useComputedId } from '@/composables/useComputedId'
 
@@ -74,6 +74,13 @@ const props = defineProps({
   menuButtonText: {
     type: String,
     default: 'Menu'
+  },
+  /**
+   * Whether to use the rebranded GOV.UK logo. You'll also need to add `govuk-template--rebranded` to your `<html>` to enable the blue background.
+   */
+  rebrand: {
+    type: Boolean,
+    default: null
   }
 })
 
@@ -104,6 +111,38 @@ const computedNavigationLabel = props.navigationLabel ? props.navigationLabel :
             class="govuk-header__link govuk-header__link--homepage"
           >
             <svg
+              v-if="rebrand"
+              xmlns="http://www.w3.org/2000/svg"
+              focusable="false"
+              role="img"
+              viewBox="0 0 324 60"
+              height="30"
+              width="162"
+              fill="currentcolor"
+              class="govuk-header__logotype"
+              aria-label="GOV.UK"
+            >
+              <title>GOV.UK</title>
+              <g>
+                <circle cx="20" cy="17.6" r="3.7"></circle>
+                <circle cx="10.2" cy="23.5" r="3.7"></circle>
+                <circle cx="3.7" cy="33.2" r="3.7"></circle>
+                <circle cx="31.7" cy="30.6" r="3.7"></circle>
+                <circle cx="43.3" cy="17.6" r="3.7"></circle>
+                <circle cx="53.2" cy="23.5" r="3.7"></circle>
+                <circle cx="59.7" cy="33.2" r="3.7"></circle>
+                <circle cx="31.7" cy="30.6" r="3.7"></circle>
+                <path
+                  d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"
+                ></path>
+              </g>
+              <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"></circle>
+              <path
+                d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2.4,3.6,3.2,1.5.8,3.2,1.2,5.3,1.2s3.6-.3,4.9-.9c1.3-.6,2.3-1.4,3.1-2.3.8-.9,1.3-2,1.6-3,.3-1.1.5-2.1.5-3v-.4h-11v-6.6h19.5v24h-7.7v-5.4c-.5.8-1.2,1.6-2,2.3-.8.7-1.7,1.3-2.7,1.8-1,.5-2.1.9-3.3,1.2-1.2.3-2.5.4-3.8.4-3.2,0-6-.6-8.4-1.7-2.5-1.1-4.5-2.7-6.2-4.7-1.7-2-3-4.4-3.8-7.1-.9-2.7-1.3-5.6-1.3-8.7s.5-6,1.5-8.7,2.4-5.1,4.2-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.6-1.7,4,.2,5.9.7c1.8.5,3.5,1.1,5.1,2,1.5.9,2.9,1.9,4,3.2,1.2,1.2,2.1,2.6,2.8,4.1l-7.7,4.3c-.5-.9-1-1.8-1.6-2.6-.6-.8-1.3-1.5-2.2-2.1-.8-.6-1.7-1-2.8-1.4-1-.3-2.2-.5-3.5-.5-2,0-3.8.4-5.3,1.2s-2.7,1.9-3.6,3.2c-.9,1.3-1.7,2.8-2.1,4.6s-.7,3.5-.7,5.3v.3h0ZM152.9,13.7c3.2,0,6.1.6,8.7,1.7,2.6,1.2,4.7,2.7,6.5,4.7,1.8,2,3.1,4.4,4.1,7.1s1.4,5.6,1.4,8.7-.5,6-1.4,8.7c-.9,2.7-2.3,5.1-4.1,7.1s-4,3.6-6.5,4.7c-2.6,1.1-5.5,1.7-8.7,1.7s-6.1-.6-8.7-1.7c-2.6-1.1-4.7-2.7-6.5-4.7-1.8-2-3.1-4.4-4.1-7.1-.9-2.7-1.4-5.6-1.4-8.7s.5-6,1.4-8.7,2.3-5.1,4.1-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.7-1.7h0ZM152.9,50.4c1.9,0,3.6-.4,5-1.1,1.4-.7,2.7-1.7,3.6-3,1-1.3,1.7-2.8,2.2-4.5.5-1.7.8-3.6.8-5.7v-.2c0-2-.3-3.9-.8-5.7-.5-1.7-1.3-3.3-2.2-4.5-1-1.3-2.2-2.3-3.6-3-1.4-.7-3.1-1.1-5-1.1s-3.6.4-5,1.1c-1.5.7-2.7,1.7-3.6,3s-1.7,2.8-2.2,4.5c-.5,1.7-.8,3.6-.8,5.7v.2c0,2.1.3,4,.8,5.7.5,1.7,1.2,3.2,2.2,4.5,1,1.3,2.2,2.3,3.6,3,1.5.7,3.1,1.1,5,1.1ZM189.1,58l-12.3-44h9.8l8.4,32.9h.3l8.2-32.9h9.7l-12.3,44M262.9,50.4c1.3,0,2.5-.2,3.6-.6,1.1-.4,2-.9,2.8-1.7.8-.8,1.4-1.7,1.9-2.9.5-1.2.7-2.5.7-4.1V14h8.6v28.5c0,2.4-.4,4.6-1.3,6.6-.9,2-2.1,3.6-3.7,5-1.6,1.4-3.4,2.4-5.6,3.2-2.2.7-4.5,1.1-7.1,1.1s-4.9-.4-7.1-1.1c-2.2-.7-4-1.8-5.6-3.2s-2.8-3-3.7-5c-.9-2-1.3-4.1-1.3-6.6V14h8.7v27.2c0,1.6.2,2.9.7,4.1.5,1.2,1.1,2.1,1.9,2.9.8.8,1.7,1.3,2.8,1.7s2.3.6,3.6.6h0ZM288.5,14h8.7v19.1l15.5-19.1h10.8l-15.1,17.6,16.1,26.4h-10.2l-11.5-19.7-5.6,6.3v13.5h-8.7"
+              ></path>
+            </svg>
+            <svg
+              v-else
               focusable="false"
               role="img"
               class="govuk-header__logotype"
