govuk_publishing_components 60.2.0 → 61.0.0

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

@@ -33,8 +33,6 @@
 
   header_link_classes = %w(govuk-header__link govuk-header__link--homepage)
 
-  button_container_classes = %w(gem-c-layout-super-navigation-header__button-container)
-
   dropdown_menu_classes = %w(gem-c-layout-super-navigation-header__navigation-dropdown-menu)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -42,254 +40,241 @@
   component_helper.add_data_attribute({ module: "ga4-event-tracker ga4-link-tracker", ga4_expandable: "" })
 %>
 <%= tag.header(**component_helper.all_attributes) do %>
-  <div class="gem-c-layout-super-navigation-header__container govuk-clearfix">
-    <div class="govuk-width-container transparent-bottom-border">
-      <%= content_tag(:div, {
-        class: header_logo_classes,
-      }) do %>
-        <%= link_to logo_link, {
-          class: header_link_classes,
-          data: {
-            "ga4-link": {
-              "event_name": "navigation",
-              "type": "header menu bar",
-              "external": "false",
-              "text": "GOV.UK",
-              "section": "Logo",
-              "index_link": 1,
-              "index_section": 0,
-              "index_section_count": 2,
-              "index_total": 1,
-            }.to_json,
-          },
-          id: "logo",
-          aria: {
-            label: logo_link_title,
-          },
-        } do %>
-          <%= render "govuk_publishing_components/components/govuk_logo/govuk_logo" %>
-        <% end %>
+<div class="gem-c-layout-super-navigation-header__container govuk-width-container">
+  <nav
+    aria-labelledby="super-navigation-menu-heading"
+    class="gem-c-layout-super-navigation-header__content"
+    data-module="super-navigation-mega-menu">
+    <%= content_tag(:div, {
+      class: header_logo_classes,
+    }) do %>
+      <%= link_to logo_link, {
+        class: header_link_classes,
+        data: {
+          "ga4-link": {
+            "event_name": "navigation",
+            "type": "header menu bar",
+            "external": "false",
+            "text": "GOV.UK",
+            "section": "Logo",
+            "index_link": 1,
+            "index_section": 0,
+            "index_section_count": 2,
+            "index_total": 1,
+          }.to_json,
+        },
+        id: "logo",
+        aria: {
+          label: logo_link_title,
+        },
+      } do %>
+        <%= render "govuk_publishing_components/components/govuk_logo/govuk_logo" %>
       <% end %>
-    </div>
-    <nav
-      aria-labelledby="super-navigation-menu-heading"
-      class="gem-c-layout-super-navigation-header__content govuk-!-display-none-print"
-      data-module="super-navigation-mega-menu">
-      <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden">
-        <%= navigation_menu_heading %>
-      </h2>
+    <% end %>
+    <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden">
+      <%= navigation_menu_heading %>
+    </h2>
 
-      <%
-        link = t("components.layout_super_navigation_header.navigation_link")
-        show_menu_text = show_navigation_menu_text
-        hide_menu_text = hide_navigation_menu_text
-      %>
+    <%
+      link = t("components.layout_super_navigation_header.navigation_link")
+      show_menu_text = show_navigation_menu_text
+      hide_menu_text = hide_navigation_menu_text
+    %>
 
