govuk_publishing_components 21.63.1 → 21.65.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3ed71c773cb4f6409dd9cc3d66bd408cb33ab8863f5ee57dbe7fa90826e1441
-  data.tar.gz: 8ce3c6af6d3b1ba38890d11edbebb59e7c3895fae29f2794351e23ea9fad4697
+  metadata.gz: 00cb9ed2b1890ec679368a5b6565f425ab630a8c7576e36ec05572f7b82def5e
+  data.tar.gz: c252f946b8c435ff7dcfc4a4f68453cbf653b1e3cc71d1fe85c1060c2e6a0df9
 SHA512:
-  metadata.gz: e670252b190a6866a5018c4f951e1e2ddf84dfde4e8049bcc3bf415bfb286c4985cb3fa8d6dd81fade33f4ecaed467cd6dede70e8044fe82f59dbfd42e6656dd
-  data.tar.gz: d955747b6ceac131a320b9d9ebadcb78e1937e3fab2cae1e339cbf48355525a18b6285210c0f889a8cd7004e2a026960e3f0edd03cf56b5b16ad1717ac4bbb0f
+  metadata.gz: 88c4f14857cdab94770e04b4ca84f9733f10855b43bc6706f87960d6ff552c8de581071c1aa80da8460e34de43ded3534cbed2c76a371f4c50d62edff361f994
+  data.tar.gz: ffad88268390f0a57eeb6eb31b77c8f88b53d21eb0cff4fa6ed399899ff32ca8519f4c1f7bccc2e2fc5e161ee95d91ff749e7356c9bc9ff25288aef71b66a85f

data/app/assets/images/govuk_publishing_components/action-link-arrow--transparent.svg

@@ -0,0 +1 @@
+<svg width="39" height="39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.01 6.818l-2.828 2.828 7.853 7.854-22 .066L0 21.5h22.035l-7.853 7.854 2.828 2.828L29.69 19.5zM39 19.5C39 30.27 30.27 39 19.5 39 9.373 39 1.05 31.28.092 21.405A19.737 19.737 0 010 19.5C0 8.73 8.73 0 19.5 0S39 8.73 39 19.5z" fill="#fff500"/></svg>

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

@@ -2,25 +2,27 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function Govspeak () { }
 
