govuk_publishing_components 35.10.0 → 35.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d14e21647dbbbe8c13a60c4ec7aaf3e1058cf97d9e52abb27e749eb63ec0725
-  data.tar.gz: 76f8f7c6c2b641eb874b59f5b73b4c43c21ee3b834c36bd35a2e561fb25993e8
+  metadata.gz: d923b79189269417363dd2c12781e9ee9644a03bf2c514b21e24d71efe0c07c7
+  data.tar.gz: ce1f69cdb8ef0eaf3fcf836e359311e8b38a0f401bb931a3e8bfc27c1b568f56
 SHA512:
-  metadata.gz: 0e55ee7ba5da82893c875901e389f4017d8f0b3a30ed3da20d1f9eda6fca500447a0efe4d0cbc78b37c2c4a422e2a74131ece944c95fcbc8d55dbe143046b4db
-  data.tar.gz: 77f9962cda4b334df7d09c40d5c57f17881de115b3feabc5081202ad2179a193d943303548881375502f7adeb484ddb12caca2b3280adb95bbee7264949dc05a
+  metadata.gz: bffc7c115facd8c323182b04f089ecae6b5b2a6991ebed42aea17fc748b1a95bcbf1093f75e238291819bb9d821152b7f4ef3f2b95f0a4b2b1b14021ccbb5a14
+  data.tar.gz: 03c818b7b4f9731f3075020ad5273256a30c3cdef0862f92892edea1dd6cd19e0e65ea781d8c9bb7fb2c87403c5478503442453c68ff80a2deea73ba820e3721

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

@@ -30,32 +30,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       firstScript.parentNode.insertBefore(newScript, firstScript)
     },
 
-    ensureIndexesArePopulated: function (data) {
-      if (!data.event_data) {
-        return data
-      }
-
-      if (!data.event_data.index) {
-        return data
-      }
-
-      var indexKeys = ['index_link', 'index_section', 'index_section_count']
-
-      for (var i = 0; i < indexKeys.length; i++) {
-        var indexKey = indexKeys[i]
-
-        // If the index key isn't in the object, populate it. However if it's set to 0, leave it as 0. 0 is falsy so we have to add this extra check.
-        if (!data.event_data.index[indexKey] && data.event_data.index[indexKey] !== 0) {
-          data.event_data.index[indexKey] = undefined
-        }
-      }
-
-      return data
-    },
-
     sendData: function (data) {
-      data = this.ensureIndexesArePopulated(data)
-
       data.govuk_gem_version = this.getGemVersion()
       // set this in the console as a debugging aid
       if (window.GOVUK.analyticsGa4.showDebug) {
@@ -274,29 +249,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         }
       },
 
-      addAttributesToElements: function (selector, dataAttributes) {
-        var targetElements = document.querySelectorAll(selector)
-
-        for (var i = 0; i < targetElements.length; i++) {
-          var element = targetElements[i]
-
-          for (var j = 0; j < dataAttributes.length; j++) {
-            var key = dataAttributes[j].key
-            var value = dataAttributes[j].value
-
-            // value must check for undefined only as it would return false on an empty string, the number 0, etc.
-            if (key && value !== undefined) {
-              var existingAttributeValue = element.getAttribute(key)
-
-              if (key === 'data-module' && existingAttributeValue) {
-                // Combines values to prevent replacing any existing data-module values.
-                element.setAttribute(key, existingAttributeValue + ' ' + value)
-              } else {
-                element.setAttribute(key, value)
-              }
-            }
-          }
-        }
+      applyRedactionIfRequired: function (PIIRemover, element, data) {
+        return element.closest('[data-ga4-do-not-redact]') ? data : PIIRemover.stripPIIWithOverride(data, true, true)
       }
     },
 

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

@@ -45,6 +45,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var formData = this.getInputValues(formInputs)
       data.text = data.text || (this.combineGivenAnswers(formData) || 'No answer given')
 
