govuk_publishing_components 70.2.1 → 71.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7b177c9da6fb435cb1e67132c22ed5d934c3c4d1195ebbbad43f4bdf840db6b
-  data.tar.gz: b1e988e6f1af0ea310b5aee90fa639e7eab8f1081369224569185649d0564948
+  metadata.gz: 8e03438d3c963276e86d21ca8e2da336a8cd15220298b2ffbb57cbf53ca86e56
+  data.tar.gz: 8e2052d81d95e829bf5239d2cde0080fc21a62ba7aa2097fe707d131db63ae20
 SHA512:
-  metadata.gz: 6d64abc0c3978040d42a6050dd242715afc67d72c1f23029a40a872c66949ece8dfcca0c5326f842ae9768121cc9c4203bd2694b5a0d667a866b4a16f730c9a6
-  data.tar.gz: 6e8a95eb759c7fad99b61bca15d2f889a181f0152dbb7e1c0911e4a720eaac5f38655105645f91574e856f8bb735701f98cfa4bd251bbb29a72d605f7fd82782
+  metadata.gz: 5278c358eb404521e67e9bb9fb95e8df365f7ae1a7df0ba88a9f43b57a5281d735206b7265c28cab4f06843ba30b57d43800b516ff701ed794c31c411bc36713
+  data.tar.gz: 5aecaf5b41cb5c02b8d85cd194b561e21b8d120adadd4f09dbd1bd6e07fb031d9eecde6d63cf4f3af955f8b0593967ba7b4d4a3d683594b24eb9c41e8161b0e7

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

@@ -69,13 +69,28 @@
             user_created_at: this.getMetaContent('user-created-at'),
             user_organisation_name: this.getMetaContent('user-organisation-name'),
             user_role: this.getMetaContent('user-role'),
-            user_id: this.getMetaContent('user-id')
+            user_id: this.getMetaContent('user-id'),
+
+            utm_source: this.getUtmParams('utm_source'),
+            utm_medium: this.getUtmParams('utm_medium'),
+            utm_campaign: this.getUtmParams('utm_campaign'),
+            utm_term: this.getUtmParams('utm_term'),
+            utm_content: this.getUtmParams('utm_content')
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
       }
     },
 
+    getUtmParams: function (key) {
+      if (this.getLocation().indexOf('?') > -1) {
+        var queryStringParams = new URLSearchParams(this.getLocation().split('?')[1])
+        return queryStringParams.get(key) || undefined
+      } else {
+        return undefined
+      }
+    },
+
     removeHyphensAndDowncase: function (text) {
       if (text) {
         return text.replace(/-/g, ' ').toLowerCase()
@@ -102,7 +117,8 @@
 
     getLocation: function () {
       // We don't want to remove dates on search pages.
-      return this.PIIRemover.stripPIIWithOverride(this.stripGaParam(document.location.href), this.stripDates, true)
+      // Where a token is present this should be redacted
+      return this.PIIRemover.stripPIIWithOverride(this.stripGaParam(document.location.href.replace(/(&token=)(\S+)/, '')), this.stripDates, true)
     },
 
     getSearchTerm: function () {
@@ -149,6 +165,7 @@
         queryString = this.stripGaParam(queryString)
         queryString = this.PIIRemover.stripPIIWithOverride(queryString, this.stripDates, true)
         queryString = queryString.substring(1) // removes the '?' character from the start.
+        queryString = queryString.replace(/(&token=)(\S+)/, '') // where a token is present this should be redacted
         return queryString
       }
     },

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

@@ -9,6 +9,10 @@
     }
 
     this.createBarcharts()
+
+    if (this.$module.querySelectorAll('table').length) {
+      this.tableScroll()
+    }
   }
 
   Govspeak.prototype.embedYoutube = function () {
@@ -21,5 +25,10 @@
     enhancement.init()
   }
 
