govuk_publishing_components 21.59.0 → 21.61.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d31d1f48a5d3491e568c0412fdbbcfaf2e1a98a71aaf84ff703556e83a19b6b
-  data.tar.gz: 45ecc8d0b068dd621f3a5a4fb2b4add39f542cfe14ba22f5a2e9828ae9638438
+  metadata.gz: f4c9abac7ca4bd7fddce284eb7db5799cf1c199bf9d43f8c31ee4782819b2b47
+  data.tar.gz: 2c575f2e706736d81d753319b8e62166e1bcb4cc88e79db347b3db525e830ba9
 SHA512:
-  metadata.gz: 89fd3c928d07a3cda0079255ea980e7731bda3eb1b9033eeba53131f85f05c12a9073334b17a04b86c050ddd5329fcef28be3ced3373137b6c4385cefb1070aa
-  data.tar.gz: 82d9e99c1d65f4441404f8a76c18ccc11a3357250ac579bdd6844e8f0b57c63d41dfca449cb848b3f86e37576c7e5dcd6eb3e373860c5d1814882ac52a6d3052
+  metadata.gz: 508bb0c589fedfe9131f2a9967b6a1d1622d11b1081d412efc0ecec97fa82225576e708f265db1325840db853a6a24ffc775eeb703642256188c251742e1673a
+  data.tar.gz: 9b5670401480fd7bd8cc49805729151487802bb8ec3c2d189822b3f4b595f048fa0521a82bc3f9c489d244ae22756b69f9fb2b84621979a37d8cb45dc7ec7f23

data/README.md

@@ -35,7 +35,7 @@ There are 2 types of helper classes in this app:
 
 ## Relationship with GOV.UK Design System
 
