govuk_publishing_components 35.17.0 → 35.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2ae98a5a0bfe9237ad8666586cf56d55c5f737e03cac016826b577ad6b280e0
-  data.tar.gz: 66a94a3ef052fff63ba972df2ad0b39bf48220a42308c1d5bb06ba5343dbf621
+  metadata.gz: b6d8b36d61c9301cb5d969679a14c93b6b43914a3a734d05e4ae5702b0fb0f79
+  data.tar.gz: 49e458e28c81c1368445b4e9948aa31614ec2a506f9f989083780a0ce6de885d
 SHA512:
-  metadata.gz: 0e20d31b9ece60b5bda9387d1b87396dd4089fe10c6c808db6b11201988f7d07e2f23befc0d77a37f7842eda137edf9a200e963766b6971bcea707bfa9300e22
-  data.tar.gz: a4e27aeecf3c73c9a105fbe4e307aedc6acd1e489349c917b8341b51f42b5b7bd2d6cab2e6b6ae3f864fdf5da69fa4db68ed1023db15cf73c0910521ff3e2f9a
+  metadata.gz: 107aa5aee8b2c2c8268342683df0405cc071ada39032d723fd21299a0af1abc6bec4bb5fb7d89879775780bccc32d27b1ac9eb375e28cda218d0016b8cb843d1
+  data.tar.gz: 994233cc78dcaa2ce4a604f3cb2d3be54582bfcfa40b6df323929a808d8d7d56e30e6c1403422a71968d399e27dc6141534f49af06f5713198db721b91d461a1

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

@@ -335,6 +335,11 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           }
         } else {
           for (var i = 0; i < items.length; i++) {
+            // GA4 limits us to 200 items, so we should limit the array to this size.
+            if (i === 200) {
+              break
+            }
+
             var item = items[i]
             var path = item.getAttribute('data-ga4-ecommerce-path')
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js

@@ -9,6 +9,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.trackingTrigger = 'data-ga4-form' // elements with this attribute get tracked
     this.includeTextInputValues = this.module.hasAttribute('data-ga4-form-include-text')
     this.redacted = false
+    this.useFallbackValue = this.module.hasAttribute('data-ga4-form-no-answer-undefined') ? undefined : 'No answer given'
   }
 
   Ga4FormTracker.prototype.init = function () {
@@ -43,7 +44,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       var formInputs = this.getFormInputs()
       var formData = this.getInputValues(formInputs)
-      data.text = data.text || (this.combineGivenAnswers(formData) || 'No answer given')
+      data.text = data.text || this.combineGivenAnswers(formData) || this.useFallbackValue
 
       if (data.action === 'search') {
         data.text = data.text.toLowerCase()

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -20,6 +20,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             referrer: this.getReferrer(referrer),
             title: this.getTitle(),
             status_code: this.getStatusCode(),
+            viewport_size: this.getViewPort(),
 
             ab_test: this.getMetaContent('ab-test'),
             document_type: this.getMetaContent('format'),
@@ -89,6 +90,8 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       }
 
       searchTerm = searchTerm[0].replace('keywords=', '')
+      searchTerm = searchTerm.replace(/\++/g, ' ')
+      searchTerm = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(searchTerm)
       searchTerm = this.PIIRemover.stripPIIWithOverride(searchTerm, true, true)
       return searchTerm
     },
@@ -129,10 +132,20 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       }
     },
 
+    getViewPort: function () {
+      var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+      var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+      return vw + 'x' + vh
+    },
+
     getMetaContent: function (name) {
       var tag = document.querySelector('meta[name="govuk:' + name + '"]')
       if (tag) {
-        return tag.getAttribute('content')
+        var contentAttribute = tag.getAttribute('content')
+        if (contentAttribute === '') {
+          return undefined
+        }
+        return contentAttribute
       } else {
         return this.nullValue
       }

data/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss

@@ -14,8 +14,8 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey", $legacy: "grey-3");
   @include govuk-clearfix;
   position: relative;
 
-  .govuk-details__summary {
-    @include govuk-font($size: 14);
+  .govuk-details {
+    margin: govuk-spacing(3) 0;
   }
 }
 

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,58 @@ $after-button-padding-left: govuk-spacing(4);
     display: none;
   }
 }
+
+// Ensure the total space to the left of the logo for mobile screen sizes is 24px (margin is 15px)
+@include govuk-media-query($until: tablet) {
+  .gem-c-layout-super-navigation-header__header-logo--large-navbar {
+    padding-left: 9px;
+  }
+}
+
+@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/govspeak/_attachment.scss

@@ -12,6 +12,7 @@
   // Scope attachment and attachment-link component styles to gem-c-govspeak
   @import "../attachment-link";
   @import "../attachment";
+  @import "../details";
 
   // This block is duplicated from Whitehall as a transitional step, see the
   // commit message for 2d893c10ee3f2cab27162b9aba38b12379a71d07 before making

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,9 +15,9 @@
   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
+    type: "contents list",
+    index_total: cl_helper.get_index_total,
   } if ga4_tracking
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -43,6 +43,7 @@
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
             if ga4_tracking
+              ga4_data[:event_name] = cl_helper.get_ga4_event_name(contents_item[:href]) if contents_item[:href]
               ga4_data[:index] = {
                 "index_link": index_link,
               }
@@ -67,6 +68,7 @@
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
                   <%
                     if ga4_tracking
+                      ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href]
                       ga4_data[:index] = {
                         "index_link": index_link,
                       }

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

@@ -1,5 +1,6 @@
 <%
   add_gem_component_stylesheet("govspeak")
+
   inverse ||= false
   direction_class = "direction-#{direction}" if local_assigns.include?(:direction)
   disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)

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 %>