Update to use new combined logo svg

app/components/govuk_component/header_component.html.erb

@@ -2,21 +2,22 @@
   <%= tag.div(**container_html_attributes) do %>
     <div class="<%= brand %>-header__logo">
       <%= link_to(homepage_url, class: ["#{brand}-header__link", "#{brand}-header__link--homepage"]) do %>
-        <span class="<%= brand %>-header__logotype">
-          <% if custom_logo.present? %>
-            <%= custom_logo %>
-          <% else %>
-            <% if crown %>
-              <!--[if gt IE 8]><!-->
-                <svg aria-hidden="true" focusable="false" class="<%= brand %>-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]-->
-            <% end %>
-
-            <%= tag.span(logotype, class: "#{brand}-header__logotype-text") %>
-          <% end %>
-        </span>
+        <% if custom_logo.present? %>
+          <%= custom_logo %>
+        <% else %>
+          <svg
+            focusable="false"
+            role="img"
+            class="<%= brand %>-header__logotype"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 152 30"
+            height="30"
+            width="152"
+          >
+          <title>GOV.UK</title>
+          <path d="M6.7 12.2c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m-4.3 2.5c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.5 1 0 2.1 1 2.5m-1.3 4.8c1 .4 2.1-.1 2.5-1 .4-1-.1-2.1-1-2.5-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m10.4-5.8c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1s0 2.1 1 2.5m17.4-1.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m4.3 2.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m1.3 4.8c-1 .4-2.1-.1-2.5-1-.4-1 .1-2.1 1-2.5 1-.4 2.1.1 2.5 1 .4 1 0 2.1-1 2.5m-10.4-5.8c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1s0 2.1-1 2.5m-5.3-4.9 2.4 1.3V6.5l-2.4.8c-.1-.1-.1-.2-.2-.2s1-3 1-3h-3.4l1 3c-.1.1-.2.1-.2.2-.1.1-2.4-.7-2.4-.7v3.5L17 8.8c-.1.1 0 .2.1.3l-1.4 4.2c-.1.2-.1.4-.1.7 0 1.1.8 2.1 1.9 2.2h.6C19.2 16 20 15.1 20 14c0-.2 0-.4-.1-.7l-1.4-4.2c.2-.1.3-.2.3-.3m-1 20.3c4.6 0 8.9.3 12.8.9 1.1-4.6 2.4-7.2 3.8-9.1l-2.6-.9c.3 1.3.3 1.9 0 2.8-.4-.4-.8-1.2-1.1-2.4l-1.2 4.2c.8-.5 1.4-.9 2-.9-1.2 2.6-2.7 3.2-3.6 3-1.2-.2-1.7-1.3-1.5-2.2.3-1.3 1.6-1.6 2.2-.1 1.2-2.4-.8-3.1-2.1-2.4 1.9-1.9 2.2-3.6.6-5.7-2.2 1.7-2.2 3.3-1.2 5.6-1.3-1.5-3.3-.7-2.5 1.7.9-1.4 2.1-.5 2 .8-.2 1.2-1.7 2.1-3.7 2-2.8-.2-3-2.2-3-3.7.7-.1 1.9.5 3 2l.4-4.4c-1.1 1.2-2.2 1.4-3.3 1.4.4-1.2 2.1-3.1 2.1-3.1h-5.5s1.8 2 2.1 3.1c-1.1 0-2.2-.3-3.3-1.4l.4 4.4c1.1-1.5 2.3-2.1 3-2-.1 1.6-.2 3.5-3 3.7-1.9.2-3.5-.8-3.7-2-.2-1.3 1-2.2 1.9-.8.7-2.4-1.3-3.1-2.6-1.7 1-2.3 1-4-1.2-5.6-1.6 2.1-1.3 3.8.6 5.7-1.3-.7-3.2 0-2.1 2.4.6-1.5 1.9-1.1 2.2.1.2.9-.4 1.9-1.5 2.2-1 .2-2.5-.5-3.7-3 .7 0 1.3.4 2 .9L5 20.4c-.3 1.2-.7 1.9-1.2 2.4-.3-.8-.2-1.5 0-2.8l-2.6.9C2.7 22.8 4 25.4 5.1 30c3.8-.5 8.2-.9 12.7-.9m30.5-11.5c0 .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.4V28H59v-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.7zm36.4-4.3c-.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.1.6-2.2 1.4-3 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.6 2.6.8 4.2.8 1.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.4.4-1.3.7-2.7.7-4.2-.1-1.5-.3-2.9-.8-4.2zM81 17.6c0 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.5-.9 0-1.7-.2-2.4-.5s-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.7-.3 1.5-.5 2.4-.5.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.1zM92.9 28 87 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.4L152 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>
+          </svg>
+        <% end %>
         <% if product_name.present? %>
           <%= product_name %>
         <% end %>

app/components/govuk_component/header_component.rb

