govuk_publishing_components 29.14.0 → 29.15.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea69ac62517f1d199c528b86f901ea00cf09b7d09b9c4b7c6550af866ad67cea
-  data.tar.gz: f92c94a1bad3f1516e4cdc4e415202c72e027b42990ed3e1c9c5eacebe389d14
+  metadata.gz: dc8afcd723e5dd4096349ddfbce6a967b852d9525f46bb3a1b078c11ab0b5b41
+  data.tar.gz: b2c550b431ad6892bdee23afa7f2e83315e52725007d16149f20ce9a0ef29e7a
 SHA512:
-  metadata.gz: e4a5fa8f083422f90461f0473ebe979d1240a5b0a0f4a0a56f19a24936eb33c70f18216b4e29bb43140f945c9985e5da738299563b0ceab1a40932c2cb85b138
-  data.tar.gz: 3ab97ddb79f5ed2a1494c9fa63868573b4bc18d8ba067343d4acc035b5602f90ab6a47b089a36b8590f77b5d45e9cc70084001b355cc458dbe2326346ec63073
+  metadata.gz: 0bd443616d7ab532ec0f2fe36549782986c3cb5bdbab636bdeec40ff595b7873b006d432f75c16f33311dda1c78b7e4533a4376ad52f19a8d1bf07b882dc03cd
+  data.tar.gz: 3f64655cddd38bf346a6ab3dd8c69917a70b3de614ad0d4f73b16b28f777b3c7901b466fe8479d0c7abc8205f0b123469f35c3f97f44ab3fdb6456cde97883f1

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

