govuk_publishing_components 24.0.0 → 24.3.1

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

@@ -5,43 +5,36 @@
   id ||= "default-id-#{SecureRandom.hex(4)}"
   items ||= []
   condensed ||= false
+  anchor_navigation ||= 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'
+  data_attributes[:anchor_navigation] = anchor_navigation
 %>
 <% 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(gem-c-accordion__section)
+        section_classes << 'gem-c-accordion__section--expanded' if item[:expanded]
 
-        section_classes = %w(govuk-accordion__section)
-        section_classes << 'govuk-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', id: item[:heading][:id]) 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/_breadcrumbs.html.erb

@@ -13,7 +13,7 @@
   <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
 </script>
 
-<div class="<%= classes %>" data-module="track-click">
+<div class="<%= classes %>" data-module="gem-track-click">
   <ol class="govuk-breadcrumbs__list">
     <% breadcrumbs.each_with_index do |crumb, index| %>
       <% breadcrumb = GovukPublishingComponents::Presenters::Breadcrumb.new(crumb, index) %>

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

@@ -15,7 +15,7 @@
     "aria-label": aria_label,
     role: "navigation",
     data: {
-      module: "track-click"
+      module: "gem-track-click"
     }
   ) do %>
     <%= content_tag(

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='gem-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) || {})
+              data_attributes: { module: "gem-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: "gem-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",
+                  module: "gem-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",
+                  module: "gem-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="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide this message</button>
+    </div>
   </div>
 </div>

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

@@ -9,7 +9,7 @@
 %>
 <% if items.any? %>
   <% unless within_multitype_list %>
-    <ol class="gem-c-highlight-boxes" <%= "data-module=track-click" if highlight_boxes_helper.data_tracking? %>>
+    <ol class="gem-c-highlight-boxes" <%= "data-module=gem-track-click" if highlight_boxes_helper.data_tracking? %>>
   <% end %>
     <% items.each do |content_item| %>
       <li class="gem-c-highlight-boxes__item-wrapper <%= half_width_class %>">

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

@@ -9,7 +9,7 @@
 %>
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="<%= classes %> <%= brand_helper.brand_class %>"
-    <%= "data-module=track-click" if card_helper.is_tracking? %>
+    <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
     <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
     <div class="gem-c-image-card__text-wrapper">
       <div class="gem-c-image-card__header-and-context-wrapper">

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

@@ -6,7 +6,7 @@
   classes << "gem-c-layout-footer--border" if with_border
 %>
 <%= tag.footer class: classes, role: "contentinfo" do %>
-  <div class="govuk-width-container" data-module="track-click">
+  <div class="govuk-width-container" data-module="gem-track-click">
     <% if navigation.any? %>
       <div class="govuk-footer__navigation">
         <% navigation.each do |item| %>

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

@@ -16,7 +16,7 @@
   classes << "gem-c-metadata--inverse" if inverse
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
-  <dl data-module="track-click">
+  <dl data-module="gem-track-click">
     <% if from.any? %>
       <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.from", default: "From") %>:</dt>
       <dd class="gem-c-metadata__definition">

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

@@ -26,7 +26,7 @@
 %>
 <<%= wrapping_element %>
   class="<%= wrapper_classes.join(" ") %>"
-  <%= "data-module=track-click" if organisation[:data_attributes] %>
+  <%= "data-module=gem-track-click" if organisation[:data_attributes] %>
 >
   <% if organisation[:url] %>
     <%= link_to organisation[:url],

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

@@ -4,7 +4,7 @@
   role="navigation"
   aria-label="<%= t("govuk_component.previous_and_next_navigation.pagination", default: "Pagination") %>"
 >
-  <ul class="gem-c-pagination__list" data-module="track-click">
+  <ul class="gem-c-pagination__list" data-module="gem-track-click">
     <% if local_assigns.include?(:previous_page) %>
       <li class="gem-c-pagination__item gem-c-pagination__item--previous">
         <a href="<%= previous_page[:url] %>"

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

@@ -14,7 +14,7 @@
   classes << brand_helper.brand_class
 
   data_attributes ||= {}
-  data_attributes[:module] = 'track-click'
+  data_attributes[:module] = 'gem-track-click'
 %>
 <% if links.any? %>
   <%= tag.div(class: classes, data: data_attributes) do %>

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

@@ -28,7 +28,7 @@
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <h2 class="<%= classes %>" data-module="track-click">
+  <h2 class="<%= classes %>" data-module="gem-track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"

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

@@ -6,7 +6,7 @@
 <% if links.any? %>
   <div 
     class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>" 
-    data-module="track-click">
+    data-module="gem-track-click">
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>

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

@@ -27,7 +27,7 @@
     <% end %>
     <ul
       class="gem-c-subscription-links__list<%= ' gem-c-subscription-links__list--small' if local_assigns[:small_form] == true %>"
-      <%= "data-module=track-click" if sl_helper.tracking_is_present? %>
+      <%= "data-module=gem-track-click" if sl_helper.tracking_is_present? %>
     >
       <% if sl_helper.email_signup_link.present? %>
         <li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>" >

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

@@ -9,7 +9,7 @@
   taxonomy_list_helper = GovukPublishingComponents::Presenters::TaxonomyListHelper.new(image_cards)
 %>
 <% if highlight_box || document_list || image_cards %>
-  <ul class="gem-c-taxonomy-list" data-module="track-click">
+  <ul class="gem-c-taxonomy-list" data-module="gem-track-click">
     <% if image_cards %>
       <% taxonomy_list_helper.image_card_data.each do |image_card| %>
         <li class="gem-c-taxonomy-list__item">

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

@@ -7,7 +7,7 @@
   <nav role="navigation"
     class="gem-c-translation-nav <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
     aria-label="<%= t("common.translations") %>"
-    <%= "data-module=\"track-click\"" if translation_helper.tracking_is_present? %>
+    <%= "data-module=\"gem-track-click\"" if translation_helper.tracking_is_present? %>
   >
     <ul class="gem-c-translation-nav__list">
       <% translation_helper.translations.each.with_index do |translation, i| %>

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

@@ -3,7 +3,7 @@
 <% link_path = t("components.related_navigation.transition.link_path") %>
 
 <% data_attributes = {
-  "module": "track-click",
+  "module": "gem-track-click",
   "track-category": "relatedLinkClicked",
   "track-action": "1.0 Transition",
   "track-label": link_path,

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:
 
@@ -269,6 +274,35 @@ examples:
             text: "How people read"
           content:
             html: "<p class='govuk-body'>This is the content for How people read.</p>"
+  with_the_anchor_link_navigation:
+    description: |
+      Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
+
+      This feature automatically opens accordions when an anchor link is clicked within another accordion that links to either the id of an accordion section heading or an id within the content of an accordion. This will also automatically navigate to and open accordions on page load using the same rules.
+
+      This feature won't be used if the `anchor_navigation` flag isn't passed as true to mitigate performance risk from event listeners on a large number of links.
+
+      Unlike with the accordion-wide custom id attribute, any ids passed to accordion headings as part of this feature aren't stored in `localStorage` so don't need to be unique across your domain, but **should still be unique in the context of the page**.
+    data:
+      anchor_navigation: true
+      items:
+        - heading:
+            text: "Writing well for the web"
+            id: "writing-well-for-the-web"
+          content:
+            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+        - heading:
+            text: "Writing well for specialists"
+          content:
+            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+        - heading:
+            text: "Know your audience"
+          content:
+            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+        - heading:
+            text: "How people read"
+          content:
+            html: "<p class='govuk-body'>This is the content for How people read.</p>"
   condensed_layout:
     description: |
       This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.

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

@@ -1,6 +1,8 @@
 name: Cookie banner
 description: Help users manage their personal data by telling them when you store cookies on their device.
 body: |
+  By default the cookie banner is shown to all users with just a link to the settings page. If JS is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
+
   Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
 
   If the examples below are not showing the banner, make sure the `cookies_preferences_set` cookie is not present or is set to false.
@@ -18,6 +20,13 @@ examples:
       title: "Can we store analytics cookies on your device?"
       text: "This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the <a class='govuk-link' href='/cookies'>cookies page</a>"
       confirmation_message: "You’ve accepted all cookies."
+
+  with_multi_paragraph_custom_content:
+    data:
+      title: "Can we store analytics cookies on your device?"
+      text: ["This is some custom text in my cookie banner.","There are three paragraphs.","They are passed as an array"]
+      confirmation_message: "You’ve accepted all cookies."
+
   with_custom_cookie_preferences_href:
     data:
       cookie_preferences_href: "/cookies"