govuk_publishing_components 35.20.0 → 35.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1878b4cfefb05ba090334ac9990ead5cd73b519b0dd5086fa15d48715f7fc13
-  data.tar.gz: 3916e46d02628289d1667218a570c67b7b809c584da24064412cc948be37fd23
+  metadata.gz: 3bc95850fa0d38a7b0783eed1d3e5b1fd846c9b11c8ae5562d8fa8f7111696f4
+  data.tar.gz: edafc5b87bd54a90cce6cfe616589eddb820eb6dc3d0d4d0e8f17953ad51a74f
 SHA512:
-  metadata.gz: 764549f50e7ea206131c5cbbbe6ac12e693ed6a8e08c4e27ab2575eac6adf0788a725cda4790b388d58bb3f81884f98e6ff7902b57b906730db6b550cd60acee
-  data.tar.gz: 1d3a83a6d8fb0e602e5b3fdcb54713f79d83e7266b4aa1fe873c41f941489fcac11edac78e03d7ebf655d35aee37c5c4a7cd0c9fe690ec0305b5f4a68567138b
+  metadata.gz: 576b4d036af878138116870dcf1045cf91cdb9ba31a9f68b1b8571fac840f7728d177f9d3293c83e921a3f93a5a3110b19e681568367706ca89280dc995abe8d
+  data.tar.gz: bf87713f8b29033d63800bd4851bbca0778968a4318432b828a907a60e83a85da966307394ef77c43b3bb715ee14a23ebe81b9984303bf11a1fe5e1b2f5550f1

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

@@ -30,7 +30,16 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       firstScript.parentNode.insertBefore(newScript, firstScript)
     },
 
+    getUserAgent: function () {
+      return navigator.userAgent
+    },
+
     sendData: function (data) {
+      // Prevent any GA4 data being sent during Smokey tests
+      if (this.getUserAgent() === 'Smokey Test / Ruby') {
+        return
+      }
+
       data.govuk_gem_version = this.getGemVersion()
       // set this in the console as a debugging aid
       if (window.GOVUK.analyticsGa4.showDebug) {

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

@@ -46,7 +46,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var formData = this.getInputValues(formInputs)
       data.text = data.text || this.combineGivenAnswers(formData) || this.useFallbackValue
 
-      if (data.action === 'search') {
+      if (data.action === 'search' && data.text) {
         data.text = data.text.toLowerCase()
         data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(data.text)
       }

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

@@ -8,7 +8,7 @@ $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
 $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
-$large-navbar-height: 86px;
+$large-navbar-height: 72px;
 
 $pale-blue-colour: #d2e2f1;
 
@@ -630,6 +630,12 @@ $after-button-padding-left: govuk-spacing(4);
     color: govuk-colour("white");
   }
 
+  &:focus-visible {
+    &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+      border-bottom: $pseudo-underline-height solid govuk-colour("black");
+    }
+  }
+
   @include govuk-media-query($from: "desktop") {
     border: 0;
     margin: 0;
@@ -654,15 +660,21 @@ $after-button-padding-left: govuk-spacing(4);
 
       // stylelint-disable max-nesting-depth
       @include focus-not-focus-visible {
-        border-bottom: none;
+        border-bottom: $pseudo-underline-height solid $govuk-brand-colour;
+
+        &:hover {
+          border-bottom: $pseudo-underline-height solid govuk-colour("white");
+        }
       }
       // stylelint-enable max-nesting-depth
     }
 
     &:focus-visible {
       &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+        color: govuk-colour("black");
+
         &:hover {
-          border-bottom: $pseudo-underline-height solid $govuk-focus-colour;
+          border-bottom: $pseudo-underline-height solid govuk-colour("black");
           color: govuk-colour("black");
         }
       }
@@ -679,9 +691,14 @@ $after-button-padding-left: govuk-spacing(4);
   &.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");
+        border-bottom: $pseudo-underline-height solid govuk-colour("light-grey");
         color: govuk-colour("white");
       }
+
+      &:focus-visible {
+        border-bottom: $pseudo-underline-height solid govuk-colour("black");
+        color: govuk-colour("black");
+      }
     }
 
     @include focus-and-focus-visible {
@@ -704,6 +721,10 @@ $after-button-padding-left: govuk-spacing(4);
       border-bottom-color: govuk-colour("light-grey");
       color: govuk-colour("light-grey");
       outline: 1px solid govuk-colour("light-grey"); // overlap the border of the nav menu so it won't appear when menu open
+
+      &:hover {
+        border-bottom: $pseudo-underline-height solid govuk-colour("light-grey");
+      }
     }
   }
 }
@@ -726,7 +747,7 @@ $after-button-padding-left: govuk-spacing(4);
 }
 
 .gem-c-layout-super-navigation-header__search-container {
-  padding-bottom: govuk-spacing(3);
+  padding-bottom: govuk-spacing(7);
 }
 
 // Dropdown menu.
