govuk_publishing_components 24.18.4 → 24.21.0

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -99,3 +99,12 @@
     font-weight: inherit;
   }
 }
+
+.gem-c-govspeak--inverse {
+  color: govuk-colour('white');
+
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-inverse;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss

@@ -0,0 +1,3 @@
+.gem-c-super-navigation-header a:after {
+  content: " ( " attr(href) " ) ";
+}

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -105,5 +105,5 @@
 </ul>
 
 <div class="component-markdown">
-  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/develop-component.md">creating a new one</a>.</p>
+  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/generate-a-new-component.md">creating a new one</a>.</p>
 </div>

data/app/views/govuk_publishing_components/components/_details.html.erb

@@ -6,15 +6,18 @@
   css_classes = %w(gem-c-details govuk-details)
   css_classes << (shared_helper.get_margin_bottom)
 
+  details_data_attributes = {}
+  details_data_attributes[:module] = 'govuk-details gem-details'
+
   data_attributes ||= {}
-  data_attributes[:module] = 'govuk-details gem-details'
+  data_attributes[:details_track_click] = ''
 %>
-<%= tag.details class: css_classes, data: data_attributes, open: open do %>
-  <summary class="govuk-details__summary" data-details-track-click>
+<%= tag.details class: css_classes, data: details_data_attributes, open: open do %>
+  <%= tag.summary class: "govuk-details__summary", data: data_attributes do %>
     <span class="govuk-details__summary-text">
       <%= title %>
     </span>
-  </summary>
+  <% end %>
   <div class="govuk-details__text">
     <%= yield %>
   </div>

data/app/views/govuk_publishing_components/components/_document_list.html.erb

@@ -41,7 +41,7 @@
               item[:link][:text],
               item[:link][:path],
               data: item[:link][:data_attributes],
-              class: "#{item_classes} gem-c-document-list__item-link",
+              class: "#{item_classes} govuk-link",
               lang: item[:link][:locale].presence,
               rel: rel,
             )
@@ -65,7 +65,7 @@
 
         <% if item[:metadata] %>
           <ul class="gem-c-document-list__item-metadata">
-            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %> 
+            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %>
               <% if !item_metadata_key.to_s.eql?("locale") %>
                 <% lang = item[:metadata][:locale].present? && item[:metadata][:locale][item_metadata_key].present? ? item[:metadata][:locale][item_metadata_key] : nil %>
 
@@ -101,7 +101,7 @@
                       part[:link][:text],
                       part[:link][:path],
                       data: part[:link][:data_attributes],
