govuk_publishing_components 23.1.0 → 23.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20fcbde55a95f5ca3e7ac5744c94f69b573b563e9c5df919681864c6662dff16
-  data.tar.gz: 9d65b762cc90d4e8bfa3ba37b2c811778af94f55a3d88d0e45ca0ed7f0d0161a
+  metadata.gz: ccb3ff988da8eed7ce14013d8f0a0f054661b7ee9322a2caa75ab49a5b064162
+  data.tar.gz: b115615020b7694cab625d98ee0abe11e98306d8776c7afb3ffd400d642fe32c
 SHA512:
-  metadata.gz: 10d6c20ed45850b0bc92826e009dd10d8cbc5a6e09368ad9822e33d97a7bf6b8b59b43c50b18cf630e109455df35e4b993b6c1e497d0eeb94adc2081b128da41
-  data.tar.gz: b3fdb29493b563ef3893f1c2d33f21feb2f9817d38952cff97091e6b318bd0d11c2ddd3c85ba08f0baf80560a30150651ed283fbaf06700b4045d161cb187740
+  metadata.gz: cfb2771a84017aca9fc781ea5d650a1402cbf1a88770993e222e42cfe0aa946e14569c14add10ae41dd5ee7619ce028dcfaf501049b7738e56d71afe65f7d2d0
+  data.tar.gz: 571a20b867d372fefc21d4dcf451fd59c56530146fb7c7e258a878320c905ff408f60ce793675a2fba6fbbdedc94fea17adc310eff84529d34b0529193a7f58c

data/app/assets/javascripts/govuk_publishing_components/analytics/init.js

@@ -0,0 +1,56 @@
+var analyticsInit = function () {
+  'use strict'
+
+  var analyticsVars = window.GOVUK.analyticsVars || false
+  if (analyticsVars) {
+    var gaProperty = window.GOVUK.analyticsVars.gaProperty || false
+    var gaPropertyCrossDomain = window.GOVUK.analyticsVars.gaPropertyCrossDomain || false
+    var linkedDomains = window.GOVUK.analyticsVars.linkedDomains || false
+  }
+
+  var consentCookie = window.GOVUK.getConsentCookie()
+  var dummyAnalytics = {
+    addLinkedTrackerDomain: function () {},
+    setDimension: function () {},
+    setOptionsForNextPageView: function () {},
+    trackEvent: function () {},
+    trackPageview: function () {},
+    trackShare: function () {}
+  }
+
+  // Disable analytics by default
+  // This will be reversed below, if the consent cookie says usage cookies are allowed
+  var disabler = 'ga-disable-' + gaProperty
+  window[disabler] = true
+
+  if (consentCookie && consentCookie.usage) {
+    window[disabler] = false
+
+    // Load Google Analytics libraries
+    window.GOVUK.StaticAnalytics.load()
+
+    if (gaProperty) {
+      // Use document.domain in dev, preview and staging so that tracking works
+      // Otherwise explicitly set the domain as www.gov.uk (and not gov.uk).
+      var cookieDomain = (document.domain === 'www.gov.uk') ? '.www.gov.uk' : document.domain
+
+      // Configure profiles, setup custom vars, track initial pageview
+      var analytics = new window.GOVUK.StaticAnalytics({
+        universalId: gaProperty,
+        cookieDomain: cookieDomain,
+        allowLinker: true
+      })
+
+      // Make interface public for virtual pageviews and events
+      window.GOVUK.analytics = analytics
+
+      if (linkedDomains && linkedDomains.length > 0) {
+        window.GOVUK.analytics.addLinkedTrackerDomain(gaPropertyCrossDomain, 'govuk', linkedDomains)
+      }
+    }
+  } else {
+    window.GOVUK.analytics = dummyAnalytics
+  }
+}
+
+window.GOVUK.analyticsInit = analyticsInit

data/app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js

@@ -2,22 +2,24 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function CopyToClipboard () { }
 
