govuk_publishing_components 70.2.1 → 71.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7b177c9da6fb435cb1e67132c22ed5d934c3c4d1195ebbbad43f4bdf840db6b
-  data.tar.gz: b1e988e6f1af0ea310b5aee90fa639e7eab8f1081369224569185649d0564948
+  metadata.gz: 74db3ccfb835e4b5298212da9a2fbcdd6c6df533a174622e62ef8c09f838e163
+  data.tar.gz: 6c8d9fba438b66e7f71191021547d009ffffff268061665ee7b3b7701888aef1
 SHA512:
-  metadata.gz: 6d64abc0c3978040d42a6050dd242715afc67d72c1f23029a40a872c66949ece8dfcca0c5326f842ae9768121cc9c4203bd2694b5a0d667a866b4a16f730c9a6
-  data.tar.gz: 6e8a95eb759c7fad99b61bca15d2f889a181f0152dbb7e1c0911e4a720eaac5f38655105645f91574e856f8bb735701f98cfa4bd251bbb29a72d605f7fd82782
+  metadata.gz: 6a304e13a7a304c5851f17efc0e6920589401ebe9943f16837b0e548a3ca80d9f4468ddb6b3d5114506ab0cfd1cd90f34e619f01591f31df4420eddb4f6b22ad
+  data.tar.gz: d0814535e7016e51788030010ad2cc7b6a490a138e81ccca427e3dc80cb9e143dfceb3792593571ec8c94da87ad536930b3cb55bf3542d3fdfc45a801b64aa9c

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/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,108 @@
+(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)
+
+    window.onresize = () => {
+      if (this.windowResizeTimeout) {
+        clearTimeout(this.windowResizeTimeout)
+      }
+
+      this.windowResizeTimeout = setTimeout(function () {
+        this.windowResized()
+      }.bind(this), 500)
+    }
+  }
+
+  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,73 @@
       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 {
+    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 %>

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

@@ -78,12 +78,6 @@
         <dt class="gem-c-metadata__term"><%= t("components.metadata.last_updated") %>:</dt>
         <dd class="gem-c-metadata__definition">
           <%= last_updated %>
-          <% if local_assigns.include?(:see_updates_link) %>
-            &#8212; <a href="#full-publication-update-history"
-                      class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link">
-              <%= t("components.metadata.see_all_updates") %>
-            </a>
-          <% end %>
           <% if page_history.any? %>
             <div class="gem-c-metadata__details-wrapper">
               <%= render "govuk_publishing_components/components/details", {

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

@@ -5,7 +5,6 @@
   id_prefix ||= "radio-#{SecureRandom.hex(4)}"
   items ||= []
 
-  label ||= nil
   heading ||= nil
   heading_caption ||= nil
   heading_size ||= nil
@@ -43,7 +42,7 @@
   radio_classes << "govuk-radios--inline" if inline
 
   legend_classes = %w(govuk-fieldset__legend)
-  legend_classes << "govuk-fieldset__legend--#{size}"
+  legend_classes << "govuk-fieldset__legend--#{size}" unless heading_level == "span" # `span` is returned by the shared helper if heading_level is set to 0 in the local assigns
   legend_classes << "govuk-visually-hidden" if visually_hidden_heading
 
   aria = "#{hint_id} #{"#{error_id}" if has_error}".strip if hint or has_error

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

@@ -170,8 +170,8 @@ examples:
     data:
       chart_type: "bar"
       heading: Hats owned
-      h_axis_title: Day
-      v_axis_title: Views
+      h_axis_title: Hats owned
+      v_axis_title: Person
       description: This chart shows page views for January 2015.
       hide_legend: true
       keys:
@@ -186,6 +186,80 @@ examples:
             - 1
             - 1
             - 2
+  bar_chart_with_all_colours:
+    description: There are six colours. After that, charts should show black bars. Not that charts like this one are not recommended to be used in production, as GSS recommended a maximum of four categories. This is just to demonstrate all the available colours.
+    data:
+      header_three_quarters: true
+      chart_type: column
+      heading: "Chart 6: Vehicle miles travelled by vehicle type in Great Britain, 2019 to 2025"
+      h_axis_title: Vehicle type
+      v_axis_title: Billion vehicle miles
+      description: Chart 6 is a bar chart that shows that car traffic levels in 2025 increased by 2.5% from 2024, and were similar to pre-pandemic (2019) levels.
+      hide_legend: true
+      source: Department for Transport
+      keys:
+        - Cars
+        - Vans
+        - Lorries
+        - Motorcycles
+        - Buses
+      rows:
+        - label: 2019
+          values:
+            - 250
+            - 51
+            - 15
+            - 3
+            - 5
+        - label: 2020
+          values:
+            - 200
+            - 45
+            - 13
+            - 1
+            - 1
+        - label: 2021
+          values:
+            - 220
+            - 50
+            - 13
+            - 1
+            - 1
+        - label: 2022
+          values:
+            - 240
+            - 50
+            - 15
+            - 1
+            - 1
+        - label: 2023
+          values:
+            - 245
+            - 50
+            - 13
+            - 1
+            - 1
+        - label: 2024
+          values:
+            - 247
+            - 50
+            - 11
+            - 1
+            - 1
+        - label: 2025
+          values:
+            - 250
+            - 50
+            - 10
+            - 1
+            - 1
+        - label: 2026
+          values:
+            - 260
+            - 60
+            - 15
+            - 5
+            - 5
   column_chart:
     data:
       chart_type: "column"

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

@@ -1127,6 +1127,34 @@ examples:
             </tr>
           </tbody>
         </table>
+  wide_table:
+    data:
+      block: |
+        <table>
+          <caption>Long place names, courtesy of Wikipedia</caption>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Location</th>
+              <th>Language</th>
+              <th>Translation</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu</td>
+              <td>Hill in North Island, New Zealand</td>
+              <td>Māori</td>
+              <td>"The summit where Tamatea, the man with the big knees, the climber of mountains, the land-swallower who travelled about, played his kōauau (flute) to his loved one".</td>
+            </tr>
+            <tr>
+              <td>Azpilikuetagaraikosaroiarenberekolarrea</td>
+              <td>Place in Azpilkueta, Navarre, Spain</td>
+              <td>Basque language</td>
+              <td>"The low meadow of the sheep pen in upper Azpilikueta".</td>
+            </tr>
+          </tbody>
+        </table>
   tables_with_alignments:
     data:
       block: |