govuk_publishing_components 34.13.0 → 35.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 21e3ffb5b58dc3b31d794d2582929eac560f6dbf9509bf79164e90718483ef18
-  data.tar.gz: 7c003248697419a6c54c6fdeba073fbce724390f266a54ba7e2a3149447f75d2
+  metadata.gz: 90043704d7994696d49541ef766ca866648e3594be347483450194425d229dc7
+  data.tar.gz: 43f81d610ba1484584043399cd9b69219aaa010f00241dcb11fbffc24d6ea2de
 SHA512:
-  metadata.gz: 90c9c967e09f36e6c9c8fefed7db444427ff14568e800a6b9255dfb69eab7c6e81f78e6eb939958075645822f9d9ca93875c91a1f83b38be61e4951522a584f0
-  data.tar.gz: 5163288eb0c08e404376545724810b3854a5f745f6e4ad0fd1fe23a3ef82fa152ac14b1c2971df6b6f8e04563b0ddac4018ec218f5e6dabe85879481cbd39f28
+  metadata.gz: a656046225d2491310ba439b342b639844dbdcdfcf908ace0d26a2db995c2aa4813a9273298591a595b2224a018167f17a3aea2ae67555b472f2ac75f7f26e5e
+  data.tar.gz: 6f1110a0611153a5d1d494f7afc38523efb1db88949757756b11acfad77306408d12794be83753aed7bc618f10a30c6463e0719e8a7f4f24a67328a071d147c2

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-auto-tracker.js

@@ -28,13 +28,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (window.dataLayer) {
       try {
         var data = this.module.getAttribute(this.trackingTrigger)
-        data = JSON.parse(data)
+        data = JSON.parse(data) || {}
       } catch (e) {
         // if there's a problem with the config, don't start the tracker
         console.error('GA4 configuration error: ' + e.message, window.location)
         return
       }
 
+      if (data.index) {
+        data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
+      }
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -237,6 +237,37 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         var ga4LinkData = JSON.parse(module.getAttribute('data-ga4-link'))
         ga4LinkData.index_total = totalLinks
         module.setAttribute('data-ga4-link', JSON.stringify(ga4LinkData))
+      },
+
+      // index is given as a string of the form 1.2.3 or 1.2
+      // split this into named sub-parameters
+      createIndexObject: function (index) {
+        if (typeof index === 'undefined') {
+          return undefined
+        }
+        if (typeof index === 'object') {
+          return index
+        }
+
+        index = index.toString().split('.')
+        // this will soon include 'index_section_count'
+        // number of sections overall in the thing being tracked (but not yet in use)
+        switch (index.length) {
+          case 1:
+            return {
+              index_section: parseInt(index[0])
+            }
+          case 2:
+            return {
+              index_section: parseInt(index[0]),
+              index_link: parseInt(index[1])
+            }
+          case 3:
+            return {
+              index_section: parseInt(index[1]),
+              index_link: parseInt(index[2])
+            }
+        }
       }
     },
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js

@@ -42,6 +42,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
+      data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js

@@ -8,6 +8,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.module = module
     this.trackingTrigger = 'data-ga4-form' // elements with this attribute get tracked
     this.includeTextInputValues = this.module.hasAttribute('data-ga4-form-include-text')
