govuk_publishing_components 35.20.0 → 35.20.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1878b4cfefb05ba090334ac9990ead5cd73b519b0dd5086fa15d48715f7fc13
-  data.tar.gz: 3916e46d02628289d1667218a570c67b7b809c584da24064412cc948be37fd23
+  metadata.gz: '096ada32d1ecced73348563a12eaa51f1f722c75f11791baba32d24de329b4ad'
+  data.tar.gz: 7c905c2babbe3a999a4a44d2441506b5b38b48edbb78593a9b9212b55549d8da
 SHA512:
-  metadata.gz: 764549f50e7ea206131c5cbbbe6ac12e693ed6a8e08c4e27ab2575eac6adf0788a725cda4790b388d58bb3f81884f98e6ff7902b57b906730db6b550cd60acee
-  data.tar.gz: 1d3a83a6d8fb0e602e5b3fdcb54713f79d83e7266b4aa1fe873c41f941489fcac11edac78e03d7ebf655d35aee37c5c4a7cd0c9fe690ec0305b5f4a68567138b
+  metadata.gz: 7bca767187c1d88419a6c36c90a6cfb763773ef81cd1106bf24f2298142bf7f247ca293c05a4bc9c76fe567f326ff36a7cbb7986bc671995512c22b4f2f67461
+  data.tar.gz: 715869ba54a39828637ded7125d39462716247acec55b3c71507975fbcbb567a01dfd2ab152a2fe19fac3044ca4c7c0e0b1ea56c9dca6b074ac440abdf4c3e28

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,27 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-.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;
+.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-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 +907,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 +952,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 +967,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 +986,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/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/_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/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.20.1".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.20.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-10-23 00:00:00.000000000 Z
+date: 2023-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config