+      if (data.action === 'search') {
+        data.text = data.text.toLowerCase()
+        data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(data.text)
+      }
+
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')
       window.GOVUK.analyticsGa4.core.sendData(schema)

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

@@ -81,12 +81,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
-      data.text = this.PIIRemover.stripPIIWithOverride(data.text, true, true)
+      data.text = window.GOVUK.analyticsGa4.core.trackFunctions.applyRedactionIfRequired(this.PIIRemover, element, data.text)
       if (!data.text && (element.querySelector('img') || element.querySelector('svg') || element.tagName === 'IMG' || element.closest('svg'))) {
         data.text = 'image'
       }
       var url = data.url || this.findLink(event.target).getAttribute('href')
-      data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(this.PIIRemover.stripPIIWithOverride(url, true, true))
+      data.url = window.GOVUK.analyticsGa4.core.trackFunctions.applyRedactionIfRequired(this.PIIRemover, element, window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(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/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js

@@ -16,7 +16,11 @@
         type: this.undefined,
         url: this.undefined,
         text: this.undefined,
-        index: this.undefined,
+        index: {
+          index_link: this.undefined,
+          index_section: this.undefined,
+          index_section_count: this.undefined
+        },
         index_total: this.undefined,
         section: this.undefined,
         action: this.undefined,
@@ -24,7 +28,8 @@
         method: this.undefined,
         link_domain: this.undefined,
         link_path_parts: this.undefined,
-        tool_name: this.undefined
+        tool_name: this.undefined,
+        percent_scrolled: this.undefined
       }
     }
   }
@@ -45,19 +50,60 @@
     }
   }
 