@@ -740,7 +761,23 @@ $after-button-padding-left: govuk-spacing(4);
   padding-top: govuk-spacing(6);
 
   @include govuk-media-query($from: "desktop") {
-    padding-top: govuk-spacing(5);
+    padding-top: govuk-spacing(8);
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar {
+  @include govuk-media-query($until: "desktop") {
+    .gem-c-layout-super-navigation-header__search-items {
+      margin: 0 24px;
+    }
+  }
+}
+
+@include govuk-media-query($until: "tablet") {
+  // padding to make it the same as the padding for the redesign of the homepage
+  .gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__column--services-and-information,
+  .gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__column--government-activity {
+    padding: 0 24px;
   }
 }
 
@@ -814,6 +851,11 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__navigation-second-item-link {
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   font-size: 16px;
   font-size: govuk-px-to-rem(16px);
@@ -825,16 +867,31 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button--large-navbar {
+  .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+    padding-left: 26px;
+    padding-right: 26px;
+  }
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
+  padding-left: 24px;
+  padding-right: 24px;
+  width: 68px;
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
-  @include govuk-typography-common;
-  font-size: 16px;
-  font-size: govuk-px-to-rem(16px);
-  font-weight: normal;
-  margin: govuk-spacing(1) 0 0 0;
+  margin-top: govuk-spacing(1);
+}
+
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__navigation-second-item-description {
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+  margin-top: govuk-spacing(2);
 }
 
 .gem-c-layout-super-navigation-header__search-form {
-  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
+  padding: 0 0 govuk-spacing(8) 0;
 }
 
 // Popular links.
@@ -854,6 +911,11 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar .gem-c-layout-super-navigation-header__popular-link {
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19px);
+}
+
 .gem-c-layout-super-navigation-header__width-container {
   @include govuk-media-query($until: "desktop") {
     margin: 0;
@@ -894,12 +956,12 @@ $after-button-padding-left: govuk-spacing(4);
   }
 
   .gem-c-layout-super-navigation-header__logotype-crown--large-navbar {
-    height: 36px;
-    width: 49px;
+    height: 32px;
+    width: 44px;
   }
 
   .gem-c-header__link--large-navbar:focus {
-    box-shadow: 0 -4px 0 18px $govuk-focus-colour;
+    box-shadow: 0 -6px 0 12px $govuk-focus-colour;
     border-bottom: $govuk-focus-width solid govuk-colour("black");
     padding-bottom: 10px;
   }
@@ -909,17 +971,14 @@ $after-button-padding-left: govuk-spacing(4);
   }
 
   .gem-c-layout-super-navigation-header__header-logo--large-navbar {
-    height: 35px;
-    padding-bottom: govuk-spacing(5);
-    padding-top: govuk-spacing(5);
+    height: 32px;
+    padding-bottom: govuk-spacing(4);
+    padding-top: govuk-spacing(4);
   }
 
   .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 {
+    // to stop the search icon moving on hover
     padding-bottom: 12px;
   }
 
@@ -931,3 +990,19 @@ $after-button-padding-left: govuk-spacing(4);
     height: $large-navbar-height;
   }
 }
+
+@include govuk-media-query($until: tablet) {
+  .gem-c-layout-super-navigation-header__popular-links-heading--large-navbar {
+    font-size: 24px;
+    font-size: govuk-px-to-rem(24px);
+  }
+
+  // can't disable responsive styling because using override classes
+  // from govuk-frontend which are all responsive so have to supply
+  // custom class to the label of the search component to turn off
+  // the responsive font size
+  .gem-c-layout-super-navigation-header__search-label--large-navbar {
+    font-size: 24px;
+    font-size: govuk-px-to-rem(24px);
+  }
+}

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

@@ -25,11 +25,14 @@
 .gem-c-metadata--inverse {
   background-color: govuk-colour("blue");
   color: govuk-colour("white");
-  padding: govuk-spacing(2);
 
   a {
     @include govuk-link-style-inverse;
   }
+}
+
+.gem-c-metadata--inverse-padded {
+  padding: govuk-spacing(2);
 
   .gem-c-metadata__list {
     margin: govuk-spacing(2);

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

@@ -65,7 +65,11 @@
   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
 
+  dropdown_menu_classes = %w(gem-c-layout-super-navigation-header__navigation-dropdown-menu)
+  dropdown_menu_classes << "gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar" if large_navbar
 
+  popular_links_heading_classes = %w(govuk-heading-m)
+  popular_links_heading_classes << "gem-c-layout-super-navigation-header__popular-links-heading--large-navbar" if large_navbar
 %>
 <%= content_tag("header",
   {
@@ -107,6 +111,11 @@
             label: logo_link_title,
           }
         } do %>
+          <% if hide_logo_text %>
+            <span class="govuk-visually-hidden">
+              <%= logo_text %>
+            </span>
+          <% end %>
           <span class="govuk-header__logotype">
             <!--[if gt IE 8]><!-->
             <%= content_tag(:svg, {
@@ -270,10 +279,11 @@
         <% end %>
       </div>
 
-      <div
-        id="super-navigation-menu-<%= unique_id %>" hidden
-        class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
-      >
+      <%= content_tag(:div, {
+        id: "super-navigation-menu-#{unique_id}",
+        hidden: "",
+        class: dropdown_menu_classes,
+      }) do %>
         <div class="govuk-width-container">
           <div class="govuk-grid-row gem-c-layout-super-navigation-header__navigation-items">
 
@@ -330,9 +340,13 @@
             <% end %>
           </div>
         </div>
-      </div>
+      <% end %>
 
-      <div id="super-search-menu" hidden class="gem-c-layout-super-navigation-header__navigation-dropdown-menu">
+      <%= content_tag(:div, {
+        id: "super-search-menu",
+        hidden: "",
+        class: dropdown_menu_classes,
+      }) do %>        
         <div class="govuk-width-container gem-c-layout-super-navigation-header__search-container gem-c-layout-super-navigation-header__search-items">
           <h3 class="govuk-visually-hidden">
             <%= navigation_search_subheading %>
@@ -345,6 +359,7 @@
                 data-module="ga4-form-tracker"
                 data-ga4-form='{ "event_name": "search", "type": "header menu bar", "section": "Search GOV.UK", "action": "search", "url": "/search/all" }'
                 data-ga4-form-include-text
+                data-ga4-form-no-answer-undefined
                 action="/search"
                 method="get"
                 role="search"
@@ -354,7 +369,9 @@
                   inline_label: false,
                   label_size: "m",
                   label_text: search_text,
+                  label_custom_class: "gem-c-layout-super-navigation-header__search-label--large-navbar",
                   size: "large",
+                  margin_bottom: 0,
                   data_attributes: {
                     track_category: "headerClicked",
                     track_action: "searchSubmitted",
@@ -368,7 +385,11 @@
           </div>
           <div class="govuk-grid-row">
             <div class="govuk-grid-column-full">
-              <h3 class="govuk-heading-m"><%= popular_links_heading %></h3>
+              <%= content_tag(:h3, {
+                class: popular_links_heading_classes
+              }) do %>
+                <%= popular_links_heading %>
+              <% end %>
               <ul class="govuk-list">
                 <% index_total = popular_links.length %>
                 <% popular_links.each_with_index do | popular_link, index | %>
@@ -401,7 +422,7 @@
             </div>
           </div>
         </div>
-      </div>
+      <% end %>
     </nav>
   </div>
 <% end %>

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

@@ -9,6 +9,7 @@
 
   other ||= nil
   inverse ||= false
+  inverse_compress ||= false
 
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
@@ -16,7 +17,13 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   classes = %w(gem-c-metadata)
   classes << "direction-#{direction}" if local_assigns.include?(:direction)
-  classes << "gem-c-metadata--inverse" if inverse
+
+  if inverse && inverse_compress
+    classes << "gem-c-metadata--inverse"
+  elsif inverse
+    classes << "gem-c-metadata--inverse gem-c-metadata--inverse-padded"
+  end
+
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 
   ga4_tracking ||= false

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

@@ -11,6 +11,7 @@
   label_margin_bottom ||= nil
   label_size ||= nil
   label_text ||= t("components.search_box.label")
+  label_custom_class ||= nil
   name ||= "q"
   homepage ||= false
   no_border ||= false
@@ -42,6 +43,7 @@
     label_classes << "gem-c-search__label"
   end
   label_classes << "govuk-!-margin-bottom-#{label_margin_bottom}" if [*1..9].include?(label_margin_bottom) and local_assigns.include?(:inline_label)
+  label_classes << label_custom_class if label_custom_class
 
   tag_label = capture do
     tag.label(for: id, class: label_classes) do

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

@@ -355,6 +355,26 @@ examples:
       see_updates_link: true
       other:
         Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
+  on_a_dark_background_without_padding:
+    description: By default the inverse option includes extra spacing around the component. This option removes this padding. Note that both the `inverse` and `inverse_compress` options must be supplied.
+    data:
+      inverse: true
+      inverse_compress: true
+      from: [
+        "<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>",
+        "<a href='/government/organisations/cabinet-office'>Cabinet Office</a>",
+        "<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>",
+        "<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>",
+        "<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>",
+        "<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food &amp; Rural Affairs</a>",
+        "<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>",
+        "<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign and Commonwealth Office</a>"
+      ]
+      first_published: 14 June 2014
+      last_updated: 10 September 2015
+      see_updates_link: true
+      other:
+        Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
   with_custom_margin_bottom:
     description: |
       The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)

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

@@ -108,3 +108,8 @@ examples:
     data:
       label_margin_bottom: 9
       inline_label: false
+  with_custom_label_class:
+    description: |
+      Allows adding a custom class to the label of the component.
+    data:
+      label_custom_class: "govuk-heading-xl"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.20.0".freeze
+  VERSION = "35.21.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.20.0
+  version: 35.21.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-10-23 00:00:00.000000000 Z
+date: 2023-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config