govuk_publishing_components 29.12.1 → 29.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4334fdd441cbca8d9fac8dfa8fd49478fd01cd847eb29707872abf0dd8c523d1
-  data.tar.gz: fe3f84de2e16d964fb9e7567ce52e8509258f833cc291fee28f54be4c4b8bd8c
+  metadata.gz: f53467f684078c59a2e499d0697b47183adacc1b30b9c19839ab8a8983715ff2
+  data.tar.gz: edddfebbcd07e825aa735e3bbe59fe000ebf5b2007272522ef94e92506cae352
 SHA512:
-  metadata.gz: e6776dd162047045dbad8f70cda8d7eae8cc8e66321d607f614daf49c410d29b40c8cf718c6c04c27756bfa05382a58fe70b94633a49cbce7e4bbd5934006c7f
-  data.tar.gz: d9411dfa23e431152880d95f455d42d6ac326cae14eddb0f905dcdef5a68e1b19b9affb3407e9c6052ed5f813131ec5cf68a8398d0899bcd150bb35bf0ad85aa
+  metadata.gz: 25eed8d95465c897c95ab654b97e2bfc15fbf956fd7535c361354da8326cc23795160413abdca24bb80757f4c6ea4c1033f3ca96474caf705ae92059896bf8c8
+  data.tar.gz: a7c01b6e8fa79cde09ef1a04c596a97a2dde847341c7e50fece0997cd78472b8a6f30741f228feb6c29b969c3374664f46d9262827027fc42ec4a67bb0c59bd4

data/app/assets/images/govuk_publishing_components/action-link-arrow--white.svg

@@ -0,0 +1 @@
+<svg width="39" height="39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.01 6.818l-2.828 2.828 7.853 7.854-22 .066L0 21.5h22.035l-7.853 7.854 2.828 2.828L29.69 19.5zM39 19.5C39 30.27 30.27 39 19.5 39 9.373 39 1.05 31.28.092 21.405A19.737 19.737 0 010 19.5C0 8.73 8.73 0 19.5 0S39 8.73 39 19.5z" fill="#fff"/></svg>

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

@@ -4,6 +4,8 @@
   var GOVUK = global.GOVUK || {}
 
   GOVUK.Gtm = {
+    PIIRemover: new GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
+
     sendPageView: function () {
       if (window.dataLayer) {
         var data = {
@@ -48,15 +50,15 @@
     },
 
     getLocation: function () {
-      return document.location.href
+      return this.PIIRemover.stripPII(document.location.href)
     },
 
     getReferrer: function () {
-      return document.referrer
+      return this.PIIRemover.stripPIIWithOverride(document.referrer, true, true)
     },
 
     getTitle: function () {
-      return document.title
+      return this.PIIRemover.stripPII(document.title)
     },
 
     // window.httpStatusCode is set in the source of the error page in static

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

@@ -0,0 +1,135 @@
+;(function (global) {
+  'use strict'
+
+  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 ESCAPE_REGEX_PATTERN = /[|\\{}()[\]^$+*?.]/g
+
+  // specific URL parameters to be redacted from accounts URLs
+  var RESET_PASSWORD_TOKEN_PATTERN = /reset_password_token=[a-zA-Z0-9-]+/g
+  var UNLOCK_TOKEN_PATTERN = /unlock_token=[a-zA-Z0-9-]+/g
+  var STATE_PATTERN = /state=.[^&]+/g
+
+  function shouldStripDates () {
+    var metas = document.querySelectorAll('meta[name="govuk:static-analytics:strip-dates"]')
+    return metas.length > 0
+  }
+
+  function shouldStripPostcodes () {
+    var metas = document.querySelectorAll('meta[name="govuk:static-analytics:strip-postcodes"]')
+    return metas.length > 0
+  }
+
+  function queryStringParametersToStrip () {
+    var meta = document.querySelector('meta[name="govuk:static-analytics:strip-query-string-parameters"]')
+    var value = false
+    if (meta) {
+      value = meta.getAttribute('content')
+    }
+    var parameters = []
+
+    if (value) {
+      var split = value.split(',')
+      for (var i = 0; i < split.length; i++) {
+        parameters.push(split[i].trim())
+      }
+    }
+
+    return parameters
+  }
+
+  var PIIRemover = function () {
+    this.stripDatePII = shouldStripDates()
+    this.stripPostcodePII = shouldStripPostcodes()
+    this.queryStringParametersToStrip = queryStringParametersToStrip()
+  }
+
+  PIIRemover.prototype.PIISafe = function (value) {
+    this.value = value
+  }
+
+  PIIRemover.prototype.stripPII = function (value) {
+    if (typeof value === 'string') {
+      return this.stripPIIFromString(value)
+    } else if (Object.prototype.toString.call(value) === '[object Array]' || Object.prototype.toString.call(value) === '[object Arguments]') {
+      return this.stripPIIFromArray(value)
+    } else if (typeof value === 'object') {
+      return this.stripPIIFromObject(value)
+    } else {
+      return value
+    }
+  }
+
+  PIIRemover.prototype.stripPIIWithOverride = function (value, enableDateStripping, enablePostcodeStripping) {
+    var oldStripDatePII = this.stripDatePII
+    var oldPostcodePII = this.stripPostcodePII
+
+    this.stripDatePII = enableDateStripping
+    this.stripPostcodePII = enablePostcodeStripping
+
+    var strippedValue = this.stripPII(value)
+
+    this.stripDatePII = oldStripDatePII
+    this.stripPostcodePII = oldPostcodePII
+
+    return strippedValue
+  }
+
+  PIIRemover.prototype.stripPIIFromString = function (string) {
+    var stripped = string.replace(EMAIL_PATTERN, '[email]')
+    stripped = stripped.replace(RESET_PASSWORD_TOKEN_PATTERN, 'reset_password_token=[reset_password_token]')
+    stripped = stripped.replace(UNLOCK_TOKEN_PATTERN, 'unlock_token=[unlock_token]')
+    stripped = stripped.replace(STATE_PATTERN, 'state=[state]')
+    stripped = this.stripQueryStringParameters(stripped)
+
+    if (this.stripDatePII === true) {
+      stripped = stripped.replace(DATE_PATTERN, '[date]')
+    }
+    if (this.stripPostcodePII === true) {
+      stripped = stripped.replace(POSTCODE_PATTERN, '[postcode]')
+    }
+    return stripped
+  }
+
+  PIIRemover.prototype.stripPIIFromObject = function (object) {
+    if (object) {
+      if (object instanceof this.PIISafe) {
+        return object.value
+      } else {
+        for (var property in object) {
+          var value = object[property]
+
+          object[property] = this.stripPII(value)
+        }
+        return object
+      }
+    }
+  }
+
+  PIIRemover.prototype.stripPIIFromArray = function (array) {
+    for (var i = 0, l = array.length; i < l; i++) {
+      var elem = array[i]
+
+      array[i] = this.stripPII(elem)
+    }
+    return array
+  }
+
+  PIIRemover.prototype.stripQueryStringParameters = function (string) {
+    for (var i = 0; i < this.queryStringParametersToStrip.length; i++) {
+      var parameter = this.queryStringParametersToStrip[i]
+      var escaped = parameter.replace(ESCAPE_REGEX_PATTERN, '\\$&')
+      var regexp = new RegExp('((?:\\?|&)' + escaped + '=)(?:[^&#\\s]*)', 'g')
+      string = string.replace(regexp, '$1[' + parameter + ']')
+    }
+
+    return string
+  }
+
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+  GOVUK.analyticsGA4.PIIRemover = PIIRemover
+
+  global.GOVUK = GOVUK
+})(window)

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

@@ -1,3 +1,5 @@
+// The following modules are imported in a specific order
+//= 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

@@ -124,6 +124,16 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
       var label = expanded ? 'Show all sections' : 'Hide all sections'
       var action = expanded ? 'accordionOpened' : 'accordionClosed'
       var options = { transport: 'beacon', label: label }
+
+      var extraOptions = event.target && event.target.getAttribute('data-track-options')
+
+      // this uses the same logic as track-click.js handleClick
+      // means we can add a custom dimensions on click
+      if (extraOptions) {
+        extraOptions = JSON.parse(extraOptions)
+        for (var k in extraOptions) options[k] = extraOptions[k]
+      }
+
       if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
         window.GOVUK.analytics.trackEvent('pageElementInteraction', action, options)
       }

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

@@ -19,6 +19,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.promptSuccessMessage = this.$module.querySelector('.js-prompt-success')
     this.surveyWrapper = this.$module.querySelector('#survey-wrapper')
     this.jshiddenClass = 'js-hidden'
+    this.whatDoingInput = this.$module.querySelector('[name=what_doing]')
+    this.whatWrongInput = this.$module.querySelector('[name=what_wrong]')
   }
 
   Feedback.prototype.init = function () {
@@ -74,6 +76,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.setHiddenValuesNotUsefulForm(gaClientId)
     }.bind(this))
 
+    this.somethingIsWrongButton.addEventListener('click', function (e) {
+      this.timerInterval = setInterval(function () {
+        this.timer = this.timer + 1
+        this.timerHoneyPot.setAttribute('value', this.timer)
+      }.bind(this), 1000)
+    }.bind(this))
+
     // much of the JS needed to support sending the form contents via this script is
     // unsupported by IE, even IE11. This check causes IE to not intercept form submits
     // and let them happen normally, which is handled already by the backend