-  Modules.CopyToClipboard = function () {
-    this.start = function (element) {
-      var input = element[0].querySelector('.gem-c-input')
-      var copyButton = element[0].querySelector('.gem-c-button')
+  CopyToClipboard.prototype.start = function ($module) {
+    this.$module = $module[0]
 
-      input.addEventListener('click', function () {
-        input.select()
-      })
+    var input = this.$module.querySelector('.gem-c-input')
+    var copyButton = this.$module.querySelector('.gem-c-button')
 
-      copyButton.addEventListener('click', function (event) {
-        event.preventDefault()
-        input.select()
-        document.execCommand('copy')
-      })
-    }
+    input.addEventListener('click', function () {
+      input.select()
+    })
+
+    copyButton.addEventListener('click', function (event) {
+      event.preventDefault()
+      input.select()
+      document.execCommand('copy')
+    })
   }
+
+  Modules.CopyToClipboard = CopyToClipboard
 })(window.GOVUK.Modules)

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

@@ -4,47 +4,51 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
-
-  Modules.GovukDetails = function () {
-    this.start = function (element) {
-      var customTrackLabel = element[0].getAttribute('data-track-label')
-
-      // If a custom label has been provided, we can simply call the tracking module
-      if (customTrackLabel) {
-        var trackDetails = new window.GOVUK.Modules.TrackClick()
-        trackDetails.start(element)
-      } else {
-        // If no custom label is set, we use the open/close status as the label
-        var detailsComponent = element[0]
-        var detailsClick = detailsComponent.querySelector('[data-details-track-click]')
-        var that = this
-
-        if (detailsClick) {
-          detailsClick.addEventListener('click', function (event) {
-            that.trackDefault(detailsComponent)
-          })
-        }
+  function GovukDetails () { }
+
+  GovukDetails.prototype.start = function ($module) {
+    this.$module = $module[0]
+
+    var customTrackLabel = this.$module.getAttribute('data-track-label')
+
+    // If a custom label has been provided, we can simply call the tracking module
+    if (customTrackLabel) {
+      var trackDetails = new window.GOVUK.Modules.TrackClick()
+      trackDetails.start($module)
+    } else {
+      // If no custom label is set, we use the open/close status as the label
+      var detailsClick = this.$module.querySelector('[data-details-track-click]')
+
+      if (detailsClick) {
+        detailsClick.addEventListener('click', function (event) {
+          this.trackDefault(this.$module)
+        }.bind(this))
       }
     }
+  }
 
-    this.trackDefault = function (element) {
-      if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-        var componentStatus = (element.getAttribute('open') == null) ? 'open' : 'closed'
-        var trackCategory = element.getAttribute('data-track-category')
-        var trackAction = element.getAttribute('data-track-action')
-        var trackOptions = element.getAttribute('data-track-options')
+  GovukDetails.prototype.trackDefault = function (element) {
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      var componentStatus = (element.getAttribute('open') == null) ? 'open' : 'closed'
+      var trackCategory = element.getAttribute('data-track-category')
+      var trackAction = element.getAttribute('data-track-action')
+      var trackOptions = element.getAttribute('data-track-options')
 
-        if (typeof trackOptions !== 'object' || trackOptions === null) {
-          trackOptions = {}
-        }
+      if (trackOptions) {
+        trackOptions = JSON.parse(trackOptions)
+      }
+
+      if (typeof trackOptions !== 'object' || trackOptions === null) {
+        trackOptions = {}
+      }
 
-        trackOptions.label = componentStatus
+      trackOptions.label = componentStatus
 
-        if (trackAction && trackCategory) {
-          window.GOVUK.analytics.trackEvent(trackCategory, trackAction, trackOptions)
-        }
+      if (trackAction && trackCategory) {
+        window.GOVUK.analytics.trackEvent(trackCategory, trackAction, trackOptions)
       }
     }
   }
+
+  Modules.GovukDetails = GovukDetails
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/print-link.js

@@ -2,13 +2,14 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function PrintLink () { }
 
-  Modules.PrintLink = function () {
-    this.start = function (element) {
-      element[0].addEventListener('click', function () {
-        window.print()
-      })
-    }
+  PrintLink.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.addEventListener('click', function () {
+      window.print()
+    })
   }
+
+  Modules.PrintLink = PrintLink
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -49,8 +49,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     // true if it's a 'multiple' table
     // this means multiple bars per rows, but not stacked.
-    var moreThanTwoTDs = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('td').length > 2
-    this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoTDs)
+    var moreThanTwoCells = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('th, td').length > 2
+
+    this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoCells)
 
     // set the outdent options
     // which can be set via classes or overriden by setting the value to true
@@ -118,11 +119,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     tr.classList.add('mc-tr')
 
     var output = ''
-    var allTheTHs = this.$table.querySelectorAll('th')
+    var allTheTHsInTableHead = this.$table.querySelectorAll('thead th')
 
-    for (var i = 0; i < allTheTHs.length; i++) {
+    for (var i = 0; i < allTheTHsInTableHead.length; i++) {
       output += '<div class="mc-th">'
-      output += allTheTHs[i].innerHTML
+      output += allTheTHsInTableHead[i].innerHTML
       output += '</div>'
     }
 
@@ -143,11 +144,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       tr.classList.add('mc-tr')
 
       var cellsOutput = ''
-      var allTheTds = allTheTbodyTrs[i].querySelectorAll('td')
+      var allTheTableBodyCells = allTheTbodyTrs[i].querySelectorAll('th, td')
 
-      for (var j = 0; j < allTheTds.length; j++) {
+      for (var j = 0; j < allTheTableBodyCells.length; j++) {
         cellsOutput += '<div class="mc-td">'
-        cellsOutput += allTheTds[j].innerHTML
+        cellsOutput += allTheTableBodyCells[j].innerHTML
         cellsOutput += '</div>'
       }
       tr.innerHTML = cellsOutput

data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js

@@ -0,0 +1,13 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function InitialFocus () { }
+
+  InitialFocus.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.focus()
+  }
+
+  Modules.InitialFocus = InitialFocus
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -88,6 +88,7 @@
     height: 100%;
     $ie-background: rgba(255, 255, 255, 0);
     background: $ie-background; // because internet explorer
+    -ms-high-contrast-adjust: none;
   }
 
   @include govuk-media-query($from: mobile, $until: tablet) {

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

@@ -18,49 +18,3 @@
     padding-left: govuk-spacing(6);
   }
 }
-
-.gem-c-input__wrapper {
-  display: flex;
-  display: -ms-flexbox;
-
-  .gem-c-input {
-    display: inline-block;
-    flex: 0 1 auto;
-  }
-
-  .gem-c-input:focus {
-    z-index: 1; // increase z-index on focus so it appears over the suffix
-  }
-}
-
-.gem-c-input__prefix,
-.gem-c-input__suffix {
-  @include govuk-font($size: 19);
-
-  background-color: govuk-colour("light-grey", $legacy: "grey-3");
-  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-  box-sizing: border-box;
-  cursor: default; // emphasise non-editable status of prefixes and suffixes
-  display: inline-block;
-  flex: 0 0 auto;
-  height: 40px;
-  margin-top: 0;
-  min-width: 40px;
-  padding: govuk-spacing(1);
-  text-align: center;
-  white-space: nowrap;
-  width: auto;
-
-  @if $govuk-typography-use-rem {
-    height: govuk-px-to-rem(40px);
-    min-width: govuk-px-to-rem(40px);
-  }
-}
-
-.gem-c-input__prefix {
-  border-right: 0;
-}
-
-.gem-c-input__suffix {
-  border-left: 0;
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -104,11 +104,16 @@
   }
 }
 
+.govuk-header__logotype {
+  vertical-align: middle;
+}
+
 .gem-c-header__product-name {
   display: none;
 
   @include govuk-media-query($from: tablet) {
     display: inline-block;
+    vertical-align: middle;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -58,6 +58,10 @@
 
   .footnotes {
     border-top: 1px solid $govuk-text-colour;
+
+    a[role="doc-backlink"] {
+      display: none;
+    }
   }
 
   .legislative-list {

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

@@ -107,17 +107,17 @@
   %>
 
   <% if prefix && suffix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
       <% # The line below relies on in-line styling for legacy browsers and it's whitespace-sensitive %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+      <%= tag.span prefix, class: "govuk-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "govuk-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% elsif prefix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
+      <%= tag.span prefix, class: "govuk-input__prefix", aria: { hidden: true } %><%= input_tag %>
     <% end %>
   <% elsif suffix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
+      <%= input_tag %><%= tag.span suffix, class: "govuk-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% else %>
     <%= input_tag %>

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

@@ -236,6 +236,20 @@ examples:
             </tr>
           </tbody>
         </table>
+  chart_with_multiple_headings:
+    data:
+      block: |
+        <table id="multiple-table-chart" class="js-barchart-table mc-multiple">
+          <caption>Multiple Table</caption>
+          <thead>
+            <tr><th>Some Data</th><th>YES</th><th>NO</th><th>MAYBE</th></tr>
+          </thead>
+          <tbody>
+            <tr><th>Testing One</th><td>5</td><td>6</td><td>11</td></tr>
+            <tr><th>Testing Two</th><td>6</td><td>2</td><td>8</td></tr>
+            <tr><th>Testing Three</th><td>3</td><td>9</td><td>12</td></tr>
+          </tbody>
+        </table>
   address:
     data:
       block: |

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.1.0".freeze
+  VERSION = "23.5.0".freeze
 end

data/node_modules/govuk-frontend/govuk/all.js

@@ -1961,55 +1961,49 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
 
 function Header ($module) {
   this.$module = $module;
+  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
+  this.$menu = this.$menuButton && $module.querySelector(
+    '#' + this.$menuButton.getAttribute('aria-controls')
+  );
 }
 
+/**
+ * Initialise header
+ *
+ * Check for the presence of the header, menu and menu button – if any are
+ * missing then there's nothing to do so return early.
+ */
 Header.prototype.init = function () {
-  // Check for module
-  var $module = this.$module;
-  if (!$module) {
+  if (!this.$module || !this.$menuButton || !this.$menu) {
     return
   }
 
-  // Check for button
-  var $toggleButton = $module.querySelector('.govuk-js-header-toggle');
-  if (!$toggleButton) {
-    return
-  }
-
-  // Handle $toggleButton click events
-  $toggleButton.addEventListener('click', this.handleClick.bind(this));
+  this.syncState(this.$menu.classList.contains('govuk-header__navigation--open'));
+  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));
 };
 
 /**
-* Toggle class
-* @param {object} node element
-* @param {string} className to toggle
-*/
-Header.prototype.toggleClass = function (node, className) {
-  if (node.className.indexOf(className) > 0) {
-    node.className = node.className.replace(' ' + className, '');
-  } else {
-    node.className += ' ' + className;
-  }
+ * Sync menu state
+ *
+ * Sync the menu button class and the accessible state of the menu and the menu
+ * button with the visible state of the menu
+ *
+ * @param {boolean} isVisible Whether the menu is currently visible
+ */
+Header.prototype.syncState = function (isVisible) {
+  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible);
+  this.$menuButton.setAttribute('aria-expanded', isVisible);
 };
 
 /**
-* An event handler for click event on $toggleButton
-* @param {object} event event
-*/
-Header.prototype.handleClick = function (event) {
-  var $module = this.$module;
-  var $toggleButton = event.target || event.srcElement;
-  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'));
-
-  // If a button with aria-controls, handle click
-  if ($toggleButton && $target) {
-    this.toggleClass($target, 'govuk-header__navigation--open');
-    this.toggleClass($toggleButton, 'govuk-header__menu-button--open');
-
-    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true');
-    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false');
-  }
+ * Handle menu button click
+ *
+ * When the menu button is clicked, change the visibility of the menu and then
+ * sync the accessibility state and menu button state
+ */
+Header.prototype.handleMenuButtonClick = function () {
+  var isVisible = this.$menu.classList.toggle('govuk-header__navigation--open');
+  this.syncState(isVisible);
 };
 
 function Radios ($module) {