govuk_publishing_components 23.0.0 → 23.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a8babc3aada8e54a5f1f5b5af0c1806df1dbebb0d0905d259ae826a0d17b58a
-  data.tar.gz: '09903013a6e5a36e5ea2c732b0c12e33c73a4decd7f509ba54c2257257c465c8'
+  metadata.gz: c709998b8885c2971dd9a8748371d99a0153037f2d39e7776eadcad3dfc9870b
+  data.tar.gz: 6e71541e40cc1c636639c8b09650a526d29745161db15b1f99a821375395f07b
 SHA512:
-  metadata.gz: b192ee804bbf98365593eacdf0eeaaa99d47050421777d1ed5d70305ecd7adcbf74ff52b6234325c204a099cbd9288fcd78921f906701c0447676e91d79f025d
-  data.tar.gz: 8e31289db6b9f096191eed89dce37599edc713f8c4b5c78661fbd030ca370b6f83648ae8dc651265aa8dc2e3a4e3ceef7361f6b08cd59b1d73c1eb78d54c08c9
+  metadata.gz: 865a9b6d06c7bb7cbae057bb37e289e784a3ffec53352e491e1492a0d71bd774d2f5596d78379b6c4da1ffab046a01b7de597669e9606c5410caffe5c2a2df6b
+  data.tar.gz: e91cd02916c1bb0c8f25687c481b7ce61890f51c404ea5625b64411ef38e2347c978c833916103465acfea5e31560dfa81209e619576bbb507538e85649342f8

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

@@ -3,8 +3,6 @@ $gem-c-print-link-background-height: 18px;
 
 .gem-c-print-link {
   display: none;
-  margin-bottom: 2em;
-  margin-top: 2em;
 }
 
 .gem-c-print-link.gem-c-print-link--show-without-js {

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

@@ -36,7 +36,6 @@ $large-input-size: 50px;
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
-
   padding: 6px;
   margin: 0;
   width: 100%;
@@ -71,6 +70,13 @@ $large-input-size: 50px;
   }
 }
 
+@include govuk-compatibility(govuk_template) {
+  //  ultra specific rule overrides focus styling from govuk_template
+  #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
+    @extend .gem-c-search__input[type="search"]:focus; // stylelint-disable scss/at-extend-no-missing-placeholder
+  }
+}
+
 .gem-c-search__submit {
   border: 0;
   cursor: pointer;

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

@@ -3,33 +3,40 @@
   href ||= nil
   data_attributes ||= {}
   require_js ||= href.nil?
+  margin_top ||= 3
+  margin_bottom ||= 3
 
-  data_attributes[:module] = 'print-link' if require_js
+  data_attributes[:module] = require_js ? "print-link" : "button"
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({
+    margin_top: margin_top,
+    margin_bottom: margin_bottom
+  })
+
+  wrapper_classes = %w(gem-c-print-link)
+  wrapper_classes << "gem-c-print-link--show-without-js" unless require_js
+  wrapper_classes << (shared_helper.get_margin_top)
+  wrapper_classes << (shared_helper.get_margin_bottom)
 
   classes = %w(govuk-link)
   classes << "gem-c-print-link__button" if href.nil?
   classes << "gem-c-print-link__link govuk-link--no-visited-state" if href.present?
 %>
 
-<% if require_js %>
-  <div class="gem-c-print-link" >
+<%= tag.div class: wrapper_classes do %>
+  <% if require_js %>
     <%= content_tag(:button, text, {
         class: classes,
         data: data_attributes
     }) %>
-  </div>
-<% else %>
-  <div class="gem-c-print-link gem-c-print-link--show-without-js">
+  <% else %>
     <%= link_to(
       text,
       href,
       class: classes,
       rel: "alternate",
       data: data_attributes,
-      role: "button",
-      data: {
-        module: "button",
-      },
+      role: "button"
     ) %>
-  </div>
+  <% end %>
 <% end %>

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/app/views/govuk_publishing_components/components/docs/print_link.yml

@@ -22,3 +22,8 @@ examples:
         track-category: "printButton"
         track-action: "clicked"
         track-label: "Print this page"
+  with_custom_margins:
+    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having margin level 3 on top and bottom.
+    data:
+      margin_top: 0
+      margin_bottom: 4

data/lib/govuk_publishing_components/version.rb

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

data/node_modules/govuk-frontend/govuk/components/accordion/README.md

@@ -6,7 +6,7 @@ See the [main README quick start guide](https://github.com/alphagov/govuk-fronte
 
 ## Guidance and Examples
 
-Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion).
+Find out when to use the accordion component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion).
 
 ## Component options
 

data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss

@@ -47,7 +47,6 @@
 
   // JavaScript enabled
   .js-enabled {
-
     .govuk-accordion {
       // Border at the bottom of the whole accordion
       border-bottom: 1px solid $govuk-border-colour;