govuk_publishing_components 25.0.0 → 25.2.2

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

@@ -1,10 +1,8 @@
+@import "govuk/components/notification-banner/notification-banner";
+
 .gem-c-notice {
-  @include govuk-text-colour;
-  @include govuk-responsive-padding(4);
   @include govuk-responsive-margin(8, "bottom");
-
   clear: both;
-  border: $govuk-border-width solid govuk-colour("blue");
 
   .govuk-govspeak {
     p:last-child {
@@ -18,22 +16,9 @@
 }
 
 .gem-c-notice__title {
-  @include govuk-font(24, $weight: bold);
-  margin-top: 0;
-  @include govuk-responsive-margin(4, "bottom");
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   a {
     @include govuk-link-common;
     @include govuk-link-style-default;
     @include govuk-link-print-friendly;
   }
 }
-
-.gem-c-notice__description {
-  @include govuk-font(19);
-  margin: 0;
-}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -279,6 +279,11 @@
     padding: govuk-spacing(2);
     background-color: govuk-colour("white");
 
+    &:hover {
+      background-color: govuk-colour("light-grey");
+      color: $govuk-link-hover-colour;
+    }
+
     &:focus {
       @include govuk-focused-text;
       background-color: $govuk-focus-colour;

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

@@ -5,7 +5,7 @@
   describedby ||= nil
   role ||= nil
   heading_level ||= nil
-  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   error_message ||= nil
   error_id ||= nil
   id ||= nil

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

@@ -23,7 +23,7 @@
   hint_id = "hint-#{SecureRandom.hex(4)}"
   error_id = "error-#{SecureRandom.hex(4)}"
   search_icon ||= nil
-  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   heading_level ||= nil
   prefix ||= nil
   suffix ||= nil

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

@@ -1,16 +1,18 @@
 <%
-  hint_text ||= ''
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  hint_text ||= ""
   is_radio_label ||= false
   bold ||= false
-  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   is_page_heading ||= false
 
-  css_classes = %w( gem-c-label govuk-label )
+  css_classes = %w[gem-c-label govuk-label]
   css_classes << "govuk-label--s" if bold
   css_classes << "govuk-radios__label" if is_radio_label
   css_classes << "govuk-label--#{heading_size}" if heading_size
 
-  hint_text_css_classes = %w( govuk-hint )
+  hint_text_css_classes = %w[govuk-hint]
   hint_text_css_classes << "govuk-radios__hint" if is_radio_label
 %>
 

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

@@ -17,7 +17,7 @@
 # This is a hack - but it's the only way I can find to not have two blue bars on
 # constrained width layouts.
 #
-# The full width layout hides the blue bar underneath the blar header bar - so
+# The full width layout hides the blue bar underneath the black header bar - so
 # full width pages won't see the blue bar unless it's added by another component
 # - and for most pages that component is the global banner.
 #

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

@@ -4,17 +4,28 @@ logo_link_title = t("components.layout_super_navigation_header.logo_link_title")
 logo_text = t("components.layout_super_navigation_header.logo_text")
 navigation_links = t("components.layout_super_navigation_header.navigation_links")
 navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
+navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
+navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
 popular_links = t("components.layout_super_navigation_header.popular_links")
 popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
-search_text= t("components.layout_super_navigation_header.search_text")
+search_text = t("components.layout_super_navigation_header.search_text")
+
+hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
+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")
+
 %>
 <header role="banner" class="gem-c-layout-super-navigation-header">
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
     <div class="gem-c-layout-super-navigation-header__header-logo">
       <a class="govuk-header__link govuk-header__link--homepage"
         data-module="gem-track-click"
-        data-track-action="homeHeader"
-        data-track-category="homeLinkClicked"
+        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 %>">
@@ -46,76 +57,267 @@ search_text= t("components.layout_super_navigation_header.search_text")
     <nav
       aria-labelledby="super-navigation-menu-heading"
       class="gem-c-layout-super-navigation-header__content"
-      data-module="super-navigation-toggle"
-      data-text-for-button="Menu"
-      data-text-for-show-menu="Show navigation menu"
-      data-text-for-hide-menu="Hide navigation menu"
+      data-module="super-navigation-mega-menu"
     >
-      <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden"><%= navigation_menu_heading %></h2>
-      <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__items">
-        <% navigation_links.each do | link | %>
-          <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item">
-            <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link" href="<%= link[:href] %>">
+      <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden">
+        <%= navigation_menu_heading %>
+      </h2>
+      <button
+        aria-controls="super-navigation-menu"
+        aria-expanded="true"
+        aria-label="<%= hide_navigation_menu_text %>"
+        class="gem-c-layout-super-navigation-header__navigation-top-toggle-button"
+        data-text-for-hide="<%= hide_navigation_menu_text %>"
+        data-text-for-show="<%= show_navigation_menu_text %>"
+        data-toggle-desktop-group="hidden"
+        data-toggle-mobile-group="top"
+        data-tracking-key="menu"
+        hidden
+        id="super-navigation-menu-toggle"
+        type="button"
+      >
+        Menu
+      </button>
+      <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__navigation-items">
+        <% navigation_links.each_with_index do | link, index | %>
+          <%
+            has_children = (link[:menu_contents].present? or link[:footer_links].present?)
+            li_classes = %w[gem-c-layout-super-navigation-header__navigation-item]
+            li_classes << "gem-c-layout-super-navigation-header__navigation-item--with-children" if has_children
+            unique_id = SecureRandom.hex(4)
+            show_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => link[:label])
+            hide_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => link[:label])
+            tracking_label = link[:label].downcase.gsub(/\s+/, "")
+          %>
+          <%= tag.li class: li_classes do %>
+            <a class="gem-c-layout-super-navigation-header__navigation-item-link" href="<%= link[:href] %>">
               <%= link[:label] %>
             </a>
-            <% if link[:menu_contents].present? or link[:footer_links].present? %>
-              <div class="gem-c-layout-super-navigation-header__dropdown-menu">
-                <% if link[:menu_contents].present? %>
-                  <ul class="govuk-list">
-                    <% link[:menu_contents].each do | item | %>
-                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
-                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
-                          <%= item[:label] %>
-                        </a>
-                        <%= tag.p item[:description], class: "govuk-body-s gem-c-layout-super-navigation-header__dropdown-list-item-description" if item[:description].present? %>
-                      </li>
+            <% if has_children %>
+              <button
+                aria-controls="super-navigation-menu__section-<%= unique_id %>"
+                aria-expanded="false"
+                aria-label="<%= show_menu_text %>"
+                class="gem-c-layout-super-navigation-header__navigation-second-toggle-button"
+                data-text-for-hide="<%= hide_menu_text %>"
+                data-text-for-show="<%= show_menu_text %>"
+                data-toggle-desktop-group="top"
+                data-toggle-mobile-group="second"
+                data-tracking-key="<%= tracking_label %>"
+                hidden
+                id="super-navigation-menu__section-<%= unique_id %>-toggle"
+                type="button"
+              >
+                <%= link[:label] %>
+              </button>
+              <div
+                hidden
+                class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
+                id="super-navigation-menu__section-<%= unique_id %>"
+              >
+                <div class="govuk-width-container">
+                  <div class="govuk-grid-row">
+                    <div class="govuk-grid-column-one-third-from-desktop">
+                      <% if link[:description].present? %>
+                        <p class="govuk-body-l gem-c-layout-super-navigation-header__menu-description">
+                          <%= link[:description] %>
+                        </p>
+                      <% end %>
+                    </div>
+                    <% if link[:menu_contents].present? %>
+                      <div class="govuk-grid-column-two-thirds-from-desktop">
+                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items">
+                            <% link[:menu_contents].each do | item | %>
+                              <%
+                                has_description = item[:description].present?
+                                link_classes = %w[govuk-link gem-c-layout-super-navigation-header__navigation-second-item-link]
+                                link_classes << "gem-c-layout-super-navigation-header__navigation-second-item-link--with-description" if has_description
+                              %>
+                              <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                                <%= link_to item[:label], item[:href], {
+                                  class: link_classes,
+                                  data: {
+                                    module: "gem-track-click",
+                                    track_action: "#{tracking_label}Link",
+                                    track_category: "headerClicked",
+                                    track_label: item[:href],
+                                    track_dimension: item[:label],
+                                    track_dimension_index: "29",
+                                  }
+                                } %>
+                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0" if has_description %>
+                              </li>
+                            <% end %>
+                          </ul>
+                      </div>
                     <% end %>
-                  </ul>
-                <% end %>
-                <% if link[:footer_links].present? %>
-                  <ul class="govuk-list">
-                    <% link[:footer_links].each do | item | %>
-                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
-                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
-                          <%= item[:label] %>
-                        </a>
-                      </li>
-                    <% end %>
-                  </ul>
-                <% end %>
+                  </div>
+                  <% if link[:footer_links].present? %>
+                    <div class="govuk-grid-row">
+                      <div class="govuk-grid-column-full">
+                        <div class="gem-c-layout-super-navigation-header__navigation-second-footer">
+                          <div class="govuk-grid-row">
+                            <ul class="gem-c-layout-super-navigation-header__navigation-second-footer-list">
+                              <% link[:footer_links].each do | item | %>
+                                <li class="gem-c-layout-super-navigation-header__navigation-second-footer-item">
+                                  <%= link_to item[:label], item[:href], {
+                                    class: [
+                                      "govuk-link",
+                                      "gem-c-layout-super-navigation-header__navigation-second-footer-link",
+                                    ],
+                                    data: {
+                                      module: "gem-track-click",
+                                      track_action: "#{tracking_label}Link",
+                                      track_cateogry: "headerClicked",
+                                      track_label: item[:href],
+                                      track_dimension: item[:label],
+                                      track_dimension_index: "29",
+                                    }
+                                  } %>
+                                </li>
+                              <% end %>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  <% end %>
+                </div>
               </div>
             <% end %>
-          </li>
+          <% end %>
         <% end %>
-        <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item gem-c-layout-super-navigation-header__item--search">
-          <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link gem-c-layout-super-navigation-header__item-link--search" href="/search">
-            <span class="gem-c-layout-super-navigation-header__item-link-text--search"><%= search_text %></span>
-            <svg class="gem-c-layout-super-navigation-header__item-link-icon--search" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-              <circle cx="10.0161" cy="10.0161" r="8.51613" stroke="currentColor" stroke-width="3" />
-              <line x1="15.8668" y1="16.3587" x2="25.4475" y2="25.9393" stroke="currentColor" stroke-width="3" />
+      </ul>
+
+      <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"
+      >
+        <span class="govuk-visually-hidden">
+          <%= search_text %>
+        </span>
+        <svg
+          class="gem-c-layout-super-navigation-header__search-toggle-button-link-icon"
+          width="27"
+          height="27"
+          viewBox="0 0 27 27"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <circle
+            cx="10.0161"
+            cy="10.0161"
+            r="8.51613"
+            stroke="currentColor"
+            stroke-width="3" />
+          <line
+            x1="15.8668"
+            y1="16.3587"
+            x2="25.4475"
+            y2="25.9393"
+            stroke="currentColor"
+            stroke-width="3" />
+        </svg>
+      </button>
+
+      <div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">
+        <h3 class="govuk-visually-hidden">
+          <%= navigation_search_subheading %>
+        </h3>
+        <div class="gem-c-layout-super-navigation-header__search-item">
+          <a class="gem-c-layout-super-navigation-header__search-item-link" href="/search">
+            <span class="gem-c-layout-super-navigation-header__search-item-link-text">
+              <%= search_text %>
+            </span>
+            <svg
+              class="gem-c-layout-super-navigation-header__search-item-link-icon"
+              width="27"
+              height="27"
+              viewBox="0 0 27 27"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <circle
+                cx="10.0161"
+                cy="10.0161"
+                r="8.51613"
+                stroke="currentColor"
+                stroke-width="3" />
+              <line
+                x1="15.8668"
+                y1="16.3587"
+                x2="25.4475"
+                y2="25.9393"
+                stroke="currentColor"
+                stroke-width="3" />
             </svg>
           </a>
-          <div class="gem-c-layout-super-navigation-header__dropdown-menu">
-            <form id="search" action="/search" method="get" role="search" aria-label="Site-wide">
-              <%= render "govuk_publishing_components/components/search", {
-                inline_label: false,
-                label_text: raw("<h2 class=\"govuk-heading-m\">#{search_text}</h2>"),
-                size: "large",
-              } %>
-            </form>
-            <h2 class="govuk-heading-m"><%= popular_links_heading %></h2>
-            <ul class="govuk-list">
-              <% popular_links.each do | popular_link | %>
-                <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
-                  <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= popular_link[:href] %>">
-                    <%= popular_link[:label] %>
-                  </a>
-                </li>
-              <% end %>
-            </ul>
+        </div>
+
+        <div class="govuk-width-container gem-c-layout-super-navigation-header__search-and-popular">
+          <div class="govuk-grid-row">
+            <div class="govuk-grid-column-full">
+              <form
+                class="gem-c-layout-super-navigation-header__search-form"
+                id="search"
+                action="/search"
+                method="get"
+                role="search"
+                aria-label="Site-wide"
+              >
+                <%= render "govuk_publishing_components/components/search", {
+                  inline_label: false,
+                  label_size: "m",
+                  label_text: search_text,
+                  size: "large",
+                  data_attributes: {
+                    track_category: "headerClicked",
+                    track_action: "searchSubmitted",
+                    track_label: "/search/all",
+                    track_dimension: t("components.search_box.label"),
+                    track_dimension_index: 29,
+                  },
+                } %>
+              </form>
+            </div>
           </div>
-        </li>
-      </ul>
+          <div class="govuk-grid-row">
+            <div class="govuk-grid-column-full">
+              <h3 class="govuk-heading-m"><%= popular_links_heading %></h3>
+              <ul class="govuk-list">
+                <% popular_links.each do | popular_link | %>
+                  <li class="gem-c-layout-super-navigation-header__popular-item">
+                    <a class="govuk-link gem-c-layout-super-navigation-header__popular-link"
+                      href="<%= popular_link[:href] %>"
+                      data-module="gem-track-click"
+                      data-track-action="popularLink"
+                      data-track-category="headerClicked"
+                      data-track-label="<%= popular_link[:href] %>"
+                      data-track-dimension="<%= popular_link[:label] %>"
+                      data-track-dimension-index="29">
+                      <%= popular_link[:label] %>
+                    </a>
+                  </li>
+                <% end %>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
     </nav>
   </div>
 </header>