govuk_publishing_components 35.5.0 → 35.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 83d143fc56ad285e250659a050cb73b185176316d43f40293199ea6cc673c120
-  data.tar.gz: b8b9d0b29c550c0abc91be533b38cf3c9b62bd42039c1d31d66ec06883ba9be1
+  metadata.gz: 19aaa8a186568f17fc86baced60aab3d35f790e35f819702736f6dc861f64bcb
+  data.tar.gz: 947c684323444fb20d04063a801f71868193ca46ee7dfba877a26b05c235ae5f
 SHA512:
-  metadata.gz: 0ebadf89e85215996356032d2f1f1d8e9faaec6287048c61a729da84a28e29dee5f509f6ece7db95341f0ca8e19815172d6d4898a6a624329525c5b36713fefc
-  data.tar.gz: 1a13f99b6d61d29e6e1c7c62d89dce9b8b2ee7dbfd5f026e6f0d80502ccd8d90180c990d6f86525c97ccb0816083ea22facfdf84e582e0f8c0765da5e153d732
+  metadata.gz: 4c151b005305fa534de28d3769131a41334c3a39b64e89a8f737f6e59747ba03d28d24e62fcdf122fb9b290c5a3d3596842aa973100a208144c83280dcf12fb1
+  data.tar.gz: 1ef830fa00101728968b9bc2e0d865f923cf00cbd265b33d5e8958f18539938146a1b802e6e6d42a0ee269fc2be3664ba89734d67dbcabef04187a46caa22df8

data/README.md

@@ -58,6 +58,7 @@ yarn run jasmine:ci
 - [Testing a component](docs/testing-components.md)
 - [Component auditing](docs/auditing.md)
 - [Code documentation on rubydoc.info](http://www.rubydoc.info/gems/govuk_publishing_components)
+- [Our analytics approach](docs/analytics-ga4/analytics.md)
 
 More documentation can be found in the [docs directory](docs/).
 

data/app/assets/javascripts/component_guide/audit-filter.js

@@ -5,6 +5,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   function AuditFilter ($module) {
     this.module = $module
     this.data = this.module.querySelector('[data-audit-list]')
+    this.headings = this.module.querySelector('[data-audit-headings]')
   }
 
   AuditFilter.prototype.init = function () {
@@ -14,6 +15,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       this.filterComponentsFunction = this.filterComponents.bind(this)
       this.select.addEventListener('change', this.filterComponentsFunction)
+      this.setHeadingCount()
     }
   }
 
@@ -75,6 +77,49 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
       }
     }
+    this.setHeadingCount()
+  }
+
+  AuditFilter.prototype.setHeadingCount = function () {
+    if (this.headings) {
+      var visibleRows = this.data.querySelectorAll('[data-application]:not([hidden])')
+
+      if (!this.headingLabels) {
+        this.headingLabels = this.getHeadingLabels()
+      }
+      // need an array of zeroes same length as headingLabels to store the counts
+      var headingCounts = new Array(this.headingLabels.length)
+      for (var i = 0; i < this.headingLabels.length; ++i) {
+        headingCounts[i] = 0
+      }
+
+      for (var j = 0; j < visibleRows.length; j++) {
+        for (var k = 0; k < this.headingLabels.length; k++) {
+          var cell = visibleRows[j].querySelector('[data-component-type=' + this.headingLabels[k] + ']')
+          if (cell.textContent.trim().length) {
+            headingCounts[k] += 1
+          }
+        }
+      }
+
+      var reg = /\([0-9]+\)/i
+      for (var l = 0; l < this.headingLabels.length; l++) {
+        var headingItem = this.headings.querySelector('[data-component-type=' + this.headingLabels[l] + ']')
+        headingItem.textContent = headingItem.textContent.replace(reg, '') + ' (' + headingCounts[l] + ')'
+      }
+    }
+  }
+
+  AuditFilter.prototype.getHeadingLabels = function () {
+    var headings = this.headings.querySelectorAll('[data-component-type]')
+    var labels = []
+    for (var i = 0; i < headings.length; i++) {
+      var label = headings[i].getAttribute('data-component-type')
+      if (labels.indexOf(label) === -1) {
+        labels.push(label)
+      }
+    }
+    return labels
   }
 
   Modules.AuditFilter = AuditFilter

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

@@ -35,9 +35,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         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

@@ -30,7 +30,32 @@ 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) {
@@ -231,11 +256,12 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         var totalLinks = 0
         for (var i = 0; i < links.length; i++) {
           var link = links[i]
-          // Only index links that are not search results
-          if (!link.getAttribute('data-ga4-ecommerce-path')) {
-            totalLinks++
-            link.setAttribute('data-ga4-index', '{"index_link": ' + totalLinks + '}')
+          // Only index links that are not search results or do not have a data-ga4-do-not-index attribute
+          if (link.getAttribute('data-ga4-ecommerce-path') || link.getAttribute('data-ga4-do-not-index') !== null) {
+            continue
           }
+          totalLinks++
+          link.setAttribute('data-ga4-index', '{"index_link": ' + totalLinks + '}')
         }
 
         try {
@@ -248,37 +274,6 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         }
       },
 
-      // 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])
-            }
-        }
-      },
-
       addAttributesToElements: function (selector, dataAttributes) {
         var targetElements = document.querySelectorAll(selector)
 

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

@@ -42,7 +42,6 @@ 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-link-tracker.js

@@ -111,9 +111,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Ga4LinkTracker.prototype.setIndex = function (indexData, target) {
-    var index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(indexData)
-
+  Ga4LinkTracker.prototype.setIndex = function (index, target) {
     if (target.getAttribute('data-ga4-index')) {
       try {
         var indexLink = JSON.parse(target.getAttribute('data-ga4-index'))

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

@@ -17,7 +17,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             location: this.getLocation(),
             /* If the init() function receives a referrer parameter, this indicates that it has been called as a part of an AJAX request and
             this.getReferrer() will not return the correct value. Therefore we need to rely on the referrer parameter. */
-            referrer: referrer || this.getReferrer(),
+            referrer: referrer ? this.PIIRemover.stripPIIWithOverride(referrer, true, true) : this.getReferrer(),
             title: this.getTitle(),
             status_code: this.getStatusCode(),
 

data/app/assets/stylesheets/component_guide/application.scss

@@ -6,35 +6,6 @@ $govuk-new-link-styles: true;
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 
-// Import the same stylesheets used in static
-// https://github.com/alphagov/static/blob/198a598682df40ce4a2c3c286c06244297c18cf0/app/assets/stylesheets/application.scss
-// Although the component guide does not use static, we still need to import the same stylesheets used in static
-// to avoid any rendering issues
-// By following the same approach as frontend rendering applications,
-// we ensure that stylesheets are loaded in the expected order and components render correctly
-@import "govuk_publishing_components/components/breadcrumbs";
-@import "govuk_publishing_components/components/button";
-@import "govuk_publishing_components/components/error-message";
-@import "govuk_publishing_components/components/heading";
-@import "govuk_publishing_components/components/hint";
-@import "govuk_publishing_components/components/input";
-@import "govuk_publishing_components/components/label";
-@import "govuk_publishing_components/components/search";
-@import "govuk_publishing_components/components/skip-link";
-@import "govuk_publishing_components/components/textarea";
-@import "govuk_publishing_components/components/title";
-
-@import "govuk_publishing_components/components/cookie-banner";
-@import "govuk_publishing_components/components/feedback";
-@import "govuk_publishing_components/components/layout-footer";
-@import "govuk_publishing_components/components/layout-for-public";
-@import "govuk_publishing_components/components/layout-header";
-@import "govuk_publishing_components/components/layout-super-navigation-header";
-
-// Imported to ensure inverse-header component examples render correctly
-// this helps avoid any issues with visual regressions tests
-@import "govuk_publishing_components/components/lead-paragraph";
-
 // Include required helpers
 @import "../../stylesheets/govuk_publishing_components/components/helpers/markdown-typography";
 

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

@@ -4,11 +4,3 @@
 .gem-c-select__select--full-width {
   width: 100%;
 }
-
-// Solution to text inside selects becoming unreadable if font size in
-// the browser is increased. This is currently a problem in govuk-frontend
-.gem-c-select {
-  .govuk-select {
-    height: 2.14em;
-  }
-}

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -87,7 +87,9 @@
 
   ol,
   ul {
-    list-style: decimal;
+    // we intentionally don't set list-style for ol elements, so that they can
+    // utilise the type attribute for the formatting. Browsers default to a
+    // style of decimal.
     list-style-position: outside;
     margin-left: $gutter-two-thirds;
     padding: 0;
@@ -102,7 +104,6 @@
 
   ul {
     list-style: disc;
-    list-style-position: outside;
   }
 
   li {

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

@@ -1,7 +1,7 @@
-<table class="govuk-table" <% if show_application_name %>data-audit-list<% end %>>
+<table class="govuk-table">
   <thead class="govuk-table__head">
-    <tr class="govuk-table__row">
-      <th scope="col" class="govuk-table__header sticky-table-header">Component</th>
+    <tr class="govuk-table__row" <% if show_application_name %>data-audit-headings<% end %>>
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="total">Component</th>
       <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="template">
         Template
         <% unless show_application_name %>
@@ -46,10 +46,10 @@
       </th>
     </tr>
   </thead>
-  <tbody class="govuk-table__body">
+  <tbody class="govuk-table__body" <% if show_application_name %>data-audit-list<% end %>>
     <% passed_components[:component_file_details].each do |component| %>
       <tr class="govuk-table__row" data-application="<%= component[:application] %>">
-        <th scope="row" class="govuk-table__header">
+        <th scope="row" class="govuk-table__header" data-component-type="total">
           <% if component[:link] %>
             <a href="<%= component[:link] %>" class="govuk-link">
               <%= component[:name] %>
@@ -63,69 +63,57 @@
             </span>
           <% end %>
         </th>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="template">
           <% if component[:template_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:template_link] %>" class="govuk-link">
-                <%= component[:template_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
-              </a>
-            </strong>
+            <a href="<%= component[:template_link] %>" class="govuk-link">
+              <%= component[:template_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="stylesheet">
           <% if component[:stylesheet_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:stylesheet_link] %>" class="govuk-link">
-                <%= component[:stylesheet_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
-              </a>
-            </strong>
+            <a href="<%= component[:stylesheet_link] %>" class="govuk-link">
+              <%= component[:stylesheet_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="print_stylesheet">
           <% if component[:print_stylesheet_exists] %>
-            <strong class="govuk-tag govuk-tag--green">Yes</strong>
+            Yes
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="javascript">
           <% if component[:javascript_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:javascript_link] %>" class="govuk-link">
-                <%= component[:javascript_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
-              </a>
-            </strong>
+            <a href="<%= component[:javascript_link] %>" class="govuk-link">
+              <%= component[:javascript_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="test">
           <% if component[:test_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:test_link] %>" class="govuk-link">
-                <%= component[:test_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
-              </a>
-            </strong>
+            <a href="<%= component[:test_link] %>" class="govuk-link">
+              <%= component[:test_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="javascript_test">
           <% if component[:javascript_test_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:javascript_test_link] %>" class="govuk-link">
-                <%= component[:javascript_test_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
-              </a>
-            </strong>
+            <a href="<%= component[:javascript_test_link] %>" class="govuk-link">
+              <%= component[:javascript_test_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="helper">
           <% if component[:helper_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:helper_link] %>" class="govuk-link">
-                <%= component[:helper_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
-              </a>
-            </strong>
+            <a href="<%= component[:helper_link] %>" class="govuk-link">
+              <%= component[:helper_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
+            </a>
           <% end %>
         </td>
       </tr>

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

@@ -9,30 +9,44 @@
   data_attributes ||= {}
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  if attachment.content_type_name
-    content = if attachment.content_type_abbr
-                raw tag.abbr(attachment.content_type.abbr,
-                             title: attachment.content_type_name,
-                             class: "gem-c-attachment__abbr")
-              else
-                attachment.content_type_name
-              end
-    attributes << tag.span(content, class: "gem-c-attachment__attribute")
-  end
+  case attachment.type
+  when "file"
+    if attachment.content_type_name
+      content = if attachment.content_type_abbr
+                  raw tag.abbr(attachment.content_type.abbr,
+                              title: attachment.content_type_name,
+                              class: "gem-c-attachment__abbr")
+                else
+                  attachment.content_type_name
+                end
+      attributes << tag.span(content, class: "gem-c-attachment__attribute")
+    end
+
+    if attachment.file_size
+      attributes << tag.span(
+        number_to_human_size(attachment.file_size),
+        class: "gem-c-attachment__attribute",
+      )
+    end
 
-  if attachment.file_size
+    if attachment.number_of_pages
+      attributes << tag.span(
+        t("components.attachment.page", count: attachment.number_of_pages),
+        class: "gem-c-attachment__attribute",
+      )
+    end
+  when "html"
     attributes << tag.span(
-      number_to_human_size(attachment.file_size),
+      "HTML",
       class: "gem-c-attachment__attribute",
     )
-  end
-
-  if attachment.number_of_pages
+  when "external"
     attributes << tag.span(
-      t("components.attachment.page", count: attachment.number_of_pages),
+      attachment.url,
       class: "gem-c-attachment__attribute",
     )
   end
+  
 %>
 <%= tag.section class: "gem-c-attachment govuk-!-display-none-print" do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>
@@ -42,8 +56,10 @@
                 tabindex: "-1",
                 "aria-hidden": true,
                 data: data_attributes do %>
-      <% if attachment.thumbnail_url %>
-        <% image_tag(attachment.thumbnail_url, alt: "") %>
+      <% if attachment.thumbnail_url.present? %>
+        <% image_tag(attachment.thumbnail_url, alt: "", class: "gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--custom") %>
+      <% elsif attachment.html? %>
+        <%= render "govuk_publishing_components/components/attachment/thumbnail_html" %>
       <% elsif attachment.document? %>
         <%= render "govuk_publishing_components/components/attachment/thumbnail_document" %>
       <% elsif attachment.spreadsheet? %>
@@ -74,6 +90,10 @@
       <%= tag.p raw(attributes.join(', ')), class: "gem-c-attachment__metadata" %>
     <% end %>
 
+    <% if attachment.preview_url.present? %>
+      <%= tag.p link_to(t("components.attachment.preview_link"), attachment.preview_url, class: "govuk-link"), class: "gem-c-attachment__metadata" %>
+    <% end %>
+
     <% if attachment.is_official_document && !hide_order_copy_link %>
       <%= tag.p link_to(t("components.attachment.order_a_copy"), "https://www.gov.uk/guidance/how-to-buy-printed-copies-of-official-documents", class: "govuk-link govuk-link--no-visited-state", target: "_blank"),
         class: "gem-c-attachment__metadata" %>

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

@@ -1,6 +1,4 @@
 <%
-  add_gem_component_stylesheet("character-count")
-
   id ||= "character-count-#{SecureRandom.hex(4)}"
   maxlength ||= nil
   maxwords ||= nil
@@ -24,3 +22,7 @@
     </div>
   <% end %>
 <% end %>
+<%
+  add_gem_component_stylesheet("error-message")
+  add_gem_component_stylesheet("character-count")
+%>

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

@@ -12,10 +12,21 @@
   link_classes << brand_helper.color_class
   link_classes << "govuk-link--no-underline" unless underline_links
 
+  ga4_tracking ||= false
+  ga4_data = nil
+  if ga4_tracking
+    ga4_data = {
+      event_name: "navigation",
+      type: "content",
+      section: t("components.contents_list.contents", locale: :en) || ""
+    }.to_json
+  end
   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")
 -%>
@@ -32,7 +43,10 @@
     <ol class="gem-c-contents-list__list">
       <% 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] %>
+          <% 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
+          %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
             class:  link_classes,
             data: {
@@ -41,7 +55,8 @@
               track_label: contents_item[:href],
               track_options: {
                 dimension29: contents_item[:text]
-              }
+              },
+              ga4_link: ga4_link_data
             }
           %>
 

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

@@ -1,4 +1,5 @@
 <%
+  add_gem_component_stylesheet("button")
   add_gem_component_stylesheet("feedback")
 
   def utf_encode(element)

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

@@ -1,4 +1,5 @@
 <%
+  add_gem_component_stylesheet("layout-header")
   add_gem_component_stylesheet("layout-super-navigation-header")
 
   logo_link ||= "https://www.gov.uk/"
@@ -38,7 +39,9 @@
             "text": "GOV.UK",
             "section": "Logo",
             "index": {
+              "index_link": 1,
               "index_section": 0,
+              "index_section_count": 2,
             },
             "index_total": 1
           }.to_json %>"

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

@@ -18,6 +18,8 @@
   classes << "direction-#{direction}" if local_assigns.include?(:direction)
   classes << "gem-c-metadata--inverse" if inverse
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
+
+  ga4_tracking ||= false
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
   <dl class="gem-c-metadata__list" data-module="gem-track-click">
@@ -49,7 +51,16 @@
           &#8212; <a href="#full-publication-update-history" class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link"
                              data-track-category="content-history"
                              data-track-action="see-all-updates-link-clicked"
-                             data-track-label="history">
+                             data-track-label="history"
+                             <% if ga4_tracking %>
+                              data-module="ga4-link-tracker"
+                              data-ga4-link="<%= {
+                                event_name: "navigation",
+                                type: "content",
+                                section: "Top"
+                              }.to_json %>"
+                             <% end%>
+                             >
             <%= t("components.metadata.see_all_updates") %>
           </a>
         <% end %>