+    this.redacted = false
   }
 
   Ga4FormTracker.prototype.init = function () {
@@ -88,7 +89,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
           input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)
         } else {
-          input.answer = '[REDACTED]'
+          this.redacted = true
         }
       } else if (inputType === 'radio' && elem.checked) {
         input.answer = labelText
@@ -101,18 +102,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4FormTracker.prototype.combineGivenAnswers = function (data) {
-    var answers = ''
+    var answers = []
     for (var i = 0; i < data.length; i++) {
       var answer = data[i].answer
       if (answer) {
-        answers += answer + ','
+        answers.push(answer)
       }
     }
-    // remove the trailing comma
-    if (answers.length) {
-      answers = answers.slice(0, -1)
-      return answers
+    if (this.redacted) {
+      answers.push('[REDACTED]')
     }
+
+    answers = answers.join(',')
+    return answers
   }
 
   Modules.Ga4FormTracker = Ga4FormTracker

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js

@@ -61,6 +61,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Ga4LinkTracker.prototype.trackClick = function (event) {
     var element = event.target
+    var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
 
     // don't track this link if it's already being tracked by the ecommerce tracker
     if (element.closest('[data-ga4-ecommerce-path]')) {
@@ -81,12 +82,17 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
       var url = data.url || this.findLink(event.target).getAttribute('href')
-      data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(url)
+      data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(PIIRemover.stripPII(url))
       data.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(data.url)
       data.link_path_parts = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkPathParts(data.url)
       data.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
       data.external = window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(data.url) ? 'true' : 'false'
       data.index = event.target.getAttribute('data-ga4-index') ? parseInt(event.target.getAttribute('data-ga4-index')) : data.index || undefined
+      data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
+
+      if (data.type === 'smart answer' && data.action === 'change response') {
+        data.section = PIIRemover.stripPIIWithOverride(data.section, true, true)
+      }
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js

@@ -4,7 +4,8 @@
   var GOVUK = global.GOVUK || {}
   var EMAIL_PATTERN = /[^\s=/?&#]+(?:@|%40)[^\s=/?&]+/g
   var POSTCODE_PATTERN = /\b[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}\b/gi
-  var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
+  var DATE_PATTERN_NUMERIC = /\d{4}(-?)\d{2}(-?)\d{2}/g
+  var DATE_PATTERN_STRING = /\d{1,2}\s(January|February|March|April|May|June|July|August|September|October|November|December)\s\d{4}/g
   var ESCAPE_REGEX_PATTERN = /[|\\{}()[\]^$+*?.]/g
 
   // specific URL parameters to be redacted from accounts URLs
@@ -85,7 +86,8 @@
     stripped = this.stripQueryStringParameters(stripped)
 
     if (this.stripDatePII === true) {
-      stripped = stripped.replace(DATE_PATTERN, '[date]')
+      stripped = stripped.replace(DATE_PATTERN_NUMERIC, '[date]')
+      stripped = stripped.replace(DATE_PATTERN_STRING, '[date]')
     }
     if (this.stripPostcodePII === true) {
       stripped = stripped.replace(POSTCODE_PATTERN, '[postcode]')

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

@@ -62,7 +62,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     var isGa4Enabled = dataModule ? dataModule.indexOf('ga4-event-tracker') !== -1 : false
     if (isGa4Enabled) {
       var indexTotal = this.$module.querySelectorAll('.govuk-accordion__section').length
-      var showAllAttributesGa4 = { event_name: 'select_content', type: 'accordion', index: 0, index_total: indexTotal }
+      var showAllAttributesGa4 = { event_name: 'select_content', type: 'accordion', index: { index_section: 0, index_section_count: indexTotal } }
       showAll = this.$module.querySelector(this.showAllControls)
       showAll.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
     }

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -21,16 +21,12 @@ module GovukPublishingComponents
         @find_all_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components/
         find_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/)(?!print\/)+[a-zA-Z_-]+(?=['"])/
 
-        @find_all_print_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components_print/
-        find_print_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/print\/)[a-zA-Z_-]+(?=['"])/
-
         @find_all_javascripts = /\/\/ *= require govuk_publishing_components\/all_components/
         find_javascripts = /(?<=require govuk_publishing_components\/components\/)[a-zA-Z_-]+/
 
-        components_in_templates = find_components(templates, find_components, "templates", true) || []
-        components_in_stylesheets = find_components(stylesheets, find_stylesheets, "stylesheets", false) || []
-        components_in_print_stylesheets = find_components(stylesheets, find_print_stylesheets, "print_stylesheets", false) || []
-        components_in_javascripts = find_components(javascripts, find_javascripts, "javascripts", false) || []
+        components_in_templates = find_components(templates, find_components, "template", true) || []
+        components_in_stylesheets = find_components(stylesheets, find_stylesheets, "stylesheet", false) || []
+        components_in_javascripts = find_components(javascripts, find_javascripts, "javascript", false) || []
 
         ruby_paths = %w[/app/helpers/ /app/presenters/ /lib/]
         components_in_ruby = []
@@ -41,19 +37,15 @@ module GovukPublishingComponents
 
         components_found = [
           {
-            location: "templates",
+            location: "template",
             components: components_in_templates,
           },
           {
-            location: "stylesheets",
+            location: "stylesheet",
             components: components_in_stylesheets,
           },
           {
-            location: "print_stylesheets",
-            components: components_in_print_stylesheets,
-          },
-          {
-            location: "javascripts",
+            location: "javascript",
             components: components_in_javascripts,
           },
           {
@@ -97,9 +89,9 @@ module GovukPublishingComponents
           components_found << find_match(find, src, type)
         end
 
-        get_helper_references(file, src) if %w[ruby templates].include?(type)
+        get_helper_references(file, src) if %w[ruby template].include?(type)
 
-        if type == "javascripts"
+        if type == "javascript"
           jquery_references = find_code_references(file, src, /\$\(/)
           @jquery_references << jquery_references if jquery_references
         else
@@ -130,9 +122,8 @@ module GovukPublishingComponents
     # looks for components in the given src of a file
     # returns an array of component names or an empty array
     def find_match(find, src, type)
-      return %w[all] if src.match(@find_all_stylesheets) && type == "stylesheets"
-      return %w[all] if src.match(@find_all_print_stylesheets) && type == "print_stylesheets"
-      return %w[all] if src.match(@find_all_javascripts) && type == "javascripts"
+      return %w[all] if src.match(@find_all_stylesheets) && type == "stylesheet"
+      return %w[all] if src.match(@find_all_javascripts) && type == "javascript"
 
       matches = src.scan(find)
       return [] unless matches.any?

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -40,7 +40,7 @@ module GovukPublishingComponents
     end
 
     # turn static data into an object so locations can be easily referenced
-    # should give object of form { "templates" => [], "stylesheets" => [] }
+    # should give object of form { "template" => [], "stylesheet" => [] }
     def clean_static(data)
       Hash[data[:components_found].map { |d| [d[:location], d[:components]] }]
     end
@@ -55,14 +55,12 @@ module GovukPublishingComponents
       results.each do |result|
         if result[:application_found]
           application_uses_static = @applications_using_static.include?(result[:name])
-          templates = result[:components_found].find { |c| c[:location] == "templates" }
-          stylesheets = result[:components_found].find { |c| c[:location] == "stylesheets" }
-          print_stylesheets = result[:components_found].find { |c| c[:location] == "print_stylesheets" }
-          javascripts = result[:components_found].find { |c| c[:location] == "javascripts" }
+          templates = result[:components_found].find { |c| c[:location] == "template" }
+          stylesheets = result[:components_found].find { |c| c[:location] == "stylesheet" }
+          javascripts = result[:components_found].find { |c| c[:location] == "javascript" }
           ruby = result[:components_found].find { |c| c[:location] == "ruby" }
 
           @all_stylesheets = true if stylesheets[:components].include?("all")
-          @all_print_stylesheets = true if print_stylesheets[:components].include?("all")
           @all_javascripts = true if javascripts[:components].include?("all")
 
           templates[:components] = include_any_components_within_components(templates[:components])
@@ -77,24 +75,20 @@ module GovukPublishingComponents
 
           summary = [
             {
-              name: "Components in templates",
-              value: templates[:components].flatten.uniq.sort.join(", "),
+              name: "In templates",
+              value: templates[:components],
             },
             {
-              name: "Components in stylesheets",
-              value: stylesheets[:components].join(", "),
+              name: "In stylesheets",
+              value: stylesheets[:components],
             },
             {
-              name: "Components in print stylesheets",
-              value: print_stylesheets[:components].join(", "),
+              name: "In javascripts",
+              value: javascripts[:components],
             },
             {
-              name: "Components in javascripts",
-              value: javascripts[:components].join(", "),
-            },
-            {
-              name: "Components in ruby",
-              value: ruby[:components].join(", "),
+              name: "In ruby",
+              value: ruby[:components],
             },
           ]
 
@@ -145,7 +139,7 @@ module GovukPublishingComponents
 
         second_group.each do |second|
           second_location = second[:location]
-          second_location = "code" if %w[templates ruby].include?(second_location)
+          second_location = "code" if %w[template ruby].include?(second_location)
           # subtract one group from the other, leaving only those not in both
           in_current = find_missing(second[:components].clone, first[:components].clone)
 
@@ -153,7 +147,18 @@ module GovukPublishingComponents
 
           # now we have a list of 'missing' component assets, check the gem to see if that asset exists
           in_current.each do |component|
-            asset_in_gem = @gem_data.include?("component_#{second_location}".to_sym) && @gem_data["component_#{second_location}".to_sym].include?(component)
+            component_assets = @gem_data[:component_file_details].select { |c| c[:name] == component }
+            if !component_assets.empty?
+              component_assets = component_assets[0]
+              asset_in_gem = if second_location == "code"
+                               component_assets["template_exists".to_sym]
+                             else
+                               component_assets["#{second_location}_exists".to_sym]
+                             end
+            else
+              asset_in_gem = false
+            end
+
             check_static = @static_data && second_location != "code"
             asset_in_static = asset_already_in_static(second_location, component) if check_static
             raise_warning = asset_in_gem && !asset_in_static
@@ -177,7 +182,7 @@ module GovukPublishingComponents
       warnings = []
 
       locations.each do |location|
-        next if location[:location] == "templates" || location[:location] == "ruby"
+        next if location[:location] == "template" || location[:location] == "ruby"
 
         location[:components].each do |component|
           raise_warning = asset_already_in_static(location[:location], component)
@@ -191,14 +196,14 @@ module GovukPublishingComponents
     def warn_about_missing_assets(components)
       warnings = []
 
-      code = components.select { |c| c[:location] == "templates" || c[:location] == "ruby" }
+      code = components.select { |c| c[:location] == "template" || c[:location] == "ruby" }
       code = [
         {
           location: "code",
           components: code.map { |c| c[:components] }.flatten.uniq.sort,
         },
       ]
-      assets = components.select { |c| c[:location] == "stylesheets" || c[:location] == "print_stylesheets" || c[:location] == "javascripts" }
+      assets = components.select { |c| c[:location] == "stylesheet" || c[:location] == "javascript" }
 
       warnings << find_missing_items(code, assets)
       warnings << find_missing_items(assets, code)

data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -5,9 +5,10 @@ module GovukPublishingComponents
 This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the [component wrapper helper documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component-wrapper-helper.md) for more detail.
 
 - `id` - accepts a string for the element ID attribute
-- `data` - accepts a hash of data attributes
+- `data_attributes` - accepts a hash of data attributes
 - `aria` - accepts a hash of aria attributes
 - `classes` - accepts a space separated string of classes, these should not be used for styling and must be prefixed with `js-`
+- `role` - accepts a space separated string of roles
       "
     end
   end

data/app/views/govuk_publishing_components/audit/_applications.html.erb

@@ -62,11 +62,11 @@
           <% application[:summary].each do |item| %>
             <div class="govuk-summary-list__row">
               <dt class="govuk-summary-list__key">
-                <%= item[:name] %>
+                <%= item[:name] %> (<%= item[:value].length %>)
               </dt>
               <dd class="govuk-summary-list__value">
                 <% if item[:value].length > 0 %>
-                  <%= item[:value] %>
+                  <%= item[:value].join(", ") %>
                 <% else %>
                   None
                 <% end %>

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

@@ -3,55 +3,32 @@
 
   local_assigns[:margin_bottom] ||= 6
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  accordion_helper = GovukPublishingComponents::Presenters::AccordionHelper.new()
 
   id ||= "default-id-#{SecureRandom.hex(4)}"
   items ||= []
   anchor_navigation ||= false
   track_show_all_clicks ||= false
   track_sections ||= false
-
-  accordion_classes = %w(gem-c-accordion govuk-accordion)
-  accordion_classes << (shared_helper.get_margin_bottom)
-
-  translations = {
-    show_text: "common.show",
-    hide_text: "common.hide",
-    show_all_text: "components.accordion.show_all",
-    hide_all_text: "components.accordion.hide_all",
-    this_section_visually_hidden: "components.accordion.this_section_visually_hidden",
-  }
-
-  locales = {}
-
-  data_attributes ||= {}
-  ((data_attributes[:module] ||= "") << " " << "govuk-accordion gem-accordion").strip!
   ga4_tracking ||= false
-  data_attributes[:module] << " ga4-event-tracker" if ga4_tracking
-  data_attributes[:ga4_expandable] = '' if ga4_tracking
-  data_attributes[:anchor_navigation] = anchor_navigation
-  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)
-  end
-
-  unique_locales = locales.values.uniq
 
-  if unique_locales.length > 1
-    data_attributes[:locale] = locales
-  else
-    if unique_locales[0] != I18n.locale
-      data_attributes[:locale] = unique_locales[0]
-    end
-  end
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.set_id(id)
+  component_helper.add_class("gem-c-accordion govuk-accordion")
+  component_helper.add_class(shared_helper.get_margin_bottom)
 
+  component_helper.add_data_attribute({ module: "govuk-accordion gem-accordion" })
+  component_helper.add_data_attribute({ module: "ga4-event-tracker" }) if ga4_tracking
+  component_helper.add_data_attribute({ ga4_expandable: "" }) if ga4_tracking
+  component_helper.add_data_attribute({ anchor_navigation: anchor_navigation }) if anchor_navigation
+  component_helper.add_data_attribute({ track_show_all_clicks: track_show_all_clicks }) if track_show_all_clicks
+  component_helper.add_data_attribute({ track_sections: track_sections }) if track_sections
+  component_helper.add_data_attribute({ show_all_attributes: data_attributes_show_all }) if data_attributes_show_all
+  component_helper.add_data_attribute(accordion_helper.apply_translations)
 %>
 <% if items.any? %>
-  <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <% items.each_with_index do |item, i| %>
       <%
         # The GOVUK Frontend JavaScript for this component
@@ -67,8 +44,10 @@
             event_name: "select_content",
             type: "accordion",
             text: item[:heading][:text],
-            index: index,
-            index_total: items.length
+            index: {
+              index_section: index,
+              index_section_count: items.length,
+            },
           }.to_json
         end
 

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

@@ -5,16 +5,16 @@
   items ||= nil
   sub_heading_level ||= 3
   two_column_layout ||= false
-  local_assigns ||= nil
-  data_attributes ||= nil
 
   ul_classes = %w[gem-c-cards__list]
   ul_classes << 'gem-c-cards__list--two-column-desktop' if two_column_layout
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-cards")
 %>
 <% if items.present? %>
-  <div class="gem-c-cards">
+  <%= tag.div(**component_helper.all_attributes) do %>
     <% if heading %>
       <%= content_tag(shared_helper.get_heading_level, class: "gem-c-cards__heading govuk-heading-m") do %>
         <%= heading %>
@@ -49,5 +49,5 @@
         </li>
       <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

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

@@ -1,12 +1,14 @@
 <%
   add_gem_component_stylesheet("checkboxes")
-
-  # cb_helper.css_classes generates "gem-c-checkboxes"
   cb_helper = GovukPublishingComponents::Presenters::CheckboxesHelper.new(local_assigns)
   id = cb_helper.id
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.set_id(id)
+  component_helper.add_class(cb_helper.css_classes.join(" ")) # cb_helper.css_classes generates "gem-c-checkboxes"
+  component_helper.add_data_attribute({ module: "gem-checkboxes govuk-checkboxes" })
 %>
 
-<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "gem-checkboxes govuk-checkboxes" } do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <% if cb_helper.should_have_fieldset %>
     <% if cb_helper.heading_markup %>
       <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>

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

@@ -3,30 +3,24 @@
 
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
   underline_links ||= false
-  aria_label ||= t("components.contents_list.contents")
   format_numbers ||= false
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
   classes = %w[gem-c-contents-list]
-  classes << brand_helper.brand_class
-  link_classes = %w[
-    gem-c-contents-list__link
-    govuk-link
-  ]
+  link_classes = %w[gem-c-contents-list__link govuk-link]
   link_classes << brand_helper.color_class
   link_classes << "govuk-link--no-underline" unless underline_links
+
+  local_assigns[:aria] ||= {}
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
+  component_helper.add_data_attribute({ module: "gem-track-click" })
+  component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
+  component_helper.add_role("navigation")
 -%>
 <% if cl_helper.contents.any? %>
-  <%= content_tag(
-    :nav,
-    class: classes,
-    "aria-label": aria_label,
-    role: "navigation",
-    data: {
-      module: "gem-track-click"
-    }
-  ) do %>
+  <%= tag.nav(**component_helper.all_attributes) do %>
     <%= content_tag(
       :h2, {class: "gem-c-contents-list__title"}.merge(
         title_fallback == "en" ? {:lang => "en",} : {}

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

@@ -1,7 +1,10 @@
-<% prioritise_taxon_breadcrumbs ||= false %>
-<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.new(content_item, request, prioritise_taxon_breadcrumbs) %>
-<% inverse ||= false %>
-<% collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) %>
+<% 
+  ga4_tracking ||= false
+  prioritise_taxon_breadcrumbs ||= false
+  breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.new(content_item, request, prioritise_taxon_breadcrumbs, ga4_tracking)
+  inverse ||= false
+  collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) 
+%>
 
 <div class="gem-c-contextual-breadcrumbs">
   <% if breadcrumb_selector.step_by_step %>

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

@@ -10,7 +10,7 @@
 <div class="gem-c-contextual-sidebar">
   <% 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 %>
+    <%= render 'govuk_publishing_components/components/step_by_step_nav_related', links: navigation.step_nav_helper.related_links, ga4_tracking: ga4_tracking %>
   <% end %>
 
   <% if navigation.content_tagged_to_current_step_by_step? %>
@@ -26,7 +26,8 @@
     <%= render 'govuk_publishing_components/components/step_by_step_nav_related', {
       pretitle: t("components.contextual_sidebar.pretitle"),
       links: navigation.step_nav_helper.also_part_of_step_nav,
-      always_display_as_list: true
+      always_display_as_list: true,
+      ga4_tracking: ga4_tracking
     } %>
   <% end %>
 

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

@@ -22,7 +22,7 @@
 %>
 <% if steps %>
   <div
-    data-module="gemstepnav<% if ga4_tracking %> ga4-event-tracker<% end %>"
+    data-module="gemstepnav<% if ga4_tracking %> ga4-event-tracker ga4-link-tracker<% end %>"
     <%= "data-ga4-expandable" if ga4_tracking %>
     class="gem-c-step-nav js-hidden <% if small %>govuk-!-display-none-print<% end %> <% unless small %>gem-c-step-nav--large<% end %>"
     <%= "data-remember" if remember_last_step %>
@@ -77,8 +77,10 @@
             <%
               in_substep = false
               options[:step_nav_content_id] = step_nav_content_id
+              options[:step_title] = step[:title]
               options[:step_index] = step_index
               options[:link_index] = 0
+              options[:ga4_tracking] = ga4_tracking
             %>
             <% step[:contents].each do |element| %>
               <%= step_nav_helper.render_step_nav_element(element, options) %>

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

@@ -3,12 +3,17 @@
 
   title ||= false
   path ||= false
+  ga4_tracking ||= false
   breadcrumbs = [
     { title: "Home", url: "/" },
     { title: title, url: path }
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
+
   tracking_id ||= false
   tracking_category ||= "stepNavHeaderClicked"
   tracking_action ||= "top"
@@ -30,7 +35,7 @@
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <%= tag.div class: classes, data: { module: "gem-track-click" } do %>
+  <%= tag.div(class: classes, data: data) do %>
     <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"
@@ -38,6 +43,9 @@
         data-track-category="<%= tracking_category %>"
         data-track-action="<%= tracking_action %>"
         data-track-label="<%= tracking_label %>"
+        <% if ga4_tracking %>
+          data-ga4-link='{"event_name":"navigation", "type":"super breadcrumb", "index":{"index_link": "1"}, "index_total":"1"}'
+        <% end %>
         <% if tracking_dimension_enabled %>
           data-track-dimension="<%= tracking_dimension %>"
           data-track-dimension-index="<%= tracking_dimension_index %>"

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

@@ -1,14 +1,17 @@
 <%
   add_gem_component_stylesheet("step-by-step-nav-related")
-
+  ga4_tracking ||= false
   links ||= []
   pretitle ||= t("components.step_by_step_nav_related.part_of")
   always_display_as_list ||= false
+  classes = %w(gem-c-step-nav-related)
+  classes << "gem-c-step-nav-related--singular" if links.length == 1
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
 %>
 <% if links.any? %>
-  <div
-    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
-    data-module="gem-track-click">
+  <%= tag.div(class: classes, data: data) do %>
     <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 %>
@@ -19,14 +22,18 @@
             data-track-label="<%= links[0][:href] %>"
             data-track-dimension="<%= links[0][:text] %>"
             data-track-dimension-index="29"
-            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'>
+            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'
+            <% if ga4_tracking %>
+              data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "1"}, "index_total":"1"}'
+            <% end %>
+          >
             <%= links[0][:text] %>
           </a>
         </h2>
       <% else %>
         </h2>
         <ul class="gem-c-step-nav-related__links">
-          <% links.each do |link| %>
+          <% links.each_with_index do |link, index| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
                 class="govuk-link"
@@ -35,12 +42,16 @@
                 data-track-label="<%= link[:href] %>"
                 data-track-dimension="<%= link[:text] %>"
                 data-track-dimension-index="29"
-                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'>
+                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'
+                <% if ga4_tracking %>
+                  data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "<%= index + 1 %>"}, "index_total": "<%= links.length %>"}'
+                <% end %>
+              >
                 <%= link[:text] %>
               </a>
             </li>
           <% end %>
         </ul>
       <% end %>
-  </div>
-<% end %>
+  <% end %>
+<% end %>

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

@@ -6,15 +6,33 @@
   panel_css_classes = %w(govuk-tabs__panel)
   panel_css_classes << "gem-c-tabs__panel--no-border" if panel_border == false
   panel_css_classes = panel_css_classes.join(" ")
+
+  ga4_tracking ||= false
+  data_module = "govuk-tabs"
+  data_module << " ga4-event-tracker" if ga4_tracking
 %>
 <% if tabs.count > 1 %>
-  <div class="govuk-tabs gem-c-tabs" data-module="govuk-tabs">
+  <div class="govuk-tabs gem-c-tabs" data-module="<%= data_module %>">
     <h2 class="govuk-tabs__title">
       <%= t("components.tabs.contents") %>
     </h2>
     <ul class="govuk-tabs__list">
-      <% tabs.each do |tab| %>
+      <% tabs.each_with_index do |tab, index| %>
       <li class="govuk-tabs__list-item">
+        <%
+          tab[:tab_data_attributes] ||= {}
+          if ga4_tracking
+            tab[:tab_data_attributes][:ga4_event] = {
+              event_name: "select_content",
+              type: "tabs",
+              text: tab[:label],
+              index: {
+                index_section: index + 1,
+                index_section_count: tabs.length,
+              },
+            }
+          end
+        %>
         <%= link_to(tab[:label],
                     "##{tab[:id]}",
                     class: "govuk-tabs__tab",

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

@@ -34,6 +34,7 @@ accessibility_criteria: |
 
   * be fully expanded
   * not be marked as expandable
+uses_component_wrapper_helper: true  
 shared_accessibility_criteria:
   - link
 examples:

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

@@ -16,6 +16,7 @@ accessibility_criteria: |
   It is also good practise to include a heading above the list to tell users what the list contains
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -15,6 +15,7 @@ accessibility_criteria: |
   - have correctly associated labels
 
   Labels use the [label component](/component-guide/label).
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -24,6 +24,7 @@ shared_accessibility_criteria:
   - link
 accessibility_excluded_rules:
   - skip-link # The examples for this component are using references to sections on the page that do not exist in examples
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -65,18 +66,6 @@ examples:
           active: true
         - href: "#third-thing"
           text: Third thing
-  with_custom_aria_label:
-    description: 'An `aria-label` string should be used to contextualise the navigation for assistive technology. Defaults to `Contents` if `aria-label` is not passed.'
-    data:
-      aria_label: "Pages in this guide"
-      contents:
-        - href: "#first-thing"
-          text: First
-        - href: "#two"
-          text: Second
-          active: true
-        - href: "#third-thing"
-          text: Third thing
   nested_contents_lists:
     data:
       contents:

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

@@ -32,3 +32,16 @@ examples:
       inverse: true
     context:
       dark_background: true
+  with_ga4_tracking:
+    description: |
+      Adds GA4 tracking to the step by step nav header component when it is rendered as a breadcrumb. See the 
+      [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+      Note: tracking on regular breadcrumbs is enabled by default and does not require activating.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          part_of_step_navs:
+            - title: "Learn to drive a car: step by step"
+              base_path: "/micropigs-vs-micropugs"

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

@@ -157,3 +157,14 @@ examples:
                       - text: Arrange the funeral
                         href: "/after-a-death/arrange-the-funeral"
                     optional: false
+  with_ga4_tracking_on_part_of_step_by_step_heading(s):
+    description: Adds Google Analytics 4 tracking to the "Part of" step by step heading(s) in the sidebar. Currently only the Related Navigation component, Step by Step navigation component and Ukraine CTA accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        links:
+          part_of_step_navs:
+            - title: "Choosing a micropig or micropug: step by step"
+              base_path: "/micropigs-vs-micropugs"
+            - title: "Walk your micropig: step by step"
+              base_path: "/porgs-step-by-step"

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

@@ -79,6 +79,8 @@ examples:
       GA4 will then track these elements when they are expanded or collapsed.
       `data-ga4-event` contains a JSON with event data relevant to our tracking. `data-ga4-expandable` enables the value of `aria-expanded` to be captured.
       See the [ga4-event-tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) docs for more information.
+      Links are also tracked with the [ga4-link-tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md).
+      Therefore the `ga4-link-tracker` data module also exists on these step by step components. Any links will contain a data attribute of `ga4-link`, which contains the relevant tracking data as a JSON.
     data:
       ga4_tracking: true
       steps: [
@@ -92,6 +94,15 @@ examples:
             {
               type: 'paragraph',
               text: 'This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth.'
+            },
+            {
+              type: 'list',
+              contents: [
+                {
+                  href: 'https://www.gov.uk/learn-to-drive-a-car',
+                  text: 'This is a link with GA4 tracking attributes on it.'
+                }
+              ]
             }
           ],
         },
@@ -103,6 +114,15 @@ examples:
               type: 'paragraph',
               text: 'Some more text.'
             },
+            {
+              type: 'list',
+              contents: [
+                {
+                  href: 'https://www.nationalarchives.gov.uk',
+                  text: 'This is another link with GA4 tracking attributes on it.'
+                }
+              ]
+            }
           ]
         },
       ]

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

@@ -51,3 +51,9 @@ examples:
       tracking_action: "customTrackingAction"
       tracking_label: "customTrackingLabel"
       tracking_dimension_enabled: false
+  with_ga4_tracking:
+    description: The ga4_tracking boolean allows you to add Google Analytics 4 (GA4) tracking to your component. Setting this to true will add the `ga4-link-tracker` module to your component. The JavaScript will then add a `data-ga4-link` attribute which contains a JSON object with data relevant to our tracking. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      title: 'Learn to drive a motorbike: step by step'
+      path: /learn-to-drive-a-motorbike

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

@@ -76,3 +76,13 @@ examples:
           text: 'Learn to drive a motorbike: step by step'
         }
       ]
+  with_ga4_tracking:
+    description: The ga4_tracking boolean allows you to add Google Analytics 4 (GA4) tracking to your component. Setting this to true will add the `ga4-link-tracker` module to your component. The JavaScript will then add a `data-ga4-link` attribute which contains a JSON object with data relevant to our tracking. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      links: [
+        {
+          href: '#',
+          text: 'With ga4 tracking'
+        }
+      ]

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

@@ -84,3 +84,18 @@ examples:
             tracking: GTM-123AB
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+  with_ga4_tracking:
+    description: Enables GA4 tracking. This will add the required data module and data attributes to the tabs. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      tabs:
+        - id: "tab-with-ga4-tracking-1"
+          label: "First section"
+          title: "First section"
+          content: |
+            <p class="govuk-body-m">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
+        - id: "tab-with-ga4-tracking-2"
+          label: "Second section"
+          title: "Second section"
+          content: |
+            <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>

data/lib/govuk_publishing_components/presenters/accordion_helper.rb

@@ -0,0 +1,38 @@
+module GovukPublishingComponents
+  module Presenters
+    class AccordionHelper
+      def initialise; end
+
+      def translations
+        {
+          show_text: "common.show",
+          hide_text: "common.hide",
+          show_all_text: "components.accordion.show_all",
+          hide_all_text: "components.accordion.hide_all",
+          this_section_visually_hidden: "components.accordion.this_section_visually_hidden",
+        }
+      end
+
+      def apply_translations
+        shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({})
+        locales = {}
+        data_attributes = {}
+
+        translations.each do |key, translation|
+          locales[key] = shared_helper.t_locale(translation)
+          data_attributes[key] = I18n.translate(translation)
+        end
+
+        unique_locales = locales.values.uniq
+
+        if unique_locales.length > 1
+          data_attributes[:locale] = locales
+        elsif unique_locales[0] != I18n.locale
+          data_attributes[:locale] = unique_locales[0]
+        end
+
+        data_attributes
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb

@@ -3,10 +3,11 @@ module GovukPublishingComponents
     class BreadcrumbSelector
       attr_reader :content_item, :request, :prioritise_taxon_breadcrumbs
 
-      def initialize(content_item, request, prioritise_taxon_breadcrumbs)
+      def initialize(content_item, request, prioritise_taxon_breadcrumbs, ga4_tracking)
         @content_item = content_item
         @request = request
         @prioritise_taxon_breadcrumbs = prioritise_taxon_breadcrumbs
+        @ga4_tracking = ga4_tracking
       end
 
       def breadcrumbs
@@ -37,7 +38,7 @@ module GovukPublishingComponents
         elsif navigation.content_tagged_to_current_step_by_step?
           {
             step_by_step: true,
-            breadcrumbs: navigation.step_nav_helper.header,
+            breadcrumbs: navigation.step_nav_helper.header(@ga4_tracking),
           }
         elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs
           {

data/lib/govuk_publishing_components/presenters/{breadcrumbs.rb → breadcrumbs_helper.rb}

@@ -61,7 +61,9 @@ module GovukPublishingComponents
           ga4_link: {
             event_name: "navigation",
             type: "breadcrumbs",
-            index: index.to_s,
+            index: {
+              index_link: index.to_s,
+            },
             index_total: breadcrumbs_length.to_s,
           },
         }

data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb

@@ -7,15 +7,19 @@ module GovukPublishingComponents
         check_id_is_valid(@options[:id]) if @options.include?(:id)
         check_classes_are_valid(@options[:classes]) if @options.include?(:classes)
         check_aria_is_valid(@options[:aria]) if @options.include?(:aria)
+        check_role_is_valid(@options[:role]) if @options.include?(:role)
       end
 
       def all_attributes
-        {
-          id: @options[:id],
-          data: @options[:data],
-          aria: @options[:aria],
-          class: @options[:classes],
-        }
+        attributes = {}
+
+        attributes[:id] = @options[:id] if @options[:id]
+        attributes[:data] = @options[:data_attributes] if @options[:data_attributes]
+        attributes[:aria] = @options[:aria] if @options[:aria]
+        attributes[:class] = @options[:classes] if @options[:classes]
+        attributes[:role] = @options[:role] if @options[:role]
+
+        attributes
       end
 
       def set_id(id)
@@ -29,7 +33,7 @@ module GovukPublishingComponents
       end
 
       def add_data_attribute(attributes)
-        extend_object(:data, attributes)
+        extend_object(:data_attributes, attributes)
       end
 
       def add_aria_attribute(attributes)
@@ -37,6 +41,11 @@ module GovukPublishingComponents
         extend_object(:aria, attributes)
       end
 
+      def add_role(role)
+        check_role_is_valid(role)
+        extend_string(:role, role)
+      end
+
     private
 
       def check_id_is_valid(id)
@@ -45,7 +54,7 @@ module GovukPublishingComponents
 
       def check_classes_are_valid(classes)
         classes = classes.split(" ")
-        unless classes.all? { |c| c.start_with?("js-", "gem-c-", "govuk-") }
+        unless classes.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "brand--") }
           raise(ArgumentError, "Passed classes must be prefixed with `js-`")
         end
       end
@@ -58,6 +67,14 @@ module GovukPublishingComponents
         end
       end
 
+      def check_role_is_valid(role)
+        roles = %w[alert alertdialog application article associationlist associationlistitemkey associationlistitemvalue banner blockquote caption cell code columnheader combobox complementary contentinfo definition deletion dialog directory document emphasis feed figure form group heading img insertion list listitem log main marquee math menu menubar meter navigation none note paragraph presentation region row rowgroup rowheader scrollbar search searchbox separator separator slider spinbutton status strong subscript superscript switch tab table tablist tabpanel term time timer toolbar tooltip tree treegrid treeitem]
+        role = role.split(" ") # can have more than one role
+        unless role.all? { |r| roles.include? r }
+          raise(ArgumentError, "Role attribute is not recognised")
+        end
+      end
+
       def extend_string(option, string)
         ((@options[option] ||= "") << " #{string}").strip!
       end

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -82,12 +82,13 @@ module GovukPublishingComponents
         end
       end
 
