RubyGems - govuk_publishing_components - Versions diffs - 60.2.1 → 61.0.0 - Mend

govuk_publishing_components 60.2.1 → 61.0.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 (29) hide show

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

@@ -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/docs/govspeak.yml CHANGED Viewed

@@ -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/translation_nav.yml CHANGED Viewed

@@ -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/lib/govuk_publishing_components/presenters/translation_nav_helper.rb CHANGED Viewed

@@ -6,7 +6,6 @@ module GovukPublishingComponents
       def initialize(local_assigns)
         @translations = []
         @translations = local_assigns[:translations] if local_assigns[:translations]
-        @no_margin_top = local_assigns[:no_margin_top]
         @inverse = local_assigns[:inverse]
       end
@@ -17,17 +16,12 @@ module GovukPublishingComponents
       def classes
         classes = %w[gem-c-translation-nav]
         classes << inverse_class if @inverse
-        classes << margin_class if @no_margin_top
         classes.join(" ")
       end
       def inverse_class
         "gem-c-translation-nav--inverse"
       end
-      def margin_class
-        "gem-c-translation-nav--no-margin-top"
-      end
     end
   end
 end

data/lib/govuk_publishing_components/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "60.2.1".freeze
+  VERSION = "61.0.0".freeze
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 60.2.1
+  version: 61.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -635,6 +635,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss
+- app/assets/stylesheets/govuk_publishing_components/components/govspeak/_content-block.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss
@@ -656,11 +657,8 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_link.scss
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_css3.scss
-- app/assets/stylesheets/govuk_publishing_components/components/mixins/_govuk-template-link-focus-override.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss
 - app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss
-- app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss
-- app/assets/stylesheets/govuk_publishing_components/components/mixins/_prefixed-transform.scss
 - app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
 - app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss
 - app/controllers/govuk_publishing_components/application_controller.rb