govuk_publishing_components 23.13.0 → 24.1.0

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

@@ -25,11 +25,6 @@
       float: none;
       width: 100%;
 
-      h3 {
-        @include govuk-font($size: 19, $weight: bold);
-        margin-bottom: 5px;
-      }
-
       .email-url-number {
         .email {
           word-wrap: break-word;

data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss

@@ -5,27 +5,34 @@
 @import "../accordion";
 
 // Open all of the accordion sections.
-.govuk-accordion__section-content {
+.gem-c-accordion__section-content {
   display: block !important; // stylelint-disable-line declaration-no-important
 }
 
 // Change the colour from the blue link colour to black.
-.govuk-accordion__section-button {
+.gem-c-accordion__section-button {
   color: govuk-colour("black") !important; // stylelint-disable-line declaration-no-important
 }
 
+// Removing spacing
+.gem-c-accordion__section-header {
+  padding-bottom: govuk-spacing(1);
+}
+
 // Change the summary subheading size.
-.govuk-accordion__section-summary {
+.gem-c-accordion__section-summary {
   @include govuk-typography-common;
   @include govuk-typography-responsive($size: 16, $important: true);
+}
 
-  .govuk-accordion--condensed & {
-    @include govuk-typography-responsive($size: 14, $important: true);
-  }
+// Hide the unusable "Show all sections" button and the "Chevron" icons.
+.gem-c-accordion__open-all,
+.gem-c-accordion__icon,
+.gem-c-accordion__toggle-link {
+  display: none !important; // stylelint-disable-line declaration-no-important
 }
 
-// Hide the unusable "Open all" button and the "+" icons.
-.govuk-accordion__open-all,
-.govuk-accordion__icon {
+// Hide all hidden content
+.gem-c-accordion .govuk-visually-hidden {
   display: none !important; // stylelint-disable-line declaration-no-important
 }

data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss

@@ -1,7 +1,7 @@
 $grey-2: #bfc1c3;
 $white: #ffffff;
 $number-circle-size: 35px;
-$stroke-width: 3px;
+$stroke-width: 1px;
 
 .gem-c-step-nav:not(.gem-c-step-nav--large),
 .gem-c-step-nav__controls,
@@ -63,7 +63,7 @@ $stroke-width: 3px;
 }
 
 .gem-c-step-nav__circle--number {
-  border: solid 3px $grey-2;
+  border: solid 1px $grey-2;
 }
 
 .gem-c-step-nav__step,

data/app/models/govuk_publishing_components/component_doc.rb

@@ -69,7 +69,7 @@ module GovukPublishingComponents
     end
 
     def github_search_url
-      params = { q: "org:alphagov #{partial_path}", type: "Code" }
+      params = { q: "org:alphagov components/components/#{id}", type: "Code" }
       "https://github.com/search?#{params.to_query}"
     end
 

data/app/views/govuk_publishing_components/audit/show.html.erb

@@ -39,16 +39,16 @@
           </div>
         </details>
 
-        <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-with-summary-sections">
+        <div class="gem-c-accordion" data-module="gem-c-accordion" id="accordion-with-summary-sections">
           <% @applications.each_with_index do |application, index| %>
-            <div class="govuk-accordion__section ">
-              <div class="govuk-accordion__section-header">
-                <h2 class="govuk-accordion__section-heading">
-                  <span class="govuk-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
+            <div class="gem-c-accordion__section ">
+              <div class="gem-c-accordion__section-header">
+                <h2 class="gem-c-accordion__section-heading">
+                  <span class="gem-c-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
                     <%= application[:name] %>
                   </span>
                 </h2>
-                <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
+                <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
                   <% if application[:application_found] %>
                     Warnings:
                     <% if application[:warning_count] > 0 %>
@@ -61,7 +61,7 @@
                   <% end %>
                 </div>
               </div>
-              <div id="accordion-with-summary-sections-content-<%= index %>" class="govuk-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
+              <div id="accordion-with-summary-sections-content-<%= index %>" class="gem-c-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
                 <% if application[:application_found] %>
                   <% application[:warnings].each do |warning| %>
                     <p class="govuk-body">
@@ -144,19 +144,19 @@
       } %>
 
       <% if @components.any? %>
-        <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
-          <div class="govuk-accordion__section ">
-            <div class="govuk-accordion__section-header">
-              <h2 class="govuk-accordion__section-heading">
-                <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
+        <div class="gem-c-accordion" data-module="gem-c-accordion" id="accordion-default">
+          <div class="gem-c-accordion__section ">
+            <div class="gem-c-accordion__section-header">
+              <h2 class="gem-c-accordion__section-heading">
+                <span class="gem-c-accordion__section-button" id="accordion-default-heading-1">
                   Component files
                 </span>
               </h2>
-              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
+              <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
                 Lists what files each component has
               </div>
             </div>
-            <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
+            <div id="accordion-default-content-1" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-1">
               <table class="govuk-table">
                 <thead class="govuk-table__head">
                   <tr class="govuk-table__row">
@@ -206,18 +206,18 @@
             </div>
           </div>
 
-          <div class="govuk-accordion__section ">
-            <div class="govuk-accordion__section-header">
-              <h2 class="govuk-accordion__section-heading">
-                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
+          <div class="gem-c-accordion__section ">
+            <div class="gem-c-accordion__section-header">
+              <h2 class="gem-c-accordion__section-heading">
+                <span class="gem-c-accordion__section-button" id="accordion-default-heading-2">
                   Components containing components
                 </span>
               </h2>
-              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
+              <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
                 Shows which components contain other components
               </div>
             </div>
-            <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
+            <div id="accordion-default-content-2" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-2">
               <dl class="govuk-summary-list">
                 <% @components[:components_containing_components].each do |component| %>
                   <div class="govuk-summary-list__row">
@@ -232,18 +232,18 @@
               </dl>
             </div>
           </div>
-          <div class="govuk-accordion__section ">
-            <div class="govuk-accordion__section-header">
-              <h2 class="govuk-accordion__section-heading">
-                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
+          <div class="gem-c-accordion__section ">
+            <div class="gem-c-accordion__section-header">
+              <h2 class="gem-c-accordion__section-heading">
+                <span class="gem-c-accordion__section-button" id="accordion-default-heading-2">
                   Components by application
                 </span>
               </h2>
-              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
+              <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
                 Shows which applications use each component
               </div>
             </div>
-            <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
+            <div id="accordion-default-content-2" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-2">
               <% if @components[:components_by_application].any? %>
                 <dl class="govuk-summary-list">
                   <% @components[:components_by_application].each do |component| %>

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

@@ -6,42 +6,35 @@
   items ||= []
   condensed ||= false
 
-  accordion_classes = %w(gem-c-accordion govuk-accordion)
-  accordion_classes << 'govuk-accordion--condensed' if condensed
+  accordion_classes = %w(gem-c-accordion)
+  accordion_classes << 'gem-c-accordion--condensed' if condensed
   accordion_classes << (shared_helper.get_margin_bottom)
 
   data_attributes ||= {}
-  data_attributes[:module] = 'govuk-accordion'
+  data_attributes[:module] = 'gem-accordion'
 %>
 <% if items.any? %>
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
     <% items.each_with_index do |item, i| %>
       <%
-        # Nunjucks starts a loop on 1 and the client side JavaScript also
-        # adopts this behaviour. To prevent things from breaking, the index
-        # here also need to be increase by one. (Nunjucks is used by GOV.UK
-        # Frontend, which this component is based on.)
         index = i + 1
 
         item[:data_attributes] ||= nil
 
-        section_classes = %w(govuk-accordion__section)
-        section_classes << 'govuk-accordion__section--expanded' if item[:expanded]
+        section_classes = %w(gem-c-accordion__section)
+        section_classes << 'gem-c-accordion__section--expanded' if item[:expanded]
 
-        summary_classes = %w(govuk-accordion__section-summary govuk-body)
+        summary_classes = %w(gem-c-accordion__section-summary govuk-body)
       %>
-      <%= tag.div(class: section_classes) do %>
-        <div class="govuk-accordion__section-header">
-          <%=
-            content_tag(
-              shared_helper.get_heading_level,
-              content_tag('span', item[:heading][:text], class: "govuk-accordion__section-button", id: "#{id}-heading-#{index}", data: item[:data_attributes]),
-              class: 'govuk-accordion__section-heading'
-            )
-          %>
+
+      <%= tag.section(class: section_classes) do %>
+        <div class="gem-c-accordion__section-header">
+          <%= content_tag(shared_helper.get_heading_level, class: 'gem-c-accordion__section-heading') do %>
+            <%= tag.span(item[:heading][:text], id: "#{id}-heading-#{index}", data: item[:data_attributes], class: 'gem-c-accordion__section-button') %>
+          <% end %>
           <%= tag.div(item[:summary][:text], id: "#{id}-summary-#{index}", class: summary_classes) if item[:summary].present? %>
         </div>
-        <%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "govuk-accordion__section-content", 'aria-labelledby': "#{id}-heading-#{index}") %>
+        <%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "gem-c-accordion__section-content", 'aria-label': "#{item[:heading][:text]}") %>
       <% end %>
     <% end %>
   <% end %>

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

@@ -2,12 +2,6 @@
 <% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
 
 <div class="gem-c-contextual-sidebar">
-  <% if navigation.show_brexit_related_links? && navigation.step_by_step_count.zero? %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_related_links' %>
-  <% elsif navigation.step_by_step_count.zero? && !navigation.transition_countdown_exception? %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
-  <% end %>
-
   <% if navigation.content_tagged_to_a_reasonable_number_of_step_by_steps? %>
     <%# Rendering step by step related items because there are a few but not too many of them %>
     <%= render 'govuk_publishing_components/components/step_by_step_nav_related', links: navigation.step_nav_helper.related_links %>
@@ -30,7 +24,7 @@
     } %>
   <% end %>
 
-  <% if navigation.show_brexit_related_links? && navigation.step_by_step_count > 0 %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_related_links' %>
+  <% if navigation.show_brexit_cta? || navigation.show_brexit_related_links? %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
   <% end %>
 </div>

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

@@ -5,6 +5,7 @@
   classes << " gem-c-document-list--top-margin" if local_assigns[:margin_top]
   classes << " gem-c-document-list--bottom-margin" if local_assigns[:margin_bottom]
   classes << " gem-c-document-list--no-underline" if local_assigns[:remove_underline]
+  classes << " gem-c-document-list--no-top-border" if local_assigns[:remove_top_border]
 
   within_multitype_list ||= false
   within_multitype_list_class = " gem-c-document-list__multi-list" if within_multitype_list
@@ -28,12 +29,21 @@
           item_classes = "gem-c-document-list__item-title #{brand_helper.color_class} #{title_with_context_class if item[:link][:context]}"
 
           if item[:link][:path]
+            rel = [
+              "external",
+              "nofollow",
+              "noopener",
+              "noreferrer",
+              "opener",
+            ].include?(item[:link][:rel]) ? item[:link][:rel] : nil
+
             link_to(
               item[:link][:text],
               item[:link][:path],
               data: item[:link][:data_attributes],
               class: "#{item_classes} gem-c-document-list__item-link",
-              lang: item[:link][:locale].presence
+              lang: item[:link][:locale].presence,
+              rel: rel,
             )
           else
             content_tag(
@@ -50,7 +60,7 @@
         <% end %>
 
         <% if item[:link][:description] %>
-          <p class="gem-c-document-list__item-description" ><%= item[:link][:description] %></p>
+          <p class="gem-c-document-list__item-description <%= "gem-c-document-list__item-description--full-size" if item[:link][:full_size_description] %>"><%= item[:link][:description] %></p>
         <% end %>
 
         <% if item[:metadata] %>

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

@@ -2,9 +2,11 @@
   meta ||= []
   navigation ||= []
   with_border ||= false
+  classes = %w(gem-c-layout-footer govuk-footer)
+  classes << "gem-c-layout-footer--border" if with_border
 %>
-<footer class="gem-c-layout-footer govuk-footer <%= "gem-c-layout-footer--border" if with_border %> role="contentinfo">
-  <div class="govuk-width-container ">
+<%= tag.footer class: classes, role: "contentinfo" do %>
+  <div class="govuk-width-container" data-module="gem-track-click">
     <% if navigation.any? %>
       <div class="govuk-footer__navigation">
         <% navigation.each do |item| %>
@@ -29,7 +31,10 @@
                     <% if item[:href] && item[:text] %>
                       <li class="govuk-footer__list-item">
                         <%
-                          attributes = { class: "govuk-footer__link" }.merge(item.fetch(:attributes, {}))
+                          attributes = {
+                            class: "govuk-footer__link",
+                            "data-track-category": "footerClicked"
+                          }.merge(item.fetch(:attributes, {}))
                           attributes[:rel] = "noopener" if attributes[:target] == "_blank" && !attributes[:rel]
                         %>
                         <%= link_to item[:text], item[:href], attributes %>
@@ -80,4 +85,4 @@
       </div>
     </div>
   </div>
-</footer>
+<% end %>

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

@@ -24,8 +24,8 @@
     <%= "data-id=#{tracking_id}" if tracking_id %>
     data-show-text="<%= t("govuk_component.step_by_step_nav.show", default: "show") %>"
     data-hide-text="<%= t("govuk_component.step_by_step_nav.hide", default: "hide") %>"
-    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all") %>"
-    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all") %>"
+    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all steps") %>"
+    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all steps") %>"
   >
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb

@@ -14,7 +14,28 @@
 <%= link_to link_path,
     class: "govuk-link gem-c-contextual-sidebar__brexit-cta",
     data: data_attributes,
+    aria: { label: "#{t("components.related_navigation.take_action_list.aria_label")} #{link_text}" },
     lang: shared_helper.t_locale("components.related_navigation.transition.title") do %>
   <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
+  <ul class="govuk-list gem-c-contextual-sidebar__take-action-traffic-lights">
+    <li>
+      <%= image_tag 'govuk_publishing_components/take-action-red.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
+      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
+        <%= t("components.related_navigation.take_action_list.red") %>
+      </span>
+    </li>
+    <li>
+      <%= image_tag 'govuk_publishing_components/take-action-amber.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
+      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
+        <%= t("components.related_navigation.take_action_list.amber") %>
+      </span>
+    </li>
+    <li>
+      <%= image_tag 'govuk_publishing_components/take-action-green.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
+      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
+        <%= t("components.related_navigation.take_action_list.green") %>
+      </span>
+    </li>
+  </ul>
   <p class="gem-c-contextual-sidebar__brexit-text"><%= link_text %></p>
 <% end %>

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

@@ -4,20 +4,25 @@ govuk_frontend_components:
   - accordion
 body: |
   This component is based on the [design system accordion component](https://design-system.service.gov.uk/components/accordion/)
-  and is currently experimental. If using this component, please feed back any research findings to the Design System team.
+  and is currently experimental because more research is needed to validate it.  If using this component, [please feed back any research findings to the Design System team](https://design-system.service.gov.uk/components/accordion/#next-steps).
 
 accessibility_criteria: |
   The accordion must:
 
     * accept focus
     * be usable with a keyboard
-    * indicate when they have focus
+    * the controls must change in appearance when keyboard focus moves to it
+    * the controls must indicate when the mouse is hovered over it
     * be usable with touch
     * be usable with voice commands
     * have visible text
     * indicate to users that each section can be expanded and collapsed
     * inform the user when a step has been expanded or collapsed
-    * be readable when only the text of the page is zoomed in
+    * be readable when only the [text of the page is zoomed in](https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages#w_how-to-only-change-the-size-of-the-text)
+    * zoom in up to 300% without the text spilling off the screen
+    * pass colour contrast
+    * the accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
+    * section content must have aria-label / aria-labelledby with a value that refers to the button that controls display of the content.
 
   Section headings must use a button element:
 

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

@@ -72,6 +72,11 @@ examples:
                       - text: Check what age you can drive
                         href: "/vehicles-can-drive"
                     optional: false
+                  - title: Testing the and
+                    logic: and
+                    contents:
+                    - type: paragraph
+                      text: hello hello what's UP
                   - title: Driving lessons and practice
                     contents:
                     - type: paragraph
@@ -144,7 +149,33 @@ examples:
                       - text: Find out what you’ll get
                         href: "/settled-status-eu-citizens-families/what-settled-and-presettled-status-means"
                     optional: false
-  transition_countdown_exception:
+  with_brexit_cta:
+    description: For documents tagged with certain taxons defined in `brexit_cta_taxon_allow_list` we show a custom Brexit call to action element.
+    data:
+      content_item:
+        title: "Transport news story"
+        content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Training and study at work
+            base_path: /training-study-work-your-rights
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+          taxons:
+            - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
+              title: "Transport"
+              phase: "live"
+  with_brexit_cta_document_exception:
+    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_document_type_exceptions`.
     data:
       content_item:
         title: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
@@ -164,3 +195,36 @@ examples:
           - title: The future of jobs and skills
             base_path: /government/collections/the-future-of-jobs-and-skills
             document_type: document_collection
+          taxons:
+            - content_id: "e2ca2f1a-0ff3-43ce-b813-16645ff27904"
+              title: "Society and culture"
+              phase: "live"
+  with_brexit_cta_taxon_exception:
+    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_taxon_exception_list`.
+    data:
+      content_item:
+        title: "Local transport news story"
+        content_id: "5c82db20-7631-11e4-a3cb-005056011aef"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Training and study at work
+            base_path: /training-study-work-your-rights
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+          taxons:
+            - content_id: "3b4d6319-fcef-4637-b35a-e3df76321894"
+              title: "Local transport"
+              phase: "live"
+              links:
+                parent_taxons:
+                  - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
+                    title: "Transport"