govuk_publishing_components 23.14.0 → 24.2.0

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

@@ -1,72 +1,83 @@
 <%
   id ||= 'global-cookie-message'
-  title ||= "Tell us whether you accept cookies"
-  text ||= raw("We use <a class='govuk-link' href='/help/cookies'>cookies to collect information</a> about how you use GOV.UK. We use this information to make the website work as well as possible and improve government services.")
+  title ||= "Cookies on GOV.UK"
+  text ||= ["We use some essential cookies to make this website work.", "We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.", "We also use cookies set by other sites to help us deliver content from their services."]
+  if text.kind_of?(Array)
+    newtext = ""
+    text.each do |t|
+      newtext += "<p class='govuk-body'>#{t}</p>"
+    end
+    text = newtext
+  else
+    text = "<p class='govuk-body'>#{text}</p>"
+  end
+  text = raw(text)
+
   cookie_preferences_href ||= "/help/cookies"
-  confirmation_message ||= raw("You’ve accepted all cookies. You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
+  confirmation_message ||= raw("You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
   services_cookies ||= nil
   css_classes = %w(gem-c-cookie-banner govuk-clearfix)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
-
 <div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
-  <div class="gem-c-cookie-banner__wrapper govuk-width-container">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <div class="gem-c-cookie-banner__message">
-          <h2 class="govuk-heading-m"><%= title %></h2>
-          <p class="govuk-body"><%= text %></p>
+  <div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="<%= title %>">
+    <div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m"><%= title %></h2>
+          <div class="govuk-cookie-banner__content">
+            <%= text %>
+          </div>
         </div>
-        <% if services_cookies %>
-          <div class="gem-c-cookie-banner__buttons gem-c-cookie-banner__buttons--flex">
+      </div>
+      <% if services_cookies %>
+          <div class="govuk-button-group">
             <%= render "govuk_publishing_components/components/button", {
+              name: "cookies",
               text: services_cookies.dig(:yes, :text) || "Yes",
-              inline_layout: true,
               data_attributes: { module: "track-click", "accept-cookies": "true", }.merge(services_cookies.dig(:yes, :data_attributes) || {})
             } %>
             <%= render "govuk_publishing_components/components/button", {
+              name: "cookies",
               text: services_cookies.dig(:no, :text) || "No",
-              inline_layout: true,
-              data_attributes: { module: "track-click", "hide-cookie-banner": "true", }.merge(services_cookies.dig(:no, :data_attributes) || {})
+              data_attributes: { module: "track-click", "reject-cookies": "true", }.merge(services_cookies.dig(:no, :data_attributes) || {})
             } %>
             <% if services_cookies[:cookie_preferences] %>
-              <%= link_to services_cookies.dig(:cookie_preferences, :text), services_cookies.dig(:cookie_preferences, :href), class: "gem-c-cookie-banner__link govuk-link" %>
+              <%= link_to services_cookies.dig(:cookie_preferences, :text), services_cookies.dig(:cookie_preferences, :href), class: "govuk-link" %>
             <% end %>
           </div>
         <% else %>
-          <div class="gem-c-cookie-banner__buttons">
-            <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-accept govuk-grid-column-full govuk-grid-column-one-half-from-desktop">
-              <%= render "govuk_publishing_components/components/button", {
-                text: "Accept all cookies",
-                inline_layout: true,
+          <div class="govuk-button-group">
+            <%= render "govuk_publishing_components/components/button", {
+                name: "cookies",
+                text: "Accept additional cookies",
                 data_attributes: {
                   module: "track-click",
                   "accept-cookies": "true",
                   "track-category": "cookieBanner",
-                  "track-action": "Cookie banner accepted"
+                  "track-action": "Cookie banner accepted",
+                  "cookie-types": "all",
                 }
-              } %>
-            </div>
-            <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-settings govuk-grid-column-full govuk-grid-column-one-half-from-desktop">
-              <%= render "govuk_publishing_components/components/button", {
-                text: "Set cookie preferences",
-                href: cookie_preferences_href,
-                inline_layout: true,
+            } %>
+            <%= render "govuk_publishing_components/components/button", {
+                name: "cookies",
+                text: "Reject additional cookies",
                 data_attributes: {
                   module: "track-click",
+                  "reject-cookies": "true",
                   "track-category": "cookieBanner",
-                  "track-action": "Cookie banner settings clicked"
+                  "track-action": "Cookie banner rejected",
                 }
-              } %>
-            </div>
+            } %>
+            <a class="govuk-link" href="<%= cookie_preferences_href %>">View cookies</a>
           </div>
         <% end %>
-      </div>
     </div>
   </div>
-
-  <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1">
+  <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1" hidden>
     <p class="gem-c-cookie-banner__confirmation-message" role="alert"><%= confirmation_message %></p>
-    <button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide</button>
+    <div class="govuk-button-group">
+      <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide this message</button>
+    </div>
   </div>
 </div>