govuk_publishing_components 35.16.1 → 35.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f215a358b5348fe905ec3b11ba2d3301dd263bbe5fe6961cdab3586de5f11ead
-  data.tar.gz: fee32e2c6b0b5a587b36577db5f51a731b8c3df67b5d7b30db4089650edf7efd
+  metadata.gz: 5ce473a1a45f47ae5cf925f4de375968f8ad75223ef70a38d442be0160a66172
+  data.tar.gz: 71574933e54084b2ecff4bce0fe09eda6e34003f55fcb7d470300580e35eb54f
 SHA512:
-  metadata.gz: f687a3d509cc89bd128d4c696f8f504575188b3ade7b6e536587c09be27ce7d0a3733203c52acfb48252ba6655a99b020d64d8ae5d2afbb23994e0f16a6bc2ad
-  data.tar.gz: 82488d3f778c9c3dc22f27eab581965780b695a43ff0585fd191771dbbf6aa05c165616c61d89873342755e9c90b13e638766f116fef25a72baf8c08a265362f
+  metadata.gz: d663be268de23349809eeec83badafb7c24298221b29168df805b332bd757f4fa70d4addc4cbb197f07af00e1ed5bd501060a5c00f918a6f77ddacd7273149f0
+  data.tar.gz: 2b7437b0e9e25cd57b04ffe2e014ce182649fabeb5eaf10d73110f782eb255c7420bd7814273f361e4373687aff2a82fe1049ea3f7d688b05f4b9009dff46673

data/app/assets/images/govuk_publishing_components/action-link-arrow--light.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
+  <circle cx="13.5" cy="13.5" r="13.5" fill="#EEEFEF"/>
+  <g transform="translate(5 3.5) scale(0.85)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9429 11.7949L10.4402 7.29222L11.7327 5.99967L17.528 11.7949L11.7327 17.5902L10.4402 16.2976L14.9429 11.7949Z" fill="#000000"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.95631 10.881L15.4414 10.881L15.4414 12.709L3.95631 12.709L3.95631 10.881Z" fill="#000000"/>
+  </g>
+</svg>

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -288,11 +288,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           return null
         }
 
-        // In order to extract the number of results from resultCount (which is a string at this point (e.g. '12,345 results')), we remove the comma and
-        // split string at the space character so it can be parsed as an integer
-        resultCount = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(resultCount.textContent)
-        resultCount = resultCount.replace(',', '')
-        resultCount = resultCount.split(' ')[0]
+        // Remove anything that isn't a number from the result count heading. E.g. 'Results:' or the comma in '1,234'
+        resultCount = resultCount.textContent.replace(/[^0-9]+/g, '')
 
         return parseInt(resultCount)
       },

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -166,6 +166,24 @@
   }
 }
 
+.gem-c-action-link--light-icon {
+  &::before {
+    width: 36px;
+    height: 28px;
+    background: image-url("govuk_publishing_components/action-link-arrow--light.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--light.svg"), linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    background-size: 28px auto;
+    background-position: 0 0;
+
+    @include govuk-media-query($from: tablet) {
+      width: 45px;
+      height: 35px;
+      background-size: 35px auto;
+    }
+  }
+}
+
 .gem-c-action-link--dark-icon,
 .gem-c-action-link--small-icon {
   max-width: none;

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/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -55,7 +55,7 @@ $large-input-size: 50px;
   }
 }
 
-%gem-c-search-input-focus {
+@mixin gem-c-search-input-focus {
   outline: $govuk-focus-width solid $govuk-focus-colour;
   // Ensure outline appears outside of the element
   outline-offset: 0;
@@ -89,7 +89,7 @@ $large-input-size: 50px;
   }
 
   &:focus {
-    @extend %gem-c-search-input-focus;
+    @include gem-c-search-input-focus;
   }
 }
 
@@ -168,10 +168,9 @@ $large-input-size: 50px;
     // Ensure outline appears outside of the element
     outline-offset: 0;
 
-    // no need for black outline as there is enough contrast
-    // with the blue background
     &:focus {
-      box-shadow: none;
+      @include gem-c-search-input-focus;
+      box-shadow: inset 0 0 0 4px;
     }
   }
 
@@ -191,6 +190,17 @@ $large-input-size: 50px;
   }
 }
 