-  Modules.Govspeak = function () {
-    this.start = function ($element) {
-      if (!$element.hasClass('disable-youtube')) {
-        this.embedYoutube($element)
-      }
+  Govspeak.prototype.start = function ($module) {
+    this.$module = $module[0]
 
-      this.createBarcharts($element)
+    if (this.$module.className.indexOf('disable-youtube') === -1) {
+      this.embedYoutube()
     }
 
-    this.embedYoutube = function ($jqElement) {
-      var enhancement = new window.GOVUK.GovspeakYoutubeLinkEnhancement($jqElement[0])
-      enhancement.init()
-    }
+    this.createBarcharts()
+  }
 
-    this.createBarcharts = function ($element) {
-      var enhancement = new window.GOVUK.GovspeakBarchartEnhancement($element)
-      enhancement.init()
-    }
+  Govspeak.prototype.embedYoutube = function () {
+    var enhancement = new window.GOVUK.GovspeakYoutubeLinkEnhancement(this.$module)
+    enhancement.init()
   }
+
+  Govspeak.prototype.createBarcharts = function () {
+    var enhancement = new window.GOVUK.GovspeakBarchartEnhancement(this.$module)
+    enhancement.init()
+  }
+
+  Modules.Govspeak = Govspeak
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js

@@ -1,4 +1,4 @@
-// = require govuk_publishing_components/vendor/magna-charta.min
+// = require govuk_publishing_components/lib/govspeak/magna-charta
 
 window.GOVUK = window.GOVUK || {};
 
@@ -10,16 +10,23 @@ window.GOVUK = window.GOVUK || {};
   }
 
   BarchartEnhancement.prototype.init = function () {
-    // the not selectors are protection against initialising twice since that
-    // causes quite a mess. The not .mc-chart is because it creates a second
-    // .js-barchart-table element with .mc-chart and then the
-    // .js-barchart-table-init is given when we initialise
-    var $barcharts = this.$element.find('.js-barchart-table:not(.mc-chart):not(.js-barchart-table-init)')
-    $barcharts.each(function () {
-      var $table = $(this)
-      $.magnaCharta($table, { toggleText: 'Change between chart and table' })
-      $table.addClass('js-barchart-table-init')
-    })
+    var $barchartsOriginal = this.$element.querySelectorAll('.js-barchart-table')
+    var $barcharts = []
+
+    for (var j = 0; j < $barchartsOriginal.length; j++) {
+      // this prevents the code from initialising more than once
+      // we'd use :not selectors for $barchartsOriginal but for lack of IE8 support
+      var styles = $barchartsOriginal[j].className
+      if (styles.indexOf('mc-chart') === -1 && styles.indexOf('js-barchart-table-init') === -1) {
+        $barcharts.push($barchartsOriginal[j])
+      }
+    }
+
+    for (var i = 0; i < $barcharts.length; i++) {
+      var $table = $barcharts[i]
+      new GOVUK.Modules.MagnaCharta().start($table, { toggleText: 'Change between chart and table' })
+      $table.className = $table.className + ' js-barchart-table-init'
+    }
   }
 
   GOVUK.GovspeakBarchartEnhancement = BarchartEnhancement

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

@@ -0,0 +1,423 @@
+//= require govuk/vendor/polyfills/Element/prototype/classList.js
+// This is a non-jQuery version of Magna Charta: https://github.com/alphagov/magna-charta
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function MagnaCharta () { }
+
+  MagnaCharta.prototype.start = function ($module, options) {
+    this.$module = $module[0]
+    this.options = {
+      outOf: 65,
+      applyOnInit: true,
+      toggleText: 'Toggle between chart and table',
+      autoOutdent: false,
+      outdentAll: false,
+      toggleAfter: false, // BOOL set TRUE to append the toggle link
+      returnReference: false // for testing purposes
+    }
+
+    for (var k in options) this.options[k] = options[k]
+    this.detectIEVersion()
+
+    // Magna Charta doesn't work in IE7 or less - so plain tables are shown to those browsers
+    this.ENABLED = !(this.ie && this.ie < 8)
+
+    // store a reference to the table in the object
+    this.$table = $module
+
+    // lets make what will become the new graph
+    this.$graph = document.createElement('div')
+
+    // set the graph to aria-hidden, which isn't changed at any point
+    // the graph is totally inaccessible, so we let screen readers navigate the table
+    // and ignore the graph entirely
+    this.$graph.setAttribute('aria-hidden', 'true')
+
+    // copy over classes from the table, and add the extra one
+    this.$graph.setAttribute('class', this.$table.className)
+    this.$graph.classList.add('mc-chart')
+
+    // set the stacked option based on
+    // giving the table a class of mc-stacked
+    this.options.stacked = this.$table.classList.contains('mc-stacked')
+
+    // set the negative option based on
+    // giving the table a class of mc-negative
+    this.options.negative = this.$table.classList.contains('mc-negative')
+
+    // 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)
+
+    // set the outdent options
+    // which can be set via classes or overriden by setting the value to true
+    // in the initial options object that's passed in
+    this.options.autoOutdent = this.options.autoOutdent || this.$table.classList.contains('mc-auto-outdent')
+
+    this.options.outdentAll = this.options.outdentAll || this.$table.classList.contains('mc-outdented')
+
+    // add a mc-multiple class if it is
+    if (this.options.multiple) {
+      this.$graph.classList.add('mc-multiple')
+    }
+
+    this.options.hasCaption = !!this.$table.querySelectorAll('caption').length
+
+    if (this.ENABLED) {
+      this.apply()
+      // if applyOnInit is false, toggle immediately to show the table and hide the graph
+      if (!this.options.applyOnInit) {
+        this.toggleLink.click()
+      }
+    }
+
+    if (this.options.returnReference) {
+      return this
+    }
+  }
+
+  MagnaCharta.prototype.detectIEVersion = function () {
+    // detect IE version: James Padolsey, https://gist.github.com/527683
+    this.ie = (function () {
+      var undef
+      var v = 3
+      var div = document.createElement('div')
+      var all = div.getElementsByTagName('i')
+
+      do {
+        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->'
+      } while (v < 10 && all[0])
+
+      return (v > 4) ? v : undef
+    })()
+  }
+
+  MagnaCharta.prototype.apply = function () {
+    if (this.ENABLED) {
+      this.constructChart()
+      this.addClassesToHeader()
+      this.applyWidths()
+      this.insert()
+      this.$table.classList.add('visually-hidden')
+      this.applyOutdent()
+    }
+  }
+
+  // methods for constructing the chart
+  MagnaCharta.prototype.construct = {}
+
+  // constructs the header
+  MagnaCharta.prototype.construct.thead = function () {
+    var thead = document.createElement('div')
+    thead.classList.add('mc-thead')
+
+    var tr = document.createElement('div')
+    tr.classList.add('mc-tr')
+
+    var output = ''
+    var allTheTHs = this.$table.querySelectorAll('th')
+
+    for (var i = 0; i < allTheTHs.length; i++) {
+      output += '<div class="mc-th">'
+      output += allTheTHs[i].innerHTML
+      output += '</div>'
+    }
+
+    tr.innerHTML = output
+    thead.appendChild(tr)
+
+    return thead
+  }
+
+  MagnaCharta.prototype.construct.tbody = function () {
+    var tbody = document.createElement('div')
+    tbody.classList.add('mc-tbody')
+
+    var allTheTbodyTrs = this.$table.querySelectorAll('tbody tr')
+
+    for (var i = 0; i < allTheTbodyTrs.length; i++) {
+      var tr = document.createElement('div')
+      tr.classList.add('mc-tr')
+
+      var cellsOutput = ''
+      var allTheTds = allTheTbodyTrs[i].querySelectorAll('td')
+
+      for (var j = 0; j < allTheTds.length; j++) {
+        cellsOutput += '<div class="mc-td">'
+        cellsOutput += allTheTds[j].innerHTML
+        cellsOutput += '</div>'
+      }
+      tr.innerHTML = cellsOutput
+      tbody.appendChild(tr)
+    }
+
+    return tbody
+  }
+
+  MagnaCharta.prototype.construct.caption = function () {
+    var cap = this.$table.querySelector('caption')
+    return cap.cloneNode(true)
+  }
+
+  // construct a link to allow the user to toggle between chart and table
+  MagnaCharta.prototype.construct.toggleLink = function (toggleText) {
+    var link = document.createElement('a')
+    link.setAttribute('href', '#')
+    link.classList.add('mc-toggle-link')
+    link.innerHTML = toggleText
+    link.setAttribute('aria-hidden', 'true')
+
+    return link
+  }
+
+  // toggles between showing the table and showing the chart
+  MagnaCharta.prototype.addToggleClick = function () {
+    var that = this
+
+    this.toggleLink.addEventListener('click', function (e) {
+      e.preventDefault()
+      that.$graph.classList.toggle('visually-hidden')
+      that.$table.classList.toggle('visually-hidden')
+    })
+  }
+
+  MagnaCharta.prototype.constructChart = function () {
+    // turn every element in the table into divs with appropriate classes
+    // call them and define this as scope so it's easier to
+    // get at options and properties
+    var thead = this.construct.thead.call(this)
+    var tbody = this.construct.tbody.call(this)
+    this.toggleLink = this.construct.toggleLink(this.options.toggleText)
+    this.addToggleClick(this.toggleLink)
+
+    if (this.options.hasCaption) {
+      var caption = this.construct.caption.call(this)
+      this.$graph.appendChild(caption)
+    }
+
+    if (this.options.toggleAfter) {
+      this.$table.insertAdjacentElement('afterend', this.toggleLink)
+    } else {
+      this.$table.insertAdjacentElement('beforebegin', this.toggleLink)
+    }
+
+    this.$graph.appendChild(thead)
+    this.$graph.appendChild(tbody)
+  }
+
+  // some handy utility methods
+  MagnaCharta.prototype.utils = {
+    isFloat: function (val) {
+      return !isNaN(parseFloat(val))
+    },
+    stripValue: function (val) {
+      var re = new RegExp('\\,|£|%|[a-z]', 'gi')
+      return val.replace(re, '')
+    },
+    returnMax: function (values) {
+      var max = 0
+      for (var i = 0; i < values.length; i++) {
+        if (values[i] > max) { max = values[i] }
+      }
+      return max
+    },
+    isNegative: function (value) {
+      return (value < 0)
+    }
+  }
+
+  MagnaCharta.prototype.addClassesToHeader = function () {
+    var headerCells = this.$graph.querySelectorAll('.mc-th')
+    var looplength = headerCells.length
+
+    if (this.options.stacked) {
+      var last = looplength - 1
+      headerCells[last].classList.add('mc-stacked-header', 'mc-header-total')
+      looplength -= 1
+    }
+
+    // we deliberately don't apply this to the first cell
+    for (var i = 1; i < looplength; i++) {
+      headerCells[i].classList.add('mc-key-header')
+      if (!headerCells[i].classList.contains('mc-stacked-header')) {
+        headerCells[i].classList.add('mc-key-' + i)
+      }
+    }
+  }
+
+  MagnaCharta.prototype.calculateMaxWidth = function () {
+    // store the cell values in here so we can figure out the maximum value later
+    var values = []
+
+    // var to store the maximum negative value (used only for negative charts)
+    var maxNegativeValue = 0
+
+    // loop through every tr in the table
+    var trs = this.$graph.querySelectorAll('.mc-tr')
+    for (var i = 0; i < trs.length; i++) {
+      var $this = trs[i]
+
+      // the first td is going to be the key, so ignore it
+      // we'd use $this.querySelectorAll('.mc-td:not(:first-child)') but for IE8
+      var $bodyCellsOriginal = $this.querySelectorAll('.mc-td')
+      var $bodyCells = []
+      for (var k = 1; k < $bodyCellsOriginal.length; k++) {
+        $bodyCells.push($bodyCellsOriginal[k])
+      }
+
+      var bodyCellsLength = $bodyCells.length
+
+      // might be the row containing th elements, so we need to check
+      if (bodyCellsLength) {
+        // if it's stacked, the last column is a totals
+        // so we don't want that in our calculations
+        if (this.options.stacked) {
+          $bodyCells[bodyCellsLength - 1].classList.add('mc-stacked-total')
+          bodyCellsLength -= 1
+        }
+
+        // first td in each row is key
+        var firstCell = $this.querySelector('.mc-td')
+        if (firstCell) {
+          firstCell.classList.add('mc-key-cell')
+        }
+
+        // store the total value of the bar cells in a row
+        // for anything but stacked, this is just the value of one <td>
+        var cellsTotalValue = 0
+
+        for (var j = 0; j < bodyCellsLength; j++) {
+          var $cell = $bodyCells[j]
+          $cell.classList.add('mc-bar-cell')
+          $cell.classList.add('mc-bar-' + (j + 1))
+          var cellVal = this.utils.stripValue($cell.innerText)
+
+          if (this.utils.isFloat(cellVal)) {
+            var parsedVal = parseFloat(cellVal, 10)
+            var absParsedVal = Math.abs(parsedVal)
+            if (parsedVal === 0) {
+              $cell.classList.add('mc-bar-zero')
+            }
+
+            if (this.options.negative) {
+              if (this.utils.isNegative(parsedVal)) {
+                $cell.classList.add('mc-bar-negative')
+                if (absParsedVal > maxNegativeValue) {
+                  maxNegativeValue = absParsedVal
+                }
+              } else {
+                $cell.classList.add('mc-bar-positive')
+              }
+            }
+            // now we are done with our negative calculations
+            // set parsedVal to absParsedVal
+            parsedVal = absParsedVal
+
+            if (!this.options.stacked) {
+              cellsTotalValue = parsedVal
+              values.push(parsedVal)
+            } else {
+              cellsTotalValue += parsedVal
+            }
+          }
+        }
+      }
+
+      // if stacked, we need to push the total value of the row to the values array
+      if (this.options.stacked) { values.push(cellsTotalValue) }
+    }
+
+    var resp = {}
+    resp.max = parseFloat(this.utils.returnMax(values), 10)
+    resp.single = parseFloat(this.options.outOf / resp.max, 10)
+
+    if (this.options.negative) {
+      resp.marginLeft = parseFloat(maxNegativeValue, 10) * resp.single
+      resp.maxNegative = parseFloat(maxNegativeValue, 10)
+    }
+
+    return resp
+  }
+
+  MagnaCharta.prototype.applyWidths = function () {
+    this.dimensions = this.calculateMaxWidth()
+    var trs = this.$graph.querySelectorAll('.mc-tr')
+
+    for (var i = 0; i < trs.length; i++) {
+      var cells = trs[i].querySelectorAll('.mc-bar-cell')
+
+      for (var j = 0; j < cells.length; j++) {
+        var $cell = cells[j]
+        var parsedCellVal = parseFloat(this.utils.stripValue($cell.innerText), 10)
+        var parsedVal = parsedCellVal * this.dimensions.single
+        var absParsedCellVal = Math.abs(parsedCellVal)
+        var absParsedVal = Math.abs(parsedVal)
+
+        // apply the left margin to the positive bars
+        if (this.options.negative) {
+          if ($cell.classList.contains('mc-bar-positive')) {
+            $cell.style.marginLeft = this.dimensions.marginLeft + '%'
+          } else {
+            // if its negative but not the maximum negative
+            // we need to give it enough margin to push it further right to align
+            if (absParsedCellVal < this.dimensions.maxNegative) {
+              // left margin needs to be (largestNegVal - thisNegVal) * single
+              var leftMarg = (this.dimensions.maxNegative - absParsedCellVal) * this.dimensions.single
+              $cell.style.marginLeft = leftMarg + '%'
+            }
+          }
+        }
+
+        // wrap the cell value in a span tag
+        $cell.innerHTML = '<span>' + $cell.innerHTML + '</span>'
+        $cell.style.width = absParsedVal + '%'
+      }
+    }
+  }
+
+  MagnaCharta.prototype.insert = function () {
+    this.$table.insertAdjacentElement('afterend', this.$graph)
+  }
+
+  MagnaCharta.prototype.applyOutdent = function () {
+    /*
+     * this figures out if a cell needs an outdent and applies it
+     * it needs an outdent if the width of the text is greater than the width of the bar
+     * if this is the case, wrap the value in a span, and use absolute positioning
+     * to push it out (the bar is styled to be relative)
+     * unfortunately this has to be done once the chart has been inserted
+     */
+    var cells = this.$graph.querySelectorAll('.mc-bar-cell')
+
+    for (var i = 0; i < cells.length; i++) {
+      var $cell = cells[i]
+      var cellVal = parseFloat(this.utils.stripValue($cell.innerText), 10)
+      var $cellSpan = $cell.querySelector('span')
+      var spanWidth = parseFloat(window.getComputedStyle($cellSpan, null).width.replace('px', '')) + 10 // +10 just for extra padding
+      var cellWidth = parseFloat(window.getComputedStyle($cell, null).width.replace('px', ''))
+
+      if (!this.options.stacked) {
+      // if it's 0, it is effectively outdented
+        if (cellVal === 0) { $cell.classList.add('mc-bar-outdented') }
+
+        if ((this.options.autoOutdent && spanWidth > cellWidth) || this.options.outdentAll) {
+          $cell.classList.add('mc-bar-outdented')
+          $cellSpan.style.marginLeft = '100%'
+          $cellSpan.style.display = 'inline-block'
+        } else {
+          $cell.classList.add('mc-bar-indented')
+        }
+      } else {
+        // if it's a stacked graph
+        if (spanWidth > cellWidth && cellVal > 0) {
+          $cell.classList.add('mc-value-overflow')
+        }
+      }
+    }
+  }
+
+  Modules.MagnaCharta = MagnaCharta
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -4,13 +4,13 @@
   &:before {
     content: "";
     display: table-cell;
-    width: 50px;
+    width: 60px;
     height: 45px;
     background: image-url("govuk_publishing_components/action-link-arrow.png");
     background: image-url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-position: 0 50%;
-    background-size: 37px auto;
+    background-size: 45px auto;
   }
 
   @include govuk-media-query($until: tablet) {
@@ -141,6 +141,12 @@
   }
 }
 
