govuk_publishing_components 24.1.1 → 24.4.1

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

@@ -5,6 +5,7 @@
   id ||= "default-id-#{SecureRandom.hex(4)}"
   items ||= []
   condensed ||= false
+  anchor_navigation ||= false
 
   accordion_classes = %w(gem-c-accordion)
   accordion_classes << 'gem-c-accordion--condensed' if condensed
@@ -12,6 +13,7 @@
 
   data_attributes ||= {}
   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 %>
@@ -19,8 +21,6 @@
       <%
         index = i + 1
 
-        item[:data_attributes] ||= nil
-
         section_classes = %w(gem-c-accordion__section)
         section_classes << 'gem-c-accordion__section--expanded' if item[:expanded]
 
@@ -29,7 +29,7 @@
 
       <%= 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 %>
+          <%= 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? %>

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

@@ -1,19 +1,22 @@
 <%
+  border ||= false
   breadcrumbs ||= []
-  inverse ||= false
   collapse_on_mobile ||= false
+  inverse ||= false
+
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
-  classes = "gem-c-breadcrumbs govuk-breadcrumbs"
-  classes << " govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
-  classes << " gem-c-breadcrumbs--inverse" if inverse
+  classes = %w[gem-c-breadcrumbs govuk-breadcrumbs]
+  classes << "govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
+  classes << "gem-c-breadcrumbs--inverse" if inverse
+  classes << "gem-c-breadcrumbs--border-bottom" if border == "bottom"
 %>
 
 <script type="application/ld+json">
   <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
 </script>
 
-<div class="<%= classes %>" data-module="track-click">
+<div class="<%= classes.join(" ") %>" 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/_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/_radio.html.erb

@@ -1,4 +1,5 @@
 <%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   id ||= nil
   id_prefix ||= "radio-#{SecureRandom.hex(4)}"
   items ||= []
@@ -54,7 +55,7 @@
         <% end %>
       <% else %>
         <%= tag.legend class: legend_classes do %>
-          <%= tag.h2 heading, class: "govuk-fieldset__heading" %>
+          <%= content_tag(shared_helper.get_heading_level, heading, class: "govuk-fieldset__heading") %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -19,10 +19,12 @@
     data: {
       module: "show-password",
       disable_form_submit_check: disable_form_submit_check,
-      show: t('components.input.show'),
-      hide: t('components.input.hide'),
-      announce_show: t('components.input.announce_show'),
-      announce_hide: t('components.input.announce_hide')
+      show_text: t('components.show_password.show'),
+      hide_text: t('components.show_password.hide'),
+      show_full_text: t('components.show_password.show_password'),
+      hide_full_text: t('components.show_password.hide_password'),
+      announce_show: t('components.show_password.announce_show'),
+      announce_hide: t('components.show_password.announce_hide')
     } do %>
       <%= render "govuk_publishing_components/components/input", {
         label: label,

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

@@ -274,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/breadcrumbs.yml

@@ -97,3 +97,25 @@ examples:
         url: '/browse/abroad'
       - title: 'Travel abroad'
         url: '/browse/abroad/travel-abroad'
+  with_border:
+    description: "Set a border below the breadcrumb. Off by default."
+    data:
+      border: "bottom"
+      breadcrumbs:
+      - title: "Section"
+        url: "/section"
+      - title: "Sub-section"
+        url: "/section/sub-section"
+      - title: "Sub-sub-section"
+        url: "/section/sub-section/sub-section"
+  with_border_and_collapse_on_mobile:
+    data:
+      border: "bottom"
+      collapse_on_mobile: true
+      breadcrumbs:
+      - title: "Section"
+        url: "/section"
+      - title: "Sub-section"
+        url: "/section/sub-section"
+      - title: "Sub-sub-section"
+        url: "/section/sub-section/sub-section"

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"

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

@@ -45,7 +45,7 @@ examples:
     data:
       padding_top: false
       block: |
-        <div class="gem-c-breadcrumbs " data-module="track-click">
+        <div class="gem-c-breadcrumbs " data-module="gem-track-click">
           <ol>
             <li class="">
                 <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="gem-c-breadcrumbs--inverse" aria-current="false" href="/section">Section</a>