@@ -3,9 +3,7 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
   renders_one :custom_logo
   renders_one :product_name, "ProductName"
 
-  attr_reader :logotype,
-              :crown,
-              :homepage_url,
+  attr_reader :homepage_url,
               :service_name,
               :service_url,
               :menu_button_label,
@@ -15,8 +13,6 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
 
   def initialize(classes: [],
                  html_attributes: {},
-                 logotype: config.default_header_logotype,
-                 crown: true,
                  homepage_url: config.default_header_homepage_url,
                  menu_button_label: config.default_header_menu_button_label,
                  navigation_classes: [],
@@ -25,8 +21,6 @@ def initialize(classes: [],
                  service_url: config.default_header_service_url,
                  container_classes: nil)
 
-    @logotype                  = logotype
-    @crown                     = crown
     @homepage_url              = homepage_url
     @service_name              = service_name
     @service_url               = service_url

guide/content/components/header.slim

@@ -11,30 +11,27 @@ p
   code: header_normal) do
 
   markdown:
-    When no arguments are provided to the header, it is rendered with only the
-    crown logo and logotype text.
+    Use the default header if your service has 5 pages or fewer.
 
 == render('/partials/example.*',
-  caption: "Header with custom logo and service name",
-  code: header_with_custom_logo_and_service_name) do
+  caption: "Header with service name",
+  code: header_with_service_name) do
 
   markdown:
+    Use the header with a service name if your service is more than 5 pages long - this can help users understand which service they are using.
+
     The service name can be set using the `service_name` keyword argument.
 
-    If a custom logo is needed, it can be set using the `custom_logo` slot.
-    This example uses an emoji but any graphic or text can be used instead.
+    The GOV.UK logo should link to the the GOV.UK homepage, and the service name should link to your service homepage.
 
 == render('/partials/example.*',
-  caption: "Header with custom logotype",
-  code: header_with_custom_logotype_and_homepage_url) do
+  caption: "Header with a product name",
+  code: header_with_custom_product_name)
 
   markdown:
-    If you want to keep the crown logo but change the text, use the `logotype`
-    argument.
+    This is used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use a  service name instead.
 
-== render('/partials/example.*',
-  caption: "Header with custom product name",
-  code: header_with_custom_product_name)
+    Use the `homepage_url` to link to your product homepage.
 
 == render('/partials/example.*',
   caption: "Header with navigation items",
@@ -46,4 +43,12 @@ p
     Navigation items can be added using the `navigation_item` slot. When viewed
     on mobile, they will appear in a dropdown menu.
 
+== render('/partials/example.*',
+  caption: "Header with an alternative logo",
+  code: header_with_custom_logo_and_service_name) do
+
+  markdown:
+    If an alternative logo is needed, it can be set using the `custom_logo` slot.
+    This example uses an SVG graphic paired with text.
+
 == render('/partials/related-info.*', links: header_info)

guide/content/stylesheets/application.scss

@@ -98,3 +98,19 @@ $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colo
     }
   }
 }
+
+// Used as an example of a custom logo
+.app-header__logotype {
+  display: inline-block;
+  position: relative;
+  top: -3px;
+
+  margin-right: 0;
+  fill: tomato;
+  vertical-align: top;
+}
+
+.app-header__logotext {
+  color: tomato;
+  font-weight: bold;
+}

guide/layouts/partials/head.slim

@@ -9,8 +9,6 @@ head
   meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"
   meta name="theme-color" content="#0b0c0c"
 
-  meta http-equiv="X-UA-Compatible" content="IE=edge"
-
   link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/favicon.ico" type="image/x-icon"
   link rel="mask-icon" href="/assets/mask-icon.svg" color="#0b0c0c"
   link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"

guide/lib/examples/header_helpers.rb

@@ -2,34 +2,36 @@ module Examples
   module HeaderHelpers
     def header_normal
       <<~HEADER
-        = govuk_header
+        = govuk_header(homepage_url: "https://www.gov.uk")
       HEADER
     end
 
-    def header_with_custom_logo_and_service_name
+    def header_with_service_name
       <<~HEADER
-        = govuk_header(service_name: "Apply for a juggling licence") do |header|
-          - header.with_custom_logo
-            | 🤹 GOV.UK
+        = govuk_header(homepage_url: "https://www.gov.uk", service_name: "Apply for a juggling licence", service_url: "#")
       HEADER
     end
 
-    def header_with_custom_logotype_and_homepage_url
+    def header_with_custom_logo_and_service_name
       <<~HEADER
-        = govuk_header(logotype: "Custom", homepage_url: "#")
+        = govuk_header(homepage_url: "#", service_name: "Apply for a juggling licence", service_url: "#") do |header|
+          - header.with_custom_logo
+            svg focusable="false" role="img" class="app-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 30" height="30" width="40"
+              path d="M18,4 L36,30 0,30 18,4"
+            span.app-header__logotext MyOrg
       HEADER
     end
 
     def header_with_custom_product_name
       <<~HEADER