@@ -94,6 +103,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
               this.revealInitialPrompt()
               this.setInitialAriaAttributes()
               this.activeForm.hidden = true
+              clearInterval(this.timerInterval)
             } else {
               this.showError(xhr)
               this.enableSubmitFormButton($form)
@@ -142,6 +152,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       '<h2>Sorry, we’re unable to send your message as you haven’t given us any information.</h2>',
       ' <p>Please tell us what you were doing or what went wrong</p>'
     ].join('')
+
+    this.timer = 0
+
+    this.timerHoneyPot = document.createElement('input')
+    this.timerHoneyPot.setAttribute('type', 'hidden')
+    this.timerHoneyPot.setAttribute('name', 'timer')
+    this.timerHoneyPot.setAttribute('value', this.timer)
+    this.somethingIsWrongForm.appendChild(this.timerHoneyPot)
   }
 
   Feedback.prototype.setHiddenValuesNotUsefulForm = function (gaClientId) {
@@ -185,6 +203,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         .focus()
     } else {
       this.activeForm = false
+      clearInterval(this.timerInterval)
     }
   }
 

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/_action-link.scss

@@ -92,6 +92,13 @@
   }
 }
 
+.gem-c-action-link--white-arrow {
+  &:before {
+    background-image: image-url("govuk_publishing_components/action-link-arrow--white.png");
+    background-image: image-url("govuk_publishing_components/action-link-arrow--white.svg"), linear-gradient(transparent, transparent);
+  }
+}
+
 .gem-c-action-link--blue-arrow {
   &:before {
     width: 36px;

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -1,92 +1 @@
-.gem-c-pagination {
-  display: block;
-  margin: govuk-spacing(8) 0;
-}
-
-.gem-c-pagination__list {
-  margin: 0;
-  padding: 0;
-}
-
-.gem-c-pagination__item {
-  @include govuk-font($size: 19);
-  list-style: none;
-
-  &:first-child {
-    margin-bottom: govuk-spacing(4);
-  }
-}
-
-.gem-c-pagination__link {
-  display: block;
-  text-decoration: none;
-  padding-bottom: govuk-spacing(4);
-
-  &:hover,
-  &:active,
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:hover,
-  &:active {
-    background-color: govuk-colour("light-grey", $legacy: "grey-4");
-
-    // Add govuk-link hover decoration to title if no label present
-    .gem-c-pagination__link-text--decorated {
-      @include govuk-link-decoration;
-    }
-
-    .gem-c-pagination__link-label,
-    .gem-c-pagination__link-text--decorated {
-      @include govuk-link-hover-decoration;
-    }
-  }
-
-  &:focus {
-    @include govuk-focused-text;
-
-    .gem-c-pagination__link-title {
-      border-top-color: transparent;
-    }
-
-    .gem-c-pagination__link-icon {
-      fill: $govuk-text-colour;
-    }
-  }
-}
-
-.gem-c-pagination__link-title {
-  display: block;
-  border-top: 1px solid $govuk-border-colour;
-  padding-top: govuk-spacing(3);
-}
-
-.gem-c-pagination__link-divider {
-  @include govuk-visually-hidden;
-}
-
-.gem-c-pagination__link-text {
-  @include govuk-font(19, $weight: bold);
-  margin-left: govuk-spacing(2);
-}
-
-.gem-c-pagination__link-icon {
-  @include govuk-font($size: 24, $line-height: (33.75 / 27));
-  display: inline-block;
-  margin-bottom: 1px;
-  height: .482em;
-  width: .63em;
-  fill: govuk-colour("dark-grey", $legacy: "grey-1");
-}
-
-.gem-c-pagination__link-label {
-  display: inline-block;
-  margin-top: .1em;
-  margin-left: govuk-spacing(5);
-  @include govuk-link-decoration;
-
-  @include govuk-media-query($from: tablet) {
-    margin-left: govuk-spacing(6);
-  }
-}
+@import "govuk/components/pagination/pagination";

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

@@ -10,6 +10,7 @@
   mobile_subtext ||= false
   light_text ||= false
   blue_arrow ||= false
+  white_arrow ||= false
   simple ||= false
   simple_light ||= false
   dark_icon ||= false
@@ -29,6 +30,7 @@
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--brexit" if brexit_icon
   css_classes << "gem-c-action-link--blue-arrow" if blue_arrow
+  css_classes << "gem-c-action-link--white-arrow" if white_arrow
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext

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

@@ -1,18 +1,18 @@
 <% if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page) %>
-<nav
-  class="gem-c-pagination"
-  role="navigation"
-  aria-label="<%= t("components.previous_and_next_navigation.pagination") %>"
->
-  <ul class="gem-c-pagination__list" data-module="gem-track-click">
+  <nav
+    class="govuk-pagination govuk-pagination--block"
+    role="navigation"
+    aria-label="<%= t("components.previous_and_next_navigation.pagination") %>"
+  >
     <% if local_assigns.include?(:previous_page) %>
       <%
-        link_text_classes = %w[gem-c-pagination__link-text]
-        link_text_classes << "gem-c-pagination__link-text--decorated" unless previous_page[:label].present?
+        title = previous_page[:title] || t("components.previous_and_next_navigation.previous")
+        link_text_classes = %w[govuk-pagination__link-title]
+        link_text_classes << "govuk-pagination__link-title--decorated" unless previous_page[:label].present?
       %>
-      <li class="gem-c-pagination__item gem-c-pagination__item--previous">
-        <a href="<%= previous_page[:url] %>"
-          class="govuk-link gem-c-pagination__link"
+      <div class="govuk-pagination__prev">
+        <a class="govuk-link govuk-pagination__link" 
+          href="<%= previous_page[:url] %>" 
           rel="prev"
           data-track-category="contentsClicked"
           data-track-action="previous"
@@ -20,27 +20,27 @@
           data-track-dimension="previous"
           data-track-dimension-index="29"
         >
-          <span class="gem-c-pagination__link-title">
-            <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
-              <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
-            </svg>
-            <%= tag.span(previous_page[:title], class: link_text_classes) %>
-          </span>
+          <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+            <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+          </svg>
+          <%= tag.span(title, class: link_text_classes) %>
           <% if previous_page[:label].present? %>
-            <span class="gem-c-pagination__link-divider visually-hidden">:</span>
-            <span class="gem-c-pagination__link-label"><%= previous_page[:label] %></span>
+            <span class="govuk-visually-hidden">:</span>
+            <span class="govuk-pagination__link-label"><%= previous_page[:label] %></span>
           <% end %>
         </a>
-      </li>
+      </div>
     <% end %>
+
     <% if local_assigns.include?(:next_page) %>
       <%
-        link_text_classes = %w[gem-c-pagination__link-text]
-        link_text_classes << "gem-c-pagination__link-text--decorated" unless next_page[:label].present?
+        title = next_page[:title] || t("components.previous_and_next_navigation.next")
+        link_text_classes = %w[govuk-pagination__link-title]
+        link_text_classes << "govuk-pagination__link-title--decorated" unless next_page[:label].present?
       %>
-      <li class="gem-c-pagination__item gem-c-pagination__item--next">
-        <a href="<%= next_page[:url] %>"
-          class="govuk-link gem-c-pagination__link"
+      <div class="govuk-pagination__next">
+        <a class="govuk-link govuk-pagination__link" 
+          href="<%= next_page[:url] %>" 
           rel="next"
           data-track-category="contentsClicked"
           data-track-action="next"
@@ -48,19 +48,16 @@
           data-track-dimension="next"
           data-track-dimension-index="29"
         >
-          <span class="gem-c-pagination__link-title">
-            <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
-              <path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
-            </svg>
-            <%= tag.span(next_page[:title], class: link_text_classes) %>
-          </span>
+          <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+            <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+          </svg>
+          <%= tag.span(title, class: link_text_classes) %>
           <% if next_page[:label].present? %>
-            <span class="gem-c-pagination__link-divider visually-hidden">:</span>
-            <span class="gem-c-pagination__link-label"><%= next_page[:label] %></span>
+            <span class="govuk-visually-hidden">:</span>
+            <span class="govuk-pagination__link-label"><%= next_page[:label] %></span>
           <% end %>
         </a>
-      </li>
+      </div>
     <% end %>
-  </ul>
-</nav>
+  </nav>
 <% end %>

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

@@ -2,46 +2,76 @@
   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, table_id, {
+      sortable: sortable,
+      filterable: filterable,
+      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]
+          } %>
+        <% 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/accordion.yml

@@ -189,7 +189,7 @@ examples:
 
       Each item can also have a `data_attributes` hash. These `data_attributes` are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
 
-      Data attributes can also be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created).
+      Data attributes can also be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked.
     data:
       data_attributes:
           gtm: gtm-accordion
@@ -197,6 +197,7 @@ examples:
       data_attributes_show_all:
         gtm-event-name: example
         gtm-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
+        tracking-options: "{ 'dimension114': 1 }"
       items:
         - heading:
             text: Writing well for the web