-  // get attributes from the data attribute to send to GA
+  // merge data attributes data into the event schema
   // only allow it if it already exists in the schema
   Schemas.prototype.mergeProperties = function (data, eventAttribute) {
     var schema = this.eventSchema()
     schema.event = eventAttribute
+    // exceptions should be inserted without checking for sub parameters
+    // exceptions should only come from code, not directly from data attributes
+    // e.g. link_path_parts is generated by JS and contains potentially non-unique
+    // sub parameter names i.e. '1', '2'
+    var exceptions = ['link_path_parts']
+
     for (var property in data) {
-      if (property in schema.event_data) {
-        schema.event_data[property] = data[property]
+      // some passed data might be undefined, don't want it to overwrite e.g. the index sub parameters
+      if (data[property] !== undefined) {
+        if (exceptions.indexOf(property) >= 0 || !this.isAnObject(data[property])) {
+          schema.event_data = this.addToObject(schema.event_data, property, data[property])
+        } else {
+          // we check for one level of nesting in the data attributes data
+          // this check can be removed once nesting is removed from all data attributes
+          for (var subproperty in data[property]) {
+            schema.event_data = this.addToObject(schema.event_data, subproperty, data[property][subproperty])
+          }
+        }
       }
     }
     return schema
   }
 
+  // might be easier to check if it's not a string or a number?
+  Schemas.prototype.isAnObject = function (item) {
+    if (typeof item === 'object' && !Array.isArray(item) && item !== null) {
+      return true
+    }
+  }
+
+  // given an object and a key, insert a value into that object for that key
+  // we check for one level of nesting in the object
+  Schemas.prototype.addToObject = function (obj, key, value) {
+    if (key in obj) {
+      obj[key] = value
+      return obj
+    } else {
+      for (var property in obj) {
+        if (this.isAnObject(obj[property])) {
+          if (key in obj[property]) {
+            obj[property][key] = value
+            return obj
+          }
+        }
+      }
+    }
+    return obj
+  }
+
   GOVUK.analyticsGa4 = GOVUK.analyticsGa4 || {}
   GOVUK.analyticsGa4.Schemas = Schemas
 

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

@@ -0,0 +1,225 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function Ga4ScrollTracker ($module) {
+    this.$module = $module
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.trackedNodes = []
+    this.config = {
+      allowHeadingsInside: ['main'],
+      percentages: [20, 40, 60, 80, 100],
+      scrollTimeoutDelay: 20,
+      resizeTimeoutDelay: 100,
+      pageHeightTimeoutDelay: 500,
+      markerAttribute: 'data-ga4-scroll-marker'
+    }
+  }
+
+  Ga4ScrollTracker.prototype.init = function () {
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
+  }
+
+  Ga4ScrollTracker.prototype.startModule = function () {
+    if (window.GOVUK.analyticsGa4.vars.scrollTrackerStarted) {
+      return
+    }
+
+    this.trackType = this.$module.getAttribute('data-ga4-track-type')
+    window.GOVUK.analyticsGa4.vars.scrollTrackerStarted = true
+
+    if (this.trackType === 'headings') {
+      this.track = new Ga4ScrollTracker.Heading(this.config)
+    } else if (this.trackType === 'markers') {
+      this.config.trackMarkers = true
+      this.track = new Ga4ScrollTracker.Heading(this.config)
+    } else {
+      this.track = new Ga4ScrollTracker.Percentage(this.config)
+    }
+
+    this.getWindowDetails()
+    // if the URL has a hash we want to prevent tracking on initial page load
+    // until the browser jumps down the page, at which point a scroll event
+    // will happen and tracking will continue normally
+    var windowHash = window.location.hash
+    var dontTrackOnLoad = windowHash && document.getElementById(windowHash.substring(1))
+    if (!dontTrackOnLoad) {
+      this.trackVisibleNodes()
+    }
+
+    if (this.trackedNodes.length) {
+      // store event listener functions as variables so they can be removed if needed
+      this.scrollEvent = this.onScroll.bind(this)
+      window.addEventListener('scroll', this.scrollEvent)
+      this.resizeEvent = this.onResize.bind(this)
+      window.addEventListener('resize', this.resizeEvent)
+
+      // check if the page height changes e.g. accordion opened
+      this.interval = window.setInterval(function () {
+        var pageHeight = document.querySelector('body').clientHeight
+        if (pageHeight !== this.pageHeight) {
+          this.pageHeight = pageHeight
+          this.getWindowDetails()
+          this.trackVisibleNodes()
+        }
+      }.bind(this), this.config.pageHeightTimeoutDelay)
+    }
+  }
+
+  Ga4ScrollTracker.prototype.onScroll = function () {
+    clearTimeout(this.scrollTimeout)
+    this.scrollTimeout = setTimeout(function () {
+      this.trackVisibleNodes()
+    }.bind(this), this.config.scrollTimeoutDelay)
+  }
+
+  Ga4ScrollTracker.prototype.onResize = function () {
+    clearTimeout(this.resizeTimeout)
+    this.resizeTimeout = setTimeout(function () {
+      this.getWindowDetails()
+      this.trackVisibleNodes()
+    }.bind(this), this.config.resizeTimeoutDelay)
+  }
+
+  Ga4ScrollTracker.prototype.getWindowDetails = function () {
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.windowHeight = window.innerHeight
+    this.trackedNodes = this.track.getTrackingNodes(this.trackedNodes)
+  }
+
+  Ga4ScrollTracker.prototype.trackVisibleNodes = function () {
+    var data = {
+      event_name: 'scroll',
+      action: 'scroll',
+      type: this.config.type
+    }
+    for (var i = 0; i < this.trackedNodes.length; i++) {
+      var node = this.trackedNodes[i]
+      if (this.isVisible(node.top, node.bottom) && !node.alreadySeen) {
+        node.alreadySeen = true
+        // we store whether a heading has been tracked or not on the heading
+        // because if headings appear/disappear (e.g. inside an accordion)
+        // the order changes, so we can't refer to the previous trackedNodes
+        // as we do with percentages
+        if (node.element) {
+          node.element.setAttribute('data-ga4-scrolltracker-already-seen', true)
+        }
+
+        data.type = node.eventData.type
+        // following will be undefined if tracking percentages
+        data.text = node.eventData.text
+        data.index = node.eventData.index
+        // following will be undefined if tracking headings
+        data.percent_scrolled = node.eventData.percent_scrolled
+
+        var schemas = new window.GOVUK.analyticsGa4.Schemas()
+        var schema = schemas.mergeProperties(data, 'event_data')
+        window.GOVUK.analyticsGa4.core.sendData(schema)
+      }
+    }
+  }
+
+  Ga4ScrollTracker.prototype.isVisible = function (top, bottom) {
+    var scroll = window.scrollY || document.documentElement.scrollTop // IE fallback
+    return scroll <= top && (scroll + this.windowHeight) >= bottom
+  }
+
+  Ga4ScrollTracker.Heading = function (config) {
+    this.config = config
+  }
+
+  Ga4ScrollTracker.Heading.prototype.getTrackingNodes = function () {
+    var headingsDetails = []
+    var headingsFound = this.findAllowedHeadings()
+    var totalHeadings = headingsFound.length
+
+    for (var i = 0; i < totalHeadings; i++) {
+      var heading = headingsFound[i]
+      var type = this.config.trackMarkers ? 'marker' : 'heading'
+      // only track headings that are visible i.e. not inside display: none
+      if (this.visible(heading)) {
+        var pos = heading.getBoundingClientRect()
+        headingsDetails.push({
+          element: heading,
+          alreadySeen: heading.getAttribute('data-ga4-scrolltracker-already-seen'),
+          top: pos.top + document.documentElement.scrollTop,
+          bottom: pos.bottom + document.documentElement.scrollTop,
+          eventData: {
+            type: type,
+            text: heading.textContent.replace(/\s+/g, ' ').trim(),
+            index: {
+              index_section: i + 1,
+              index_section_count: totalHeadings
+            }
+          }
+        })
+      }
+    }
+    return headingsDetails
+  }
+
+  // check heading is inside allowed elements, generally ignores everything outside of page content
+  Ga4ScrollTracker.Heading.prototype.findAllowedHeadings = function () {
+    var headingsFound = []
+    var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    if (this.config.trackMarkers) {
+      headings = ['[' + this.config.markerAttribute + ']']
+    }
+
+    // this is a loop that only happens once as we currently only have one
+    // allowed element for headings to be in - 'main'
+    for (var h = 0; h < this.config.allowHeadingsInside.length; h++) {
+      var insideElements = document.querySelectorAll(this.config.allowHeadingsInside[h])
+      for (var e = 0; e < insideElements.length; e++) {
+        var found = insideElements[e].querySelectorAll(headings)
+        for (var f = 0; f < found.length; f++) {
+          headingsFound.push(found[f])
+        }
+      }
+    }
+    return headingsFound
+  }
+
+  // this is bit more verbose than checking offsetParent !== null but more reliable for IE10+
+  Ga4ScrollTracker.Heading.prototype.visible = function (el) {
+    return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
+  }
+
+  Ga4ScrollTracker.Percentage = function (config) {
+    this.config = config
+  }
+
+  Ga4ScrollTracker.Percentage.prototype.getTrackingNodes = function (trackedNodes) {
+    var body = document.body
+    var html = document.documentElement
+    var pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
+
+    var percentDetails = []
+
+    for (var i = 0; i < this.config.percentages.length; i++) {
+      var percent = this.config.percentages[i]
+      // subtract 1 pixel to solve a bug where 100% can't be reached in some cases
+      var pos = ((pageHeight / 100) * percent) - 1
+      var alreadySeen = false
+      if (trackedNodes.length) {
+        alreadySeen = trackedNodes[i].alreadySeen
+      }
+      percentDetails.push({
+        alreadySeen: alreadySeen,
+        top: pos,
+        bottom: pos,
+        eventData: { type: 'percent', percent_scrolled: String(percent) }
+      })
+    }
+    return percentDetails
+  }
+
+  Modules.Ga4ScrollTracker = Ga4ScrollTracker
+})(window.GOVUK.Modules)

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