@@ -7,7 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   function GtmClickTracking (module) {
     this.module = module
-    this.trackingTrigger = 'data-gtm-event-name' // elements with this attribute get tracked
+    this.trackingTrigger = 'data-ga4' // elements with this attribute get tracked
   }
 
   GtmClickTracking.prototype.init = function () {
@@ -18,12 +18,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (window.dataLayer) {
       var target = this.findTrackingAttributes(event.target)
       if (target) {
-        var data = {
-          event: 'analytics',
-          event_name: target.getAttribute('data-gtm-event-name'),
-          // get entire URL apart from domain
-          link_url: window.location.href.substring(window.location.origin.length),
-          ui: JSON.parse(target.getAttribute('data-gtm-attributes')) || {}
+        var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
+
+        try {
+          var data = target.getAttribute(this.trackingTrigger)
+          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
+        }
+
+        schema.event = 'event_data'
+        // get attributes from the data attribute to send to GA
+        // only allow it if it already exists in the schema
+        for (var property in data) {
+          if (schema.event_data[property]) {
+            schema.event_data[property] = data[property]
+          }
         }
 
         // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
@@ -39,15 +51,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var detailsElement = target.closest('details')
 
         if (ariaExpanded) {
-          data.ui.text = data.ui.text || target.innerText
-          data.ui.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
+          schema.event_data.text = data.text || target.innerText
+          schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
         } else if (detailsElement) {
-          data.ui.text = data.ui.text || detailsElement.textContent
+          schema.event_data.text = data.text || detailsElement.textContent
           var openAttribute = detailsElement.getAttribute('open')
-          data.ui.action = (openAttribute == null) ? 'opened' : 'closed'
+          schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
         }
-
-        window.dataLayer.push(data)
+        window.dataLayer.push(schema)
       }
     }
   }

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

@@ -9,29 +9,26 @@
     sendPageView: function () {
       if (window.dataLayer) {
         var data = {
-          event: 'config_ready',
+          event: 'page_view',
           page: {
             location: this.getLocation(),
             referrer: this.getReferrer(),
             title: this.getTitle(),
-            status_code: this.getStatusCode()
-          },
-          publishing: {
+            status_code: this.getStatusCode(),
+
             document_type: this.getMetaContent('format'),
             publishing_app: this.getMetaContent('publishing-app'),
             rendering_app: this.getMetaContent('rendering-app'),
             schema_name: this.getMetaContent('schema-name'),
-            content_id: this.getMetaContent('content-id')
-          },
-          taxonomy: {
+            content_id: this.getMetaContent('content-id'),
+
             section: this.getMetaContent('section'),
             taxon_slug: this.getMetaContent('taxon-slug'),
             taxon_id: this.getMetaContent('taxon-id'),
             themes: this.getMetaContent('themes'),
             taxon_slugs: this.getMetaContent('taxon-slugs'),
-            taxon_ids: this.getMetaContent('taxon-ids')
-          },
-          content: {
+            taxon_ids: this.getMetaContent('taxon-ids'),
+
             language: this.getLanguage(),
             history: this.getHistory(),
             withdrawn: this.getWithDrawn(),
@@ -65,9 +62,9 @@
     // https://github.com/alphagov/static/blob/main/app/views/root/_error_page.html.erb#L32
     getStatusCode: function () {
       if (window.httpStatusCode) {
-        return window.httpStatusCode
+        return window.httpStatusCode.toString()
       } else {
-        return 200
+        return '200'
       }
     },
 

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

@@ -0,0 +1,32 @@
+;(function (global) {
+  'use strict'
+
+  var GOVUK = global.GOVUK || {}
+
+  var Schemas = function () {
+    this.null = 'n/a'
+  }
+
+  Schemas.prototype.eventSchema = function () {
+    return {
+      event: this.null,
+
+      event_data: {
+        event_name: this.null,
+        type: this.null,
+        url: this.null,
+        text: this.null,
+        index: this.null,
+        index_total: this.null,
+        section: this.null,
+        action: this.null,
+        external: this.null
+      }
+    }
+  }
+
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+  GOVUK.analyticsGA4.Schemas = Schemas
+
+  global.GOVUK = GOVUK
+})(window)

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

@@ -1,4 +1,5 @@
 // The following modules are imported in a specific order
+//= require ./analytics-ga4/gtm-schemas
 //= require ./analytics-ga4/pii-remover
 //= require ./analytics-ga4/gtm-page-views
 //= require ./analytics-ga4/gtm-click-tracking

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

@@ -10,27 +10,22 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   function GemAccordion ($module) {
     this.$module = $module
     this.sectionClass = 'govuk-accordion__section'
-    this.sectionClassExpanded = 'govuk-accordion__section--expanded'
-    this.sectionHeaderClass = 'govuk-accordion__section-header'
-    this.sectionInnerContent = 'govuk-accordion__section-content'
-    this.showAllControls = 'govuk-accordion__show-all'
-    this.sectionButton = 'govuk-accordion__section-button'
-    this.headingText = 'govuk-accordion__section-heading-text'
-
-    // Translated component content and language attribute pulled from data attributes
+    this.sectionExpandedClass = 'govuk-accordion__section--expanded'
+    this.sectionInnerContentClass = 'govuk-accordion__section-content'
+
+    this.sectionHeader = '.govuk-accordion__section-header'
+    this.showAllControls = '.govuk-accordion__show-all'
+    this.sectionButton = '.govuk-accordion__section-button'
+    this.headingText = '.govuk-accordion__section-heading-text'
+
+    // language attribute pulled from data attributes
     this.$module.actions = {}
     this.$module.actions.locale = this.$module.getAttribute('data-locale')
-    this.$module.actions.showText = this.$module.getAttribute('data-show-text')
-    this.$module.actions.hideText = this.$module.getAttribute('data-hide-text')
-    this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
-    this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
-    this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
   }
 
   GemAccordion.prototype.init = function () {
     // Indicate that JavaScript has worked
-    this.$module.classList.add('gem-c-accordion--active')
-    this.$module.querySelector('.' + this.showAllControls).classList.add('gem-c-accordion__show-all')
+    this.$module.querySelector(this.showAllControls).classList.add('gem-c-accordion__show-all')
 
     // Feature flag for anchor tag navigation used on manuals
     if (this.$module.getAttribute('data-anchor-navigation') === 'true') {
@@ -50,7 +45,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
     if (showAllAttributes) {
       try {
-        var showAll = this.$module.querySelector('.' + this.showAllControls)
+        var showAll = this.$module.querySelector(this.showAllControls)
         var values = JSON.parse(showAllAttributes)
         var keys = Object.keys(values)
         for (var i = 0; i < keys.length; i++) {
@@ -74,7 +69,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   // Add event listeners for links to open accordion sections when navigated to using said anchor links on the page
   // Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour
   GemAccordion.prototype.addEventListenersForAnchors = function () {
-    var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]')
+    var links = this.$module.querySelectorAll(this.sectionInnerContentClass + ' a[href*="#"]')
 
     nodeListForEach(links, function (link) {
       if (link.pathname === window.location.pathname) {
@@ -87,7 +82,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   GemAccordion.prototype.openForAnchor = function (hash) {
     var target = document.getElementById(hash)
     var $section = this.getContainingSection(target)
-    var $header = $section.querySelector('.' + this.sectionHeaderClass)
+    var $header = $section.querySelector(this.sectionHeader)
     var $expanded = this.getContainingSection($section)
     var $parent = $header.parentElement
 
@@ -95,7 +90,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     // Should the target anchor link be within the same page, open section - navigate normally
     // Should the target anchor link be within a different, closed section, open this section
     // Should the target anchor link be within a different page and different, closed section open this section
-    if ($expanded && (!$parent.classList.contains(this.sectionClassExpanded))) {
+    if ($expanded && (!$parent.classList.contains(this.sectionExpandedClass))) {
       $header.click()
     }
   }
@@ -119,7 +114,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
   // To track the Accordion's "Show all sections" / "Hide all sections" button click events and pass them to the GA event tracking
   GemAccordion.prototype.addAccordionOpenAllTracking = function () {
-    this.$module.querySelector('.' + this.showAllControls).addEventListener('click', function (event) {
+    this.$module.querySelector(this.showAllControls).addEventListener('click', function (event) {
       var expanded = event.target.getAttribute('aria-expanded') === 'true'
       var label = expanded ? 'Show all sections' : 'Hide all sections'
       var action = expanded ? 'accordionOpened' : 'accordionClosed'
@@ -141,7 +136,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   }
 
   GemAccordion.prototype.addEventListenerSections = function () {
-    var sections = this.$module.querySelectorAll('.' + this.sectionButton)
+    var sections = this.$module.querySelectorAll(this.sectionButton)
     nodeListForEach(sections, function (section) {
       section.addEventListener('click', this.addAccordionSectionTracking.bind(this, section))
     }.bind(this))
@@ -150,7 +145,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   // If the Accordion's sections are opened on click, then pass them to the GA event tracking
   GemAccordion.prototype.addAccordionSectionTracking = function (section) {
     var expanded = section.getAttribute('aria-expanded') === 'false'
-    var label = section.querySelector('.' + this.headingText).textContent
+    var label = section.querySelector(this.headingText).textContent
     var action = expanded ? 'accordionOpened' : 'accordionClosed'
     var options = { transport: 'beacon', label: label }
 

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

@@ -0,0 +1,52 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function Table ($module) {
+    this.$module = $module
+    this.searchInput = $module.querySelector('input[name="filter"]')
+    this.tableRows = $module.querySelectorAll('.js-govuk-table__row')
+    this.filter = $module.querySelector('.js-gem-c-table__filter')
+    this.filterCount = this.filter.querySelector('.js-filter-count')
+    this.message = $module.querySelector('.js-gem-c-table__message')
+    this.hiddenClass = 'govuk-!-display-none'
+    this.filterCountText = this.filterCount.getAttribute('data-count-text')
+    this.tableRowsContent = []
+
+    for (var i = 0; i < this.tableRows.length; i++) {
+      this.tableRowsContent.push(this.tableRows[i].textContent.toUpperCase())
+    }
+  }
+
+  Table.prototype.init = function () {
+    this.$module.updateRows = this.updateRows.bind(this)
+    this.filter.classList.remove(this.hiddenClass)
+    this.searchInput.addEventListener('input', this.$module.updateRows)
+  }
+
+  // Reads value of input and filters content
+  Table.prototype.updateRows = function () {
+    var value = this.searchInput.value
+    var hiddenRows = 0
+    var length = this.tableRows.length
+
+    for (var i = 0; i < length; i++) {
+      if (this.tableRowsContent[i].includes(value.toUpperCase())) {
+        this.tableRows[i].classList.remove(this.hiddenClass)
+      } else {
+        this.tableRows[i].classList.add(this.hiddenClass)
+        hiddenRows++
+      }
+    }
+
+    this.filterCount.textContent = (length - hiddenRows) + ' ' + this.filterCountText
+
+    if (length === hiddenRows) {
+      this.message.classList.remove(this.hiddenClass)
+    } else {
+      this.message.classList.add(this.hiddenClass)
+    }
+  }
+
+  Modules.Table = Table
+})(window.GOVUK.Modules)

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

@@ -25,12 +25,23 @@
   $caption-side: top; // Caption alignment. Top or bottom.
   $key-width: 160px; // Only used by IE. Other browsers get smallest width that fits content
 
+  // The following accessible colour palette has been developed to meet the colour contrast requirements for adjacent colours (as set out in WCAG 2.1)
+  // For charts, the palette should be used instead of the GOV.UK colour palette - https://design-system.service.gov.uk/styles/colour/
+  // https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5
+
+  $gss-colour-dark-blue: #12436d;
+  $gss-colour-turquoise: #28a197;
+  $gss-colour-dark-pink: #801650;
+  $gss-colour-orange: #f46a25;
+  $gss-colour-dark-grey: #3d3d3d;
+  $gss-colour-plum: #a285d1;
+
   // CHART COLOUR SCHEME
 
   $chart-border: govuk-colour("white"); // Chart border colour
   $key-border: govuk-colour("white"); // Key border colour
-  $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-purple", $legacy: "bright-red");
-  $bar-text-colours: govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black"), govuk-colour("black"), govuk-colour("black"), govuk-colour("white"), govuk-colour("white");
+  $bar-colours: $gss-colour-dark-blue, $gss-colour-turquoise, $gss-colour-dark-pink, $gss-colour-orange, $gss-colour-dark-grey, $gss-colour-plum;
+  $bar-text-colours: govuk-colour("white"), govuk-colour("white"), govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black");
   $bar-cell-colour: govuk-colour("black");
   $bar-outdented-colour: govuk-colour("black");
 

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -6,6 +6,7 @@ module GovukPublishingComponents
       @path = path
       application_found = application_exists(path)
       components_found = []
+      @component_locations = {}
       @gem_style_references = []
       @jquery_references = []
 
@@ -25,15 +26,15 @@ module GovukPublishingComponents
         @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") || []
-        components_in_stylesheets = find_components(stylesheets, find_stylesheets, "stylesheets") || []
-        components_in_print_stylesheets = find_components(stylesheets, find_print_stylesheets, "print_stylesheets") || []
-        components_in_javascripts = find_components(javascripts, find_javascripts, "javascripts") || []
+        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) || []
 
         ruby_paths = %w[/app/helpers/ /app/presenters/ /lib/]
         components_in_ruby = []
         ruby_paths.each do |ruby_path|
-          components_in_ruby << find_components(Dir["#{path}#{ruby_path}**/*.{rb,erb}"], find_components, "ruby") || []
+          components_in_ruby << find_components(Dir["#{path}#{ruby_path}**/*.{rb,erb}"], find_components, "ruby", true) || []
         end
         components_in_ruby = components_in_ruby.flatten.uniq
 
@@ -67,17 +68,32 @@ module GovukPublishingComponents
         components_found: components_found,
         gem_style_references: @gem_style_references.flatten.uniq.sort,
         jquery_references: @jquery_references.flatten.uniq.sort,
+        component_locations: @component_locations,
       }
     end
 
   private
 
-    def find_components(files, find, type)
+    def find_components(files, find, type, keep_locations)
       components_found = []
 
       files.each do |file|
         src = File.read(file)
-        components_found << find_match(find, src, type)
+
+        if keep_locations
+          components = find_match(find, src, type)
+          if components.any?
+            components_found << components
+            components.each do |component|
+              component_sym = component.to_sym
+              @component_locations[component_sym] = [] unless @component_locations[component_sym]
+              @component_locations[component_sym] << clean_file_path(file)
+              @component_locations[component_sym].sort!
+            end
+          end
+        else
+          components_found << find_match(find, src, type)
+        end
 
         if type == "javascripts"
           jquery_references = find_code_references(file, src, /\$\(/)
@@ -93,12 +109,16 @@ module GovukPublishingComponents
       components_found.flatten.uniq.sort
     end
 
+    # 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"
 
       matches = src.scan(find)
+      return [] unless matches.any?
+
       all_matches = []
       matches.each do |match|
         all_matches << clean_file_name(match.tr('[])\'"', ""))
@@ -108,9 +128,11 @@ module GovukPublishingComponents
     end
 
     def find_code_references(file, src, regex)
-      clean_file_path = /(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/
+      return clean_file_path(file) if regex.match?(src)
+    end
 
-      return file[clean_file_path] if regex.match?(src)
+    def clean_file_path(file)
+      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/]
     end
 
     def clean_file_name(name)

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -106,6 +106,7 @@ module GovukPublishingComponents
             warning_count: warnings.length,
             gem_style_references: result[:gem_style_references],
             jquery_references: result[:jquery_references],
+            component_locations: result[:component_locations],
           }
         else
           data << {
@@ -244,28 +245,33 @@ module GovukPublishingComponents
       (haystack - needle).flatten.sort
     end
 
+    # returns details of component inclusion by applications
     def get_components_by_application
       results = []
       found_something = false
 
       @gem_data[:component_listing].each do |component|
-        found_in_applications = []
+        component_name = component[:name]
+        locations = []
 
         @applications_data.each do |application|
-          next unless application[:application_found]
+          next unless application[:application_found] && application[:component_locations][component_name.to_sym]
 
-          name = application[:name]
+          application_name = application[:name]
           found_something = true
 
-          application[:summary].each do |item|
-            found_in_applications << name if item[:value].include?(component[:name])
-          end
+          locations << {
+            name: application_name,
+            locations: application[:component_locations][component_name.to_sym],
+          }
         end
 
+        locations = locations.flatten
+
         results << {
-          component: component[:name],
-          count: found_in_applications.uniq.length,
-          list: found_in_applications.uniq.join(", "),
+          component: component_name,
+          count: locations.length,
+          locations: locations,
         }
       end
 

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

@@ -63,10 +63,28 @@
           <% @components[:components_by_application].each do |component| %>
             <div class="govuk-summary-list__row">
               <dt class="govuk-summary-list__key">
-                <%= component[:component] %> (<%= component[:count] %>)
+                <%= component[:component] %> (<%= pluralize(component[:count], 'use') %>)
               </dt>
               <dd class="govuk-summary-list__value">
-                <%= component[:list] %>
+                <% component[:locations].each do |application| %>
+                  <% github_link = 'https://github.com/alphagov/' + application[:name] + '/blob/main/' %>
+                  <details class="govuk-details govuk-!-margin-bottom-2" data-module="govuk-details">
+                    <summary class="govuk-details__summary">
+                      <span class="govuk-details__summary-text">
+                        <%= application[:name] %> (<%= application[:locations].length %>)
+                      </span>
+                    </summary>
+                    <div class="govuk-details__text">
+                      <ul class="govuk-list govuk-list--bullet">
+                        <% application[:locations].each do |location| %>
+                          <li>
+                            <a href="<%= github_link %><%= location %>" class="govuk-link"><%= location %></a>
+                          </li>
+                        <% end %>
+                      </ul>
+                    </div>
+                  </details>
+                <% end %>
               </dd>
             </div>
           <% end %>

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

@@ -2,46 +2,77 @@
   caption ||= nil
   head ||= []
   rows ||= []
-  first_cell_is_header ||=false
+  first_cell_is_header ||= false
   caption_classes ||= nil
-  sortable ||=false
+  sortable ||= false
+  filterable ||= false
+  label ||= t("components.table.filter_label")
+
+  table_id = "table-id-#{SecureRandom.hex(4)}"
+  filter_count_id = "filter-count-id-#{SecureRandom.hex(4)}"
 %>
 
-<%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
-    sortable: sortable,
-    caption_classes: caption_classes
-  }) do |t| %>
-
-  <% if head.any? %>
-    <%= t.head do %>
-      <% head.each_with_index do |item, cellindex| %>
-        <%= t.header item[:text], {
-          format: item[:format],
-          href: item[:href],
-          data_attributes: item[:data_attributes],
-          sort_direction: item[:sort_direction]
-        } %>
+<% @table = capture do %>
+  <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
+      sortable: sortable,
+      filterable: filterable,
+      caption_classes: caption_classes, 
+      table_id: table_id
+    }) do |t| %>
+
+    <% if head.any? %>
+      <%= t.head do %>
+        <% head.each_with_index do |item, cellindex| %>
+          <%= t.header item[:text], {
+            format: item[:format],
+            href: item[:href],
+            data_attributes: item[:data_attributes],
+            sort_direction: item[:sort_direction]
+          } %>
+        <% end %>
       <% end %>
     <% end %>
-  <% end %>
 
-  <%= t.body do %>
-    <% rows.each_with_index do |row, rowindex| %>
-      <%= t.row do %>
-        <% row.each_with_index do |cell, cellindex| %>
-          <% if cellindex == 0 && first_cell_is_header %>
-            <%= t.header cell[:text], {
-              scope: "row",
-              format: cell[:format]
-            } %>
-          <% else %>
-            <%= t.cell cell[:text], {
-              format: cell[:format]
-            } %>
+    <%= t.body do %>
+      <% rows.each_with_index do |row, rowindex| %>
+        <%= t.row do %>
+          <% row.each_with_index do |cell, cellindex| %>
+            <% if cellindex == 0 && first_cell_is_header %>
+              <%= t.header cell[:text], {
+                scope: "row",
+                format: cell[:format]
+              } %>
+            <% else %>
+              <%= t.cell cell[:text], {
+                format: cell[:format]
+              } %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
+<% end %>
+
+<% if filterable %>
+  <div data-module="table">
+    <div class="js-gem-c-table__filter govuk-!-display-none">
+      <%= render "govuk_publishing_components/components/input", {
+        label: {
+          text: label
+        },
+        name: "filter",
+        controls: table_id,
+        aria_described_by: filter_count_id,
+      } %>
+
+      <p id="<%= filter_count_id %>" aria-live="polite" class="js-filter-count govuk-visually-hidden" data-count-text="<%= t("components.table.filter_count") %>"></p>
+    </div>
+
+    <%= @table %>
 
+    <p class="govuk-body govuk-!-display-none js-gem-c-table__message"><%= t("components.table.filter_message") %></p>
+  </div>
+<% else %>
+  <%= @table %>
 <% end %>

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

@@ -18,4 +18,4 @@ examples:
     data:
       href: '#'
       data_attributes:
-        tracking: GT-1234
+        an_attribute: the value

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

@@ -36,8 +36,8 @@ examples:
   with_data_attributes:
     description: |
       If a `href` attribute is present, `data_attributes` will apply to the `span` containing the number value (see below).
-      
-      This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
+
+      Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       number: 23
       label: Ministerial departments