+.gem-c-search--homepage {
+  .gem-c-search__submit {
+    background-color: #d2e2f1;
+    color: govuk-colour("blue");
+
+    &:hover {
+      background-color: lighten(#d2e2f1, 5%);
+    }
+  }
+}
+
 .gem-c-search--on-white {
   .gem-c-search__submit {
     background-color: govuk-colour("blue");
@@ -211,6 +221,10 @@ $large-input-size: 50px;
   }
 }
 
+.gem-c-search__label--white {
+  color: govuk-colour("white");
+}
+
 .gem-c-search--no-border {
   .gem-c-search__label {
     color: govuk-colour("white");
@@ -218,6 +232,11 @@ $large-input-size: 50px;
 
   .gem-c-search__input[type="search"] {
     border: 0;
+
+    &:focus {
+      @include gem-c-search-input-focus;
+      box-shadow: inset 0 0 0 4px;
+    }
   }
 
   .js-enabled & {

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -37,6 +37,11 @@ $share-button-height: 30px;
   line-height: $share-button-height;
 }
 
+.gem-c-share-links__svg {
+  width: 100%;
+  height: 100%;
+}
+
 .direction-rtl {
   .gem-c-share-links__link {
     display: inline-block;

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/_action_link.html.erb

@@ -17,6 +17,7 @@
   simple_light ||= false
   dark_icon ||= false
   dark_large_icon ||= false
+  light_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
   brexit_icon ||= false
@@ -31,6 +32,7 @@
   css_classes << "gem-c-action-link--dark-large-icon" if dark_large_icon
   css_classes << "gem-c-action-link--small-icon" if small_icon
   css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
+  css_classes << "gem-c-action-link--light-icon" if light_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--brexit" if brexit_icon
   css_classes << "gem-c-action-link--blue-arrow" if blue_arrow

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/_metadata.html.erb

@@ -22,7 +22,7 @@
   ga4_tracking ||= false
   ga4_object = {
     event_name: "navigation",
-    type: "content",
+    type: "content history",
     section: "Top",
     action: "opened"
   }.to_json

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

@@ -12,6 +12,7 @@
   label_size ||= nil
   label_text ||= t("components.search_box.label")
   name ||= "q"
+  homepage ||= false
   no_border ||= false
   size ||= ""
   value ||= ""
@@ -24,6 +25,7 @@
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
   classes << "gem-c-search--large" if size == "large"
   classes << "gem-c-search--large-on-mobile" if size == "large-mobile"
+  classes << "gem-c-search--homepage" if homepage
   classes << "gem-c-search--no-border" if no_border
   if local_assigns[:on_govuk_blue].eql?(true)
     classes << "gem-c-search--on-govuk-blue"
@@ -35,6 +37,7 @@
   label_classes = []
   if (shared_helper.valid_heading_size?(label_size))
     label_classes << "govuk-label govuk-label--#{label_size}"
+    label_classes << "gem-c-search__label--white" if no_border || homepage
   else
     label_classes << "gem-c-search__label"
   end

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

@@ -86,39 +86,39 @@
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                 </svg>
               <% elsif link[:icon] == 'twitter' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                 </svg>
               <% elsif link[:icon] == 'email' %>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM58.37,21,36.92,39.45,15.47,21ZM11.65,23.66,26.27,36.23,11.65,49.9ZM15.1,52.83,29.7,39.18l7.22,6.21,7.22-6.21,14.6,13.65ZM62.19,49.9,47.57,36.23,62.19,23.66Z"/>
                 </svg>
               <% elsif link[:icon] == 'flickr' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M5.334 6.666C2.3884 6.666 0 9.055 0 12c0 2.9456 2.3884 5.334 5.334 5.334 2.9456 0 5.332-2.3884 5.332-5.334 0-2.945-2.3864-5.334-5.332-5.334zm13.332 0c-2.9456 0-5.332 2.389-5.332 5.334 0 2.9456 2.3864 5.334 5.332 5.334C21.6116 17.334 24 14.9456 24 12c0-2.945-2.3884-5.334-5.334-5.334Z"/>
                 </svg>
               <% elsif link[:icon] == 'instagram' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
                 </svg>
               <% elsif link[:icon] == 'linkedin' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                 </svg>
               <% elsif link[:icon] == 'youtube' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                 </svg>
               <% elsif link[:icon] == 'whatsapp' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                 </svg>
               <% else %>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM56.3,48.27a1.42,1.42,0,0,1-1.42,1.42h-19v9.18l-9.18-9.18H19a1.43,1.43,0,0,1-1.43-1.43V20.52A1.43,1.43,0,0,1,19,19.09H54.88a1.43,1.43,0,0,1,1.42,1.42Z"/>
                 </svg>
               <% end %>

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

@@ -120,6 +120,11 @@ examples:
       text: Coronavirus (COVID-19)
       href: "/my-test-page"
       dark_large_icon: true
+  with_light_icon:
+    data:
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
+      light_icon: true      
   with_brexit_icon_and_custom_font_size:
     data:
       text: Guidance for businesses

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/docs/search.yml

@@ -35,6 +35,17 @@ examples:
       on_govuk_blue: true
     context:
       dark_background: true
+  homepage:
+    description: For use on the homepage.
+    data:
+      label_text: "Search"
+      inline_label: false
+      on_govuk_blue: true
+      label_size: "s"
+      homepage: true
+      size: "large"
+    context:
+      dark_background: true 
   change_label_text:
     data:
       label_text: "Search"

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.16.1".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.16.1
+  version: 35.18.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-09-26 00:00:00.000000000 Z
+date: 2023-10-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -349,6 +349,8 @@ files:
 - app/assets/images/govuk_publishing_components/action-link-arrow--brexit.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--dark.png
 - app/assets/images/govuk_publishing_components/action-link-arrow--dark.svg
+- app/assets/images/govuk_publishing_components/action-link-arrow--light.png
+- app/assets/images/govuk_publishing_components/action-link-arrow--light.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple-light.png
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple-light.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple.png
@@ -836,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
@@ -1466,14 +1469,14 @@ 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:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.19
+rubygems_version: 3.4.20
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications