Change expander component

- allow it to accept data attributes to be applied to the expand/collapse button
- will allow us to add GA4 tracking via a Rails/component approach and remove some JS
- likely to be a breaking change as will depend on some other stuff in a subsequent commit
- brings the component more in line with the option select component changes coming here: alphagov/govuk_publishing_components#3750

app/assets/javascripts/components/expander.js

@@ -69,17 +69,17 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; // if this ; is omitted, none
     $button.setAttribute('aria-expanded', expanded)
     $button.setAttribute('aria-controls', this.$content.getAttribute('id'))
 
-    // GA4 Accordion tracking. Relies on the ga4-finder-tracker setting the index first, so we wrap this in a custom event.
-    window.addEventListener('ga4-filter-indexes-added', function () {
-      if (window.GOVUK.analyticsGa4) {
-        if (window.GOVUK.analyticsGa4.Ga4FinderTracker) {
-          window.GOVUK.analyticsGa4.Ga4FinderTracker.addFilterButtonTracking($button, this.$toggle.innerHTML)
-        }
+    var buttonAttributes = this.$module.getAttribute('data-button-data-attributes')
+    if (buttonAttributes) {
+      buttonAttributes = JSON.parse(buttonAttributes)
+      for (var rawKey in buttonAttributes) {
+        var key = rawKey.replace(/_/i, '-').toLowerCase()
+        var rawValue = buttonAttributes[rawKey]
+        var value = typeof rawValue === 'object' ? JSON.stringify(rawValue) : rawValue
+        $button.setAttribute('data-' + key, value)
       }
-    }.bind(this))
-
+    }
     $button.innerHTML = toggleHtml
-
     this.$toggle.parentNode.replaceChild($button, this.$toggle)
   }
 

app/views/components/_expander.html.erb

@@ -12,6 +12,7 @@
   component_helper.add_data_attribute({ "open-on-load": open_on_load })
   component_helper.add_class("app-c-expander")
   component_helper.add_class(shared_helper.get_margin_bottom) unless margin_bottom == 0
+  component_helper.add_data_attribute({ "button-data-attributes": button_data_attributes }) if local_assigns.include?(:button_data_attributes)
 %>
 <% if title %>
   <%= tag.div(**component_helper.all_attributes) do %>

app/views/components/docs/expander.yml

@@ -28,3 +28,43 @@ examples:
       margin_bottom: 9
       block: |
         This is some content that is passed to the component. It should be distinct from the component, in that the component should not style or interact with it, other than to show and hide it.
+  with_counter:
+    description: If there are form elements within the expander it can display a count of the number of form elements with a selected or input value. This is to make it appear the same as the option select component when appearing with it in search pages. Note that if any form elements are selected on page load, the component will expand by default.
+    data:
+      title: Things
+      block: |
+        <div class="govuk-form-group gem-c-select">
+          <label class="govuk-label" for="level_one_taxon">Topic</label>
+          <select name="level_one_taxon" id="level_one_taxon" class="govuk-select gem-c-select__select--full-width">
+            <option value="">All topics</option>
+            <option value="1" selected>Business and industry</option>
+            <option value="2">COVID-19</option>
+            <option value="3">Corporate information</option>
+          </select>
+        </div>
+        <div class="govuk-form-group" data-ga4-section="Sub-topic">
+          <div class="govuk-form-group gem-c-select">
+            <label class="govuk-label" for="level_two_taxon">Sub-topic</label>
+            <select name="level_two_taxon" id="level_two_taxon" class="govuk-select gem-c-select__select--full-width">
+              <option value="">All sub-topics</option>
+              <option value="2">Business and the environment</option>
+              <option value="3">Business regulation</option>
+              <option value="4">Charities and social enterprises</option>
+            </select>
+          </div>
+        </div>
+        <div class="govuk-form-group">
+          <label for="public_timestamp[from]" class="gem-c-label govuk-label">Updated after</label>
+          <input aria-describedby="hint-fe643477" class="gem-c-input govuk-input" id="public_timestamp[from]" name="public_timestamp[from]" spellcheck="false" type="text" value="2023">
+        </div>
+  with_button_data_attributes:
+    description: Allows data attributes to be passed to the component to be added to the expand/collapse button. The attributes are written to the parent element then read by the JavaScript and applied to the button. This is used for tracking purposes.
+    data:
+      title: Organisation
+      button_data_attributes:
+        ga4_expandable: ""
+        ga4_event:
+          event_name: "select_content"
+          type: "finder"
+      block: |
+        Sssh I'm hiding

spec/components/expander_spec.rb

@@ -42,4 +42,20 @@ def render_component(locals, &block)
 
     assert_select '.app-c-expander.govuk-\!-margin-bottom-9'
   end
+
+  it "accepts button data attributes" do
+    button_attrs = {
+      ga4_expandable: "true",
+      ga4_event: {
+        event_name: "select_content",
+        type: "finder",
+      },
+    }
+
+    render_component(title: "Some title", button_data_attributes: button_attrs) do
+      "This is more info"
+    end
+
+    assert_select ".app-c-expander[data-button-data-attributes='#{button_attrs.to_json}']"
+  end
 end

spec/javascripts/components/expander-spec.js

@@ -126,29 +126,30 @@ describe('An expander module', function () {
     })
   })
 
-  describe('GA4 tracking', function () {
+  describe('adds data attributes to the button', function () {
+    var buttonAttrs = {
+      ga4_expandable: '',
+      ga4_event: {
+        event_name: 'select_content',
+        type: 'finder'
+      }
+    }
+
     beforeEach(function () {
       $element = document.createElement('div')
       $element.innerHTML = html
-
+      $element.querySelector('.app-c-expander').setAttribute('data-button-data-attributes', JSON.stringify(buttonAttrs))
       new GOVUK.Modules.Expander($element.querySelector('.app-c-expander')).init()
     })
 
     afterEach(function () {
       $(document).off()
     })
 
-    it('adds the ga4 event tracker values to the button', function () {
+    it('adds button data attributes passed to the component onto the button', function () {
       var $button = $($element).find('.app-c-expander__button')
-      window.GOVUK.triggerEvent(window, 'ga4-filter-indexes-added')
-      var expected = JSON.stringify({
-        event_name: 'select_content',
-        type: 'finder',
-        section: 'Organisation',
-        index_section: 1,
-        index_section_count: 3
-      })
-
+      var expected = JSON.stringify(buttonAttrs.ga4_event)
+      expect($button.attr('data-ga4-expandable')).toEqual('')
       expect($button.attr('data-ga4-event')).toEqual(expected)
     })
   })