-GOV.UK Publishing Components also makes [GOV.UK Design System](https://design-system.service.gov.uk/) styles and components available to GOV.UK's frontend applications. This gem consumes [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) via [NPM](https://www.npmjs.com/).
+GOV.UK Publishing Components also makes [GOV.UK Design System](https://design-system.service.gov.uk/) styles and components available to GOV.UK's frontend applications. This gem consumes [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) via [Yarn](https://classic.yarnpkg.com/).
 
 ## Browser and assistive technology support
 GOV.UK Publishing Components shares the same standards in terms of browser and assistive technology support with [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend#browser-and-assistive-technology-support).
@@ -44,20 +44,27 @@ GOV.UK Publishing Components shares the same standards in terms of browser and a
 
 [See the rubydoc.info documentation](http://www.rubydoc.info/gems/govuk_publishing_components)
 
-Run the documentation locally with:
+
+## Working locally
+
+### Install dependencies
+
+As well as the Ruby, you will also need the [Yarn package manager](https://classic.yarnpkg.com/en/docs/install/) to allow installing [npm](https://npmjs.com) dependencies.
+
+Install the application's dependencies with:
 
 ```sh
-bundle exec yard server --reload
+bundle install
+yarn install
 ```
 
-## Running tests
+### Running tests
 
-The default rake task runs all tests:
+The default rake task runs all the linting and test tasks:
 
 ```sh
 bin/rake
 ```
-
 Javascript is tested using Jasmine and the [Jasmine gem](https://github.com/pivotal/jasmine-gem). Tests can be run either in the browser or on the command line via the dummy app’s tasks:
 
 ```sh
@@ -68,6 +75,24 @@ bin/rake app:jasmine
 bin/rake app:jasmine:ci
 ```
 
+### Viewing the component guide
+
+View the component guide in your browser with:
+
+```sh
+./startup.sh
+```
+
+The guide should be available at http://localhost:3212
+
+### View documentation
+
+Preview documentation in your browser with:
+
+```sh
+bundle exec yard server --reload
+```
+
 ## Licence
 
 [MIT Licence](LICENCE.md)

data/app/assets/javascripts/component_guide/accessibility-test.js

@@ -31,23 +31,23 @@
 
     axe.run(selector, axeOptions, function (err, results) {
       if (err) {
-        return callback('aXe Error: ' + err)
+        return callback(new Error('aXe Error: ' + err))
       }
 
-      if (typeof results === "undefined") {
-        return callback('aXe Error: Expected results but none returned')
+      if (typeof results === 'undefined') {
+        return callback(new Error('aXe Error: Expected results but none returned'))
       }
 
       var consoleErrorText = _consoleErrorText(results.violations, results.url)
-      var bodyClass = results.violations.length === 0 ? "js-test-a11y-success" : "js-test-a11y-failed"
-      document.body.classList.add(bodyClass);
-      document.body.classList.add("js-test-a11y-finished");
+      var bodyClass = results.violations.length === 0 ? 'js-test-a11y-success' : 'js-test-a11y-failed'
+      document.body.classList.add(bodyClass)
+      document.body.classList.add('js-test-a11y-finished')
 
       callback(undefined, consoleErrorText, _processAxeResultsForPage(results))
     })
   }
 
-  var _consoleErrorText = function(violations, url) {
+  var _consoleErrorText = function (violations, url) {
     if (violations.length !== 0) {
       return (
         '\n' + 'Accessibility issues at ' +
@@ -69,28 +69,28 @@
     }
   }
 
-  var _processAxeResultsForPage = function(results) {
+  var _processAxeResultsForPage = function (results) {
     return {
       violations: _mapSummaryAndCause(results.violations),
       incompleteWarnings: _mapSummaryAndCause(results.incomplete)
     }
   }
 
-  var _mapSummaryAndCause = function(resultsArray) {
+  var _mapSummaryAndCause = function (resultsArray) {
     return resultsArray.map(function (result) {
       var cssSelector = result.nodes.map(function (node) {
-                          return {
-                            'selector': node.target,
-                            'reasons': node.any.map(function(item) {
-                              return item.message
-                            })
-                          }
-                        })
+        return {
+          selector: node.target,
+          reasons: node.any.map(function (item) {
+            return item.message
+          })
+        }
+      })
       return {
-        'id': result.id,
-        'summary': result.help,
-        'selectors': cssSelector,
-        'url': result.helpUrl
+        id: result.id,
+        summary: result.help,
+        selectors: cssSelector,
+        url: result.helpUrl
       }
     })
   }
@@ -127,7 +127,7 @@
         // Section to announce the overall problem.
         var headerNodeLink = document.createElement('a')
         headerNodeLink.href = result.url
-        headerNodeLink.textContent = "(see guidance)"
+        headerNodeLink.textContent = '(see guidance)'
 
         var headerNode = document.createElement('h3')
         headerNode.textContent = result.summary + ' (' + result.id + ') '

data/app/assets/javascripts/component_guide/filter-components.js

@@ -1,35 +1,35 @@
-(function() {
-  window.GOVUK = window.GOVUK || {};
+(function () {
+  window.GOVUK = window.GOVUK || {}
 
-  window.GOVUK.FilterComponents = function filterList(searchTerm) {
-    var itemsToFilter = document.querySelectorAll('.component-list li');
+  window.GOVUK.FilterComponents = function filterList (searchTerm) {
+    var itemsToFilter = document.querySelectorAll('.component-list li')
 
-    for (var i = 0; i < itemsToFilter.length; i++ ) {
-      var currentComponent = itemsToFilter[i];
-      var componentText = currentComponent.innerText.toLowerCase();
+    for (var i = 0; i < itemsToFilter.length; i++) {
+      var currentComponent = itemsToFilter[i]
+      var componentText = currentComponent.innerText.toLowerCase()
 
       if (componentText.includes(searchTerm.toLowerCase())) {
-        currentComponent.classList.remove('component-guide-hidden');
+        currentComponent.classList.remove('component-guide-hidden')
       } else {
-        currentComponent.classList.add('component-guide-hidden');
+        currentComponent.classList.add('component-guide-hidden')
       }
     }
-  };
+  }
 
-  var formElement = document.querySelector('[data-module=filter-components]');
+  var formElement = document.querySelector('[data-module=filter-components]')
 
   if (formElement) {
-    var searchField = formElement.querySelector('input');
+    var searchField = formElement.querySelector('input')
 
     // We don't want the form to submit/refresh the page on enter key
-    formElement.addEventListener('submit', function(e) { e.preventDefault(); });
+    formElement.addEventListener('submit', function (e) { e.preventDefault() })
 
-    searchField.addEventListener('input', function(e) {
-      var searchTerm = searchField.value;
-      window.GOVUK.FilterComponents(searchTerm);
-    });
+    searchField.addEventListener('input', function (e) {
+      var searchTerm = searchField.value
+      window.GOVUK.FilterComponents(searchTerm)
+    })
 
     // trigger search if search query exists in query string on page load
-    window.GOVUK.FilterComponents(searchField.value);
+    window.GOVUK.FilterComponents(searchField.value)
   }
-})();
+})()

data/app/assets/javascripts/component_guide/visual-regression.js

@@ -2,69 +2,70 @@
   window.GOVUK = window.GOVUK || {}
 
   window.GOVUK.VisualDiffTool = function (currentWindowLocation) {
-    var visualDiffSelector = 'visual-diff';
-    var existingIframe = document.getElementById(visualDiffSelector);
-    var windowLocation = currentWindowLocation || window.location;
+    var visualDiffSelector = 'visual-diff'
+    var existingIframe = document.getElementById(visualDiffSelector)
+    var windowLocation = currentWindowLocation || window.location
 
     if (existingIframe) {
-      existingIframe.parentNode.removeChild(existingIframe);
-      document.body.style.filter = null;
+      existingIframe.parentNode.removeChild(existingIframe)
+      document.body.style.filter = null
     } else {
-      var iframe = document.createElement('iframe');
-      iframe.id =  visualDiffSelector;
-      iframe.setAttribute('scrolling', 'no');
+      var iframe = document.createElement('iframe')
+      iframe.id = visualDiffSelector
+      iframe.setAttribute('scrolling', 'no')
       _setElementStyles(iframe, {
-        'width': '100%',
-        'height': document.body.scrollHeight + 'px',
-        'position': 'absolute',
-        'top': '0',
+        width: '100%',
+        height: document.body.scrollHeight + 'px',
+        position: 'absolute',
+        top: '0',
         'pointer-events': 'none',
-        'border': '0'
-      });
-      iframe.style.setProperty('z-index', '999','important');
+        border: '0'
+      })
+      iframe.style.setProperty('z-index', '999', 'important')
 
       // For browsers that support it, do mix-blend-mode diff
       if ('mix-blend-mode' in document.body.style) {
-        _setElementStyles(iframe, {'mix-blend-mode': 'difference'});
-        document.body.style.filter = 'invert(100%)';
+        _setElementStyles(iframe, { 'mix-blend-mode': 'difference' })
+        document.body.style.filter = 'invert(100%)'
       } else {
         // Else do a simple overlay of the live page for comparison (IE and Edge)
-        _setElementStyles(iframe, {'opacity': '0.7'});
+        _setElementStyles(iframe, { opacity: '0.7' })
       }
 
-      iframe.src = _processComparisonURL(windowLocation);
+      iframe.src = _processComparisonURL(windowLocation)
 
       if (iframe.src) {
-        document.body.appendChild(iframe);
-        console.log("comparing to " + iframe.src);
+        document.body.appendChild(iframe)
+        console.log('comparing to ' + iframe.src)
       }
     }
-  };
+  }
 
   var _processComparisonURL = function (url) {
-    var href = url.href;
-    var host = url.host;
+    var appName
+    var href = url.href
+    var host = url.host
 
     if (href.includes('dev.gov.uk/component-guide')) {
-      var appName = host.split('.')[0];
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'));
+      appName = host.split('.')[0]
+      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
     } else if (href.includes('dev.gov.uk')) {
-      return _forceHTTPS(href.replace(host, 'www.gov.uk'));
+      return _forceHTTPS(href.replace(host, 'www.gov.uk'))
     } else if (href.includes('-pr-')) {
-      var appName = host.split('-pr')[0];
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'));
+      appName = host.split('-pr')[0]
+      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
     } else {
-      throw new Error('Visual Diff Tool: You need to run this tool against a page running on your local dev environment');
+      throw new Error('Visual Diff Tool: You need to run this tool against a page running on your local dev environment')
     }
-  };
+  }
 
-  var _forceHTTPS = function(href) {
-    return href.replace('http://', 'https://');
+  var _forceHTTPS = function (href) {
+    return href.replace('http://', 'https://')
   }
 
-  var _setElementStyles = function(element, styles) {
+  var _setElementStyles = function (element, styles) {
     for (var style in styles) {
-      element.style[style] = styles[style];
+      element.style[style] = styles[style]
     }
-  };
-})(window, document);
+  }
+})(window, document)

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

@@ -1,94 +1,123 @@
 /* eslint-env jquery */
+// = require govuk/vendor/polyfills/Element/prototype/closest.js
 // = require govuk/components/checkboxes/checkboxes.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
 window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
 
 (function (Modules) {
-  'use strict'
-
-  Modules.GovukCheckboxes = function () {
-    this.start = function (scope) {
-      var _this = this
-      this.applyAriaControlsAttributes(scope)
-
-      $(scope).on('change', '[data-nested=true] input[type=checkbox]', function (e) {
-        var checkbox = e.target
-        var isNested = $(checkbox).closest('.govuk-checkboxes--nested')
-        var hasNested = $('.govuk-checkboxes--nested[data-parent=' + checkbox.id + ']')
-
-        if (hasNested.length) {
-          _this.toggleNestedCheckboxes(hasNested, checkbox)
-        } else if (isNested.length) {
-          _this.toggleParentCheckbox(isNested, checkbox)
-        }
-      })
-
-      $(scope).on('change', 'input[type=checkbox]', function (e) {
-        if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-          // where checkboxes are manipulated externally in finders, suppressAnalytics
-          // is passed to prevent duplicate GA events
-          if (typeof e.suppressAnalytics === 'undefined' || e.suppressAnalytics !== true) {
-            var $checkbox = $(e.target)
-            var category = $checkbox.data('track-category')
-            if (typeof category !== 'undefined') {
-              var isChecked = $checkbox.is(':checked')
-              var uncheckTrackCategory = $checkbox.data('uncheck-track-category')
-              if (!isChecked && typeof uncheckTrackCategory !== 'undefined') {
-                category = uncheckTrackCategory
-              }
-              var action = $checkbox.data('track-action')
-              var options = $checkbox.data('track-options')
-              if (typeof options !== 'object' || options === null) {
-                options = {}
-              }
-              options['value'] = $checkbox.data('track-value')
-              options['label'] = $checkbox.data('track-label')
-              window.GOVUK.analytics.trackEvent(category, action, options)
-            }
+  function GovukCheckboxes () { }
+
+  GovukCheckboxes.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$checkboxes = this.$module.querySelectorAll('input[type=checkbox]')
+    this.$nestedCheckboxes = this.$module.querySelectorAll('[data-nested=true] input[type=checkbox]')
+    this.$exclusiveCheckboxes = this.$module.querySelectorAll('[data-exclusive=true] input[type=checkbox]')
+
+    this.applyAriaControlsAttributes(this.$module)
+
+    for (var i = 0; i < this.$checkboxes.length; i++) {
+      this.$checkboxes[i].addEventListener('change', this.handleCheckboxChange)
+    }
+
+    for (i = 0; i < this.$nestedCheckboxes.length; i++) {
+      this.$nestedCheckboxes[i].addEventListener('change', this.handleNestedCheckboxChange.bind(this))
+    }
+
+    for (i = 0; i < this.$exclusiveCheckboxes.length; i++) {
+      this.$exclusiveCheckboxes[i].addEventListener('change', this.handleExclusiveCheckboxChange)
+    }
+  }
+
+  GovukCheckboxes.prototype.handleCheckboxChange = function (event) {
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      // Where checkboxes are manipulated externally in finders, `suppressAnalytics`
+      // is passed to prevent duplicate GA events.
+      if (!event.detail || (event.detail && event.detail.suppressAnalytics !== true)) {
+        var $checkbox = event.target
+        var category = $checkbox.getAttribute('data-track-category')
+        if (category) {
+          var uncheckTrackCategory = $checkbox.getAttribute('data-uncheck-track-category')
+          if (!$checkbox.checked && uncheckTrackCategory) {
+            category = uncheckTrackCategory
           }
+          var action = $checkbox.getAttribute('data-track-action')
+          var options = $checkbox.getAttribute('data-track-options')
+          if (options) {
+            options = JSON.parse(options)
+          } else {
+            options = {}
+          }
+          options.value = $checkbox.getAttribute('data-track-value')
+          options.label = $checkbox.getAttribute('data-track-label')
+          window.GOVUK.analytics.trackEvent(category, action, options)
         }
-      })
-
-      $(scope).on('change', '[data-exclusive=true] input[type=checkbox]', function (e) {
-        var currentCheckbox = e.target
-        var checkboxes = currentCheckbox.closest('.govuk-checkboxes')
-        var exclusiveOption = $(checkboxes).find('input[type=checkbox][data-exclusive]')
-        var nonExclusiveOptions = $(checkboxes).find('input[type=checkbox]:not([data-exclusive])')
-
-        if (currentCheckbox.dataset.exclusive === 'true' && currentCheckbox.checked === true) {
-          nonExclusiveOptions.each(function () {
-            $(this).prop('checked', false)
-          })
-        } else if (currentCheckbox.dataset.exclusive !== 'true' && currentCheckbox.checked === true) {
-          exclusiveOption.prop('checked', false)
-        }
-      })
+      }
     }
+  }
 
-    this.toggleNestedCheckboxes = function (scope, checkbox) {
-      if (checkbox.checked) {
-        scope.find('input[type=checkbox]').prop('checked', true)
-      } else {
-        scope.find('input[type=checkbox]').prop('checked', false)
+  GovukCheckboxes.prototype.handleNestedCheckboxChange = function (event) {
+    var $checkbox = event.target
+    var $isNested = $checkbox.closest('.govuk-checkboxes--nested')
+    var $hasNested = this.$module.querySelector('.govuk-checkboxes--nested[data-parent=' + $checkbox.id + ']')
+
+    if ($hasNested) {
+      this.toggleNestedCheckboxes($hasNested, $checkbox)
+    } else if ($isNested) {
+      this.toggleParentCheckbox($isNested, $checkbox)
+    }
+  }
+
+  GovukCheckboxes.prototype.toggleNestedCheckboxes = function ($scope, $checkbox) {
+    var $nestedCheckboxes = $scope.querySelectorAll('input[type=checkbox]')
+    if ($checkbox.checked) {
+      for (var i = 0; i < $nestedCheckboxes.length; i++) {
+        $nestedCheckboxes[i].checked = true
       }
+    } else {
+      for (i = 0; i < $nestedCheckboxes.length; i++) {
+        $nestedCheckboxes[i].checked = false
+      }
+    }
+  }
+
+  GovukCheckboxes.prototype.toggleParentCheckbox = function ($scope, $checkbox) {
+    var $inputs = $scope.querySelectorAll('input')
+    var $checkedInputs = $scope.querySelectorAll('input:checked')
+    var parentId = $scope.getAttribute('data-parent')
+    var $parent = document.getElementById(parentId)
+
+    if ($checkbox.checked && $inputs.length === $checkedInputs.length) {
+      $parent.checked = true
+    } else {
+      $parent.checked = false
     }
+  }
 
-    this.toggleParentCheckbox = function (scope, checkbox) {
-      var siblings = $(checkbox).closest('.govuk-checkboxes__item').siblings()
-      var parentId = scope.data('parent')
+  GovukCheckboxes.prototype.handleExclusiveCheckboxChange = function (event) {
+    var $currentCheckbox = event.target
+    var $checkboxes = $currentCheckbox.closest('.govuk-checkboxes')
+    var $exclusiveOption = $checkboxes.querySelector('input[type=checkbox][data-exclusive]')
+    var $nonExclusiveOptions = $checkboxes.querySelectorAll('input[type=checkbox]:not([data-exclusive])')
 
-      if (checkbox.checked && siblings.length === siblings.find(':checked').length) {
-        $('#' + parentId).prop('checked', true)
-      } else {
-        $('#' + parentId).prop('checked', false)
+    if ($currentCheckbox.dataset.exclusive === 'true' && $currentCheckbox.checked === true) {
+      for (var i = 0; i < $nonExclusiveOptions.length; i++) {
+        $nonExclusiveOptions[i].checked = false
+      }
+    } else if ($currentCheckbox.dataset.exclusive !== 'true' && $currentCheckbox.checked === true) {
+      if ($exclusiveOption) {
+        $exclusiveOption.checked = false
       }
     }
+  }
+
+  GovukCheckboxes.prototype.applyAriaControlsAttributes = function ($scope) {
+    var $inputs = $scope.querySelectorAll('[data-controls]')
 
-    this.applyAriaControlsAttributes = function (scope) {
-      $(scope).find('[data-controls]').each(function () {
-        $(this).attr('aria-controls', $(this).attr('data-controls'))
-      })
+    for (var i = 0; i < $inputs.length; i++) {
+      $inputs[i].setAttribute('aria-controls', $inputs[i].getAttribute('data-controls'))
     }
   }
+
+  Modules.GovukCheckboxes = GovukCheckboxes
 })(window.GOVUK.Modules)