govuk_publishing_components 34.0.0 → 34.1.1

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

@@ -2,7 +2,7 @@
   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")
@@ -65,140 +65,93 @@
       <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="<%= {
-          "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
+
+      <%
+        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+/, "")
+      %>
+
+      <%= 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>
-      </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",
-                }
-              } 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">
+      <% 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">
+
+                  <% navigation_links_columns.each_with_index do | 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 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
+                              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: [
-                                  "govuk-link",
-                                  "gem-c-layout-super-navigation-header__navigation-second-footer-link",
-                                ],
+                                class: link_classes,
                                 data: {
                                   track_action: "#{tracking_label}Link",
                                   track_category: "headerClicked",
@@ -207,18 +160,16 @@
                                   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 %>
+                        <% end %>
+                      </ul>
                     </div>
-                  </div>
+                  <% end %>
                 </div>
               </div>
-            <% end %>
-          <% end %>
+            </div>
         <% end %>
-      </ul>
 
       <button
         aria-controls="super-search-menu"
@@ -237,8 +188,8 @@
           "event_name": "select_content",
           "type": "header menu bar",
           "text": "Search",
-          "index": navigation_links.length + 2,
-          "index_total": navigation_links.length + 2,
+          "index": 2,
+          "index_total": 2,
           "section": "Search"
         }.to_json %>"
       >
@@ -265,7 +216,7 @@
         </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">
+            <span class="govuk-visually-hidden">
               <%= search_text %>
             </span>
             <svg

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

@@ -59,3 +59,9 @@ examples:
       html_for: "id-radio"
       hint_id: "id-radio"
       hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+  with_id:
+    description: 
+    data:
+      text: "Label with an ID"
+      id: "id-for-the-label"
+      html_for: "id-that-matches-input-6"

data/config/locales/ar.yml

@@ -112,7 +112,10 @@ ar:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/az.yml

@@ -109,7 +109,10 @@ az:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/be.yml

@@ -115,7 +115,10 @@ be:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/bg.yml

@@ -113,7 +113,10 @@ bg:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/bn.yml

@@ -110,7 +110,10 @@ bn:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/cs.yml

@@ -114,7 +114,10 @@ cs:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/cy.yml

@@ -113,7 +113,10 @@ cy:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/da.yml

@@ -110,7 +110,10 @@ da:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/de.yml

@@ -113,7 +113,10 @@ de:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/dr.yml

@@ -111,7 +111,10 @@ dr:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/el.yml

@@ -109,7 +109,10 @@ el:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/en.yml

@@ -162,10 +162,12 @@ en:
       menu_toggle_label:
         hide: Hide %{label} menu
         show: Show %{label} menu
-      navigation_links:
-      - label: Topics
+      navigation_link:
         href: "/browse"
-        description: Find information and services
+        label: Menu
+      navigation_links_columns:
+      - label: Topics
+        size: 2
         menu_contents:
         - label: Benefits
           href: "/browse/benefits"
@@ -202,8 +204,7 @@ en:
         - label: Working, jobs and pensions
           href: "/browse/working"
       - label: Government activity
-        href: "/search/news-and-communications"
-        description: Search for a department and find out what the government is doing
+        column_size: 1
         menu_contents:
         - label: Departments
           href: "/government/organisations"
@@ -223,11 +224,6 @@ en:
         - label: Transparency
           href: "/search/transparency-and-freedom-of-information-releases"
           description: Data, Freedom of Information releases and corporate reports
-        footer_links:
-        - label: How government works
-          href: "/government/how-government-works"
-        - label: Get involved
-          href: "/government/get-involved"
       navigation_menu_heading: Navigation menu
       navigation_search_heading: Search and popular pages
       navigation_search_subheading: Search

data/config/locales/es-419.yml

@@ -109,7 +109,10 @@ es-419:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/es.yml

@@ -109,7 +109,10 @@ es:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/et.yml

@@ -112,7 +112,10 @@ et:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/fa.yml

@@ -108,7 +108,10 @@ fa:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/fi.yml

@@ -111,7 +111,10 @@ fi:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/fr.yml

@@ -109,7 +109,10 @@ fr:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/gd.yml

@@ -111,7 +111,10 @@ gd:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/gu.yml

@@ -109,7 +109,10 @@ gu:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/he.yml

@@ -109,7 +109,10 @@ he:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/hi.yml

@@ -109,7 +109,10 @@ hi:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/hr.yml

@@ -110,7 +110,10 @@ hr:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/hu.yml

@@ -112,7 +112,10 @@ hu:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:

data/config/locales/hy.yml

@@ -113,7 +113,10 @@ hy:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading: