govuk_publishing_components 29.10.0 → 29.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c90f6280f1c3ce88606be0f030883575971e8fd8447cac1b353b2e1163221b63
-  data.tar.gz: 79e9a7c4d8f262fd3dd65d504aabcbff63cf7228479a540f7fb187cf4383e8fa
+  metadata.gz: 4908ab95bb70e9f55096b46cae08b0ea6fff5f168da24aa427c810a39de96e4a
+  data.tar.gz: 99873d158278fbbf30eb341558a5424b9957054b0711486312bd4e18b9c45b35
 SHA512:
-  metadata.gz: 036a6a9d2e713632f5f8ca68b997017cf728dbf7f0dfa46709762b185ee32d576526bcad7ebbb453a0a8feb9e809c95dd5e86bf20d91d35293b2009fd972f0b3
-  data.tar.gz: 876823d94cae4f3fbbcc4a8e5c178a35e0d9c90b8ea5f0d29b8e9ec737097d9764608f3dbfea13f7d8ae8aa252c07f33fba46e53638cc249b1f20c86e0c99cc6
+  metadata.gz: 7c6a51b33e3f4fccb750bdc8ab05171bb7d3e877f5ee8e9f0a601be977baa390162cfbab07a94facf2905d7eadd5f504640e25e86260d5b756e82959a8532522
+  data.tar.gz: 5531061592b4e1db78a34d8ecf15f613f05140585df1d5edb76224e82b317a62be16fb7ae4345d75c075297f164b3eb1569c794a7337a09d7345fee4061e0daf

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js