@@ -8,11 +8,6 @@ var initFunction = function () {
     window.GOVUK.analyticsGa4.vars.internalDomains = []
     window.GOVUK.analyticsGa4.vars.internalDomains.push(window.GOVUK.analyticsGa4.core.trackFunctions.getHostname())
     window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(window.GOVUK.analyticsGa4.vars.internalDomains)
-    var attachmentLinkData = [
-      { key: 'data-module', value: 'ga4-link-tracker' },
-      { key: 'data-ga4-track-links-only', value: '' },
-      { key: 'data-ga4-link', value: JSON.stringify({ event_name: 'navigation', type: 'attachment' }) }]
-    window.GOVUK.analyticsGa4.core.trackFunctions.addAttributesToElements('[data-ga4-attachment-link]', attachmentLinkData)
     window.GOVUK.analyticsGa4.core.load()
 
     var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules

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

@@ -10,4 +10,5 @@
 //= require ./analytics-ga4/ga4-form-tracker
 //= require ./analytics-ga4/ga4-auto-tracker
 //= require ./analytics-ga4/ga4-smart-answer-results-tracker
+//= require ./analytics-ga4/ga4-scroll-tracker
 //= require ./analytics-ga4/init-ga4

data/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss

@@ -67,6 +67,13 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey", $legacy: "grey-3");
   &:last-of-type {
     margin-bottom: 0;
   }
+
+  .gem-c-attachment__attribute {
+    // From the Design System
+    // Automatic wrapping for unbreakable text (e.g. URLs)
+    word-wrap: break-word; // Fallback for older browsers only
+    overflow-wrap: break-word;
+  }
 }
 
 .gem-c-attachment__metadata--compact {

data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss

@@ -86,6 +86,10 @@
     padding-bottom: 0;
     margin-right: govuk-spacing(2);
   }
+
+  @include govuk-media-query($from: desktop) {
+    margin-right: govuk-spacing(4);
+  }
 }
 
 .gem-c-feedback__prompt-link {
@@ -138,6 +142,10 @@
 .gem-c-feedback__option-list-item {
   &:last-child {
     margin-left: govuk-spacing(2);
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(4);
+    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -55,3 +55,44 @@
     }
   }
 }
+
+// Add rtl table styling when `direction: "rtl"` is set
+.govuk-govspeak.direction-rtl,
+.gem-c-govspeak.direction-rtl {
+  table {
+    caption {
+      text-align: right;
+    }
+
+    th {
+      text-align: right;
+    }
+
+    th,
+    td {
+      padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(4);
+    }
+  }
+}
+
+// Add rtl table styling when `.direction-rtl` is set on a parent element
+// stylelint-disable max-nesting-depth
+.direction-rtl {
+  .govspeak,
+  .gem-c-govspeak {
+    table {
+      caption {
+        text-align: right;
+      }
+
+      th {
+        text-align: right;
+      }
+
+      th,
+      td {
+        padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(4);
+      }
+    }
+  }
+}

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

@@ -43,13 +43,15 @@
       "HTML",
       class: "gem-c-attachment__attribute",
     )
+    data_attributes[:module] ? data_attributes[:module] << " ga4-link-tracker" : data_attributes[:module] = "ga4-link-tracker"
+    data_attributes[:ga4_link] = { "event_name": "navigation", "type": "attachment" }.to_json
   when "external"
     attributes << tag.span(
       attachment.url,
       class: "gem-c-attachment__attribute",
     )
   end
-  
+
 %>
 <%= tag.section class: class_names(container_class_names) do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>

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

@@ -13,20 +13,16 @@
   link_classes << "govuk-link--no-underline" unless underline_links
 
   ga4_tracking ||= false
-  ga4_data = nil
-  if ga4_tracking
-    ga4_data = {
+  ga4_data = {
       event_name: "navigation",
       type: "content",
       section: t("components.contents_list.contents", locale: :en) || ""
-    }.to_json
-  end
+  } if ga4_tracking
   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_data_attribute({ module: "ga4-link-tracker" }) if ga4_tracking