-                      class: "gem-c-document-list-child__heading #{brand_helper.color_class} gem-c-document-list-child__link",
+                      class: "gem-c-document-list-child__heading #{brand_helper.color_class} govuk-link gem-c-document-list-child__link",
                     )
                   else
                     content_tag(

data/app/views/govuk_publishing_components/components/_govspeak.html.erb

@@ -1,10 +1,12 @@
 <%
+  inverse ||= false
   direction_class = "direction-#{direction}" if local_assigns.include?(:direction)
   disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
 
   classes = []
   classes << direction_class if direction_class
   classes << "disable-youtube" if disable_youtube_expansions
+  classes << "gem-c-govspeak--inverse" if inverse
 %>
 
 <div class="gem-c-govspeak govuk-govspeak <%= classes.join(" ") %>" data-module="govspeak">

data/app/views/govuk_publishing_components/components/_intervention.html.erb

@@ -0,0 +1,15 @@
+<%= tag.section class: "gem-c-intervention", role: "region" do %>
+  <h2 class="gem-c-intervention__title">
+    <a class="govuk-link" href="/next-steps-for-your-business">
+      <%= t("components.intervention.title") %>
+    </a>
+  </h2>
+
+  <p class="gem-c-intervention__paragraph">
+    <%= t("components.intervention.description") %>
+  </p>
+
+  <p class="gem-c-intervention__paragraph">
+    <%= t("components.intervention.dismiss_html") %>
+  </p>
+<% end %>

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -1,14 +1,16 @@
 <%
-  omit_feedback_form ||= false
   emergency_banner ||= nil
   full_width ||= false
   global_bar ||= nil
-  product_name ||= nil
   html_lang ||= "en"
   layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
   logo_link ||= "/"
   navigation_items ||= []
+  omit_feedback_form ||= false
+  omit_footer_navigation ||= false
   omit_header ||= false
+  product_name ||= nil
+  show_explore_header ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
   title ||= "GOV.UK - The best place to find government services and information"
 
@@ -75,16 +77,20 @@
     <%= render "govuk_publishing_components/components/cookie_banner" %>
 
     <% unless omit_header %>
-      <%= render "govuk_publishing_components/components/layout_header", {
-        search: show_search,
-        logo_link: logo_link,
-        navigation_items: navigation_items,
-        product_name: product_name,
-
-        # The (blue) bottom border needs to be underneath the emergency banner -
-        # so it has been turned off and added in manually.
-        remove_bottom_border: true,
-      } %>
+      <% if show_explore_header %>
+        <%= render "govuk_publishing_components/components/layout_super_navigation_header" %>
+      <% else %>
+        <%= render "govuk_publishing_components/components/layout_header", {
+          search: show_search,
+          logo_link: logo_link,
+          navigation_items: navigation_items,
+          product_name: product_name,
+
+          # The (blue) bottom border needs to be underneath the emergency banner -
+          # so it has been turned off and added in manually.
+          remove_bottom_border: true,
+        } %>
+      <% end %>
     <% end %>
 
     <%= raw(emergency_banner) %>
@@ -117,7 +123,7 @@
     <% unless local_assigns[:hide_footer_links] %>
       <%= render "govuk_publishing_components/components/layout_footer", {
         with_border: true,
-        navigation: layout_helper.footer_navigation,
+        navigation: omit_footer_navigation ? nil : layout_helper.footer_navigation,
         meta: layout_helper.footer_meta,
       } %>
     <% end %>

data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -0,0 +1,121 @@
+<%
+logo_link = "https://www.gov.uk/"
+logo_link_title = t("components.layout_super_navigation_header.logo_link_title")
+logo_text = t("components.layout_super_navigation_header.logo_text")
+navigation_links = t("components.layout_super_navigation_header.navigation_links")
+navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
+popular_links = t("components.layout_super_navigation_header.popular_links")
+popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
+search_text= t("components.layout_super_navigation_header.search_text")
+%>
+<header role="banner" class="gem-c-layout-super-navigation-header">
+  <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
+    <div class="gem-c-layout-super-navigation-header__header-logo">
+      <a class="govuk-header__link govuk-header__link--homepage"
+        data-module="gem-track-click"
+        data-track-action="homeHeader"
+        data-track-category="homeLinkClicked"
+        href="<%= logo_link %>"
+        id="logo"
+        title="<%= logo_link_title %>">
+        <span class="govuk-header__logotype">
+          <svg aria-hidden="true"
+            class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
+            focusable="false"
+            height="30"
+            viewBox="0 0 132 97"
+            xmlns="http://www.w3.org/2000/svg"
+            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>
+            <image class="govuk-header__logotype-crown-fallback-image"
+              height="30"
+              src="<%= asset_path('govuk-logotype-crown.png') %>"
+              width="36"
+              xlink:href="">
+            </image>
+          </svg>
+          <span class="govuk-header__logotype-text">
+            <%= logo_text %>
+          </span>
+        </span>
+      </a>
+    </div>
+    <nav
+      aria-labelledby="super-navigation-menu-heading"
+      class="gem-c-layout-super-navigation-header__content"
+      data-module="super-navigation-toggle"
+      data-text-for-button="Menu"
+      data-text-for-show-menu="Show navigation menu"
+      data-text-for-hide-menu="Hide navigation menu"
+    >
+      <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden"><%= navigation_menu_heading %></h2>
+      <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__items">
+        <% navigation_links.each do | link | %>
+          <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item">
+            <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link" href="<%= link[:href] %>">
+              <%= link[:label] %>
+            </a>
+            <% if link[:menu_contents].present? or link[:footer_links].present? %>
+              <div class="gem-c-layout-super-navigation-header__dropdown-menu">
+                <% if link[:menu_contents].present? %>
+                  <ul class="govuk-list">
+                    <% link[:menu_contents].each do | item | %>
+                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
+                          <%= item[:label] %>
+                        </a>
+                        <%= tag.p item[:description], class: "govuk-body-s gem-c-layout-super-navigation-header__dropdown-list-item-description" if item[:description].present? %>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+                <% if link[:footer_links].present? %>
+                  <ul class="govuk-list">
+                    <% link[:footer_links].each do | item | %>
+                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
+                          <%= item[:label] %>
+                        </a>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+              </div>
+            <% end %>
+          </li>
+        <% end %>
+        <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item gem-c-layout-super-navigation-header__item--search">
+          <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link gem-c-layout-super-navigation-header__item-link--search" href="/search">
+            <span class="gem-c-layout-super-navigation-header__item-link-text--search"><%= search_text %></span>
+            <svg class="gem-c-layout-super-navigation-header__item-link-icon--search" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+              <circle cx="10.0161" cy="10.0161" r="8.51613" stroke="currentColor" stroke-width="3" />
+              <line x1="15.8668" y1="16.3587" x2="25.4475" y2="25.9393" stroke="currentColor" stroke-width="3" />
+            </svg>
+          </a>
+          <div class="gem-c-layout-super-navigation-header__dropdown-menu">
+            <form id="search" action="/search" method="get" role="search" aria-label="Site-wide">
+              <%= render "govuk_publishing_components/components/search", {
+                inline_label: false,
+                label_text: raw("<h2 class=\"govuk-heading-m\">#{search_text}</h2>"),
+                size: "large",
+              } %>
+            </form>
+            <h2 class="govuk-heading-m"><%= popular_links_heading %></h2>
+            <ul class="govuk-list">
+              <% popular_links.each do | popular_link | %>
+                <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                  <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= popular_link[:href] %>">
+                    <%= popular_link[:label] %>
+                  </a>
+                </li>
+              <% end %>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>

data/app/views/govuk_publishing_components/components/docs/details.yml

@@ -22,7 +22,7 @@ examples:
       block: |
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
   with_data_attributes:
-    description: Can be used for tracking. By default, `track-label` is set to the status ("open" or "closed") unless a track_label is passed into the component.
+    description: Can be used for tracking. Tracking is applied to the summary element when the details element is opened and closed. By default, `track-label` is set to the status ("open" or "closed") unless a track_label is passed into the component.
     data:
       title: Help with nationality
       data_attributes:

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -25,6 +25,15 @@ examples:
       block: |
         <h2>This is a title</h2>
           <p>This is some body text with <a href="https://example.com">a link</a>.</p>
+  inverted:
+    description: This option currently supports basic inversion of only headings, paragraphs and links.
+    data:
+      inverse: true
+      block: |
+        <h2>This is a title</h2>
+        <p>This is some body text with <a href="https://example.com">a link</a>.</p>
+    context:
+      dark_background: true
   heading_levels:
     data:
       block: |

data/app/views/govuk_publishing_components/components/docs/intervention.yml

@@ -0,0 +1,24 @@
+name: Intervention
+description: An area that contains personalised content to the user
+body: |
+  The intervention is used to show personalised content. For instance, if the user has visited multiple
+  pages in the same area of the site, we might want let them know that there are other pages on GOV.UK
+  that would be useful to them. This component would be used to add this personalised content and would
+  indicate to the user that this is not normally part of the page, but has been added for them specifically.
+
+  Right now the contents of the component are static, as the MVP of personalised content is only for Start a Business.
+  Since many pages will use this component with the same text, we hard-code it here for now.
+
+  The dismiss link will reload the page but the `hide-intervention` query string parameter will cause the
+  backed not to show the intervention again. Some progressive enhancement will be added in later to avoid
+  reloading the page if JavaScript is available.
+accessibility_criteria: |
+  The intervention component must:
+
+  - have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct
+
+  - always render headings with associated description content, so there are no isolated heading elements inside the component
+shared_accessibility_criteria:
+  - link
+examples:
+  default:

data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml

@@ -31,6 +31,10 @@ examples:
     description: This allows the feedback form to be omitted
     data:
       omit_feedback_form: true
+  omit_footer_navigation:
+    description: This allows the footer navigation to be omitted
+    data:
+      omit_footer_navigation: true
   navigation:
     description: Passes the navigation through to the [header component](/component-guide/layout_header/).
     data:

data/app/views/govuk_publishing_components/components/docs/layout_header.yml

@@ -105,7 +105,10 @@ examples:
   with_search_bar:
     data:
       search: true
-
+  with_custom_logo_link:
+    description: The header logo links to root by default. This option allows us to override that in certain instances.
+    data:
+      logo_link: "/account/home"
 accessibility_criteria: |
   The component must:
 

data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml

@@ -0,0 +1,22 @@
+name: Layout super navigation header
+description: The super navigation header provides a consistent header across GOV.UK.
+body: |
+shared_accessibility_criteria:
+  - link
+accessibility_criteria: |
+  The component must:
+
+  * have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+
+  Images in the super navigation header must:
+
+  * be presentational when linked to from accompanying text (crown icon).
+
+  Landmarks and Roles in the super navigation header should:
+
+  * have a role of banner at the root of the component (<header>) (ARIA 1.1)
+accessibility_excluded_rules:
+  - landmark-banner-is-top-level # The header element can not be top level in the examples
+  - landmark-no-duplicate-banner # banners will be duplicated in component examples list
+examples:
+  default:

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -1,11 +1,10 @@
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
     <span class="govuk-header__logotype gem-c-header__logotype">
-      <svg aria-hidden="true" focusable="false" class="gem-c-header__logotype-crown govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" 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 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>
         <%# Deliberate use of image tag as a fallback method https://lynn.ru/examples/svg/en.html %>
-        <image src="<%= asset_path('govuk-logotype-crown.png') %>" xlink:href="" display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
+        <image src="<%= asset_path('govuk-logotype-crown.png') %>" xlink:href="" display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="30"></image>
       </svg>
       <span class="govuk-header__logotype-text">
         GOV.UK

data/config/initializers/assets.rb

@@ -5,7 +5,6 @@ Rails.application.config.assets.precompile += %w[
   component_guide/accessibility-test.js
   component_guide/application.js
   component_guide/filter-components.js
-  component_guide/visual-regression.js
   component_guide/print.css
   govuk_publishing_components/rum-loader.js
   govuk_publishing_components/vendor/lux/lux-reporter.js

data/config/locales/ar.yml

@@ -79,6 +79,14 @@ ar:
       search_button:
       show_button:
       top_level:
+    layout_super_navigation_header:
+      logo_link_title:
+      logo_text:
+      navigation_menu_heading:
+      search_text:
+      popular_links_heading:
+      popular_links:
+      navigation_links:
     metadata:
       from:
       history:

data/config/locales/az.yml

@@ -79,6 +79,14 @@ az:
       search_button:
       show_button:
       top_level:
+    layout_super_navigation_header:
+      logo_link_title:
+      logo_text:
+      navigation_menu_heading:
+      search_text:
+      popular_links_heading:
+      popular_links:
+      navigation_links:
     metadata:
       from:
       history: