govuk_publishing_components 21.57.1 → 21.60.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5de5c1f4596f4f0f7eae60d3c76ad22f0ed61ce04619e72a7c9074ba3a31320c
-  data.tar.gz: 8feefd4ad704ce099dca964212c995b76aeef60c628458033e1b2611aabfecaa
+  metadata.gz: 98fa4203e2dd5c9bbcc5ecfc9b64d18612a1434167c1ece8b4203ade58c0c45a
+  data.tar.gz: f24e38e566e25ad2dc6c5d6fb954cf91cc7f43a9b6f46fabd0a08b184d69bb21
 SHA512:
-  metadata.gz: d396d8049e9a935808e3b3468b6a623a7d2d5093433037381278e2b907a664547007a124b34f1e91a5394a3bad076ad45f89fc1ba49a70505ea7b29e21ef9ff3
-  data.tar.gz: 7d4295428f49d6d1e7db3c3f1894aa48ddcb32a39ba5cd95c169ae725cd86869f0257d4ae94da27265e2614ebe949c948f3feb28bd42fa266d2feb8a8e3e50b7
+  metadata.gz: 3c9342c8d542a1a703f5700ffa6fa87d0fa253641a45d549176b8f6d0b4b6a8cefb73602cc4351afdd3ce35f307380a599e95fd1df2c14301acc55c9542f5987
+  data.tar.gz: 1179277ccaaa0b9758c4f0dfe723472a852525a2dbd9607f2a6d52033307232f53383e17812237975a0df232cd0e3c04ea31363ae1f85c5e6b81938579932006

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

@@ -42,8 +42,8 @@ window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
               if (typeof options !== 'object' || options === null) {
                 options = {}
               }
-              options['value'] = $checkbox.data('track-value')
-              options['label'] = $checkbox.data('track-label')
+              options.value = $checkbox.data('track-value')
+              options.label = $checkbox.data('track-label')
               window.GOVUK.analytics.trackEvent(category, action, options)
             }
           }

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

@@ -20,9 +20,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var detailsClick = detailsComponent.querySelector('[data-details-track-click]')
         var that = this
 
-        $(detailsClick).click(function (e) {
-          that.trackDefault(detailsComponent)
-        })
+        if (detailsClick) {
+          detailsClick.addEventListener('click', function (event) {
+            that.trackDefault(detailsComponent)
+          })
+        }
       }
     }
 
@@ -37,7 +39,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           trackOptions = {}
         }
 
-        trackOptions['label'] = componentStatus
+        trackOptions.label = componentStatus
 
         if (trackAction && trackCategory) {
           window.GOVUK.analytics.trackEvent(trackCategory, trackAction, trackOptions)

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -405,7 +405,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var dimension28 = $(event.target).closest('.gem-c-step-nav__list').attr('data-length')
 
         if (dimension28) {
-          trackingOptions['dimension28'] = dimension28
+          trackingOptions.dimension28 = dimension28
         }
 
         stepNavTracker.track('stepNavLinkClicked', linkPosition, trackingOptions)
@@ -421,9 +421,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         // dimension28 records the number of links in the step that was shown/hidden (handled in click event)
         if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
           options = options || {}
-          options['dimension26'] = options['dimension26'] || totalSteps.toString()
-          options['dimension27'] = options['dimension27'] || totalLinks.toString()
-          options['dimension96'] = options['dimension96'] || uniqueId
+          options.dimension26 = options.dimension26 || totalSteps.toString()
+          options.dimension27 = options.dimension27 || totalLinks.toString()
+          options.dimension96 = options.dimension96 || uniqueId
           window.GOVUK.analytics.trackEvent(category, action, options)
         }
       }

data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js

@@ -0,0 +1,31 @@
+// migrated from govuk_frontend_toolkit
+;(function (global) {
+  'use strict'
+
+  var GOVUK = global.GOVUK || {}
+  GOVUK.Modules = GOVUK.Modules || {}
+
+  GOVUK.Modules.AutoTrackEvent = function () {
+    this.start = function (element) {
+      var options = { nonInteraction: 1 } // automatic events shouldn't affect bounce rate
+      var category = element.data('track-category')
+      var action = element.data('track-action')
+      var label = element.data('track-label')
+      var value = element.data('track-value')
+
+      if (typeof label === 'string') {
+        options.label = label
+      }
+
+      if (value || value === 0) {
+        options.value = value
+      }
+
+      if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
+        GOVUK.analytics.trackEvent(category, action, options)
+      }
+    }
+  }
+
+  global.GOVUK = GOVUK
+})(window)

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -5,31 +5,31 @@
   window.GOVUK = window.GOVUK || {}
 
   var DEFAULT_COOKIE_CONSENT = {
-    'essential': true,
-    'settings': false,
-    'usage': false,
-    'campaigns': false
+    essential: true,
+    settings: false,
+    usage: false,
+    campaigns: false
   }
 
   var COOKIE_CATEGORIES = {
-    'cookies_policy': 'essential',
-    'seen_cookie_message': 'essential',
-    'cookie_preferences_set': 'essential',
-    'cookies_preferences_set': 'essential',
+    cookies_policy: 'essential',
+    seen_cookie_message: 'essential',
+    cookie_preferences_set: 'essential',
+    cookies_preferences_set: 'essential',
     '_email-alert-frontend_session': 'essential',
-    'licensing_session': 'essential',
-    'govuk_contact_referrer': 'essential',
-    'multivariatetest_cohort_coronavirus_extremely_vulnerable_rate_limit': 'essential',
-    'dgu_beta_banner_dismissed': 'settings',
-    'global_bar_seen': 'settings',
-    'govuk_browser_upgrade_dismisssed': 'settings',
-    'govuk_not_first_visit': 'settings',
-    'analytics_next_page_call': 'usage',
-    '_ga': 'usage',
-    '_gid': 'usage',
-    '_gat': 'usage',
+    licensing_session: 'essential',
+    govuk_contact_referrer: 'essential',
+    multivariatetest_cohort_coronavirus_extremely_vulnerable_rate_limit: 'essential',
+    dgu_beta_banner_dismissed: 'settings',
+    global_bar_seen: 'settings',
+    govuk_browser_upgrade_dismisssed: 'settings',
+    govuk_not_first_visit: 'settings',
+    analytics_next_page_call: 'usage',
+    _ga: 'usage',
+    _gid: 'usage',
+    _gat: 'usage',
     'JS-Detection': 'usage',
-    'TLSversion': 'usage'
+    TLSversion: 'usage'
   }
 
   /*
@@ -69,10 +69,10 @@
 
   window.GOVUK.approveAllCookieTypes = function () {
     var approvedConsent = {
-      'essential': true,
-      'settings': true,
-      'usage': true,
-      'campaigns': true
+      essential: true,
+      settings: true,
+      usage: true,
+      campaigns: true
     }
 
     window.GOVUK.setCookie('cookies_policy', JSON.stringify(approvedConsent), { days: 365 })