-      <div class="govuk-width-container gem-c-layout-super-navigation-header__button-width-container">
-        <%= content_tag(:div, {
-          class: button_container_classes,
+    <div class="gem-c-layout-super-navigation-header__navigation-item">
+      <%= link_to link[:href], {
+        class: item_link_classes,
+      } do %>
+        <% content_tag(:span, {
+          class: item_link_inner_classes,
         }) do %>
-          <div class="gem-c-layout-super-navigation-header__navigation-item">
-            <%= link_to link[:href], {
-              class: item_link_classes,
-            } do %>
-              <% content_tag(:span, {
-                class: item_link_inner_classes,
-              }) do %>
-                <%= link[:label] %>
-              <% end %>
-            <% end %>
+          <%= link[:label] %>
+        <% end %>
+      <% end %>
 
-            <%= content_tag(:button, {
-              aria: {
-                controls: "super-navigation-menu",
-                expanded: false,
-                label: show_menu_text,
-              },
-              class: top_toggle_button_classes,
-              data: {
-                text_for_hide: hide_menu_text,
-                text_for_show: show_menu_text,
-                toggle_desktop_group: "top",
-                toggle_mobile_group: "top",
-                ga4_event: {
-                  event_name: "select_content",
-                  type: "header menu bar",
-                  text: link[:label],
-                  index_section: 1,
-                  index_section_count: 2,
-                  section: link[:label],
-                },
-              },
-              hidden: true,
-              id: "super-navigation-menu-toggle",
-              type: "button",
-            }) do %>
-              <%= tag.span link[:label], class: top_toggle_button_inner_classes %>
-            <% end %>
-          </div>
+      <%= content_tag(:button, {
+        aria: {
+          controls: "super-navigation-menu",
+          expanded: false,
+          label: show_menu_text,
+        },
+        class: top_toggle_button_classes,
+        data: {
+          text_for_hide: hide_menu_text,
+          text_for_show: show_menu_text,
+          toggle_desktop_group: "top",
+          toggle_mobile_group: "top",
+          ga4_event: {
+            event_name: "select_content",
+            type: "header menu bar",
+            text: link[:label],
+            index_section: 1,
+            index_section_count: 2,
+            section: link[:label],
+          },
+        },
+        hidden: true,
+        id: "super-navigation-menu-toggle",
+        type: "button",
+      }) do %>
+        <%= tag.span link[:label], class: top_toggle_button_inner_classes %>
+      <% end %>
+    </div>
+    <%= content_tag(:div, {
+      id: "super-navigation-menu",
+      hidden: "",
+      class: dropdown_menu_classes,
+    }) do %>
+      <div class="govuk-grid-row gem-c-layout-super-navigation-header__navigation-items">
 
-          <div class="gem-c-layout-super-navigation-header__search-item">
-            <%= content_tag(:button, {
-              id: "super-search-menu-toggle",
-              class: search_toggle_button_classes,
-              aria: {
-                controls: "super-search-menu",
-                expanded: "true",
-                label: hide_search_menu_text,
-              },
-              data: {
-                "text-for-hide": hide_search_menu_text,
-                "text-for-show": show_search_menu_text,
-                "toggle-mobile-group": "top",
-                "toggle-desktop-group": "top",
-                "ga4-event": "#{{
-                  "event_name": "select_content",
-                  "type": "header menu bar",
-                  "text": "Search",
-                  "index_section": 2,
-                  "index_section_count": 2,
-                  "section": "Search",
-                  }.to_json
-                }",
-              },
-              hidden: true,
-              type: "button",
-            }) do %>
-              <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">
-                &times;
-              </span>
-            <% end %>
+        <% 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
+          %>
 
-            <%= link_to "/search", {
-              class: search_item_link_classes,
-            } do %>
-              <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],
-                }
-              %>
-            <% end %>
+          <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.gsub(" ", "-") %>">
+            <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.gsub(" ", "-") %>">
+              <% index_total = column[:menu_contents].length %>
+              <% 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
+                  %>
+                  <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                    <%= link_to item[:label], item[:href], {
+                      class: link_classes,
+                      data: {
+                        ga4_link: {
+                          "event_name": "navigation",
+                          "type": "header menu bar",
+                          "index_section": column_index + 1,
+                          "index_link": index + 1,
+                          "index_section_count": 3,
+                          "index_total": index_total,
+                          "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>
-
-      <%= content_tag(:div, {
-        id: "super-navigation-menu",
-        hidden: "",
-        class: dropdown_menu_classes,
+    <% end %>
+    <div class="gem-c-layout-super-navigation-header__search-item">
+      <%= content_tag(:button, {
+        id: "super-search-menu-toggle",
+        class: search_toggle_button_classes,
+        aria: {
+          controls: "super-search-menu",
+          expanded: "true",
+          label: hide_search_menu_text,
+        },
+        data: {
+          "text-for-hide": hide_search_menu_text,
+          "text-for-show": show_search_menu_text,
+          "toggle-mobile-group": "top",
+          "toggle-desktop-group": "top",
+          "ga4-event": "#{{
+            "event_name": "select_content",
+            "type": "header menu bar",
+            "text": "Search",
+            "index_section": 2,
+            "index_section_count": 2,
+            "section": "Search",
+            }.to_json
+          }",
+        },
+        hidden: true,
+        type: "button",
       }) do %>
-        <div class="govuk-width-container">
-          <div class="govuk-grid-row gem-c-layout-super-navigation-header__navigation-items">
-
-            <% 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.gsub(" ", "-") %>">
-                <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.gsub(" ", "-") %>">
-                  <% index_total = column[:menu_contents].length %>
-                  <% 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
-                      %>
-                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
-                        <%= link_to item[:label], item[:href], {
-                          class: link_classes,
-                          data: {
-                            ga4_link: {
-                              "event_name": "navigation",
-                              "type": "header menu bar",
-                              "index_section": column_index + 1,
-                              "index_link": index + 1,
-                              "index_section_count": 3,
-                              "index_total": index_total,
-                              "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>
+        <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">
+          &times;
+        </span>
       <% end %>
 
-      <%= content_tag(:div, {
-        id: "super-search-menu",
-        hidden: "",
-        class: dropdown_menu_classes,
-      }) do %>
-        <div class="govuk-width-container gem-c-layout-super-navigation-header__search-container gem-c-layout-super-navigation-header__search-items">
-          <h3 class="govuk-visually-hidden">
-            <%= navigation_search_subheading %>
-          </h3>
-          <div class="govuk-grid-row">
-            <div class="govuk-grid-column-full">
-              <%= tag.form(
-                class: "gem-c-layout-super-navigation-header__search-form",
-                id: "search",
-                data: {
-                  module: "ga4-search-tracker",
-                  ga4_search_type: "header menu bar",
-                  ga4_search_url: "/search/all",
-                  ga4_search_section: "Search GOV.UK",
-                  ga4_search_index_section: 3,
-                  ga4_search_index_section_count: 3,
-                },
-                action: "/search/all",
-                method: "get",
-                role: "search",
-                aria: {
-                  label: "Site-wide",
-                },
-              ) do %>
-                <%= render "govuk_publishing_components/components/search_with_autocomplete", {
-                  name: "keywords",
-                  inline_label: false,
-                  label_size: "m",
-                  label_text: search_text,
-                  label_custom_class: "gem-c-layout-super-navigation-header__search-label--large-navbar",
-                  size: "large",
-                  margin_bottom: 0,
-                  disable_corrections: true,
-                  source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join,
-                  source_key: "suggestions",
-                } %>
-              <% end %>
-            </div>
+      <%= link_to "/search", {
+        class: search_item_link_classes,
+      } do %>
+        <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],
+          }
+        %>
+      <% end %>
+    </div>
+    <%= content_tag(:div, {
+      id: "super-search-menu",
+      hidden: "",
+      class: dropdown_menu_classes,
+    }) do %>
+      <div class="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">
+            <%= tag.form(
+              class: "gem-c-layout-super-navigation-header__search-form",
+              id: "search",
+              data: {
+                module: "ga4-search-tracker",
+                ga4_search_type: "header menu bar",
+                ga4_search_url: "/search/all",
+                ga4_search_section: "Search GOV.UK",
+                ga4_search_index_section: 3,
+                ga4_search_index_section_count: 3,
+              },
+              action: "/search/all",
+              method: "get",
+              role: "search",
+              aria: {
+                label: "Site-wide",
+              },
+            ) do %>
+              <%= render "govuk_publishing_components/components/search_with_autocomplete", {
+                name: "keywords",
+                inline_label: false,
+                label_size: "m",
+                label_text: search_text,
+                label_custom_class: "gem-c-layout-super-navigation-header__search-label--large-navbar",
+                size: "large",
+                margin_bottom: 0,
+                disable_corrections: true,
+                source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join,
+                source_key: "suggestions",
+              } %>
+            <% end %>
           </div>
         </div>
-      <% end %>
-    </nav>
-  </div>
+      </div>
+    <% end %>
+  </nav>
+</div>
 <% end %>

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

@@ -31,8 +31,8 @@
           <%= tag.dl class: "govuk-summary-list" do %>
             <% rows.each do |row| %>
               <%
-                row_classes = "govuk-summary-list__row"
-                row_classes << " govuk-summary-list__row--no-actions" if row[:actions].blank?
+                row_classes = %w(govuk-summary-list__row)
+                row_classes << "govuk-summary-list__row--no-actions" if row[:actions].blank?
               %>
               <%= tag.div class: row_classes, data: row[:data] do %>
                 <%= tag.dt class: "govuk-summary-list__key" do %>

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

@@ -544,6 +544,75 @@ examples:
             </div>
           </div>
         </div>
+  contact_content_block:
+    data:
+      block: |
+        <div class="content-block content-block--contact">
+          <dl class="vcard content-block__contact-list">
+            <dt class="content-block__contact-key fn org">Get help with your application</dt>
+            <dd class="content-block__contact-value">
+              <dl class="content-block__contact-list--nested">
+                <dt class="content-block__contact-key">Address</dt>
+                <dd class="content-block__contact-value">
+                  <p class="adr">
+                    <span class="street-address"> 49 to 53 Cherry Street</span>,<br><span class="locality">London</span>,<br><span class="postal-code"> AB1 2DC </span>
+                  </p>
+                </dd>
+                <dt class="content-block__contact-key">Email</dt>
+                <dd class="content-block__contact-value">
+                  <ul class="content-block__list">
+                    <li>
+                      <a href="mailto:name@example.com" class="email">
+                        name@example.com
+                      </a>
+                    </li>
+                    <li>
+                      <p>We aim to respond within 2 working days</p>
+                    </li>
+                  </ul>
+                </dd>
+                <dt class="content-block__contact-key">Phone</dt>
+                <dd class="content-block__contact-value">
+                  <p>If you have a unique reference number, have it with you when you call.</p>
+                  <ul class="content-block__list">
+                    <li>
+                      <span>Phone: </span>
+                      <span class="tel">020 7946 0101</span>
+                    </li>
+                    <li>
+                      <span>Textphone: </span>
+                      <span class="tel">020 7946 0102</span>
+                    </li>
+                    <li>
+                      <span>Welsh language: </span>
+                      <span class="tel">020 7946 0103</span>
+                    </li>
+                  </ul>
+                  <p>Monday to Friday, 8am to 6pm<br>
+                    Saturday and Sunday, 10am to 4pm</p>
+                  <p>
+                    <a href="https://gov.uk/call-charges">
+                      Find out about call charges
+                    </a>
+                  </p>
+                </dd>
+                <dt class="content-block__contact-key">Webchat</dt>
+                <dd class="content-block__contact-value">
+                  <ul class="content-block__list">
+                    <li>
+                      <a href="http://example.com" class="url">
+                        Speak to an adviser now
+                      </a>
+                    </li>
+                    <li>
+                      <p>Current waiting time is 17 minutes</p>
+                    </li>
+                  </ul>
+                </dd>
+              </dl>
+            </dd>
+          </dl>
+        </div>
   charts:
     description: |
       The Government Statistical Service (GSS) guidance recommends [a limit of four categories as best practice for basic data visualisations](https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5).

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

@@ -38,13 +38,6 @@ examples:
     description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
     data:
       omit_header: true
-  blue_bar_background:
-    description: For use when a page has a heading component with a background colour.
-    data:
-      for_static: true
-      full_width: true
-      blue_bar: true
-      blue_bar_background_colour: "no"
   omit_feedback:
     description: This allows the feedback form to be omitted
     data:

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

@@ -74,17 +74,6 @@ examples:
       - locale: 'cy'
         base_path: '/cy'
         text: 'Cymraeg'
-  with_no_top_margin:
-    data:
-      no_margin_top: true
-      translations:
-      - locale: 'en'
-        base_path: '/en'
-        text: 'English'
-        active: true
-      - locale: 'cy'
-        base_path: '/cy'
-        text: 'Cymraeg'
   with_data_attributes_on_links:
     description: Data attributes can be passed for each link as shown.
     data:

data/config/locales/ar.yml

@@ -54,7 +54,7 @@ ar:
         html: يمكنك %{link} في أي وقت.
         link: قم بتغيير إعدادات ملفات تعريف الارتباط الخاصة بك
         rejected:
-      hide: إخفاء هذه الرسالة
+      hide:
       text:
       - نحن نستخدم بعض ملفات تعريف الارتباط الأساسية لجعل هذا الموقع يعمل.
       - نود تعيين ملفات تعريف ارتباط إضافية لفهم كيفية استخدامك لـموقع GOV.UK، ولتذكر إعداداتك، ولتحسين الخدمات الحكومية.

data/config/locales/az.yml

@@ -50,7 +50,7 @@ az:
         html: İstənilən vaxt %{link}.
         link: Kuki parametrlərinizi dəyişdirin
         rejected:
-      hide: Bu mesajı gizlət
+      hide:
       text:
       - Biz bu vebsaytın işləməsini təmin etmək üçün bəzi zəruri kukilərdən istifadə edirik.
       - Biz GOV.UK-dən necə istifadə etdiyinizi anlamaq

data/config/locales/be.yml

@@ -52,7 +52,7 @@ be:
         html: Вы можаце %{link} у любы час.
         link: змяніць налады файлаў cookie
         rejected:
-      hide: Схаваць гэта паведамленне
+      hide:
       text:
       - Мы выкарыстоўваем некаторыя асноўныя файлы cookie для забеспячэння працы гэтага сайта.
       - Мы хацелі б наладзіць дадатковыя файлы cookie

data/config/locales/bg.yml

@@ -50,7 +50,7 @@ bg:
         html: Можете да %{link} по всяко време.
         link: Промяна на настройките за бисквитките
         rejected:
-      hide: Скриване на това съобщение
+      hide:
       text:
       - Използваме някои основни бисквитки
       - за да работи този уебсайт.