govuk_publishing_components 23.2.1 → 23.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1b95df6fab59121d237e5dddeeda753bbd1282ddabdab8f3fcba6a81088f0a33
-  data.tar.gz: 3592d8cea5ca48b42089e2722f34f80a0a8896c39aefe7ecb57867f8859bf5dc
+  metadata.gz: 34b79bd902906ae48c22d4f01510b329d279a953d607ef7633fcd29d44dbd3ef
+  data.tar.gz: e4bf0609433d8308708a96da4b9a6e9f2960e3551960af806c12be5bb74be16d
 SHA512:
-  metadata.gz: 42cdaee623f79b09dd0da4d8ca0cf1c503ffd53b2d74d8affbe68d6d86a300f81025b42d6769eec75c1f71433b8270b75d248eaddd39e7650bf17a4850a04ff3
-  data.tar.gz: 576e1c494014b4c6b8ac3bec21277b51662aa9e3024c8113ae4e6388abe02a9bb2f40e744abe7513e719d2e5810f3e03dca3be7bb9ef3c618631432aed966fee
+  metadata.gz: 285ae326a806521d45584efced7930c995009d6577820a248fec57fb4f0974d7e2eeaaabd7ba2e245beac066fe16e1c398a2ffc6590141e272fb1c2807adbf96
+  data.tar.gz: c2e148283ce68ef51963f2b9a437aa754bb65f5baa9aadc712316605e3028c3d0714d1db6f36214f77be558755464d013bb63ede138764376076376cb484de76

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
@@ -412,7 +413,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
       } else {
         // if it's a stacked graph
-        if (spanWidth > cellWidth && cellVal > 0) {
+        if ((spanWidth > cellWidth && cellVal > 0) || (cellVal < 1)) {
           $cell.classList.add('mc-value-overflow')
         }
       }

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/views/govuk_publishing_components/component_guide/show.html.erb

@@ -22,10 +22,9 @@
           <div class="component-markdown">
             <%= raw(@component_doc.html_body) %>
           </div>
-
-          <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
         </div>
       <% end %>
+      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
     </div>
   </div>
 

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

@@ -5,6 +5,7 @@
   hide_order_copy_link ||= false
   attributes = []
   data_attributes ||= {}
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   if attachment.content_type_name
     content = if attachment.content_type_abbr
@@ -50,11 +51,11 @@
   <% end %>
 
   <%= tag.div class: "gem-c-attachment__details" do %>
-    <%= tag.h2 class: "gem-c-attachment__title" do %>
+    <%= content_tag(shared_helper.get_heading_level, class: "gem-c-attachment__title") do %>
       <%= link_to attachment.title, attachment.url,
-            class: "govuk-link gem-c-attachment__link",
-            target: target,
-            data: data_attributes %>
+      class: "govuk-link gem-c-attachment__link",
+      target: target,
+      data: data_attributes %>
     <% end %>
 
     <% if attachment.reference.present? %>

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/attachment.yml

@@ -158,3 +158,13 @@ examples:
         unique_reference: "2942"
         unnumbered_hoc_paper: true
       hide_order_copy_link: true
+  with_custom_heading_level:
+    description: Default is `h2`.
+    data:
+      heading_level: 3
+      attachment:
+        title: "Department for Transport information asset register"
+        url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv
+        filename: department-for-transport-information-asset-register.csv
+        content_type: text/csv
+        file_size: 20000

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

@@ -236,6 +236,61 @@ examples:
             </tr>
           </tbody>
         </table>
+  stacked_chart:
+    data:
+      block: |
+        <table class="js-barchart-table mc-stacked mc-auto-outdent">
+          <thead>
+            <tr>
+              <th scope="col">Colours</th>
+              <th scope="col">Fruits</th>
+              <th scope="col">Vegetables</th>
+              <th scope="col">Beans</th>
+              <th scope="col">Nuts</th>
+              <th scope="col">Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Red</td>
+              <td>23</td>
+              <td>9</td>
+              <td>2</td>
+              <td>1</td>
+              <td>35</td>
+            </tr>
+            <tr>
+              <td>Green</td>
+              <td>5</td>
+              <td>33</td>
+              <td>8</td>
+              <td>0</td>
+              <td>46</td>
+            </tr>
+            <tr>
+              <td>Yellow</td>
+              <td>2</td>
+              <td>10</td>
+              <td>0</td>
+              <td>15</td>
+              <td>27</td>
+            </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: |