RubyGems - govuk_publishing_components - Versions diffs - 34.10.1 → 34.12.0 - Mend

govuk_publishing_components 34.10.1 → 34.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

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

@@ -22,55 +22,57 @@
   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 ga4-link-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 %>"
-        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
-              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"
+  <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"
@@ -89,193 +91,180 @@
         tracking_label = link[:label].downcase.gsub(/\s+/, "")
       %>
-      <%= 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 %>
+      <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]
-          }
-        },
-        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 %>
-        <%= tag.div class: "gem-c-layout-super-navigation-header__navigation-items" do %>
-            <div
-              id="super-navigation-menu-<%= unique_id %>" hidden
-              class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
-            >
-              <div class="gem-c-layout-super-navigation-header__width-container">
-                <div class="govuk-grid-row">
+            <%= 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]
+                }
+              },
+              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 %>
+          </div>
-                  <% 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="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>
-                    <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>
-        <% end %>
+            <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="<%= {
-          "event_name": "select_content",
-          "type": "header menu bar",
-          "text": "Search",
-          "index": 2,
-          "index_total": 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="govuk-visually-hidden">
-              <%= 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"

data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml CHANGED Viewed

@@ -2,7 +2,7 @@ name: "Breadcrumbs"
 description: "Navigational breadcrumbs, showing page hierarchy"
 body: |
   Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
-  Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
+  Links are tracked, but in Universal Analytics, links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
   We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
 shared_accessibility_criteria:

data/app/views/govuk_publishing_components/components/docs/related_navigation.yml CHANGED Viewed

@@ -333,3 +333,23 @@ examples:
             - title: UK-China High-Level People to People Dialogue 2017
               base_path: /government/topical-events/uk-china-high-level-people-to-people-dialogue-2017
               document_type: topical_event
+          world_locations:
+            - title: Algeria
+              base_path: /world/algeria/news
+            - title: Austria
+              base_path: /world/austria/news
+            - title: Belarus
+              base_path: /world/belarus/news
+            - title: Belgium
+              base_path: /world/belgium/news
+            - title: Bolivia
+              base_path: /world/bolivia/news
+            - title: Brazil
+              base_path: /world/brazil/news
+            - title: Canada
+              base_path: /world/canada/news
+            - title: Chile
+              base_path: /world/chile/news
+            - title: China
+              base_path: /world/China/news

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb CHANGED Viewed

@@ -4,14 +4,18 @@
      data-module="gem-toggle">
   <% if section_title === "related_items" %>
-   <% heading_text = related_nav_helper.component_title %>
+   <%
+      heading_text = related_nav_helper.construct_section_text("related_content", true)
+      ga4_heading_text = related_nav_helper.construct_ga4_section_text("related_content")
+   %>
   <% else %>
     <%=
       heading_class = related_nav_helper.section_css_class("gem-c-related-navigation__sub-heading", section_title)
       heading_data = { 'track-count' => related_nav_helper.section_data_track_count(:related_item_section) }
       heading_id = "related-nav-#{section_title}-#{random}"
       heading_level = related_nav_helper.section_heading_level
-      heading_text = related_nav_helper.construct_section_heading(section_title)
+      heading_text = related_nav_helper.construct_section_text(section_title, true)
+      ga4_heading_text = related_nav_helper.construct_ga4_section_text(section_title)
       content_tag(heading_level, id: heading_id, class: heading_class, data: heading_data) do
         heading_text
@@ -31,7 +35,7 @@
           event_name: "navigation",
           type: "related content",
           index: "#{section_index}.#{index}",
