govuk_publishing_components 23.13.1 → 24.1.1

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -1,12 +1,12 @@
 .gem-c-success-alert {
-  color: $gem-text-colour;
-  padding: $gem-spacing-scale-3;
-  border: $gem-border-width-mobile solid $gem-success-colour;
+  color: $govuk-text-colour;
+  padding: govuk-spacing(3);
+  border: $govuk-border-width-narrow solid $govuk-success-colour;
   @include govuk-responsive-margin(8, "bottom");
 
   @include govuk-media-query($from: tablet) {
-    padding: $gem-spacing-scale-4;
-    border-width: $gem-border-width-tablet;
+    padding: govuk-spacing(4);
+    border-width: $govuk-border-width;
   }
 }
 
@@ -17,10 +17,10 @@
 
 .gem-c-success-summary__title {
   margin-top: 0;
-  margin-bottom: $gem-spacing-scale-3;
+  margin-bottom: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-bottom: $gem-spacing-scale-4;
+    margin-bottom: govuk-spacing(4);
   }
 
   @include govuk-font(24, $weight: bold);
@@ -32,5 +32,5 @@
 }
 
 .gem-c-success-alert:focus {
-  outline: $gem-focus-width solid $gem-focus-colour;
+  outline: $govuk-focus-width solid $govuk-focus-colour;
 }

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

@@ -2,30 +2,38 @@
 //
 // TODO: Replace with the print styles that will come from GOV.UK Frontend.
 
+@import "govuk_publishing_components/component_support";
 @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/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss

@@ -1,14 +1,4 @@
 // This file should be included in an application prior to specific components
 // It provides govuk-frontend but adds no weight to the compiled CSS
 @import "components/helpers/govuk-frontend-settings";
-@import "govuk/settings/all";
-@import "govuk/tools/all";
-@import "govuk/helpers/all";
-$govuk-colours-organisations: map-merge(
-  $govuk-colours-organisations,
-  (
-    "foreign-commonwealth-development-office": (
-      colour: #012169
-    )
-  )
-);
+@import "govuk/base";

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -14,7 +14,7 @@ module GovukPublishingComponents
         stylesheets = Dir["#{path}/app/assets/stylesheets/**/*.scss"]
         javascripts = Dir["#{path}/app/assets/javascripts/**/*.js"]
 
-        find_components = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/
+        find_components = /(?<=govuk_publishing_components\/components\/)[a-zA-Z_-]+(?=['"])/
 
         @find_all_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components/
         find_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/)(?!print\/)+[a-zA-Z_-]+(?=['"])/

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/_attachment.html.erb

@@ -41,11 +41,11 @@
                 "aria-hidden": true,
                 data: data_attributes do %>
       <% if attachment.document? %>
-        <%= render "govuk_publishing_components/components/attachment/thumbnail_document.svg" %>
+        <%= render "govuk_publishing_components/components/attachment/thumbnail_document" %>
       <% elsif attachment.spreadsheet? %>
-        <%= render "govuk_publishing_components/components/attachment/thumbnail_spreadsheet.svg" %>
+        <%= render "govuk_publishing_components/components/attachment/thumbnail_spreadsheet" %>
       <% else %>
-        <%= render "govuk_publishing_components/components/attachment/thumbnail_generic.svg" %>
+        <%= render "govuk_publishing_components/components/attachment/thumbnail_generic" %>
       <% 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/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 %>