-  component_helper.add_data_attribute({ ga4_link: ga4_data, ga4_track_links_only: "" }) if ga4_tracking
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
   component_helper.add_role("navigation")
 -%>
@@ -44,8 +40,12 @@
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
-             ga4_link_data = nil
-             ga4_link_data = { "index": { "index_link": position }, "index_total": contents.length }.to_json if ga4_tracking
+             if ga4_tracking
+              ga4_data[:index] = {
+                  "index_link": position,
+              }
+              ga4_data[:index_total] = contents.length
+             end
           %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
             class:  link_classes,
@@ -56,7 +56,7 @@
               track_options: {
                 dimension29: contents_item[:text]
               },
-              ga4_link: ga4_link_data
+              ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
             }
           %>
 

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

@@ -23,7 +23,8 @@
   ga4_object = {
     event_name: "navigation",
     type: "content",
-    section: "Top"
+    section: "Top",
+    action: "opened"
   }.to_json
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>

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

@@ -7,22 +7,30 @@
   panel_css_classes << "gem-c-tabs__panel--no-border" if panel_border == false
   panel_css_classes = panel_css_classes.join(" ")
 
+  as_links ||= false
   ga4_tracking ||= false
-  data_module = "govuk-tabs"
-  data_module << " ga4-event-tracker" if ga4_tracking
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-tabs gem-c-tabs")
+  component_helper.add_data_attribute({ module: "govuk-tabs" }) unless as_links
+
+  if ga4_tracking
+    component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless as_links
+    component_helper.add_data_attribute({ module: "ga4-link-tracker" }) if as_links
+  end
 %>
 <% if tabs.count > 1 %>
-  <div class="govuk-tabs gem-c-tabs" data-module="<%= data_module %>">
+  <%= tag.div(**component_helper.all_attributes) do %>
     <h2 class="govuk-tabs__title">
       <%= t("components.tabs.contents") %>
     </h2>
     <ul class="govuk-tabs__list">
       <% tabs.each_with_index do |tab, index| %>
-      <li class="govuk-tabs__list-item">
+      <li class="govuk-tabs__list-item <%= "govuk-tabs__list-item--selected" if tab[:active] %>">
         <%
           tab[:tab_data_attributes] ||= {}
           if ga4_tracking
-            tab[:tab_data_attributes][:ga4_event] = {
+            ga4_attributes = {
               event_name: "select_content",
               type: "tabs",
               text: tab[:label],
@@ -31,24 +39,32 @@
                 index_section_count: tabs.length,
               },
             }
+            ga4_attributes[:event_name] = "navigation" if as_links
+            tab[:tab_data_attributes][:ga4_link] = ga4_attributes if as_links
+            tab[:tab_data_attributes][:ga4_event] = ga4_attributes unless as_links
           end
+
+          tab_link = "##{tab[:id]}"
+          tab_link = tab[:href] if as_links
         %>
         <%= link_to(tab[:label],
-                    "##{tab[:id]}",
+                    tab_link,
                     class: "govuk-tabs__tab",
                     data: tab[:tab_data_attributes]) %>
       </li>
       <% end %>
     </ul>
-    <% tabs.each do |tab| %>
-      <section class="<%= panel_css_classes %>" id="<%= tab[:id] %>">
-        <% if tab[:title] %>
-          <h2 class="govuk-heading-l"><%= tab[:title] %></h2>
-        <% end %>
-        <%= tab[:content] %>
-      </section>
+    <% unless as_links %>
+      <% tabs.each do |tab| %>
+        <section class="<%= panel_css_classes %>" id="<%= tab[:id] %>">
+          <% if tab[:title] %>
+            <h2 class="govuk-heading-l"><%= tab[:title] %></h2>
+          <% end %>
+          <%= tab[:content] %>
+        </section>
+      <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
 <% if tabs.count == 1 %>
     <section id="<%= tabs[0][:id] %>">