govuk_publishing_components 24.19.0 → 25.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -99,3 +99,12 @@
     font-weight: inherit;
   }
 }
+
+.gem-c-govspeak--inverse {
+  color: govuk-colour('white');
+
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-inverse;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss

@@ -0,0 +1,3 @@
+.gem-c-super-navigation-header a:after {
+  content: " ( " attr(href) " ) ";
+}

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

@@ -41,7 +41,7 @@
               item[:link][:text],
               item[:link][:path],
               data: item[:link][:data_attributes],
-              class: "#{item_classes} gem-c-document-list__item-link",
+              class: "#{item_classes} govuk-link",
               lang: item[:link][:locale].presence,
               rel: rel,
             )
@@ -65,7 +65,7 @@
 
         <% if item[:metadata] %>
           <ul class="gem-c-document-list__item-metadata">
-            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %> 
+            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %>
               <% if !item_metadata_key.to_s.eql?("locale") %>
                 <% lang = item[:metadata][:locale].present? && item[:metadata][:locale][item_metadata_key].present? ? item[:metadata][:locale][item_metadata_key] : nil %>
 
@@ -101,7 +101,7 @@
                       part[:link][:text],
                       part[:link][:path],
                       data: part[:link][:data_attributes],
-                      class: "gem-c-document-list-child__heading #{brand_helper.color_class} gem-c-document-list-child__link",
+                      class: "gem-c-document-list-child__heading #{brand_helper.color_class} govuk-link gem-c-document-list-child__link",
                     )
                   else
                     content_tag(

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

@@ -1,10 +1,12 @@
 <%
+  inverse ||= false
   direction_class = "direction-#{direction}" if local_assigns.include?(:direction)
   disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
 
   classes = []
   classes << direction_class if direction_class
   classes << "disable-youtube" if disable_youtube_expansions
+  classes << "gem-c-govspeak--inverse" if inverse
 %>
 
 <div class="gem-c-govspeak govuk-govspeak <%= classes.join(" ") %>" data-module="govspeak">

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

@@ -1,15 +1,33 @@
-<%= tag.section class: "gem-c-intervention", role: "region" do %>
-  <h2 class="gem-c-intervention__title">
-    <a class="govuk-link" href="/next-steps-for-your-business">
-      <%= t("components.intervention.title") %>
-    </a>
+<%
+  data_attributes ||= {}
+  data_attributes[:module] = 'intervention'
+%>
+
+<%= tag.section class: "gem-c-intervention", role: "region", data: data_attributes do %>
+  <h2 class="gem-c-intervention__title govuk-heading-s">
+    <a class="govuk-link" href="/next-steps-for-your-business"
+      data-module="gem-track-click"
+      data-track-category="interventionBanner"
+      data-track-action="interventionClicked"
+      data-track-dimension="<%= t("components.intervention.title") %>"
+      data-track-dimension-index="29"
+      data-track-label="/next-steps-for-your-business">
+      <%= t("components.intervention.title") %></a>
   </h2>
 
-  <p class="gem-c-intervention__paragraph">
+  <p class="govuk-body">
     <%= t("components.intervention.description") %>
   </p>
 
-  <p class="gem-c-intervention__paragraph">
-    <%= t("components.intervention.dismiss_html") %>
+  <p class="govuk-body">
+    <a class="govuk-link" href="?hide-intervention=true"
+      data-module="gem-track-click"
+      data-track-category="interventionBanner"
+      data-track-action="interventionDismissed"
+      data-track-label="?hide-intervention=true"
+      data-track-dimension="<%= t("components.intervention.dismiss_link_text") %>"
+      data-track-dimension-index="29">
+      <%= t("components.intervention.dismiss_link_text") %></a>
+    <%= t("components.intervention.dismiss_post_link") %>
   </p>
 <% end %>

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

@@ -1,14 +1,16 @@
 <%
-  omit_feedback_form ||= false
   emergency_banner ||= nil
   full_width ||= false
   global_bar ||= nil
-  product_name ||= nil
   html_lang ||= "en"
   layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
   logo_link ||= "/"
   navigation_items ||= []
+  omit_feedback_form ||= false
+  omit_footer_navigation ||= false
   omit_header ||= false
+  product_name ||= nil
+  show_explore_header ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
   title ||= "GOV.UK - The best place to find government services and information"
 
@@ -75,16 +77,20 @@
     <%= render "govuk_publishing_components/components/cookie_banner" %>
 
     <% unless omit_header %>
-      <%= render "govuk_publishing_components/components/layout_header", {
-        search: show_search,
-        logo_link: logo_link,
-        navigation_items: navigation_items,
-        product_name: product_name,
-
-        # The (blue) bottom border needs to be underneath the emergency banner -
-        # so it has been turned off and added in manually.
-        remove_bottom_border: true,
-      } %>
+      <% if show_explore_header %>
+        <%= render "govuk_publishing_components/components/layout_super_navigation_header" %>
+      <% else %>
+        <%= render "govuk_publishing_components/components/layout_header", {
+          search: show_search,
+          logo_link: logo_link,
+          navigation_items: navigation_items,
+          product_name: product_name,
+
+          # The (blue) bottom border needs to be underneath the emergency banner -
+          # so it has been turned off and added in manually.
+          remove_bottom_border: true,
+        } %>
+      <% end %>
     <% end %>
 
     <%= raw(emergency_banner) %>
@@ -117,7 +123,7 @@
     <% unless local_assigns[:hide_footer_links] %>
       <%= render "govuk_publishing_components/components/layout_footer", {
         with_border: true,
-        navigation: layout_helper.footer_navigation,
+        navigation: omit_footer_navigation ? nil : layout_helper.footer_navigation,
         meta: layout_helper.footer_meta,
       } %>
     <% end %>

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

@@ -0,0 +1,121 @@
+<%
+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_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
+popular_links = t("components.layout_super_navigation_header.popular_links")
+popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
+search_text= t("components.layout_super_navigation_header.search_text")
+%>
+<header role="banner" class="gem-c-layout-super-navigation-header">
+  <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-module="gem-track-click"
+        data-track-action="homeHeader"
+        data-track-category="homeLinkClicked"
+        href="<%= logo_link %>"
+        id="logo"
+        title="<%= logo_link_title %>">
+        <span class="govuk-header__logotype">
+          <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"
+            xmlns="http://www.w3.org/2000/svg"
+            width="36">
+            <path fill="currentColor"
+              fill-rule="evenodd"
+              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">
+            </path>
+            <image class="govuk-header__logotype-crown-fallback-image"
+              height="30"
+              src="<%= asset_path('govuk-logotype-crown.png') %>"
+              width="36"
+              xlink:href="">
+            </image>
+          </svg>
+          <span class="govuk-header__logotype-text">
+            <%= logo_text %>
+          </span>
+        </span>
+      </a>
+    </div>
+    <nav
+      aria-labelledby="super-navigation-menu-heading"
+      class="gem-c-layout-super-navigation-header__content"
+      data-module="super-navigation-toggle"
+      data-text-for-button="Menu"
+      data-text-for-show-menu="Show navigation menu"
+      data-text-for-hide-menu="Hide navigation menu"
+    >
+      <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden"><%= navigation_menu_heading %></h2>
+      <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__items">
+        <% navigation_links.each do | link | %>
+          <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item">
+            <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link" href="<%= link[:href] %>">
+              <%= link[:label] %>
+            </a>
+            <% if link[:menu_contents].present? or link[:footer_links].present? %>
+              <div class="gem-c-layout-super-navigation-header__dropdown-menu">
+                <% if link[:menu_contents].present? %>
+                  <ul class="govuk-list">
+                    <% link[:menu_contents].each do | item | %>
+                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
+                          <%= item[:label] %>
+                        </a>
+                        <%= tag.p item[:description], class: "govuk-body-s gem-c-layout-super-navigation-header__dropdown-list-item-description" if item[:description].present? %>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+                <% if link[:footer_links].present? %>
+                  <ul class="govuk-list">
+                    <% link[:footer_links].each do | item | %>
+                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
+                          <%= item[:label] %>
+                        </a>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+              </div>
+            <% end %>
+          </li>
+        <% end %>
+        <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item gem-c-layout-super-navigation-header__item--search">
+          <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link gem-c-layout-super-navigation-header__item-link--search" href="/search">
+            <span class="gem-c-layout-super-navigation-header__item-link-text--search"><%= search_text %></span>
+            <svg class="gem-c-layout-super-navigation-header__item-link-icon--search" 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>
+          <div class="gem-c-layout-super-navigation-header__dropdown-menu">
+            <form id="search" action="/search" method="get" role="search" aria-label="Site-wide">
+              <%= render "govuk_publishing_components/components/search", {
+                inline_label: false,
+                label_text: raw("<h2 class=\"govuk-heading-m\">#{search_text}</h2>"),
+                size: "large",
+              } %>
+            </form>
+            <h2 class="govuk-heading-m"><%= popular_links_heading %></h2>
+            <ul class="govuk-list">
+              <% popular_links.each do | popular_link | %>
+                <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                  <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= popular_link[:href] %>">
+                    <%= popular_link[:label] %>
+                  </a>
+                </li>
+              <% end %>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>

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

@@ -11,14 +11,13 @@
   heading_size ||= nil
   small ||= false
   inline ||= false
-  is_page_heading ||= false
-  heading_level = is_page_heading ? 'h1' : shared_helper.get_heading_level
+  heading_level = shared_helper.get_heading_level
   heading_classes = %w(govuk-fieldset__heading)
   heading_classes << "gem-c-radio__heading-text" if heading_level == 'h1'
 
   if ['s', 'm', 'l', 'xl'].include?(heading_size)
     size = heading_size
-  elsif is_page_heading
+  elsif heading_level == 'h1'
     size = 'xl'
   else
     size = 'm'

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

@@ -3,9 +3,6 @@
 
   context ||= false
   context_locale ||= false
-  context_text = context.is_a?(Hash) ? context[:text] : context
-  context_href = context.is_a?(Hash) ? context[:href] : false
-  context_data = context.is_a?(Hash) ? context[:data] : false
 
   inverse ||= false
   local_assigns[:margin_top] ||= 8
@@ -24,7 +21,7 @@
 <%= content_tag(:div, class: classes) do %>
   <% if context %>
     <span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
-      <%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link govuk-link', data: context_data) : context_text %>
+      <%= context %>
     </span>
   <% end %>
   <h1 class="<%= heading_classes.join(" ") %>">

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

@@ -25,6 +25,15 @@ examples:
       block: |
         <h2>This is a title</h2>
           <p>This is some body text with <a href="https://example.com">a link</a>.</p>
+  inverted:
+    description: This option currently supports basic inversion of only headings, paragraphs and links.
+    data:
+      inverse: true
+      block: |
+        <h2>This is a title</h2>
+        <p>This is some body text with <a href="https://example.com">a link</a>.</p>
+    context:
+      dark_background: true
   heading_levels:
     data:
       block: |

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

@@ -31,6 +31,10 @@ examples:
     description: This allows the feedback form to be omitted
     data:
       omit_feedback_form: true
+  omit_footer_navigation:
+    description: This allows the footer navigation to be omitted
+    data:
+      omit_footer_navigation: true
   navigation:
     description: Passes the navigation through to the [header component](/component-guide/layout_header/).
     data:

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

@@ -0,0 +1,22 @@
+name: Layout super navigation header
+description: The super navigation header provides a consistent header across GOV.UK.
+body: |
+shared_accessibility_criteria:
+  - link
+accessibility_criteria: |
+  The component must:
+
+  * have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+
+  Images in the super navigation header must:
+
+  * be presentational when linked to from accompanying text (crown icon).
+
+  Landmarks and Roles in the super navigation header should:
+
+  * have a role of banner at the root of the component (<header>) (ARIA 1.1)
+accessibility_excluded_rules:
+  - landmark-banner-is-top-level # The header element can not be top level in the examples
+  - landmark-no-duplicate-banner # banners will be duplicated in component examples list
+examples:
+  default:

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

@@ -107,17 +107,6 @@ examples:
         text: "Green"
       - value: "blue"
         text: "Blue"
-  with_page_heading:
-    description: This adds a H1 element containing the text supplied.
-    data:
-      name: "radio-group-heading"
-      heading: "Is it raining?"
-      is_page_heading: true
-      items:
-      - value: "yes"
-        text: "Yes"
-      - value: "no"
-        text: "No"
   with_page_header_and_caption:
     description: |
       If a caption text is provided with a page heading, it will be displayed above the heading.
@@ -127,7 +116,7 @@ examples:
       name: "radio-group-heading"
       heading: "Is it snowing?"
       heading_caption: "Question 3 of 9"
-      is_page_heading: true
+      heading_level: 1
       items:
         - value: "yes"
           text: "Yes"
@@ -137,7 +126,7 @@ examples:
     data:
       name: "radio-group-heading"
       heading: "Is it snowing?"
-      is_page_heading: true
+      heading_level: 1
       hint: "Sleet or hail doesn’t count."
       items:
       - value: "yes"
@@ -179,7 +168,7 @@ examples:
     data:
       name: "radio-group-description"
       heading: "What is your favourite colour?"
-      is_page_heading: true
+      heading_level: 1
       description: |
         Skittles consist of hard sugar shells imprinted with the letter "S".
         The interior consists mainly of sugar, corn syrup, and hydrogenated
@@ -196,7 +185,7 @@ examples:
     description: |
       This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed.
 
-      If the is_page_heading option is true and heading_size is not set, the text size will be xl.
+      If heading_level is 1 and heading_size is not set, the text size will be xl.
     data:
       name: "radio-group-description"
       heading: "What is your favourite colour?"

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

@@ -33,18 +33,6 @@ examples:
       context: Publication
       context_locale: en
       title: My page title
-  with_context_link:
-    description: |
-      It’s unclear if links in the context of a title are useful and are being clicked by users. Data attributes are included to track this behaviour.
-
-      Context links are used on [topic pages](https://www.gov.uk/topic/business-tax/vat) where there is also a breadcrumb.
-    data:
-      context:
-        text: Publication
-        href: '/link'
-        data:
-          some_tracking_parameter: 'tracking-param'
-      title: My page title
   long_title_with_context:
     data:
       context: Publication