-          section: heading_text,
+          section: ga4_heading_text,
         } if ga4_tracking
         link_element = link_to(
           link[:text],
@@ -41,7 +45,7 @@
           lang: shared_helper.t_locale_check(link[:locale]),
           data: {
             track_category: 'relatedLinkClicked',
-            track_action: "#{section_index}.#{index} #{related_nav_helper.construct_section_heading(section_title) || t('components.related_navigation.related_content')}",
+            track_action: "#{section_index}.#{index} #{related_nav_helper.construct_section_text(section_title, true) || t('components.related_navigation.related_content')}",
             track_label: link[:path],
             track_options: {
               dimension28: links.length.to_s,
@@ -59,17 +63,23 @@
     <% end %>
     <% if links.length > section_link_limit %>
-      <li class="gem-c-related-navigation__link toggle-wrap">
-        <a href="#"
-          class="gem-c-related-navigation__toggle"
-          data-controls="toggle_<%= section_title %>"
-          data-expanded="false"
-          data-toggled-text="<%= t("common.toggle_less") %>">
+      <%
+        classes = "gem-c-related-navigation__link toggle-wrap"
+        data_attributes_li = { module: "ga4-event-tracker" } if ga4_tracking
+        data_attributes_link = {
+          controls: "toggle_#{section_title}",
+          expanded: "false",
+          toggled_text: t("common.toggle_less")
+        }
+        data_attributes_link[:ga4_event] = { "event_name": "select_content", "type": "related content" } if ga4_tracking
+      %>
+      <%= tag.li(class: classes, data: data_attributes_li) do %>
+        <%= link_to("#", class: "gem-c-related-navigation__toggle", data: data_attributes_link) do %>
           <%= t("common.toggle_more",
             show: t('common.show'),
-            number: related_nav_helper.remaining_link_count(links)) %>
-        </a>
-      </li>
+            number: related_nav_helper.remaining_link_count(links)) %>
+        <% end %>
+      <% end %>
       <li class="gem-c-related-navigation__link gem-c-related-navigation__link--truncated-links">
         <span id="toggle_<%= section_title %>" class="gem-c-related-navigation__toggle-more js-hidden">

data/config/locales/en.yml CHANGED Viewed

@@ -293,7 +293,7 @@ en:
         - label: 'Homes for Ukraine: record your interest'
           href: https://www.gov.uk/register-interest-homes-ukraine
         - label: Find out about the UK’s response
-          href: https://ukstandswithukraine.campaign.gov.uk/
+          href: https://www.gov.uk/government/topical-events/russian-invasion-of-ukraine-uk-government-response
         title: Invasion of Ukraine
       world_locations: World locations
     search_box:

data/lib/govuk_publishing_components/presenters/breadcrumbs.rb CHANGED Viewed

@@ -58,6 +58,12 @@ module GovukPublishingComponents
             dimension28: breadcrumbs_length.to_s,
             dimension29: crumb[:title],
           },
+          ga4_link: {
+            event_name: "navigation",
+            type: "breadcrumbs",
+            index: index.to_s,
+            index_total: breadcrumbs_length.to_s,
+          },
         }
         is_homepage = crumb[:url] == "/"

data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb CHANGED Viewed

@@ -53,20 +53,25 @@ module GovukPublishingComponents
         end
       end
-      def construct_section_heading(section_title)
-        unless section_title == "related_items"
+      def construct_section_text(section, underscores_to_spaces)
+        unless section == "related_items"
+          defaults = [I18n.t("components.related_navigation.#{section}")]
+          defaults << section.tr("_", " ") if underscores_to_spaces
           I18n.t(
-            "components.related_#{@context}_navigation." + section_title,
-            default: [
-              I18n.t("components.related_navigation.#{section_title}"),
-              section_title.tr("_", " "),
-            ],
+            "components.related_#{@context}_navigation.#{section}",
+            default: defaults,
           )
         end
       end
-      def component_title
-        I18n.t("components.related_#{@context}_navigation.related_content", default: I18n.t("components.related_navigation.related_content"))
+      def construct_ga4_section_text(section)
+        # Force English so we can still understand what is being tracked if translated.
+        underscores_to_spaces = true
+        underscores_to_spaces = false if section == "related_content"
+        I18n.with_locale("en") do
+          construct_section_text(section, underscores_to_spaces)
+        end
       end
       def section_css_class(css_class, section_title, link: {}, link_is_inline: false)