-      def header
+      def header(ga4_tracking)
         if show_header?
           {
             title: current_step_nav.title,
             path: current_step_nav.base_path,
             tracking_id: current_step_nav.content_id,
+            ga4_tracking: ga4_tracking,
           }
         else
           {}

data/lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb

@@ -46,6 +46,7 @@ module GovukPublishingComponents
                 :li,
                 class: "gem-c-step-nav__list-item js-list-item #{link_active(contents[:active])}",
               ) do
+                @options[:ga4_index_total] = element[:contents].length if @options[:ga4_tracking]
                 create_list_item_content(contents)
               end,
             )
@@ -64,11 +65,26 @@ module GovukPublishingComponents
             concat create_context(link[:context])
           end
 
+          ga4_link_data ||= nil
+          if @options[:ga4_tracking]
+            ga4_link_data = {
+              "event_name": "navigation",
+              "type": "step by step",
+              "index": {
+                "index_section": (@options[:step_index] + 1).to_s,
+                "index_link": @link_index.to_s,
+              },
+              "index_total": @options[:ga4_index_total].to_s,
+              "section": @options[:step_title],
+            }.to_json
+          end
+
           link_to(
             href,
             rel: ("external" if href.start_with?("http")),
             data: {
               position: "#{@options[:step_index] + 1}.#{@link_index}",
+              ga4_link: ga4_link_data,
             },
             class: "gem-c-step-nav__link js-link",
           ) do

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "34.13.0".freeze
+  VERSION = "35.0.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -7,9 +7,10 @@ require "govuk_publishing_components/engine"
 require "govuk_publishing_components/version"
 require "govuk_publishing_components/presenters/shared_helper"
 require "govuk_publishing_components/presenters/component_wrapper_helper"
