Rebrand

app/components/govuk_component/footer_component.html.erb

@@ -1,5 +1,19 @@
 <%= tag.footer(role: 'contentinfo', **html_attributes) do %>
   <%= tag.div(**container_html_attributes) do %>
+    <%= tag.svg(class: "#{brand}-footer__crown", focusable: "false", role: "presentation", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 60", height: "30", width: "32", fill: "currentColor") do %>
+      <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>
+    <% end %>
+
     <% if navigation.present? %>
       <div class="<%= brand %>-footer__navigation">
         <%= navigation %>

app/components/govuk_component/header_component.html.erb

@@ -6,17 +6,29 @@
           <%= custom_logo %>
         <% else %>
           <svg
-            focusable="false"
-            role="img"
-            class="<%= brand %>-header__logotype"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 148 30"
-            height="30"
-            width="148"
-            aria-label="GOV.UK"
+              focusable="false"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 163 30"
+              height="30"
+              width="163"
+              class="<%= brand %>-header__logotype"
+              aria-label="GOV.UK"
           >
             <title>GOV.UK</title>
-            <path 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-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
+            <g>
+              <circle cx="10.1" cy="8.8" r="1.8"></circle>
+              <circle cx="5.2" cy="11.7" r="1.8"></circle>
+              <circle cx="1.9" cy="16.6" r="1.8"></circle>
+              <circle cx="16" cy="15.3" r="1.8"></circle>
+              <circle cx="21.9" cy="8.8" r="1.8"></circle>
+              <circle cx="26.8" cy="11.7" r="1.8"></circle>
+              <circle cx="30.1" cy="16.6" r="1.8"></circle>
+              <circle cx="16" cy="15.3" r="1.8"></circle>
+              <path d="m16.7 4.9.2-.2 2.3 1.2V2.5l-2.3.7s-.1-.2-.2-.2l.9-2.9h-3.4l.9 2.9s-.2.1-.2.2l-2.3-.7v3.4l2.3-1.2.2.2-1.3 4c-.5 1.4.6 2.9 2.1 2.9s2.5-1.4 2.1-2.9l-1.3-4Zm2 14s-1.7 1.9-2.1 3c1.1 0 2.1-.3 3.2-1.4l-.4 4.3c-1-1.4-2.2-2-2.9-1.9 0 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-1-2.2-.9-3.8 1.2-5.4 1.5 2 1.3 3.7-.6 5.5 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-2.9-.6 0-1.2.3-2 .8l1.2-4c.3 1.1.7 1.9 1.1 2.3.3-.8.2-1.4 0-2.7l2.5.9c-1.3 1.8-2.6 4.3-3.7 8.8-3.7-.5-7.9-.8-12.3-.8s-8.6.3-12.3.8c-1.1-4.4-2.3-7-3.7-8.8l2.5-.9c-.2 1.3-.3 1.9 0 2.7.4-.4.8-1.1 1.1-2.3l1.2 4c-.7-.5-1.3-.8-2-.8 1.2 2.5 2.6 3.1 3.5 2.9 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.5C9 18.4 9 20 8.1 22.2c1.2-1.4 3.2-.7 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.3c1.1 1.1 2.1 1.4 3.2 1.4-.4-1.2-2.1-3-2.1-3h5.3Z"></path>
+            </g>
+            <circle class="<%= brand %>-logo-dot" cx="113.6" cy="18" r="3.7"></circle>
+            <path d="M47.4,18.1c0,.9.1,1.8.3,2.7s.6,1.6,1.1,2.3c.5.7,1.1,1.2,1.8,1.6.7.4,1.6.6,2.6.6s1.8-.2,2.4-.5c.7-.3,1.2-.7,1.6-1.2.4-.5.7-1,.8-1.5s.2-1,.2-1.5v-.2h-5.5v-3.3s9.8,0,9.8,0v12h-3.8v-2.7c-.3.4-.6.8-1,1.2-.4.4-.9.6-1.4.9-.5.2-1.1.4-1.7.6s-1.2.2-1.9.2c-1.6,0-3-.3-4.2-.9-1.2-.6-2.3-1.4-3.1-2.4s-1.5-2.2-1.9-3.5-.7-2.8-.7-4.4.2-3,.7-4.4c.5-1.4,1.2-2.5,2.1-3.5s2-1.8,3.3-2.4,2.7-.9,4.3-.9,2,.1,2.9.4c.9.2,1.8.6,2.5,1,.8.4,1.4,1,2,1.6.6.6,1.1,1.3,1.4,2.1l-3.8,2.2c-.2-.5-.5-.9-.8-1.3-.3-.4-.7-.7-1.1-1-.4-.3-.9-.5-1.4-.7s-1.1-.2-1.8-.2c-1,0-1.9.2-2.6.6-.7.4-1.3.9-1.8,1.6s-.8,1.4-1.1,2.3c-.2.9-.3,1.8-.3,2.7h0c0,.1,0,.1,0,.1ZM76.5,6.9c1.6,0,3.1.3,4.3.9s2.4,1.4,3.3,2.4,1.6,2.2,2,3.5.7,2.8.7,4.4-.2,3-.7,4.4c-.5,1.4-1.2,2.5-2,3.5s-2,1.8-3.3,2.4-2.7.9-4.3.9-3.1-.3-4.3-.9-2.4-1.4-3.2-2.4-1.6-2.2-2-3.5-.7-2.8-.7-4.4.2-3,.7-4.4,1.2-2.5,2-3.5,2-1.8,3.2-2.4,2.7-.9,4.3-.9ZM76.5,25.2c.9,0,1.8-.2,2.5-.5s1.3-.9,1.8-1.5.9-1.4,1.1-2.2c.2-.9.4-1.8.4-2.8h0c0-1.1-.1-2.1-.4-3s-.6-1.6-1.1-2.3c-.5-.6-1.1-1.1-1.8-1.5s-1.6-.5-2.5-.5-1.8.2-2.5.5c-.7.4-1.3.9-1.8,1.5s-.9,1.4-1.1,2.3-.4,1.8-.4,2.8h0c0,1.2.1,2.1.4,3,.2.9.6,1.6,1.1,2.2.5.6,1.1,1.1,1.8,1.5.7.4,1.6.5,2.5.5ZM94.6,29l-6.1-22h4.9l4.2,16.5h.2l4.1-16.5h4.9l-6.1,22h-6ZM131.5,25.2c.6,0,1.2,0,1.8-.3s1-.5,1.4-.9c.4-.4.7-.9.9-1.4.2-.6.4-1.3.4-2V7h4.3v14.2c0,1.2-.2,2.3-.7,3.3-.4,1-1.1,1.8-1.8,2.5s-1.7,1.2-2.8,1.6c-1.1.4-2.3.6-3.5.6s-2.5-.2-3.5-.6c-1.1-.4-2-.9-2.8-1.6s-1.4-1.5-1.8-2.5c-.4-1-.7-2.1-.7-3.3V7s4.3,0,4.3,0v13.6c0,.8.1,1.5.4,2,.2.6.6,1.1,1,1.4.4.4.9.7,1.4.9s1.1.3,1.8.3h0ZM144.2,7h4.4v9.6s7.8-9.6,7.8-9.6h5.4l-7.5,8.8,8,13.2h-5.1l-5.7-9.9-2.8,3.1v6.7s-4.4,0-4.4,0V7Z"></path>
           </svg>
         <% end %>
         <% if product_name.present? %>

guide/layouts/example.slim

@@ -1,5 +1,5 @@
 doctype html
-html.govuk-template lang="en"
+html.govuk-template.govuk-template--rebranded lang="en"
   == render '/partials/head.*'
   body.govuk-template__body.app-iframe
     script

lib/govuk/components/version.rb

@@ -1,5 +1,5 @@
 module Govuk
   module Components
-    VERSION = '5.10.0'.freeze
+    VERSION = '5.10.0b2'.freeze
   end
 end

spec/components/govuk_component/footer_component_spec.rb

@@ -44,6 +44,15 @@
     end
   end
 
+  specify 'the crown is present' do
+    expect(rendered_content).to have_tag('svg', with: { class: 'govuk-footer__crown', role: 'presentation', }) do
+      with_tag('g') do
+        with_tag('circle', count: 8)
+        with_tag('path')
+      end
+    end
+  end
+
   specify "the copyright information is present" do
     expect(rendered_content).to have_tag(selector) do
       with_tag("div", with: { class: "govuk-footer__meta-item" }, text: /Crown copyright/)