+.gem-c-action-link--transparent-icon {
+  &:before {
+    background-image: image-url("govuk_publishing_components/action-link-arrow--transparent.svg");
+  }
+}
+
 .gem-c-action-link--nhs {
   &:before {
     width: 80px;

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

@@ -12,6 +12,7 @@
   margin: 0;
   min-width: 0;
   padding: govuk-spacing(1);
+  box-sizing: border-box;
 
   &.gem-c-input--search-icon {
     padding-left: govuk-spacing(6);

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

@@ -10,6 +10,7 @@ $large-input-size: 50px;
   @include govuk-font($size: 19, $line-height: $input-size);
   display: block;
   background: govuk-colour("white");
+  color: $govuk-text-colour;
 
   h1 {
     @include govuk-font($size: 19, $line-height: $input-size);
@@ -129,10 +130,6 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--on-govuk-blue {
-  .gem-c-search__label {
-    color: govuk-colour("white");
-  }
-
   .gem-c-search__input {
     border-width: 0;
 

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

@@ -13,6 +13,7 @@
   dark_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
+  transparent_icon ||= false
   data ||= nil
   classes ||= nil
 
@@ -20,6 +21,7 @@
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
   css_classes << "gem-c-action-link--small-icon" if small_icon
+  css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext

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

@@ -17,16 +17,13 @@
   <ol class="govuk-breadcrumbs__list">
     <% breadcrumbs.each_with_index do |crumb, index| %>
       <% breadcrumb = GovukPublishingComponents::Presenters::Breadcrumb.new(crumb, index) %>
-        <li class="govuk-breadcrumbs__list-item" aria-current="<%= breadcrumb.aria_current %>">
+        <li class="govuk-breadcrumbs__list-item">
         <% if breadcrumb.is_link? %>
           <%= link_to(
             breadcrumb[:title],
             breadcrumb.path,
             data: breadcrumb.tracking_data(breadcrumbs.length),
             class: "govuk-breadcrumbs__link",
-            aria: {
-              current: breadcrumb.aria_current,
-            }
           ) %>
         <% else %>
           <%= breadcrumb[:title] %>

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

@@ -53,7 +53,9 @@
           <%= tag.h1 heading, class: "gem-c-radio__heading-text govuk-fieldset__heading" %>
         <% end %>
       <% else %>
-        <%= tag.legend heading, class: legend_classes %>
+        <%= tag.legend class: legend_classes do %>
+          <%= tag.h2 heading, class: "govuk-fieldset__heading" %>
+        <% end %>
       <% end %>
     <% end %>
 

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

@@ -2,12 +2,16 @@
   size ||= ""
   no_border ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-search gem-c-search--on-white)
+  classes = %w(gem-c-search)
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
   classes << "gem-c-search--large" if size == 'large'
   classes << "gem-c-search--no-border" if no_border
-  classes << "gem-c-search--on-govuk-blue" if local_assigns[:on_govuk_blue].eql?(true)
+  if local_assigns[:on_govuk_blue].eql?(true)
+    classes << "gem-c-search--on-govuk-blue"
+  else
+    classes << "gem-c-search--on-white"
+  end
   classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label)
 
   value ||= ""

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

@@ -28,7 +28,7 @@
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <div class="<%= classes %>" data-module="track-click">
+  <h2 class="<%= classes %>" data-module="track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"
@@ -51,5 +51,5 @@
         <%= title %>
       </span>
     <% end %>
-  </div>
+  </h2>
 <% end %>

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

@@ -36,6 +36,14 @@ examples:
       light_text: true
     context:
       dark_background: true
+  with_transparent_svg:
+    data:
+      text: Find out what you need to do
+      href: "/page"
+      light_text: true
+      transparent_icon: true
+    context:
+      dark_background: true
   with_subtext:
     data:
       text: Emergency something

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

@@ -3,7 +3,9 @@ description: Shows that a content page is part of a step by step navigation
 body: |
   The component indicates to the user that the current page is part of a [step by step navigation](/component-guide/step_by_step_nav), and can provide a link to it.
 accessibility_criteria: |
-  The component is designed to go into the top of an existing content page and should not interfere with the heading structure of the page, so therefore should not contain a heading tag.
+  The component is designed to go into the top of an existing content page. This component looks like a heading so uses a heading level 2 element.
+
+  An earlier version of the component did not use a heading element – this failed WCAG 2.1 Success Criterion 1.3.1 ("Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.")
 
   An early version of the component contained a hidden skip link for keyboard and screen reader users, that jumped to the step by step navigation component in the sidebar (similiar to the 'skip to content' link at the top of all GOV.UK pages). User testing suggested that rather than helping users it confused them, so this has been removed.
 shared_accessibility_criteria:

data/lib/govuk_publishing_components/presenters/breadcrumbs.rb

@@ -49,10 +49,6 @@ module GovukPublishingComponents
         crumb[:url]
       end
 
-      def aria_current
-        "false"
-      end
-
       def tracking_data(breadcrumbs_length)
         data = {
           track_category: "breadcrumbClicked",

data/lib/govuk_publishing_components/presenters/content_breadcrumbs_based_on_priority.rb

@@ -12,18 +12,22 @@ module GovukPublishingComponents
       }.freeze
 
       # Returns the highest priority taxon that has a content_id matching those in PRIORITY_TAXONS
-      def self.call(content_item)
-        new(content_item).breadcrumbs
+      def self.call(content_item, query_parameters = nil)
+        new(content_item, query_parameters).breadcrumbs
       end
 
-      attr_reader :content_item
+      attr_reader :content_item, :query_parameters
 
-      def initialize(content_item)
+      def initialize(content_item, query_parameters = nil)
         @content_item = content_item
+        @query_parameters = query_parameters
       end
 
       def taxon
-        @taxon ||= priority_taxons.min_by { |t| PRIORITY_TAXONS.values.index(t["content_id"]) }
+        @taxon ||= begin
+          default_taxon = priority_taxons.min_by { |t| PRIORITY_TAXONS.values.index(t["content_id"]) }
+          preferred_taxon || default_taxon
+        end
       end
 
       def breadcrumbs
@@ -39,6 +43,12 @@ module GovukPublishingComponents
 
     private
 
+      def preferred_taxon
+        if preferred_priority_taxon
+          priority_taxons.find { |t| t["content_id"] == preferred_priority_taxon }
+        end
+      end
+
       def priority_taxons
         return [] unless content_item["links"].is_a?(Hash)
 
@@ -57,6 +67,10 @@ module GovukPublishingComponents
       def priority_taxon?(taxon)
         PRIORITY_TAXONS.values.include?(taxon["content_id"])
       end
+
+      def preferred_priority_taxon
+        query_parameters["priority-taxon"] if query_parameters
+      end
     end
   end
 end

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -30,7 +30,7 @@ module GovukPublishingComponents
       end
 
       def priority_breadcrumbs
-        @priority_breadcrumbs ||= ContentBreadcrumbsBasedOnPriority.call(content_item)
+        @priority_breadcrumbs ||= ContentBreadcrumbsBasedOnPriority.call(content_item, query_parameters)
       end
 
       def topic_breadcrumbs

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.63.1".freeze
+  VERSION = "21.65.1".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.63.1
+  version: 21.65.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-27 00:00:00.000000000 Z
+date: 2020-09-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -320,6 +320,7 @@ files:
 - app/assets/images/govuk_publishing_components/action-link-arrow--dark.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple.png
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple.svg
+- app/assets/images/govuk_publishing_components/action-link-arrow--transparent.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow.png
 - app/assets/images/govuk_publishing_components/action-link-arrow.svg
 - app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg
@@ -419,6 +420,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js
 - app/assets/javascripts/govuk_publishing_components/lib/current-location.js
 - app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js
+- app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
 - app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js
 - app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js
 - app/assets/javascripts/govuk_publishing_components/lib/primary-links.js
@@ -428,7 +430,6 @@ files:
 - app/assets/javascripts/govuk_publishing_components/modules.js
 - app/assets/javascripts/govuk_publishing_components/vendor/html5shiv-printshiv.js
 - app/assets/javascripts/govuk_publishing_components/vendor/json2.js
-- app/assets/javascripts/govuk_publishing_components/vendor/magna-charta.min.js
 - app/assets/javascripts/govuk_publishing_components/vendor/modernizr.js
 - app/assets/javascripts/govuk_publishing_components/vendor/polyfills/closest.js
 - app/assets/javascripts/govuk_publishing_components/vendor/polyfills/indexOf.js

data/app/assets/javascripts/govuk_publishing_components/vendor/magna-charta.min.js

@@ -1,4 +0,0 @@
-/*! Magna Charta - v3.0.0 - 2012-12-04
-* https://github.com/alphagov/magna-charta
- */
-(function(e){var t=function(){this.init=function(t,n){var r={outOf:65,applyOnInit:!0,toggleText:"Toggle between chart and table",autoOutdent:!1,outdentAll:!1};this.options=e.extend({},r,n);var i=function(){var e,t=3,n=document.createElement("div"),r=n.getElementsByTagName("i");do n.innerHTML="<!--[if gt IE "+ ++t+"]><i></i><![endif]-->";while(t<10&&r[0]);return t>4?t:e}();return this.ENABLED=!(i&&i<8),this.$table=t,this.$graph=e("<div/>").attr("aria-hidden","true"),this.$graph.attr("class",this.$table.attr("class")).addClass("mc-chart"),this.options.stacked=this.$table.hasClass("mc-stacked"),this.options.negative=this.$table.hasClass("mc-negative"),this.options.multiple=!this.options.stacked&&(this.$table.hasClass("mc-multiple")||this.$table.find("tbody tr").first().find("td").length>2),this.options.autoOutdent=this.options.autoOutdent||this.$table.hasClass("mc-auto-outdent"),this.options.outdentAll=this.options.outdentAll||this.$table.hasClass("mc-outdented"),this.options.multiple&&this.$graph.addClass("mc-multiple"),this.options.hasCaption=!!this.$table.find("caption").length,this.ENABLED&&(this.apply(),this.options.applyOnInit||this.toggle()),this}};t.prototype.construct={},t.prototype.construct.thead=function(){var t=e("<div />",{"class":"mc-thead"}),n=e("<div />",{"class":"mc-tr"}),r="";return this.$table.find("th").each(function(t,n){r+='<div class="mc-th">',r+=e(n).html(),r+="</div>"}),n.append(r),t.append(n),t},t.prototype.construct.tbody=function(){var t=e("<div />",{"class":"mc-tbody"}),n="";return this.$table.find("tbody tr").each(function(n,r){var i=e("<div />",{"class":"mc-tr"}),s="";e(r).find("td").each(function(t,n){s+='<div class="mc-td">',s+=e(n).html(),s+="</div>"}),i.append(s),t.append(i)}),t},t.prototype.construct.caption=function(){var e=this.$table.find("caption");return e.clone()},t.prototype.construct.toggleLink=function(){var t=this;return e("<a />",{href:"#","class":"mc-toggle-link",text:this.options.toggleText}).on("click",function(e){t.toggle(e)})},t.prototype.constructChart=function(){var e=this.construct.thead.call(this),t=this.construct.tbody.call(this),n=this.construct.toggleLink.call(this);if(this.options.hasCaption){var r=this.construct.caption.call(this);this.$graph.append(r)}this.$table.before(n),this.$graph.append(e),this.$graph.append(t)},t.prototype.apply=function(){this.ENABLED&&(this.constructChart(),this.addClassesToHeader(),this.calculateMaxWidth(),this.applyWidths(),this.insert(),this.$table.addClass("visually-hidden"),this.applyOutdent())},t.prototype.toggle=function(e){this.$graph.toggle(),this.$table.toggleClass("visually-hidden"),e&&e.preventDefault()},t.prototype.utils={isFloat:function(e){return!isNaN(parseFloat(e))},stripValue:function(e){var t=new RegExp("\\,|£|%|[a-z]","gi");return e.replace(t,"")},returnMax:function(e){var t=0;for(var n=0;n<e.length;n++)e[n]>t&&(t=e[n]);return t},isNegative:function(e){return e<0}},t.prototype.addClassesToHeader=function(){var t=this.$graph.find(".mc-th").filter(":not(:first)");this.options.stacked&&(t.last().addClass("mc-stacked-header mc-header-total"),t=t.filter(":not(:last)")),t.addClass("mc-key-header").filter(":not(.mc-stacked-header)").each(function(t,n){e(n).addClass("mc-key-"+(t+1))})},t.prototype.calculateMaxWidth=function(){var t=this,n=[],r=0;this.$graph.find(".mc-tr").each(function(i,s){var o=e(s),u=o.find(".mc-td:not(:first)");if(t.options.stacked){var a=u.last().addClass("mc-stacked-total");u=u.filter(":not(:last)")}o.find(".mc-td:first").addClass("mc-key-cell");var f=0;u.each(function(i,s){var o=e(s).addClass("mc-bar-cell").addClass("mc-bar-"+(i+1)),u=t.utils.stripValue(o.text());if(t.utils.isFloat(u)){var a=parseFloat(u,10),l=Math.abs(a);a===0&&o.addClass("mc-bar-zero"),t.options.negative&&(t.utils.isNegative(a)?(o.addClass("mc-bar-negative"),l>r&&(r=l)):o.addClass("mc-bar-positive")),a=l,t.options.stacked?f+=a:(f=a,n.push(a))}}),t.options.stacked&&n.push(f)});var i={};return i.max=parseFloat(t.utils.returnMax(n),10),i.single=parseFloat(this.options.outOf/i.max,10),this.options.negative&&(i.marginLeft=parseFloat(r,10)*i.single,i.maxNegative=parseFloat(r,10)),i},t.prototype.applyWidths=function(){this.dimensions=this.calculateMaxWidth();var t=this;this.$graph.find(".mc-tr").each(function(n,r){var i=e(r),s=i.find(".mc-bar-cell:not(.mc-bar-zero)").length;i.find(".mc-bar-cell").each(function(n,r){var i=e(r),s=parseFloat(t.utils.stripValue(i.text()),10),o=s*t.dimensions.single,u=Math.abs(s),a=Math.abs(o);if(t.options.negative)if(i.hasClass("mc-bar-positive"))i.css("margin-left",t.dimensions.marginLeft+"%");else if(u<t.dimensions.maxNegative){var f=(t.dimensions.maxNegative-u)*t.dimensions.single;i.css("margin-left",f+"%")}i.wrapInner("<span />"),i.css("width",a+"%")})})},t.prototype.insert=function(){this.$table.after(this.$graph)},t.prototype.applyOutdent=function(){var t=this,n=this.$graph.find(".mc-bar-cell");this.$graph.find(".mc-bar-cell").each(function(n,r){var i=e(r),s=parseFloat(t.utils.stripValue(i.text()),10),o=i.children("span"),u=o.width()+10,a=i.width(),f=parseFloat(i[0].style.width,10),l=i.height();t.options.stacked?u>a&&s>0&&i.addClass("mc-value-overflow"):(s===0&&i.addClass("mc-bar-outdented"),t.options.autoOutdent&&u>a||t.options.outdentAll?(i.addClass("mc-bar-outdented"),o.css({"margin-left":"100%",display:"inline-block"})):i.addClass("mc-bar-indented"))})},e.magnaCharta=function(e,n){return(new t).init(e,n)}})(jQuery);