@@ -1,3 +1,4 @@
+// = require govuk/vendor/polyfills/Element/prototype/closest.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
@@ -10,38 +11,47 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   GtmClickTracking.prototype.init = function () {
-    var trackClicksOn = [this.module]
-    if (!this.module.getAttribute(this.trackingTrigger)) {
-      trackClicksOn = this.module.querySelectorAll('[' + this.trackingTrigger + ']')
-    }
-
-    for (var i = 0; i < trackClicksOn.length; i++) {
-      trackClicksOn[i].addEventListener('click', this.trackClick.bind(this))
-    }
+    this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
   }
 
   GtmClickTracking.prototype.trackClick = function (event) {
     if (window.dataLayer) {
-      var target = event.currentTarget
-      var data = {
-        event: 'analytics',
-        event_name: target.getAttribute('data-gtm-event-name'),
-        // get entire URL apart from domain
-        link_url: window.location.href.substring(window.location.origin.length),
-        ui: JSON.parse(target.getAttribute('data-gtm-attributes'))
-      }
-      var ariaExpanded = this.checkExpandedState(target)
-      if (ariaExpanded) {
-        data.ui.state = ariaExpanded === 'false' ? 'opened' : 'closed'
+      var target = this.findTrackingAttributes(event.target)
+      if (target) {
+        var data = {
+          event: 'analytics',
+          event_name: target.getAttribute('data-gtm-event-name'),
+          // get entire URL apart from domain
+          link_url: window.location.href.substring(window.location.origin.length),
+          ui: JSON.parse(target.getAttribute('data-gtm-attributes')) || {}
+        }
+        var ariaExpanded = this.checkExpandedState(target)
+        if (ariaExpanded) {
+          data.ui.state = ariaExpanded === 'false' ? 'opened' : 'closed'
+          data.ui.text = data.ui.text || target.innerText
+        }
+        window.dataLayer.push(data)
       }
-      window.dataLayer.push(data)
     }
   }
 
+  GtmClickTracking.prototype.findTrackingAttributes = function (clicked) {
+    if (clicked.hasAttribute('[' + this.trackingTrigger + ']')) {
+      return clicked
+    } else {
+      return clicked.closest('[' + this.trackingTrigger + ']')
+    }
+  }
+
+  // check either element is expandable or contains expandable element
   GtmClickTracking.prototype.checkExpandedState = function (clicked) {
-    var expanded = clicked.querySelector('[aria-expanded]')
-    if (expanded) {
-      return expanded.getAttribute('aria-expanded')
+    var isExpandable = clicked.getAttribute('aria-expanded')
+    var containsExpandable = clicked.querySelector('[aria-expanded]')
+
+    if (isExpandable) {
+      return isExpandable
+    } else if (containsExpandable) {
+      return containsExpandable.getAttribute('aria-expanded')
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -45,6 +45,21 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     if (this.$module.getAttribute('data-track-sections') === 'true') {
       this.addEventListenerSections()
     }
+
+    // look for data attributes to put onto the 'show/hide all' link
+    var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
+    if (showAllAttributes) {
+      try {
+        var showAll = this.$module.querySelector('.' + this.showAllControls)
+        var values = JSON.parse(showAllAttributes)
+        var keys = Object.keys(values)
+        for (var i = 0; i < keys.length; i++) {
+          showAll.setAttribute('data-' + keys[i], values[keys[i]])
+        }
+      } catch (e) {
+        console.error('Could not read accordion data attributes error: ' + e.message, window.location)
+      }
+    }
   }
 
   // Navigate to and open accordions with anchored content on page load if a hash is present

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -10,6 +10,7 @@
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
 @import "components/print/layout-super-navigation-header";
+@import "components/print/organisation-logo";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
 @import "components/print/textarea";

data/app/assets/stylesheets/govuk_publishing_components/components/print/_organisation-logo.scss

@@ -1,3 +1,7 @@
+.gem-c-organisation-logo {
+  width: 25%;
+}
+
 .gem-c-organisation-logo__image {
   max-width: 100%;
 }

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

@@ -27,6 +27,9 @@
   data_attributes[:track_show_all_clicks] = track_show_all_clicks
   data_attributes[:track_sections] = track_sections
 
+  data_attributes_show_all ||= nil
+  data_attributes[:show_all_attributes] = data_attributes_show_all if data_attributes_show_all
+
   translations.each do |key, translation|
     locales[key] = shared_helper.t_locale(translation)
     data_attributes[key] = t(translation)
@@ -47,8 +50,8 @@
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
     <% items.each_with_index do |item, i| %>
       <%
-        # The GOVUK Frontend JavaScript for this component 
-        # uses a loop starting at 1 for accessing heading ID values, 
+        # The GOVUK Frontend JavaScript for this component
+        # uses a loop starting at 1 for accessing heading ID values,
         # hence the increment below
         index = i + 1
 
@@ -65,11 +68,10 @@
             content_tag(
               shared_helper.get_heading_level,
               content_tag(
-                'span', 
-                item[:heading][:text], 
+                'span',
+                item[:heading][:text],
                 class: "govuk-accordion__section-button",
                 id: "#{id}-heading-#{index}"
-                
               ),
               class: "govuk-accordion__section-heading",
               id: item[:heading][:id],

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

@@ -17,7 +17,7 @@
 
     <%= render "govuk_publishing_components/components/textarea", { id: id, character_count: true }.merge(textarea.symbolize_keys) %>
 
-    <div id="<%= id %>-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
+    <div id="<%= id %>-info" class="govuk-hint govuk-character-count__message">
       <%= t("components.character_count.body", number: maxlength || maxwords, type: maxwords ? t("components.character_count.type.words") : t("components.character_count.type.characters")) %>
     </div>
   <% end %>

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

@@ -29,7 +29,6 @@
     aria_described_by << describedby if describedby
     aria_described_by = aria_described_by.join(" ")
   end
-
 %>
 
 <%= content_tag :div, class: form_group_css_classes do %>

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

@@ -62,9 +62,7 @@
   if type == "number"
     type = "text"
     inputmode = "numeric"
-    pattern = "[0-9]*"
   end
-
 %>
 
 <%= content_tag :div, class: form_group_css_classes do %>

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

@@ -189,10 +189,17 @@ examples:
 
       Each item can also have a `data_attributes` hash. These `data_attributes` are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
 
+      Data attributes can also be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created).
     data:
       data_attributes:
           gtm: gtm-accordion
           ga: ga-accordion
+      data_attributes_show_all:
+        module: example
+        track-action: click
+        ui:
+          type: test
+          text: something
       items:
         - heading:
             text: Writing well for the web
@@ -277,13 +284,13 @@ examples:
             html: <p class="govuk-body">This is the content for How people read.</p>
   with_the_anchor_link_navigation:
     description: |
-      Some apps require custom `id`s per accordion section heading. Custom `id`s allow you to link section headings, sometimes across multiple pages. 
-      
+      Some apps require custom `id`s per accordion section heading. Custom `id`s allow you to link section headings, sometimes across multiple pages.
+
       For example on [guidance pages for Content Designers, referred to as "manuals",](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations) each manual includes multiple sets of accordions and will reference between specific sections to easily access content.
 
-      Using the same rules, custom `id`s automatically open accordions when users click within another accordion that links to either 
+      Using the same rules, custom `id`s automatically open accordions when users click within another accordion that links to either
 
-      * the `id` of an accordion section heading 
+      * the `id` of an accordion section heading
       * an `id` within the content of an accordion (this will also automatically navigate to and open accordions on page load)
 
       This feature will only be used if the `anchor_navigation` flag is passed as `true`. This mitigates performance risk from event listeners on a large number of links.
@@ -294,13 +301,13 @@ examples:
       items:
         - heading:
             text: Writing well for the web
-            id: writing-well-for-the-web
+            id: writing-well-for-the-web-1
           content:
-            html: <p class="govuk-body">This is content for accordion 1 of 2</p><p class="govuk-body">This content contains a <a href="#anchor-nav-test" class="govuk-link">link</a></p>
+            html: <p class="govuk-body">This is content for accordion 1 of 2</p><p class="govuk-body">This content contains a <a href="#anchor-nav-test-1" class="govuk-link">link</a></p>
         - heading:
             text: Writing well for specialists
           content:
-            html: <p class="govuk-body" id="anchor-nav-test">This is content for accordion 2 of 2</p>
+            html: <p class="govuk-body" id="anchor-nav-test-1">This is content for accordion 2 of 2</p>
         - heading:
             text: Know your audience
           content:
@@ -312,31 +319,31 @@ examples:
   with_track_show_all_clicks:
     description: |
       To switch on Google Analytics for the "Show all sections" button on click, pass `track_show_all_clicks: true` the values passed on open will be
-      `Event Action: accordionOpened` `Event Category: pageElementInteraction` `Event Label: Show all sections` 
+      `Event Action: accordionOpened` `Event Category: pageElementInteraction` `Event Label: Show all sections`
     data:
       track_show_all_clicks: true
       items:
         - heading:
             text: Writing well for the web
-            id: writing-well-for-the-web
+            id: writing-well-for-the-web-2
           content:
-            html: <p class="govuk-body">This is content for accordion 1 of 2</p><p class="govuk-body">This content contains a <a href="#anchor-nav-test" class="govuk-link">link</a></p>
+            html: <p class="govuk-body">This is content for accordion 1 of 2</p>
         - heading:
             text: Writing well for specialists
           content:
-            html: <p class="govuk-body" id="anchor-nav-test">This is content for accordion 2 of 2</p>
+            html: <p class="govuk-body">This is content for accordion 2 of 2</p>
   with_track_sections:
     description: |
       To switch on Google Analytics for each section, on click, pass `track_sections: true` the values passed on open will be
       `Event Action: accordionOpened` / `accordionClosed` `Event Category: pageElementInteraction` and the `Event Label` being the heading text.
-      
+
       (`track_show_all_clicks: true` can be added to track the "Show all sections" button as well, if required)
     data:
       track_sections: true
       items:
         - heading:
             text: Writing well for the web
-            id: writing-well-for-the-web
+            id: writing-well-for-the-web-3
           content:
             html: <p class="govuk-body">This is content for accordion 1 of 2</p><p class="govuk-body">This content contains a <a href="#anchor-nav-test" class="govuk-link">link</a></p>
         - heading:

data/lib/govuk_publishing_components/presenters/public_layout_helper.rb

@@ -2,7 +2,7 @@ module GovukPublishingComponents
   module Presenters
     class PublicLayoutHelper
       FOOTER_NAVIGATION_COLUMNS = [2, 1].freeze
-      FOOTER_TRACK_ACTIONS = %w[topicsLink governmentActivityLink].freeze
+      FOOTER_TRACK_ACTIONS = %w[topicsLink governmentactivityLink].freeze
       FOOTER_META = {
         items: [
           {

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "29.10.0".freeze
+  VERSION = "29.11.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 29.10.0
+  version: 29.11.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-24 00:00:00.000000000 Z
+date: 2022-05-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config