+  Govspeak.prototype.tableScroll = function () {
+    var enhancement = new window.GOVUK.GovspeakTableScroll(this.$module)
+    enhancement.init()
+  }
+
   Modules.Govspeak = Govspeak
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -1,68 +1,139 @@
-/* global XMLHttpRequest */
+/* global fetch, DOMException, AbortController */
 (function (Modules) {
-  function SinglePageNotificationButton ($module) {
-    this.$module = $module
-    this.basePath = this.$module.querySelector('input[name="base_path"]').value
-    this.buttonLocation = this.$module.getAttribute('data-button-location')
-    this.buttonVisibleClass = 'gem-c-single-page-notification-button--visible'
-
-    this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
-    // This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
-    if (this.buttonLocation) this.personalisationEndpoint += '&button_location=' + this.buttonLocation
-  }
+  class SinglePageNotificationButton {
+    constructor ($module) {
+      /** @type {HTMLDivElement} */
+      this.$module = $module
+
+      /** @type {HTMLInputElement | null} */
+      this.basePathInput = this.$module.querySelector('input[name="base_path"]')
+
+      /** @type {HTMLButtonElement | null} */
+      this.button = this.$module.querySelector('.gem-c-button__outline--notification')
+
+      /** @type {string | null} */
+      this.buttonLocation = this.$module.getAttribute('data-button-location')
+
+      /** @type {string | null} */
+      this.customSubscribeText = this.$module.getAttribute('data-button-text-subscribe')
+
+      /** @type {string | null} */
+      this.customUnsubscribeText = this.$module.getAttribute('data-button-text-unsubscribe')
+
+      /** @type {string} */
+      this.buttonVisibleClass = 'gem-c-single-page-notification-button--visible'
+
+      /** @type {number | null} */
+      this.fetchRequestTimeoutId = null
+    }
 
-  SinglePageNotificationButton.prototype.init = function () {
-    var xhr = new XMLHttpRequest()
-    xhr.open('GET', this.personalisationEndpoint, true)
-    // if XHR to the personalisation endpoint is taking an incredibly long time to complete, we are better off leaving the button in its default unpersonalised state. Content changing before the user's eyes while they are browsing can be jarring and should be avoided.
-    xhr.timeout = 10000
-
-    xhr.ontimeout = function () {
-      this.makeVisible(this.$module)
-    }.bind(this)
-
-    xhr.onreadystatechange = function () {
-      if (xhr.readyState === 4) {
-        if (xhr.status === 200) {
-          var responseText = xhr.responseText
-          // if response text exists and is JSON parse-able, parse the response and update the button html
-          if (responseText && this.responseIsJSON(responseText)) {
-            var active = JSON.parse(responseText).active
-
-            var customSubscribeText = this.$module.getAttribute('data-button-text-subscribe')
-            var customUnsubscribeText = this.$module.getAttribute('data-button-text-unsubscribe')
-            // Only set custom button text if both text items are provided
-            var customText = customSubscribeText && customUnsubscribeText
-
-            // If response returns active, user has subscribed to notifications
-            if (active === true) {
-              if (customText) {
-                this.$module.querySelector('.gem-c-button__outline--notification').textContent = customUnsubscribeText
-              }
-            } else {
-              if (customText) {
-                this.$module.querySelector('.gem-c-button__outline--notification').textContent = customSubscribeText
-              }
-            }
-          }
+    /**
+     * Initialise the single page notification button
+     *
+     */
+    async init () {
+      try {
+        if (this.button === null) {
+          throw new Error('Button required')
         }
+
+        if (this.basePathInput === null) {
+          throw new Error('Base path required')
+        }
+
+        const personalisationEndpoint = this.getPersonalisationEndpoint(this.basePathInput.value, this.buttonLocation)
+        const personalisationData = await this.getPersonalisationData(personalisationEndpoint, 10000)
+        const customButtonText = this.getCustomButtonText(personalisationData.active, this.customSubscribeText, this.customUnsubscribeText)
+
+        if (customButtonText) {
+          this.button.textContent = customButtonText
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
         this.makeVisible(this.$module)
+        clearTimeout(this.fetchRequestTimeoutId)
       }
-    }.bind(this)
-    xhr.send()
-  }
+    }
+
+    /**
+     * Get the personalisation data endpoint
+     *
+     * @param {string} basePath The base path to use
+     * @param {string | null} buttonLocation This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
+     * @returns {string} The personalisation endpoint to use
+     */
+    getPersonalisationEndpoint (basePath, buttonLocation) {
+      const checkEmailSubscriptionEndpoint = '/api/personalisation/check-email-subscription'
 
-  SinglePageNotificationButton.prototype.responseIsJSON = function (string) {
-    try {
-      JSON.parse(string)
-    } catch (e) {
-      return false
+      if (buttonLocation) {
+        return `${checkEmailSubscriptionEndpoint}?base_path=${basePath}&button_location=${buttonLocation}`
+      }
+
+      return `${checkEmailSubscriptionEndpoint}?base_path=${basePath}`
     }
-    return true
-  }
 
-  SinglePageNotificationButton.prototype.makeVisible = function (target) {
-    target.classList.add(this.buttonVisibleClass)
+    /**
+     * Fetch data from the personalisation endpoint for checking if an email subscription is active
+     *
+     * @param {string} personalisationEndpoint The personalisation URL to fetch data from
+     * @param {number} timer Set the time in milliseconds when the fetch request should abort
+     * @returns {Promise<EmailSubscriptionData>}
+     * @throws {DOMException} if the request times out
+     * @throws {Error} if the request response is not ok
+     */
+    async getPersonalisationData (personalisationEndpoint, timer) {
+      const abortController = new AbortController()
+      this.fetchRequestTimeoutId = setTimeout(() => abortController.abort(new DOMException('Timeout', 'AbortError')), timer)
+
+      const response = await fetch(personalisationEndpoint, {
+        headers: { Accept: 'application/json' },
+        signal: abortController.signal
+      })
+
+      if (!response.ok) {
+        throw new Error(`Response status: ${response.status}`)
+      }
+
+      return await response.json()
+    }
+
+    /**
+     * Make the single page notification button visible
+     *
+     * @param {HTMLDivElement} module The element to add the visible class to
+     */
+    makeVisible (module) {
+      module.classList.add(this.buttonVisibleClass)
+    }
+
+    /**
+     * Get custom button text depending on whether the email subscription is active
+     *
+     * @param {boolean} activeState If the user has an email subscription to the page
+     * @param {string} customSubscribeText The custom subscribe text used when the activeState is false
+     * @param {string} customUnsubscribeText The custom subscribe text used when the activeState is true
+     * @returns {string | undefined} Returns the custom button text to use or `undefined` if the custom button text cannot be determined
+     */
+    getCustomButtonText (activeState, customSubscribeText, customUnsubscribeText) {
+      if (typeof activeState !== 'boolean') return
+      // Only set custom button text if both text items are provided
+      if (!customSubscribeText || !customUnsubscribeText) {
+        return
+      }
+
+      if (activeState === true) return customUnsubscribeText
+      if (activeState === false) return customSubscribeText
+    }
   }
+
   Modules.SinglePageNotificationButton = SinglePageNotificationButton
 })(window.GOVUK.Modules)
+
+/**
+ * @typedef {object} EmailSubscriptionData
+ * @property {string} base_path the base_path parameter
+ * @property {boolean} active whether the email subscription is active
+ *
+ * @see {@link https://docs.publishing.service.gov.uk/repos/account-api/api.html#get-apipersonalisationcheck-email-subscription}
+ */

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -287,7 +287,7 @@
 
     var loaded = this.loadFromSessionStorage(this.$module.sessionStoreLink)
     var activeParent = this.$module.querySelectorAll('.' + this.$module.activeLinkClass)[0]
-    var activeChild = activeParent.firstChild
+    var activeChild = activeParent.firstElementChild
     var foundLink = activeChild.getAttribute('data-position')
     var lastClicked = loaded || foundLink // the value saved has priority
 

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/table-scroll.js

@@ -0,0 +1,120 @@
+/* global ResizeObserver */
+(function (GOVUK) {
+  'use strict'
+
+  var TableScroll = function ($element) {
+    this.element = $element
+    this.tables = this.element.querySelectorAll('table')
+    this.windowResizeTimeout = null
+  }
+
+  TableScroll.prototype.init = function () {
+    if (this.tables.length === 0) {
+      return
+    }
+
+    // a small timeout ensures scrollWidth is accurate
+    setTimeout(() => {
+      this.windowResized()
+    }, 10)
+
+    // for all browsers
+    window.onresize = () => {
+      this.detectSizeChange()
+    }
+
+    // for Firefox with 'zoom text only' (does not trigger onresize)
+    const resizeObserver = new ResizeObserver(() => {
+      this.detectSizeChange()
+    })
+    resizeObserver.observe(this.tables[0])
+  }
+
+  TableScroll.prototype.detectSizeChange = function () {
+    if (this.windowResizeTimeout) {
+      clearTimeout(this.windowResizeTimeout)
+    }
+
+    this.windowResizeTimeout = setTimeout(function () {
+      this.windowResized()
+    }.bind(this), 300)
+  }
+
+  TableScroll.prototype.windowResized = function () {
+    this.destroyElements()
+    this.setupElements()
+  }
+
+  TableScroll.prototype.setupElements = function () {
+    this.tables.forEach(table => {
+      const tablewrapper = table.closest('.tablewrapper')
+
+      if (!(table.scrollWidth > table.clientWidth)) {
+        if (tablewrapper) {
+          tablewrapper.className = 'tablewrapper'
+        }
+        return
+      }
+
+      // wrap the table in a div, but only the first time
+      if (!tablewrapper) {
+        var wrapper = document.createElement('div')
+        wrapper.classList.add('tablewrapper')
+        table.parentNode.insertBefore(wrapper, table)
+        wrapper.appendChild(table)
+      }
+
+      const scrollBar = document.createElement('div')
+      scrollBar.setAttribute('tabindex', '-1')
+      scrollBar.classList.add('govspeak-table-scrollbar')
+
+      const scrollBarChild = document.createElement('div')
+      scrollBarChild.classList.add('govspeak-table-scrollbar__child')
+      scrollBarChild.style.width = `${table.scrollWidth}px`
+
+      scrollBar.append(scrollBarChild)
+      table.before(scrollBar)
+      scrollBar.scrollLeft = table.scrollLeft
+      this.updateLeftRight(table)
+
+      scrollBar.onscroll = () => {
+        if (this.preventScrolling) {
+          this.preventScrolling = false
+          return
+        }
+        this.preventScrolling = true
+        table.scrollLeft = scrollBar.scrollLeft
+        this.updateLeftRight(table)
+      }
+
+      table.onscroll = () => {
+        if (this.preventScrolling) {
+          this.preventScrolling = false
+          return
+        }
+        this.preventScrolling = true
+        scrollBar.scrollLeft = table.scrollLeft
+        this.updateLeftRight(table)
+      }
+    })
+  }
+
+  TableScroll.prototype.updateLeftRight = function (table) {
+    if ((table.scrollWidth - table.scrollLeft) < (table.offsetWidth + 1)) {
+      table.parentElement.className = 'tablewrapper tablewrapper--active tablewrapper--end'
+    } else if (table.scrollLeft < 1) {
+      table.parentElement.className = 'tablewrapper tablewrapper--active tablewrapper--start'
+    } else {
+      table.parentElement.className = 'tablewrapper tablewrapper--active'
+    }
+  }
+
+  TableScroll.prototype.destroyElements = function () {
+    const scrollBars = this.element.querySelectorAll('.govspeak-table-scrollbar')
+    scrollBars.forEach(bar => {
+      bar.remove()
+    })
+  }
+
+  GOVUK.GovspeakTableScroll = TableScroll
+}(window.GOVUK))

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -298,7 +298,7 @@
     return sendBeaconImpl(url, data);
   }
 
-  var version = "4.5.2";
+  var version = "4.5.3";
   var pkg = {
     version: version};
 
@@ -1191,7 +1191,7 @@
       var po = new PerformanceObserver(function (list) {
         list.getEntries().forEach(function (entry) { return callback(entry); });
       });
-      po.observe(Object.assign({ type: type, buffered: true }, { options: options }));
+      po.observe(Object.assign({ type: type, buffered: true }, options));
       return po;
     }
     return undefined;

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

@@ -115,7 +115,7 @@ $gem-guide-border-width: 1px;
 .component-guide-preview--violation,
 .component-guide-preview--warning {
   margin-top: -$gem-guide-border-width;
-  
+
   color: govuk-functional-colour(text);
   @include govuk-font($size: 19);
 
@@ -217,6 +217,11 @@ html {
   .preview-title {
     padding-left: govuk-spacing(3);
   }
+
+  .gem-full-width__element {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 // Rouge syntax highlighting
@@ -489,10 +494,9 @@ $code-delete-bg: #fadddd;
   padding: 0;
   padding-bottom: 0.1px; // forces child margin inside
   border: 0;
+  border-top: solid 1px govuk-functional-colour(border);
   margin-left: -(govuk-spacing(3));
   margin-right: -(govuk-spacing(3));
-  border-top: solid 1px govuk-functional-colour(border);
-  border-bottom: solid 1px govuk-functional-colour(border);
 
   @include govuk-media-query($from: tablet) {
     margin-left: -(govuk-spacing(6));

data/app/assets/stylesheets/govuk_publishing_components/all-components.scss

@@ -72,7 +72,6 @@ $govuk-output-custom-properties: true;
 @import "components/phase-banner";
 @import "components/pagination";
 @import "components/print-link";
-@import "components/published-dates";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/reorderable-list";

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

@@ -7,20 +7,7 @@
   padding: 0;
   margin: 0;
   display: grid;
-  // stylelint-disable-next-line property-no-deprecated
-  grid-column-gap: govuk-spacing(6); // Use deprecated grid-column-gap for Grade C browser support
   column-gap: govuk-spacing(6);
-
-  @include govuk-media-query($from: "desktop") {
-    // For browsers that don't support CSS grid, constrain the width to 50% to improve usability
-    // especially for screen magnifier users
-    width: 50%;
-
-    // Reset the width for browsers that support CSS grid
-    @supports (display: grid) {
-      width: initial;
-    }
-  }
 }
 
 .gem-c-cards__list--one-column {

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

@@ -28,15 +28,36 @@
     margin: 0;
   }
 
-  .govuk-table .govuk-table__header {
-    text-align: center;
-  }
+}
 
-  .govuk-table .govuk-table__cell {
-    text-align: center;
-  }
+.gem-c-chart div svg g[clip-path] rect,
+.gem-c-chart div svg g[clip-path] circle {
+  cursor: pointer;
+}
+
+// Legend
+.gem-c-chart div svg g:has(text[text-anchor="start"]) * {
+  cursor: pointer;
+}
+
+// For line chart points
+.gem-c-chart svg circle {
+  cursor: pointer;
 }
 
+// Prevent line chart lines having cursor: pointer
+.gem-c-chart svg g[clip-path] path[fill="none"] {
+  cursor: default;
+}
+
+// Force grid lines back to default
+.gem-c-chart div svg g[clip-path] rect[height="1"],
+.gem-c-chart div svg g[clip-path] rect[width="1"] {
+  cursor: default;
+  pointer-events: none;
+}
+
+
 .gem-c-chart .gem-c-chart__a11y-note-link {
   display: none;
   margin-bottom: govuk-spacing(2);
@@ -56,6 +77,10 @@
   }
 }
 
+.gem-c-chart__source {
+  color: govuk-functional-colour(secondary-text);
+}
+
 .js-enabled {
   .gem-c-chart .gem-c-chart__a11y-note-link {
     display: inline;

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

@@ -8,10 +8,6 @@
     @include govuk-link-common;
     @include govuk-link-style-default;
   }
-
-  .gem-c-metadata__definition-link {
-    font-weight: normal;
-  }
 }
 
 .direction-rtl .gem-c-metadata,

data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss

@@ -2,6 +2,7 @@
 
 .gem-c-service-navigation--full-width {
   padding-left: govuk-spacing(3);
+  padding-right: govuk-spacing(3);
 }
 
 .gem-c-service-navigation--hide-service-name-on-mobile {

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

@@ -54,6 +54,77 @@
       text-align: right;
     }
   }
+
+  .tablewrapper {
+    position: relative;
+  }
+
+  .tablewrapper--active {
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 24px;
+      width: 10px;
+      bottom: 20px;
+      background: rgb(0, 0, 0, 0.1);
+      border-color: $govuk-border-colour;
+      border-width: 5px;
+    }
+
+    &::before {
+      left: 0;
+      border-left-style: solid;
+      border-radius: 0 15px 15px 0;
+    }
+
+    &::after {
+      right: 0;
+      border-right-style: solid;
+      border-radius: 15px 0 0 15px;
+    }
+  }
+
+  .tablewrapper--start {
+    &::before {
+      display: none;
+    }
+  }
+
+  .tablewrapper--end {
+    &::after {
+      display: none;
+    }
+  }
+
+  .govspeak-table-scrollbar {
+    position: sticky;
+    background: #FFFFFF;
+    z-index: 1;
+    top: 0;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    height: 20px;
+    margin-bottom: 5px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .govspeak-table-scrollbar__child {
+    height: 20px;
+  }
+
+  .govspeak-table-scrollbar + table:focus {
+    outline: $govuk-focus-width solid govuk-functional-colour(focus);
+    box-shadow: 0 0 0 6px govuk-functional-colour("focus-text");
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
 }
 
 // Add rtl table styling when `direction: "rtl"` is set

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

@@ -21,7 +21,7 @@
   chart_id = "chart-id-#{SecureRandom.hex(4)}"
   table_id = "table-id-#{SecureRandom.hex(4)}"
 
-  @include_script ||= OpenStruct.new(script_included: false)
+  @include_chart_script ||= OpenStruct.new(script_included: false)
 
   chart_helper = GovukPublishingComponents::Presenters::ChartHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -31,9 +31,9 @@
   Chartkick.options[:html] = '<div id="%{id}"><noscript><p class="govuk-body">This chart uses JavaScript to work. To view the chart, turn on JavaScript in your browser’s settings.</p></noscript></div>'
 %>
 <% if rows.length > 0 && keys.length > 0 %>
-  <% unless @include_script[:script_included] %>
+  <% unless @include_chart_script[:script_included] %>
     <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
-    <% @include_script[:script_included] = true %>
+    <% @include_chart_script[:script_included] = true %>
   <% end %>
   <%= tag.div(**component_helper.all_attributes) do %>
     <div class="<%= header_class %>">
@@ -80,13 +80,13 @@
                 <td class="govuk-table__cell"></td>
                 <% if table_direction == "horizontal" %>
                   <% keys.each do |key| %>
-                    <th class="govuk-table__header" scope="col">
+                    <th class="govuk-table__header govuk-table__cell--numeric" scope="col">
                       <%= key %>
                     </th>
                   <% end %>
                 <% else %>
                   <% rows.each do |row| %>
-                    <th class="govuk-table__header govuk-table__header--stacked" scope="row">
+                    <th class="govuk-table__header govuk-table__header--stacked govuk-table__cell--numeric" scope="row">
                       <%= row[:label] %>
                     </th>
                   <% end %>