-        = govuk_header do |header|
+        = govuk_header(homepage_url: "#") do |header|
           - header.with_product_name(name: "Product")
       HEADER
     end
 
     def header_with_navigation_items
       <<~HEADER
-        = govuk_header(service_name: "Apply for a juggling licence") do |header|
+        = govuk_header(homepage_url: "https://www.gov.uk", service_name: "Apply for a juggling licence", service_url: "#") do |header|
           - header.with_navigation_item(text: "Amateur juggling", href: "#", active: false)
           - header.with_navigation_item(text: "Professional juggling", href: "#", active: false)
           - header.with_navigation_item(text: "Dangerous juggling", href: "#", active: false)

guide/package.json

@@ -13,7 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "govuk-frontend": "5.0.0-beta.1",
+    "govuk-frontend": "5.0.0-beta.2",
     "sass": "^1.52.1"
   }
 }

lib/govuk/components/engine.rb

@@ -47,7 +47,6 @@ def reset!
     # +:default_exit_this_page_press_one_more_time_text+ Text announced by screen readers when the user must press *Shift* one more time to activate the button. Default in govuk-frontend is 'Shift, press 1 more time to exit.' Defaults to nil so govuk-frontend value is used unless overridden.
     # +:default_header_navigation_label+ 'Navigation menu'
     # +:default_header_menu_button_label+ 'Show or hide navigation menu'
-    # +:default_header_logotype+ 'GOV.UK'
     # +:default_header_homepage_url+ '/'
     # +:default_header_service_name+ nil
     # +:default_header_service_url+ '/'
@@ -89,7 +88,6 @@ def reset!
       default_exit_this_page_press_one_more_time_text: nil,
       default_header_navigation_label: 'Menu',
       default_header_menu_button_label: 'Show or hide menu',
-      default_header_logotype: 'GOV.UK',
       default_header_homepage_url: '/',
       default_header_service_name: nil,
       default_header_service_url: '/',

spec/components/govuk_component/configuration/header_component_configuration_spec.rb

@@ -48,24 +48,6 @@
       end
     end
 
-    describe 'default_header_logotype' do
-      let(:overridden_logotype) { 'DfE' }
-
-      before do
-        Govuk::Components.configure do |config|
-          config.default_header_logotype = overridden_logotype
-        end
-      end
-
-      subject! { component_with_a_nav_item }
-
-      specify "renders header with overridden logotype" do
-        expect(rendered_content).to have_tag("span", with: { class: "govuk-header__logotype" }) do
-          with_tag("span", text: overridden_logotype, with: { class: "govuk-header__logotype-text" })
-        end
-      end
-    end
-
     describe 'default_header_homepage_url' do
       let(:overriddden_homepage_url) { "/some-page" }
 

spec/components/govuk_component/header_component_spec.rb

@@ -19,7 +19,6 @@
 
   let(:all_kwargs) do
     {
-      logotype: logotype,
       homepage_url: homepage_url,
       service_name: service_name,
       service_url: service_url
@@ -35,35 +34,12 @@
 
     specify 'outputs a header with correct logo text and no content' do
       expect(rendered_content).to have_tag('header', with: { class: component_css_class }) do
-        with_tag('span', with: { class: 'govuk-header__logotype-text' }, text: default_header_text)
+        with_tag('svg', with: { class: 'govuk-header__logotype' })
         without_tag('.govuk-header__content')
       end
     end
   end
 
-  describe 'the crown' do
-    context 'when the crown is not disabled' do
-      specify 'the crown SVG is rendered along with no fallback image' do
-        expect(rendered_content).to have_tag('.govuk-header__logotype') do
-          with_tag('svg', with: { class: 'govuk-header__logotype-crown', 'aria-hidden' => true })
-          expect(html).to contain_svgs_with_viewBox_attributes
-        end
-      end
-    end
-
-    context 'when the crown is disabled' do
-      let(:kwargs) { { crown: false } }
-
-      specify "doesn't render the crown" do
-        expect(rendered_content).not_to have_tag("svg")
-      end
-
-      specify "renders the default logotype" do
-        expect(rendered_content).to have_tag("span", text: /GOV.UK/)
-      end
-    end
-  end
-
   context 'customising the container classes' do
     let(:custom_classes) { %w(purple-zig-zags) }
     let(:kwargs) { { container_classes: custom_classes } }
@@ -78,7 +54,7 @@
 
     specify 'renders header with right logotype and provided service name' do
       expect(rendered_content).to have_tag('header', with: { class: component_css_class }) do
-        with_tag('span', with: { class: 'govuk-header__logotype-text' }, text: logotype)
+        with_tag('svg', with: { class: 'govuk-header__logotype' })
 
         with_tag('div', class: 'govuk-header__content') do
           with_tag('a', text: service_name, with: { href: service_url, class: expected_service_name_classes })