govuk_publishing_components 23.2.0 → 23.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 585d11b9396da0fe9700ea8df8b1b551609b70255b536e4230e7c185a2985d27
-  data.tar.gz: 64f9b47b4a80c994a9b4f5821e6ce3ca2195f53c6e7b5e1da9077b56a7488cba
+  metadata.gz: 68acf2ab68688ebffe315cfe437a0e5bbaecb52c9b5e5e7b651730ff7470ad39
+  data.tar.gz: cf7739918f368db0190aab556f648bfeea71e68f735b6f6bdab63a6c3adae7c9
 SHA512:
-  metadata.gz: 69c3d73429e1bd91e90ae4cd47ff35b35d360c207736314498e9de92f5de1052bc0353134302f410d6bae056d4504f74bb5d6b9e7573abbabf2f2f5454db484e
-  data.tar.gz: 2af0e5162819931a95c301608f782c991dc4b047d34c24e29d84093a6be5ed03cb0fc143294cbcfcfa8956c6cc22a361dd41bc4cfa76adf50095cd331f599653
+  metadata.gz: 3a68c2256473279092d1c77fd0f5aa3333eb7b6481b6137a2a3edae7ff96a74261b1ed0dc423715e82b9c0c1a7498b3ed6f27deb2f515fd163c7260e765b9333
+  data.tar.gz: 470d0f9f8fac2694021524c2f04b5e1618f5391ea10af5cad91fa7fe22faa39dc6b8a4dfe5029945455c18ad76254b9e6aa6cf0300cde1fc5b9351a0f3c98620

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

@@ -1,8 +1,14 @@
-var analyticsInit = function (gaProperty, gaPropertyCrossDomain, linkedDomains) {
+var analyticsInit = function () {
   'use strict'
 
-  var consentCookie = window.GOVUK.getConsentCookie()
+  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 () {},
@@ -23,22 +29,24 @@ var analyticsInit = function (gaProperty, gaPropertyCrossDomain, linkedDomains)
     // Load Google Analytics libraries
     window.GOVUK.StaticAnalytics.load()
 
-    // 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
+    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
-    })
+      // 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
+      // Make interface public for virtual pageviews and events
+      window.GOVUK.analytics = analytics
 
-    if (linkedDomains && linkedDomains.length > 0) {
-      window.GOVUK.analytics.addLinkedTrackerDomain(gaPropertyCrossDomain, 'govuk', linkedDomains)
+      if (linkedDomains && linkedDomains.length > 0) {
+        window.GOVUK.analytics.addLinkedTrackerDomain(gaPropertyCrossDomain, 'govuk', linkedDomains)
+      }
     }
   } else {
     window.GOVUK.analytics = dummyAnalytics

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/contextual_sidebar/_brexit_cta.html.erb

@@ -1,4 +1,6 @@
-<div class="gem-c-contextual-sidebar__brexit-cta govuk-!-margin-bottom-6" data-module="track-click">
-  <h2 class="gem-c-contextual-sidebar__brexit-heading">Transition period</h2>
-  <a href="/transition" class="govuk-link" data-track-category="relatedLinkClicked" data-track-action="1.0 Transition" data-track-label="/transition" data-track-options='{"dimension29":"Find out what it means for you"}'>Find out what it means for you</a>
+<% link_text = t("components.related_navigation.transition.link_text") %>
+<% link_path = t("components.related_navigation.transition.link_path") %>
+<div class="gem-c-contextual-sidebar__brexit-cta govuk-!-margin-bottom-6" data-module="track-click" lang="en">
+  <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
+  <a href="<%= link_path %>" class="govuk-link" data-track-category="relatedLinkClicked" data-track-action="1.0 Transition" data-track-label="<%= link_path %>" data-track-options='{"dimension29":"<%= link_text %>"}'><%= link_text %></a>
 </div>

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/config/locales/cy.yml

@@ -6,5 +6,8 @@ cy:
       or: 'neu'
     back_link:
       back: "Yn ôl"
-    contents_list: 
+    contents_list:
       contents: Cynnwys
+    related_navigation:
+      transition:
+        link_path: "/transition.cy"

data/config/locales/en.yml

@@ -71,6 +71,10 @@ en:
       topics: "Explore the topic"
       topical_events: "Topical event"
       world_locations: "World locations"
+      transition:
+        title: "Brexit transition"
+        link_path: "/transition"
+        link_text: "Find out what it means for you"
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.2.0".freeze
+  VERSION = "23.5.1".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) {