+require "govuk_publishing_components/presenters/accordion_helper"
 require "govuk_publishing_components/presenters/attachment_helper"
 require "govuk_publishing_components/presenters/big_number_helper"
-require "govuk_publishing_components/presenters/breadcrumbs"
+require "govuk_publishing_components/presenters/breadcrumbs_helper"
 require "govuk_publishing_components/presenters/breadcrumb_selector"
 require "govuk_publishing_components/presenters/button_helper"
 require "govuk_publishing_components/presenters/contextual_navigation"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 34.13.0
+  version: 35.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-28 00:00:00.000000000 Z
+date: 2023-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -914,10 +914,11 @@ files:
 - lib/govuk_publishing_components/config.rb
 - lib/govuk_publishing_components/engine.rb
 - lib/govuk_publishing_components/minitest/component_guide_test.rb
+- lib/govuk_publishing_components/presenters/accordion_helper.rb
 - lib/govuk_publishing_components/presenters/attachment_helper.rb
 - lib/govuk_publishing_components/presenters/big_number_helper.rb
 - lib/govuk_publishing_components/presenters/breadcrumb_selector.rb
-- lib/govuk_publishing_components/presenters/breadcrumbs.rb
+- lib/govuk_publishing_components/presenters/breadcrumbs_helper.rb
 - lib/govuk_publishing_components/presenters/button_helper.rb
 - lib/govuk_publishing_components/presenters/checkboxes_helper.rb
 - lib/govuk_publishing_components/presenters/component_wrapper_helper.rb
@@ -1414,7 +1415,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.7
+rubygems_version: 3.4.8
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications