govuk_publishing_components 32.1.0 → 35.0.0

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

@@ -1,8 +1,10 @@
 <%
+  add_gem_component_stylesheet("layout-super-navigation-header")
+
   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")
-  navigation_links = t("components.layout_super_navigation_header.navigation_links")
+  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")
   navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
@@ -14,48 +16,65 @@
   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")
+
+  navigation_links_length = 1 # GOVUK Logo makes this start from 1
+  navigation_links_columns.each do | column |
+    navigation_links_length = navigation_links_length + column[:menu_contents].length
+  end
+  navigation_links_length = navigation_links_length + popular_links.length
 %>
-<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click ga4-event-tracker" data-track-links-only data-ga4-expandable>
-  <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-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 %>"
-      >
-        <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"
-          >
-            <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"
+<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>
+  <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": 0,
+            "index_total": navigation_links_length
+          }.to_json %>"
+        >
+          <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"
             >
-            </path>
-          </svg>
-          <!--<![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 %>
+              <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>
+            <!--<![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>
           </span>
-        </span>
-      </a>
+        </a>
+      </div>
     </div>
     <nav
       aria-labelledby="super-navigation-menu-heading"
@@ -65,244 +84,189 @@
       <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"
-        data-ga4="<%= {
-          "event_name": "select_content",
-          "type": "header menu bar",
-          "text": "Menu",
-          "index": 1,
-          "index_total": navigation_links.length + 2,
-          "section": "Menu"
-        }.to_json %>"
-      >
-        <span class="gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner">
-          Menu
-        </span>
-      </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 %>
-            <div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
-              <%= link_to link[:href], {
-                class: "gem-c-layout-super-navigation-header__navigation-item-link",
-                data: {
-                  track_action: "#{tracking_label}Link",
-                  track_category: "headerClicked",
-                  track_label: link[:href],
-                  track_dimension: link[:label],
-                  track_dimension_index: "29",
+
+      <%
+        link = t("components.layout_super_navigation_header.navigation_link")
+        unique_id = SecureRandom.hex(4)
+        show_menu_text = show_navigation_menu_text
+        hide_menu_text = hide_navigation_menu_text
+        tracking_label = link[:label].downcase.gsub(/\s+/, "")
+      %>
+
+      <div class="govuk-width-container gem-c-layout-super-navigation-header__button-width-container">
+        <div class="gem-c-layout-super-navigation-header__button-container">
+          <div class="gem-c-layout-super-navigation-header__navigation-item">
+            <%= link_to link[:href], {
+              class: "gem-c-layout-super-navigation-header__navigation-item-link",
+              data: {
+                track_action: "#{tracking_label}Link",
+                track_category: "headerClicked",
+                track_label: link[:href],
+                track_dimension: link[:label],
+                track_dimension_index: "29",
+              }
+            } do %>
+              <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
+                <%= link[:label] %>
+              </span>
+            <% end %>
+
+            <%= content_tag(:button, {
+              aria: {
+                controls: "super-navigation-menu-#{unique_id}",
+                expanded: false,
+                label: show_menu_text,
+              },
+              class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button",
+              data: {
+                text_for_hide: hide_menu_text,
+                text_for_show: show_menu_text,
+                toggle_desktop_group: "top",
+                toggle_mobile_group: "top",
+                tracking_key: tracking_label,
+                ga4_event: {
+                  event_name: "select_content",
+                  type: "header menu bar",
+                  text: link[:label],
+                  index: 1,
+                  index_total: 2,
+                  section: link[:label]
                 }
-              } do %>
-                <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
-                  <%= link[:label] %>
-                </span>
-              <% end %>
-              <% if has_children %>
-                <%= content_tag(:button, {
-                  aria: {
-                    controls: "super-navigation-menu__section-#{unique_id}",
-                    expanded: false,
-                    label: show_menu_text,
-                  },
-                  class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
-                  data: {
-                    text_for_hide: hide_menu_text,
-                    text_for_show: show_menu_text,
-                    toggle_desktop_group: "top",
-                    toggle_mobile_group: "second",
-                    tracking_key: tracking_label,
-                    ga4: {
-                      event_name: "select_content",
-                      type: "header menu bar",
-                      text: link[:label],
-                      index: index + 2,
-                      index_total: navigation_links.length + 2,
-                      section: link[:label]
-                    }
-                  },
-                  hidden: true,
-                  id: "super-navigation-menu__section-#{unique_id}-toggle",
-                  type: "button",
-                }) do %>
-                  <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner" %>
-                <% end %>
-              <% end %>
-            </div>
-            <% if has_children %>
-              <div
-                hidden
-                class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
-                id="super-navigation-menu__section-<%= unique_id %>"
-              >
-                <div class="govuk-width-container gem-c-layout-super-navigation-header__width-container">
-                  <div class="govuk-grid-row">
-                    <div class="govuk-grid-column-one-third-from-desktop">
-                      <% if link[:description].present? %>
-                        <h3 class="govuk-body-l gem-c-layout-super-navigation-header__menu-description">
-                          <%= link[:description] %>
-                        </h3>
-                      <% end %>
-                    </div>
-                    <div class="govuk-grid-column-two-thirds-from-desktop">
-                      <% if link[:menu_contents].present? %>
-                          <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
-                            <% 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: {
-                                    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: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
-                              </li>
-                            <% end %>
-                          </ul>
-                      <% end %>
-                      <% if link[:footer_links].present? %>
-                        <hr class="gem-c-layout-super-navigation-header__navigation-second-footer-break govuk-section-break govuk-section-break--visible">
-                        <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: {
-                                  track_action: "#{tracking_label}Link",
-                                  track_category: "headerClicked",
-                                  track_label: item[:href],
-                                  track_dimension: item[:label],
-                                  track_dimension_index: "29",
-                                }
-                              } %>
-                            </li>
-                          <% end %>
-                        </ul>
-                      <% end %>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              },
+              hidden: true,
+              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" %>
             <% end %>
-          <% end %>
-        <% end %>
-      </ul>
+          </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": 2,
+                "index_total": 2,
+                "section": "Search"
+              }.to_json %>"
+            >
+              <span class="govuk-visually-hidden">
+                <%= search_text %>
+              </span>
+              <%=
+                render "govuk_publishing_components/components/search/search_icon", {
+                  classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
+                }
+              %>
+              <span
+                aria-hidden="true"
+                class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
+                focusable="false"
+              >
+                &times;
+              </span>
+            </button>
+
+            <a class="gem-c-layout-super-navigation-header__search-item-link" href="/search">
+              <span class="govuk-visually-hidden">
+                <%= search_text %>
+              </span>
+              <%=
+                render "govuk_publishing_components/components/search/search_icon", {
+                  classes: %w[gem-c-layout-super-navigation-header__search-item-link-icon],
+                }
+              %>
+            </a>
+          </div>
+        </div>
+      </div>
 
-      <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_name": "select_content",
-          "type": "header menu bar",
-          "text": "Search",
-          "index": navigation_links.length + 2,
-          "index_total": navigation_links.length + 2,
-          "section": "Search"
-        }.to_json %>"
+      <div
+        id="super-navigation-menu-<%= unique_id %>" hidden
+        class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
       >
-        <span class="govuk-visually-hidden">
-          <%= search_text %>
-        </span>
-        <%=
-          render "govuk_publishing_components/components/search/search_icon", {
-            classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
-          }
-        %>
-        <span
-          aria-hidden="true"
-          class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
-          focusable="false"
-        >
-          &times;
-        </span>
-      </button>
+        <div class="govuk-width-container">
+          <div class="govuk-grid-row gem-c-layout-super-navigation-header__navigation-items">
 
-      <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>
+            <% navigation_links_columns.each_with_index do | column, column_index | %>
+              <%
+                case column[:size]
+                when 2
+                  width_class = "govuk-grid-column-two-thirds-from-desktop"
+                when 3
+                  width_class = "govuk-grid-column-full-from-desktop"
+                else
+                  width_class = "govuk-grid-column-one-third-from-desktop"
+                end
+              %>
+
+              <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.sub(" ", "-") %>">
+                <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
+                  <%= column[:label] %>
+                </h3>
+                <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.sub(" ", "-") %>">
+                  <% column[:menu_contents].each_with_index do | item, index | %>
+                      <%
+                        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
+                        tracking_label = column[:label].downcase.gsub(/\s+/, "")
+                      %>
+                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                        <%= link_to item[:label], item[:href], {
+                          class: link_classes,
+                          data: {
+                            track_action: "#{tracking_label}Link",
+                            track_category: "headerClicked",
+                            track_label: item[:href],
+                            track_dimension: item[:label],
+                            track_dimension_index: "29",
+                            ga4_link: {
+                              "event_name": "navigation",
+                              "type": "header menu bar",
+                              "index": "1.#{column_index + 1}.#{index + 1}",
+                              "index_total": navigation_links_length,
+                              "section": column[:label],
+                            }
+                          }
+                        } %>
+                        <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
+                      </li>
+                  <% end %>
+                </ul>
+              </div>
+            <% end %>
+          </div>
         </div>
+      </div>
 
-        <div class="govuk-width-container gem-c-layout-super-navigation-header__search-and-popular">
+      <div id="super-search-menu" hidden class="gem-c-layout-super-navigation-header__navigation-dropdown-menu">
+        <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 %>
+          </h3>
           <div class="govuk-grid-row">
             <div class="govuk-grid-column-full">
               <form
                 class="gem-c-layout-super-navigation-header__search-form"
                 id="search"
+                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
                 action="/search"
                 method="get"
                 role="search"
@@ -328,7 +292,7 @@
             <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 | %>
+                <% popular_links.each_with_index do | popular_link, index | %>
                   <li class="gem-c-layout-super-navigation-header__popular-item">
                     <%= link_to popular_link[:label], popular_link[:href], {
                       class: [
@@ -341,6 +305,13 @@
                         track_label: popular_link[:href],
                         track_dimension: popular_link[:label],
                         track_dimension_index: "29",
+                        ga4_link: {
+                          "event_name": "navigation",
+                          "type": "header menu bar",
+                          "index": "2.2.#{index + 1}",
+                          "index_total": navigation_links_length,
+                          "section": popular_links_heading,
+                        }
                       }
                     } %>
                   </li>

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("lead-paragraph")
+
   text ||= ""
   inverse ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("metadata")
+
   from ||= []
   from = Array(from)
 

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("modal-dialogue")
+
   id ||= "modal-dialogue-#{SecureRandom.hex(4)}"
   wide ||= false
   data_attributes = {}

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("notice")
+
   title ||= false
   description_text ||= false
   description_govspeak ||= false

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("organisation-logo")
+
   logo_helper = GovukPublishingComponents::Presenters::OrganisationLogoHelper.new(local_assigns)
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(organisation[:brand])
 

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("panel")
+
   description ||= false
   prepend ||= false
   append ||= false

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

@@ -1,4 +1,6 @@
 <%
+add_gem_component_stylesheet("phase-banner")
+
 app_name ||= nil
 phase ||= nil
 message ||= nil
@@ -8,7 +10,7 @@ unless message.present?
   if phase == "beta"
     message = raw("This part of GOV.UK is being rebuilt &ndash; <a class=\"govuk-link\" href=\"/help/beta\">find out what beta means</a>")
   elsif phase == "alpha"
-    message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/phases/ideal-alphas\">find out what alpha means</a>")
+    message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/agile-delivery/how-the-alpha-phase-works\">find out what alpha means</a>")
   end
 end
 

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

@@ -1,4 +1,9 @@
-<% if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page) %>
+<%
+  add_gem_component_stylesheet("previous-and-next-navigation")
+
+  if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page)
+%>
+  
   <nav
     class="govuk-pagination govuk-pagination--block"
     role="navigation"