govuk_publishing_components 21.63.2 → 21.66.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9fa84400a00cf38f8ec660c724a115fa819109586c041727b4a1833d0f2e4de4
-  data.tar.gz: 48ef894dcfcc9e0dcc18a66ddc94e163f194647a604c6074bea21c6b8cccb33e
+  metadata.gz: 903043f0922348d52d8bd086a8450bc950b4cef41f9698981fbac4ff94e969e0
+  data.tar.gz: 68eec1602de4314d9072e1cc36d746f264477d07ca26ca10fa5e4b7053837694
 SHA512:
-  metadata.gz: a3dabec965adb6f3020171d0baf9df7988fcbb7eae881374e7f8edefa98f169ea1765a2e553cfeb4364a25d4af24e6a42d0c0b67b709afa3302ded7271066507
-  data.tar.gz: 3f78096a67b8811112e7c368b9ed66afcc4a759d7b2f466f512f6b1cb1a8598dcfaf9d9b4ef41ec22dea2af6900e05707524beaf38bdf7a60030df795016ba96
+  metadata.gz: 0e640b5131f343fac9d48ae517be2b5c5edcff7c90bd3599eabda72750c11535f9aafcf22c85e703097a547b487031f385815b6b9db427914432e4bd45aa4b3e
+  data.tar.gz: 6de32726b845f9a80c16bd782d9afa20d9e18f3bbe85af6823bed4d9a5b250e481d45504c3f28ab72b23de5263ea54e5a7de2a075e3b7e1efec985c7e34e2370

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/feedback.js

@@ -8,19 +8,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Modules.Feedback = function () {
     this.start = function ($element) {
+      this.element = $element[0]
+      this.somethingIsWrongForm = this.element.querySelector('#something-is-wrong')
+      this.surveyForm = this.element.querySelector('#page-is-not-useful')
       this.$prompt = $element.find('.js-prompt')
       this.$fields = $element.find('.gem-c-feedback__form-field')
       this.$forms = $element.find('.js-feedback-form')
       this.$toggleForms = $element.find('.js-toggle-form')
       this.$closeForms = $element.find('.js-close-form')
+      this.activeForm = false
       this.$activeForm = false
       this.$pageIsUsefulButton = $element.find('.js-page-is-useful')
       this.$pageIsNotUsefulButton = $element.find('.js-page-is-not-useful')
       this.$somethingIsWrongButton = $element.find('.js-something-is-wrong')
       this.$promptQuestions = $element.find('.js-prompt-questions')
       this.$promptSuccessMessage = $element.find('.js-prompt-success')
-      this.$somethingIsWrongForm = $element.find('#something-is-wrong')
-      this.$surveyForm = $element.find('#page-is-not-useful')
+      this.$somethingIsWrongForm = $(this.somethingIsWrongForm)
+      this.$surveyForm = $(this.surveyForm)
       this.$surveyWrapper = $element.find('#survey-wrapper')
 
       var that = this
@@ -103,12 +107,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       function setHiddenValues () {
         that.$somethingIsWrongForm.append('<input type="hidden" name="javascript_enabled" value="true"/>')
         that.$somethingIsWrongForm.append($('<input type="hidden" name="referrer">').val(document.referrer || 'unknown'))
+        that.somethingIsWrongForm.invalidInfoError = [
+          '<h2>',
+          '  Sorry, we’re unable to send your message as you haven’t given us any information.',
+          '</h2>',
+          '<p>Please tell us what you were doing or what went wrong</p>'
+        ].join('')
       }
 
       function setHiddenValuesNotUsefulForm (gaClientId) {
         var currentPathName = window.location.pathname.replace(/[^\s=?&]+(?:@|%40)[^\s=?&]+/, '[email]')
         var finalPathName = encodeURI(currentPathName)
-
+        that.surveyForm.invalidInfoError = [
+          '<h2>',
+          '  Sorry, we’re unable to send your message as you haven’t given us a valid email address. ',
+          '</h2>',
+          '<p>Enter an email address in the correct format, like name@example.com</p>'
+        ].join('')
         if (document.querySelectorAll('[name="email_survey_signup[ga_client_id]"]').length === 0) {
           that.$surveyForm.append($('<input name="email_survey_signup[ga_client_id]" type="hidden">').val(gaClientId || '0'))
         }
@@ -124,7 +139,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       }
 
       function toggleForm (formId) {
-        that.$activeForm = $element.find('#' + formId)
+        that.activeForm = that.element.querySelector('#' + formId)
+        that.$activeForm = $(that.activeForm)
         that.$activeForm.toggleClass(jshiddenClass)
         that.$prompt.toggleClass(jshiddenClass)
 
@@ -158,18 +174,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           '<p>If the problem persists, we have other ways for you to provide',
           ' feedback on the <a href="/contact/govuk">contact page</a>.</p>'
         ].join('')
-
         // if the response is not a 404 or 500, show the error message if it exists
         // otherwise show the generic message
-        // this covers the 422 status the feedback application return for empty fields
-        // for all other, show generic error
         if (typeof (error.responseJSON) !== 'undefined') {
           error = typeof (error.responseJSON.message) === 'undefined' ? genericError : error.responseJSON.message
 
           if (error === 'email survey sign up failure') {
             error = genericError
           }
+        } else if (error.status === 422) {
+          // there's clobbering by nginx on all 422 requests, which is why the response returns a rendered html page instead of the expected JSON
+          // this is a temporary workaround to ensure that are are displaying relevant error messages to the users
+          error = that.activeForm.invalidInfoError || genericError
         } else {
+          // for all other, show generic error
           error = genericError
         }
         var $errors = that.$activeForm.find('.js-errors')

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/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -10,7 +10,7 @@
     for (i = 0, _i = els.length; i < _i; i++) {
       els[i].addEventListener('click', function (e) {
         e.preventDefault()
-        var target = document.getElementById(this.getAttribute('href').substr(1))
+        var target = this.getAttribute('href') ? document.getElementById(this.getAttribute('href').substr(1)) : document.getElementById(this.getAttribute('data-search-toggle-for'))
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
 
@@ -21,8 +21,10 @@
         }
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
+          this.innerText = 'Show search'
         } else {
           this.setAttribute('class', sourceClass + ' js-visible')
+          this.innerText = 'Hide search'
         }
         this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')
         target.setAttribute('aria-hidden', target.getAttribute('aria-hidden') === 'false')

data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js

@@ -1,36 +1,41 @@
+//= require govuk/vendor/polyfills/Element/prototype/classList.js
 /*
   Toggle the class 'focus' on input boxes on element focus/blur
   Used by the search component but generic enough for reuse
 */
+window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function GemToggleInputClassOnFocus () { }
 
-  Modules.GemToggleInputClassOnFocus = function () {
-    this.start = function ($el) {
-      var $toggleTarget = $el.find('.js-class-toggle')
+  GemToggleInputClassOnFocus.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.toggleTarget = this.$module.querySelector('.js-class-toggle')
+    this.$module.addFocusClass = this.addFocusClass.bind(this)
+    this.$module.removeFocusClassFromEmptyInput = this.removeFocusClassFromEmptyInput.bind(this)
 
-      if (!inputIsEmpty()) {
-        addFocusClass()
-      }
+    if (!this.inputIsEmpty()) {
+      this.addFocusClass()
+    }
 
-      $toggleTarget.on('focus', addFocusClass)
-      $toggleTarget.on('blur', removeFocusClassFromEmptyInput)
+    this.toggleTarget.addEventListener('focus', this.$module.addFocusClass)
+    this.toggleTarget.addEventListener('blur', this.$module.removeFocusClassFromEmptyInput)
+  }
 
-      function inputIsEmpty () {
-        return $toggleTarget.val() === ''
-      }
+  GemToggleInputClassOnFocus.prototype.inputIsEmpty = function () {
+    return this.toggleTarget.value === ''
+  }
 
-      function addFocusClass () {
-        $toggleTarget.addClass('focus')
-      }
+  GemToggleInputClassOnFocus.prototype.addFocusClass = function () {
+    this.toggleTarget.classList.add('focus')
+  }
 
-      function removeFocusClassFromEmptyInput () {
-        if (inputIsEmpty()) {
-          $toggleTarget.removeClass('focus')
-        }
-      }
+  GemToggleInputClassOnFocus.prototype.removeFocusClassFromEmptyInput = function () {
+    if (this.inputIsEmpty()) {
+      this.toggleTarget.classList.remove('focus')
     }
   }
+
+  Modules.GemToggleInputClassOnFocus = GemToggleInputClassOnFocus
 })(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;
 
@@ -216,11 +213,11 @@ $large-input-size: 50px;
 }
 
 .search-toggle {
+  display: none;
   background-color: govuk-colour("blue");
   background-image: image-url("govuk_publishing_components/search-button.png");
   background-position: 0 50%;
   background-repeat: no-repeat;
-  display: block;
   float: right;
   height: 30px;
   margin: -46px 0;
@@ -228,6 +225,7 @@ $large-input-size: 50px;
   padding: 0;
   text-indent: -5000px;
   width: 36px;
+  border: 0;
 
   &:focus {
     border-width: 0;
@@ -253,4 +251,10 @@ $large-input-size: 50px;
   @include govuk-media-query($from: tablet) {
     display: none;
   }
+
+  @include govuk-media-query($until: tablet) {
+    .js-enabled & {
+      display: block;
+    }
+  }
 }

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

@@ -4,6 +4,7 @@
   description_govspeak ||= false
   description ||= yield || false
   aria_live ||= false
+  lang = local_assigns[:lang].presence
   local_assigns[:margin_bottom] ||= 8
   local_assigns[:margin_bottom] = 8 if local_assigns[:margin_bottom] > 9
 
@@ -17,7 +18,7 @@
   description_present = description.present? || description_text.present? || description_govspeak.present?
 %>
 <% if title || description_present %>
-  <%= tag.section class: css_classes, aria: aria_attributes, role: "region" do %>
+  <%= tag.section class: css_classes, aria: aria_attributes, lang: lang, role: "region" do %>
     <% if title %>
       <% if description_present %>
         <%= tag.h2 title, class: "gem-c-notice__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/_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/notice.yml

@@ -42,3 +42,11 @@ examples:
       title: 'Your settings have been saved'
       description_govspeak: <p>This is a confirmation message to tell you your settings have been saved</p>
       aria_live: true
+  with_locale:
+    description: |
+      Passing a lang value allows the content of the notice to be labelled as being a different language from surrounding content.
+      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.
+    data:
+      title: 'This publication was withdrawn on 30 September 2015'
+      description_govspeak: <p>This document is no longer current. We published a new version on 30 September 2015.</p>
+      lang: 'en'

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/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -26,7 +26,6 @@
             'track-category' => 'yesNoFeedbackForm',
             'track-action' => 'ffYesClick'
           },
-          'aria-expanded': false,
           role: 'button',
         } do %>
           <%= t("components.feedback.yes", default: "Yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful", default: "this page is useful") %></span>

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

@@ -1,4 +1,4 @@
-<a href="#search" class="search-toggle js-header-toggle">Search</a>
+<button class="search-toggle js-header-toggle" data-search-toggle-for="search">Show search</button>
 <form id="search" class="gem-c-layout-header__search-form govuk-clearfix" action="/search" method="get" role="search">
   <%= render "govuk_publishing_components/components/search", {
     id: "site-search-text",

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.2".freeze
+  VERSION = "21.66.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.63.2
+  version: 21.66.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-27 00:00:00.000000000 Z
+date: 2020-09-15 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);