govuk_publishing_components 35.17.0 → 35.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2ae98a5a0bfe9237ad8666586cf56d55c5f737e03cac016826b577ad6b280e0
-  data.tar.gz: 66a94a3ef052fff63ba972df2ad0b39bf48220a42308c1d5bb06ba5343dbf621
+  metadata.gz: 5ce473a1a45f47ae5cf925f4de375968f8ad75223ef70a38d442be0160a66172
+  data.tar.gz: 71574933e54084b2ecff4bce0fe09eda6e34003f55fcb7d470300580e35eb54f
 SHA512:
-  metadata.gz: 0e20d31b9ece60b5bda9387d1b87396dd4089fe10c6c808db6b11201988f7d07e2f23befc0d77a37f7842eda137edf9a200e963766b6971bcea707bfa9300e22
-  data.tar.gz: a4e27aeecf3c73c9a105fbe4e307aedc6acd1e489349c917b8341b51f42b5b7bd2d6cab2e6b6ae3f864fdf5da69fa4db68ed1023db15cf73c0910521ff3e2f9a
+  metadata.gz: d663be268de23349809eeec83badafb7c24298221b29168df805b332bd757f4fa70d4addc4cbb197f07af00e1ed5bd501060a5c00f918a6f77ddacd7273149f0
+  data.tar.gz: 2b7437b0e9e25cd57b04ffe2e014ce182649fabeb5eaf10d73110f782eb255c7420bd7814273f361e4373687aff2a82fe1049ea3f7d688b05f4b9009dff46673

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

@@ -8,6 +8,10 @@ $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
 $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
+$large-navbar-height: 86px;
+
+$pale-blue-colour: #d2e2f1;
+
 $after-link-padding: govuk-spacing(4);
 $after-button-padding-right: govuk-spacing(4);
 $after-button-padding-left: govuk-spacing(4);
@@ -89,6 +93,11 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header--blue-background {
+  background: $govuk-brand-colour;
+  border-top: 1px solid $govuk-brand-colour;
+}
+
 .gem-c-layout-super-navigation-header__container {
   position: relative;
 }
@@ -128,7 +137,6 @@ $after-button-padding-left: govuk-spacing(4);
 
 .gem-c-layout-super-navigation-header__navigation-item,
 .gem-c-layout-super-navigation-header__search-item {
-  background: govuk-colour("black");
   display: block;
   float: left;
   margin: 0;
@@ -205,6 +213,17 @@ $after-button-padding-left: govuk-spacing(4);
       }
     }
 
+    &.gem-c-layout-super-navigation-header__navigation-item-link--blue-background,
+    &.gem-c-layout-super-navigation-header__search-item-link--blue-background {
+      &:hover {
+        color: govuk-colour("white");
+
+        &::after {
+          background: govuk-colour("white");
+        }
+      }
+    }
+
     @include focus-and-focus-visible {
       .gem-c-layout-super-navigation-header__navigation-item-link-inner {
         border-color: $govuk-focus-colour;
@@ -267,6 +286,17 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+// to stop the black underline appearing underneath the menu
+// after it has been toggled closed if the blue background has
+// been enabled
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background {
+  &:focus:not(:focus-visible) {
+    &::after {
+      background: none;
+    }
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-item-link {
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(3) 0;
@@ -279,11 +309,15 @@ $after-button-padding-left: govuk-spacing(4);
 }
 
 .gem-c-layout-super-navigation-header__navigation-item-link-inner {
-  background-color: govuk-colour("black");
   border-left: 1px solid $button-pipe-colour;
   padding: govuk-spacing(1) $after-link-padding;
 }
 
+.gem-c-layout-super-navigation-header__navigation-item-link-inner--blue-background {
+  border-left: 0;
+  border-right: 1px solid $pale-blue-colour;
+}
+
 // Search link and dropdown.
 .gem-c-layout-super-navigation-header__search-item-link {
   padding: govuk-spacing(3);
@@ -297,8 +331,6 @@ $after-button-padding-left: govuk-spacing(4);
     background: $govuk-brand-colour;
 
     &:hover {
-      background: govuk-colour("black");
-
       &::before {
         left: 0;
         right: 0;
@@ -321,10 +353,6 @@ $after-button-padding-left: govuk-spacing(4);
 
     @include focus-not-focus-visible {
       background: $govuk-link-colour;
-
-      &:hover {
-        background: govuk-colour("black");
-      }
     }
 
     @include focus-and-focus-visible {
@@ -347,6 +375,10 @@ $after-button-padding-left: govuk-spacing(4);
   width: 21px;
 }
 
+.gem-c-layout-super-navigation-header__open-button .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
+  display: none;
+}
+
 // Search and popular content dropdown.
 .gem-c-layout-super-navigation-header__search-and-popular {
   display: none;
@@ -472,15 +504,23 @@ $after-button-padding-left: govuk-spacing(4);
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
       border-color: $button-pipe-colour;
 
+      &.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--blue-background {
+        border-color: $pale-blue-colour;
+      }
+
       @include govuk-media-query($from: 360px) {
         &::before {
           @include chevron(govuk-colour("white"), true);
         }
       }
     }
+
     // stylelint-enable max-nesting-depth
   }
+}
 
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background,
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button {
   // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
     // stylelint-disable max-nesting-depth
@@ -528,6 +568,24 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background {
+  @include focus-not-focus-visible {
+    &:hover {
+      &::after {
+        background: govuk-colour("white");
+      }
+
+      .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+        color: govuk-colour("white");
+
+        &::before {
+          border-color: govuk-colour("white");
+        }
+      }
+    }
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
   display: inline-block;
   border-left: 1px solid govuk-colour("white");
@@ -542,6 +600,10 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--no-left-border {
+  border-left: 0;
+}
+
 // Styles for search toggle button.
 .gem-c-layout-super-navigation-header__search-toggle-button {
   @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
@@ -580,11 +642,32 @@ $after-button-padding-left: govuk-spacing(4);
     }
 
     &:hover {
-      background: govuk-colour("black");
       border-bottom: $pseudo-underline-height solid govuk-colour("mid-grey");
       color: govuk-colour("mid-grey");
     }
 
+    &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+      &:hover {
+        border-bottom: $pseudo-underline-height solid govuk-colour("white");
+        color: govuk-colour("white");
+      }
+
+      // stylelint-disable max-nesting-depth
+      @include focus-not-focus-visible {
+        border-bottom: none;
+      }
+      // stylelint-enable max-nesting-depth
+    }
+
+    &:focus-visible {
+      &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+        &:hover {
+          border-bottom: $pseudo-underline-height solid $govuk-focus-colour;
+          color: govuk-colour("black");
+        }
+      }
+    }
+
     @include focus-and-focus-visible {
       @include govuk-focused-text;
       border-bottom-color: $govuk-focus-colour;
@@ -594,6 +677,13 @@ $after-button-padding-left: govuk-spacing(4);
 
   // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
+    &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+      &:hover {
+        border-bottom: $pseudo-underline-height solid govuk-colour("white");
+        color: govuk-colour("white");
+      }
+    }
+
     @include focus-and-focus-visible {
       @include govuk-focused-text;
       border-color: $govuk-focus-colour;
@@ -625,9 +715,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-weight: normal;
   left: 0;
   line-height: 22px;
-  padding: govuk-spacing(3) 0;
   pointer-events: none;
-  position: absolute;
   right: 0;
   text-align: center;
   top: 0;
@@ -788,3 +876,51 @@ $after-button-padding-left: govuk-spacing(4);
     display: none;
   }
 }
+
+@include govuk-media-query($from: desktop) {
+  // can't use govuk-spacing here because the navbar height
+  // isn't a multiple of 5 :(
+  .gem-c-layout-super-navigation-header__navigation-item-link--large-navbar,
+  .gem-c-layout-super-navigation-header__search-item-link--large-navbar {
+    padding-top: 33px;
+    padding-bottom: 33px;
+  }
+
+  .gem-c-layout-super-navigation-header__logotype-crown--large-navbar {
+    height: 36px;
+    width: 49px;
+  }
+
+  .gem-c-header__link--large-navbar:focus {
+    box-shadow: 0 -4px 0 18px $govuk-focus-colour;
+    border-bottom: $govuk-focus-width solid govuk-colour("black");
+    padding-bottom: 10px;
+  }
+
+  .gem-c-header__link--large-navbar:hover {
+    padding-bottom: 10px;
+  }
+
+  .gem-c-layout-super-navigation-header__header-logo--large-navbar {
+    height: 35px;
+    padding-bottom: govuk-spacing(5);
+    padding-top: govuk-spacing(5);
+  }
+
+  .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
+    height: $large-navbar-height;
+  }
+
+  // to stop the search icon moving on hover
+  .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar:hover {
+    padding-bottom: 12px;
+  }
+
+  .gem-c-layout-super-navigation-header__button-container--large-navbar {
+    top: -$large-navbar-height;
+  }
+
+  .gem-c-layout-super-navigation-header__navigation-top-toggle-button--large-navbar {
+    height: $large-navbar-height;
+  }
+}

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -72,10 +72,10 @@ module GovukPublishingComponents
       end
 
       @data = {
-        name: name,
-        dir: dir,
-        application_found: application_found,
-        components_found: components_found,
+        name:,
+        dir:,
+        application_found:,
+        components_found:,
         gem_style_references: @gem_style_references.flatten.uniq.sort,
         jquery_references: @jquery_references.flatten.uniq.sort,
         component_locations: @component_locations,

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -95,8 +95,8 @@ module GovukPublishingComponents
             dir: result[:dir],
             application_found: result[:application_found],
             uses_static: application_uses_static,
-            summary: summary,
-            warnings: warnings,
+            summary:,
+            warnings:,
             warning_count: warnings.length,
             gem_style_references: result[:gem_style_references],
             jquery_references: result[:jquery_references],
@@ -126,8 +126,8 @@ module GovukPublishingComponents
 
     def create_warning(component, message)
       {
-        component: component,
-        message: message,
+        component:,
+        message:,
       }
     end
 
@@ -280,7 +280,7 @@ module GovukPublishingComponents
         results << {
           name: component_name,
           count: locations.length,
-          locations: locations,
+          locations:,
         }
       end
 

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

@@ -15,7 +15,6 @@
   ga4_tracking ||= false
   ga4_data = {
     event_name: "navigation",
-    type: "contents list",
     section: t("components.contents_list.contents", locale: :en) || "",
     index_total: cl_helper.get_index_total
   } if ga4_tracking
@@ -46,6 +45,7 @@
               ga4_data[:index] = {
                 "index_link": index_link,
               }
+              ga4_data[:type] = cl_helper.get_ga4_type(contents_item[:href]) if contents_item[:href]
             end
           %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
@@ -70,6 +70,7 @@
                       ga4_data[:index] = {
                         "index_link": index_link,
                       }
+                      ga4_data[:type] = cl_helper.get_ga4_type(nested_contents_item[:href]) if nested_contents_item[:href]
                     end
                   %>
                   <%= link_to_if !nested_contents_item[:active], nested_contents_item[:text], nested_contents_item[:href],

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

@@ -6,6 +6,7 @@
   blue_bar ||= local_assigns.include?(:blue_bar) ? local_assigns[:blue_bar] : !full_width
   global_bar ||= nil
   html_lang ||= "en"
+  homepage ||= false
   layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
   blue_bar_background_colour = layout_helper.blue_bar_background_colours.include?(blue_bar_background_colour) ? blue_bar_background_colour : nil
   logo_link ||= "/"
@@ -103,9 +104,15 @@
 
     <% unless omit_header %>
       <% if show_explore_header %>
-        <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
-          logo_link: logo_link,
-        } %>
+        <% if homepage %>
+          <%= render "govuk_publishing_components/components/layout_for_public/layout_super_navigation_header_homepage", {
+            logo_link: logo_link,
+          } %>
+        <% else %>
+          <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
+            logo_link: logo_link,
+          } %>
+        <% end %>
       <% else %>
         <%= render "govuk_publishing_components/components/layout_header", {
           search: show_search,
@@ -122,7 +129,7 @@
 
     <%= raw(emergency_banner) %>
 
-    <% if (blue_bar && !global_bar.present?) || (blue_bar_dedupe) %>
+    <% if (blue_bar && !global_bar.present? && !homepage) || (blue_bar_dedupe) %>
       <%= content_tag(:div, class: blue_bar_wrapper_classes) do %>
         <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
       <% end %>

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

@@ -5,6 +5,12 @@
   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")
+
+  hide_logo_text ||= false
+  hide_button_left_border ||= false
+  blue_background ||= false
+  large_navbar ||= false
+
   navigation_links_columns = t("components.layout_super_navigation_header.navigation_links_columns")
   navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
   navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
@@ -17,63 +23,124 @@
   show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
   hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
   show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
+
+  top_toggle_button_classes = %w(gem-c-layout-super-navigation-header__navigation-top-toggle-button
+  )
+  top_toggle_button_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background" if blue_background
+  top_toggle_button_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button--large-navbar" if large_navbar
+
+  top_toggle_button_inner_classes = %w(gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner)
+  top_toggle_button_inner_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--no-left-border" if hide_button_left_border
+  top_toggle_button_inner_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--blue-background" if blue_background
+
+  search_toggle_button_classes = %w(gem-c-layout-super-navigation-header__search-toggle-button)
+  search_toggle_button_classes << "gem-c-layout-super-navigation-header__search-toggle-button--blue-background" if blue_background
+  search_toggle_button_classes << "gem-c-layout-super-navigation-header__search-toggle-button--large-navbar" if large_navbar
+
+  layout_super_navigation_header_classes = %w(gem-c-layout-super-navigation-header)
+  layout_super_navigation_header_classes << "gem-c-layout-super-navigation-header--blue-background" if blue_background
+
+  item_link_classes = %w(gem-c-layout-super-navigation-header__navigation-item-link)
+  item_link_classes << "gem-c-layout-super-navigation-header__navigation-item-link--blue-background" if blue_background
+  item_link_classes << "gem-c-layout-super-navigation-header__navigation-item-link--large-navbar" if large_navbar
+
+  item_link_inner_classes = %w(
+    gem-c-layout-super-navigation-header__navigation-item-link-inner
+  )
+  item_link_inner_classes << "gem-c-layout-super-navigation-header__navigation-item-link-inner--blue-background" if blue_background
+
+  search_item_link_classes = %w(gem-c-layout-super-navigation-header__search-item-link)
+  search_item_link_classes << "gem-c-layout-super-navigation-header__search-item-link--blue-background" if blue_background
+  search_item_link_classes << "gem-c-layout-super-navigation-header__search-item-link--large-navbar" if large_navbar
+
+  header_logo_classes = %w(gem-c-layout-super-navigation-header__header-logo)
+  header_logo_classes << "gem-c-layout-super-navigation-header__header-logo--large-navbar" if large_navbar
+
+  logotype_classes = %w(govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown)
+  logotype_classes << "gem-c-layout-super-navigation-header__logotype-crown--large-navbar" if large_navbar
+
+  header_link_classes = %w(govuk-header__link govuk-header__link--homepage)
+  header_link_classes << "gem-c-header__link--large-navbar" if large_navbar
+
+  button_container_classes = %w(gem-c-layout-super-navigation-header__button-container)
+  button_container_classes << "gem-c-layout-super-navigation-header__button-container--large-navbar" if large_navbar
+
+
 %>
-<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click ga4-event-tracker ga4-link-tracker" data-track-links-only data-ga4-expandable>
+<%= content_tag("header",
+  {
+    role: "banner",
+    class: layout_super_navigation_header_classes,
+    data: {
+      module: "gem-track-click ga4-event-tracker ga4-link-tracker",
+      "track-links-only": '',
+      "ga4-expandable": '',
+    }
+}) do %>
   <div class="gem-c-layout-super-navigation-header__container govuk-clearfix">
     <div class="govuk-width-container">
-      <div class="gem-c-layout-super-navigation-header__header-logo">
-        <a
-          class="govuk-header__link govuk-header__link--homepage"
-          data-track-action="logoLink"
-          data-track-category="headerClicked"
-          data-track-label="<%= logo_link %>"
-          data-track-dimension="<%= logo_text %>"
-          data-track-dimension-index="29"
-          href="<%= logo_link %>"
-          id="logo"
-          title="<%= logo_link_title %>"
-          data-ga4-link="<%= {
-            "event_name": "navigation",
-            "type": "header menu bar",
-            "external": "false",
-            "text": "GOV.UK",
-            "section": "Logo",
-            "index": {
-              "index_link": 1,
-              "index_section": 0,
-              "index_section_count": 2,
-            },
-            "index_total": 1
-          }.to_json %>"
-        >
+      <%= content_tag(:div, {
+        class: header_logo_classes
+      }) do %>
+        <%= link_to logo_link, {
+          class: header_link_classes,
+          data: {
+            "track-action": "logoLink",
+            "track-category": "headerClicked",
+            "track-label": logo_link,
+            "track-dimension": logo_text,
+            "track-dimension-index": "29",
+            "ga4-link": {
+              "event_name": "navigation",
+              "type": "header menu bar",
+              "external": "false",
+              "text": "GOV.UK",
+              "section": "Logo",
+              "index": {
+                "index_link": 1,
+                "index_section": 0,
+                "index_section_count": 2,
+              },
+              "index_total": 1
+            }.to_json
+          },
+          id: "logo",
+          aria: {
+            label: logo_link_title,
+          }
+        } do %>
           <span class="govuk-header__logotype">
             <!--[if gt IE 8]><!-->
-            <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"
-              width="36"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <%= content_tag(:svg, {
+              aria: {
+                hidden: true,
+              },
+              class: logotype_classes,
+              height: "30",
+              width: "36",    
+              focusable: "false",
+              viewBox: "0 0 132 97",
+              xmlns: "http://www.w3.org/2000/svg",
+            }) do %>
               <path
                 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"
                 fill="currentColor"
                 fill-rule="evenodd"
               >
               </path>
-            </svg>
+            <% end %>
             <!--<![endif]-->
             <!--[if IE 8]>
             <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
             <![endif]-->
-            <span class="govuk-header__logotype-text">
-              <%= logo_text %>
-            </span>
+            <% unless hide_logo_text %>
+              <span class="govuk-header__logotype-text">
+                <%= logo_text %>
+              </span>
+            <% end %>
           </span>
-        </a>
-      </div>
+        <% end %>
+      <% end %>
     </div>
     <nav
       aria-labelledby="super-navigation-menu-heading"
@@ -93,10 +160,12 @@
       %>
 
       <div class="govuk-width-container gem-c-layout-super-navigation-header__button-width-container">
-        <div class="gem-c-layout-super-navigation-header__button-container">
+        <%= content_tag(:div, {
+          class: button_container_classes
+        }) do %>
           <div class="gem-c-layout-super-navigation-header__navigation-item">
             <%= link_to link[:href], {
-              class: "gem-c-layout-super-navigation-header__navigation-item-link",
+              class: item_link_classes,
               data: {
                 track_action: "#{tracking_label}Link",
                 track_category: "headerClicked",
@@ -105,9 +174,11 @@
                 track_dimension_index: "29",
               }
             } do %>
-              <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
+              <% content_tag(:span, {
+                class: item_link_inner_classes
+              }) do %>
                 <%= link[:label] %>
-              </span>
+              <% end %>
             <% end %>
 
             <%= content_tag(:button, {
@@ -116,7 +187,7 @@
                 expanded: false,
                 label: show_menu_text,
               },
-              class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button",
+              class: top_toggle_button_classes,
               data: {
                 text_for_hide: hide_menu_text,
                 text_for_show: show_menu_text,
@@ -138,35 +209,40 @@
               id: "super-navigation-menu-#{unique_id}-toggle",
               type: "button",
             }) do %>
-              <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner" %>
+              <%= tag.span link[:label], class: top_toggle_button_inner_classes %>
             <% end %>
           </div>
 
           <div class="gem-c-layout-super-navigation-header__search-item">
-            <button
-              aria-controls="super-search-menu"
-              aria-expanded="true"
-              aria-label="<%= hide_search_menu_text %>"
-              class="gem-c-layout-super-navigation-header__search-toggle-button"
-              data-text-for-hide="<%= hide_search_menu_text %>"
-              data-text-for-show="<%= show_search_menu_text %>"
-              data-toggle-mobile-group="top"
-              data-toggle-desktop-group="top"
-              data-tracking-key="search"
-              hidden
-              id="super-search-menu-toggle"
-              type="button"
-              data-ga4-event="<%= {
-                "event_name": "select_content",
-                "type": "header menu bar",
-                "text": "Search",
-                "index": {
-                  "index_section": 2,
-                  "index_section_count": 2,
-                },
-                "section": "Search"
-              }.to_json %>"
-            >
+            <%= content_tag(:button, {
+              id: "super-search-menu-toggle",
+              class: search_toggle_button_classes,
+              aria: {
+                controls: "super-search-menu",
+                expanded: "true",
+                label: hide_search_menu_text,
+              },
+              data: {
+                "text-for-hide": hide_search_menu_text,
+                "text-for-show": show_search_menu_text,
+                "toggle-mobile-group": "top",
+                "toggle-desktop-group": "top",
+                "tracking-key": "search",
+                "ga4-event": "#{{
+                  "event_name": "select_content",
+                  "type": "header menu bar",
+                  "text": "Search",
+                  "index": {
+                    "index_section": 2,
+                    "index_section_count": 2,
+                  },
+                  "section": "Search"
+                  }.to_json
+                }"
+              },
+              hidden: true,
+              type: "button",
+            }) do %>
               <span class="govuk-visually-hidden">
                 <%= search_text %>
               </span>
@@ -182,9 +258,11 @@
               >
                 &times;
               </span>
-            </button>
+            <% end %>
 
-            <a class="gem-c-layout-super-navigation-header__search-item-link" href="/search">
+            <%= link_to "/search", {
+              class: search_item_link_classes
+            } do %>
               <span class="govuk-visually-hidden">
                 <%= search_text %>
               </span>
@@ -193,9 +271,9 @@
                   classes: %w[gem-c-layout-super-navigation-header__search-item-link-icon],
                 }
               %>
-            </a>
+            <% end %>
           </div>
-        </div>
+        <% end %>
       </div>
 
       <div
@@ -336,4 +414,4 @@
       </div>
     </nav>
   </div>
-</header>
+<% end %>

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

@@ -197,18 +197,17 @@ examples:
     data:
       ga4_tracking: true
       contents:
-        - href: "#first-thing"
+        - href: "https://www.gov.uk"
           text: 1. First thing
           items:
           - href: "#second-thing"
             text: 1. Nested Item
-          - href: "#third-thing"
-            text: 2. Nested Item
+          - text: 2. Nested Item
             active: true
         - href: "#first-thing"
           text: 2. Second thing
           items:
           - href: "#second-thing"
             text: 1. Nested Item
-          - href: "#third-thing"
+          - href: "https://www.gov.uk/browse"
             text: 2. Nested Item

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

@@ -37,6 +37,11 @@ examples:
     description: This allows the feedback form to be omitted
     data:
       omit_feedback_form: true
+  homepage:
+    description: This allows for rendering the layout super navigation header in a different way for only the homepage.
+    data:
+      homepage: true
+      show_explore_header: true
   omit_footer_navigation:
     description: This allows the footer navigation to be omitted
     data:

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

@@ -34,3 +34,32 @@ examples:
     data:
       logo_link: "https://www.example.com"
       logo_link_title: "Go to example"
+  homepage:
+    description: |
+      This variant is used for the homepage. It toggles the following attributes: hide_button_left_border, hide_logo_text and blue_background
+    data:
+      hide_logo_text: true
+      hide_button_left_border: true
+      blue_background: true
+      large_navbar: true      
+  hide_logo_text:
+    description: |
+      Logo text is shown by default. This option allows us to hide the text for the homepage.
+    data:
+      hide_logo_text: true
+  remove_left_button_border:
+    description: |
+      The left border for the toggle button is shown by default. This option allows us to hide the text for the homepage.
+    data:
+      hide_button_left_border: true
+  blue_blackground_colour:
+    description: |
+      The black background is shown by default. This option allows us to change the background colour for the homepage.
+    data:
+      blue_background: true
+  large_navbar:
+    description: |
+      Make the links and buttons large on desktop only. Used for the homepage.
+    data:
+      large_navbar: true
+      hide_logo_text: true

data/app/views/govuk_publishing_components/components/layout_for_public/_layout_super_navigation_header_homepage.html.erb

@@ -0,0 +1,11 @@
+<% logo_link ||= "/" %>
+
+<%= render "govuk_publishing_components/components/layout_super_navigation_header",
+  {
+    hide_logo_text: true,
+    logo_link: logo_link,
+    blue_background: true,
+    hide_button_left_border: true,
+    large_navbar: true,
+  }
+%>

data/lib/govuk_publishing_components/presenters/attachment_helper.rb

@@ -119,7 +119,7 @@ module GovukPublishingComponents
         def self.find(content_type, extension = nil)
           matching_types = TYPES.select { |type| type[:content_type] == content_type }
 
-          return UnsupportedContentType.new(content_type: content_type) if matching_types.empty?
+          return UnsupportedContentType.new(content_type:) if matching_types.empty?
 
           extension_match = if matching_types.length > 1
                               matching_types.find { |type| type[:extension] == extension }

data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -98,7 +98,7 @@ module GovukPublishingComponents
         data[:behaviour] = "exclusive" if checkbox[:exclusive]
 
         capture do
-          concat check_box_tag checkbox_name, checkbox[:value], checked, class: "govuk-checkboxes__input", id: checkbox_id, data: data
+          concat check_box_tag(checkbox_name, checkbox[:value], checked, class: "govuk-checkboxes__input", id: checkbox_id, data:)
           concat content_tag(:label, checkbox[:label], for: checkbox_id, class: "govuk-label govuk-checkboxes__label")
           concat content_tag(:span, checkbox[:hint], id: "#{checkbox_id}-item-hint", class: "govuk-hint govuk-checkboxes__hint") if checkbox[:hint]
         end

data/lib/govuk_publishing_components/presenters/content_item.rb

@@ -119,7 +119,7 @@ module GovukPublishingComponents
 
       def as_taxonomy_sidebar_link
         {
-          title: title,
+          title:,
           link: base_path,
         }
       end

data/lib/govuk_publishing_components/presenters/contents_list_helper.rb

@@ -48,6 +48,12 @@ module GovukPublishingComponents
         total
       end
 
+      def get_ga4_type(link)
+        return "select content" if link.start_with?("#")
+
+        "contents list"
+      end
+
     private
 
       def parent_modifier

data/lib/govuk_publishing_components/presenters/curated_taxonomy_sidebar_links.rb

@@ -1,5 +1,3 @@
-require "set"
-
 module GovukPublishingComponents
   module Presenters
     # @private

data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb

@@ -43,9 +43,9 @@ module GovukPublishingComponents
         nation = I18n.t("components.devolved_nations.#{name}")
 
         if I18n.exists?("components.devolved_nations.type.#{@type}")
-          I18n.t("components.devolved_nations.type.#{@type}", nation: nation)
+          I18n.t("components.devolved_nations.type.#{@type}", nation:)
         else
-          I18n.t("components.devolved_nations.type.publication", nation: nation)
+          I18n.t("components.devolved_nations.type.publication", nation:)
         end
       end
     end

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -88,7 +88,7 @@ module GovukPublishingComponents
             title: current_step_nav.title,
             path: current_step_nav.base_path,
             tracking_id: current_step_nav.content_id,
-            ga4_tracking: ga4_tracking,
+            ga4_tracking:,
           }
         else
           {}

data/lib/govuk_publishing_components/presenters/public_layout_helper.rb

@@ -77,7 +77,7 @@ module GovukPublishingComponents
       def generate_data_attribute(link, track_action)
         {
           track_category: "footerClicked",
-          track_action: track_action,
+          track_action:,
           track_label: link[:href],
           track_options: {
             dimension29: link[:text],

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.17.0".freeze
+  VERSION = "35.18.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.17.0
+  version: 35.18.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-09-29 00:00:00.000000000 Z
+date: 2023-10-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -838,6 +838,7 @@ files:
 - app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb
 - app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb
 - app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb
+- app/views/govuk_publishing_components/components/layout_for_public/_layout_super_navigation_header_homepage.html.erb
 - app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb
 - app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb
 - app/views/govuk_publishing_components/components/layout_header/_search.html.erb
@@ -1468,7 +1469,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '3.0'
+      version: '3.1'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="