Add JS and SCSS lint

Gemfile.lock

@@ -315,5 +315,8 @@ DEPENDENCIES
   webmock (~> 3.5.0)
   yard
 
+RUBY VERSION
+   ruby 2.6.3p62
+
 BUNDLED WITH
    1.17.3

Jenkinsfile

@@ -6,7 +6,12 @@ node {
   govuk.buildProject(
     rubyLintDiff: false,
     beforeTest: {
-      sh("npm install")
+      stage("Install npm dependencies") {
+        sh("npm install")
+      }
+      stage("Lint Javascript and SCSS") {
+        sh("npm run lint")
+      }
     }
   )
 }

app/assets/javascripts/govuk_publishing_components/all_components.js

@@ -1,6 +1,6 @@
-//= require_tree ./lib
-//= require_tree ./components
-//= require govuk-frontend/all.js
+// = require_tree ./lib
+// = require_tree ./components
+// = require govuk-frontend/all.js
 
 // Initialise all GOVUKFrontend components
 window.GOVUKFrontend.initAll()

app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js

@@ -1,77 +1,79 @@
-//= require accessible-autocomplete/dist/accessible-autocomplete.min.js
+/* eslint-env jquery */
+/* global accessibleAutocomplete */
+// = require accessible-autocomplete/dist/accessible-autocomplete.min.js
 
-window.GOVUK = window.GOVUK || {};
+window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  "use strict";
+  'use strict'
 
   Modules.AccessibleAutocomplete = function () {
-    var $selectElem;
+    var $selectElem
 
     this.start = function ($element) {
-      $selectElem = $element.find('select');
+      $selectElem = $element.find('select')
 
       var configOptions = {
         selectElement: document.getElementById($selectElem.attr('id')),
         showAllValues: true,
         confirmOnBlur: true,
         preserveNullOptions: true, // https://github.com/alphagov/accessible-autocomplete#null-options
-        defaultValue: ""
-      };
+        defaultValue: ''
+      }
 
-      configOptions.onConfirm = this.onConfirm;
+      configOptions.onConfirm = this.onConfirm
 
-      new accessibleAutocomplete.enhanceSelectElement(configOptions);
-      //attach the onConfirm function to data attr, to call it in finder-frontend when clearing facet tags
-      $selectElem.data('onconfirm', this.onConfirm);
-    };
+      new accessibleAutocomplete.enhanceSelectElement(configOptions) // eslint-disable-line no-new, new-cap
+      // attach the onConfirm function to data attr, to call it in finder-frontend when clearing facet tags
+      $selectElem.data('onconfirm', this.onConfirm)
+    }
 
-    this.onConfirm = function(label, value, removeDropDown) {
-      function escapeHTML(str){
-        return new Option(str).innerHTML;
+    this.onConfirm = function (label, value, removeDropDown) {
+      function escapeHTML (str) {
+        return new window.Option(str).innerHTML
       }
 
       if ($selectElem.data('track-category') !== undefined && $selectElem.data('track-action') !== undefined) {
-        track($selectElem.data('track-category'), $selectElem.data('track-action'), label, $selectElem.data('track-options'));
+        track($selectElem.data('track-category'), $selectElem.data('track-action'), label, $selectElem.data('track-options'))
       }
       // This is to compensate for the fact that the accessible-autocomplete library will not
       // update the hidden select if the onConfirm function is supplied
       // https://github.com/alphagov/accessible-autocomplete/issues/322
       if (typeof label !== 'undefined') {
         if (typeof value === 'undefined') {
-          value = $selectElem.children("option").filter(function () { return $(this).html() == escapeHTML(label); }).val();
+          value = $selectElem.children('option').filter(function () { return $(this).html() === escapeHTML(label) }).val()
         }
 
         if (typeof value !== 'undefined') {
-          var $option = $selectElem.find('option[value=\'' + value + '\']');
+          var $option = $selectElem.find('option[value=\'' + value + '\']')
           // if removeDropDown we are clearing the selection from outside the component
-          var selectState = typeof removeDropDown === 'undefined' ? true : false;
-          $option.prop('selected', selectState);
-          $selectElem.change();
+          var selectState = typeof removeDropDown === 'undefined'
+          $option.prop('selected', selectState)
+          $selectElem.change()
         }
 
         // used to clear the autocomplete when clicking on a facet tag in finder-frontend
         // very brittle but menu visibility is determined by autocomplete after this function is called
         // setting autocomplete val to '' causes menu to appear, we don't want that, this solves it
         // ideally will rewrite autocomplete to have better hooks in future
         if (removeDropDown) {
-          $selectElem.closest('.gem-c-accessible-autocomplete').addClass('gem-c-accessible-autocomplete--hide-menu');
-          setTimeout(function() {
-            $('.autocomplete__menu').remove(); // this element is recreated every time the user starts typing
-            $selectElem.closest('.gem-c-accessible-autocomplete').removeClass('gem-c-accessible-autocomplete--hide-menu');
-          }, 100);
+          $selectElem.closest('.gem-c-accessible-autocomplete').addClass('gem-c-accessible-autocomplete--hide-menu')
+          setTimeout(function () {
+            $('.autocomplete__menu').remove() // this element is recreated every time the user starts typing
+            $selectElem.closest('.gem-c-accessible-autocomplete').removeClass('gem-c-accessible-autocomplete--hide-menu')
+          }, 100)
         }
       }
-    };
+    }
 
     function track (category, action, label, options) {
-      if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
-        options = options || {};
-        options.label = label;
+      if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+        options = options || {}
+        options.label = label
 
-        GOVUK.analytics.trackEvent(category, action, options);
+        window.GOVUK.analytics.trackEvent(category, action, options)
       }
     }
-  };
-})(window.GOVUK.Modules);
+  }
+})(window.GOVUK.Modules)

app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -1,2 +1,2 @@
 // This component relies on JavaScript from GOV.UK Frontend
-//= require govuk-frontend/components/accordion/accordion.js
+// = require govuk-frontend/components/accordion/accordion.js

app/assets/javascripts/govuk_publishing_components/components/character-count.js

@@ -1,2 +1,2 @@
 // This component relies on JavaScript from GOV.UK Frontend
-//= require govuk-frontend/components/character-count/character-count.js
+// = require govuk-frontend/components/character-count/character-count.js

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

@@ -1,78 +1,78 @@
-// This component relies on JavaScript from GOV.UK Frontend
-//= require govuk-frontend/components/checkboxes/checkboxes.js
-window.GOVUK = window.GOVUK || {};
+/* eslint-env jquery */
+// = require govuk-frontend/components/checkboxes/checkboxes.js
+window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict';
+  'use strict'
 
-   Modules.Checkboxes = function () {
+  Modules.Checkboxes = function () {
     this.start = function (scope) {
-      var _this = this;
-      this.applyAriaControlsAttributes(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 + ']');
+      $(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);
+          _this.toggleNestedCheckboxes(hasNested, checkbox)
         } else if (isNested.length) {
-          _this.toggleParentCheckbox(isNested, checkbox);
+          _this.toggleParentCheckbox(isNested, checkbox)
         }
-      });
+      })
 
-      $(scope).on('change', 'input[type=checkbox]', function(e) {
-        if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
+      $(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;
+          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");
+              var action = $checkbox.data('track-action')
+              var options = $checkbox.data('track-options')
               if (typeof options !== 'object' || options === null) {
-                options = {};
+                options = {}
               }
-              options['value'] = $checkbox.data("track-value");
-              options['label'] = $checkbox.data("track-label");
-              GOVUK.analytics.trackEvent(category, action, options);
+              options['value'] = $checkbox.data('track-value')
+              options['label'] = $checkbox.data('track-label')
+              window.GOVUK.analytics.trackEvent(category, action, options)
             }
           }
         }
-      });
-    };
+      })
+    }
 
-    this.toggleNestedCheckboxes = function(scope, checkbox) {
+    this.toggleNestedCheckboxes = function (scope, checkbox) {
       if (checkbox.checked) {
-        scope.find('input[type=checkbox]').prop("checked", true);
+        scope.find('input[type=checkbox]').prop('checked', true)
       } else {
-        scope.find('input[type=checkbox]').prop("checked", false);
+        scope.find('input[type=checkbox]').prop('checked', false)
       }
-    };
+    }
 
-    this.toggleParentCheckbox = function(scope, checkbox) {
-      var siblings = $(checkbox).closest('.govuk-checkboxes__item').siblings();
-      var parent_id = scope.data('parent');
+    this.toggleParentCheckbox = function (scope, checkbox) {
+      var siblings = $(checkbox).closest('.govuk-checkboxes__item').siblings()
+      var parentId = scope.data('parent')
 
-      if (checkbox.checked && siblings.length == siblings.find(':checked').length) {
-        $('#' + parent_id).prop("checked", true);
+      if (checkbox.checked && siblings.length === siblings.find(':checked').length) {
+        $('#' + parentId).prop('checked', true)
       } else {
-        $('#' + parent_id).prop("checked", false);
+        $('#' + parentId).prop('checked', false)
       }
-    };
+    }
 
     this.applyAriaControlsAttributes = function (scope) {
       $(scope).find('[data-controls]').each(function () {
-        $(this).attr('aria-controls', $(this).attr('data-controls'));
-      });
-    };
-  };
-})(window.GOVUK.Modules);
+        $(this).attr('aria-controls', $(this).attr('data-controls'))
+      })
+    }
+  }
+})(window.GOVUK.Modules)

app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js

@@ -1,23 +1,23 @@
-window.GOVUK = window.GOVUK || {};
+window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict';
+  'use strict'
 
   Modules.CopyToClipboard = function () {
     this.start = function (element) {
-      var input = element[0].querySelector('.gem-c-input');
-      var copyButton = element[0].querySelector('.gem-c-button');
+      var input = element[0].querySelector('.gem-c-input')
+      var copyButton = element[0].querySelector('.gem-c-button')
 
-      input.addEventListener('click', function() {
-        input.select();
-      });
+      input.addEventListener('click', function () {
+        input.select()
+      })
 
       copyButton.addEventListener('click', function (event) {
-        event.preventDefault();
-        input.select();
-        document.execCommand('copy');
-      });
-    };
-  };
-})(window.GOVUK.Modules);
+        event.preventDefault()
+        input.select()
+        document.execCommand('copy')
+      })
+    }
+  }
+})(window.GOVUK.Modules)

app/assets/javascripts/govuk_publishing_components/components/error-summary.js

@@ -1,2 +1,2 @@
 // This component relies on JavaScript from GOV.UK Frontend
-//= require govuk-frontend/components/error-summary/error-summary.js
+// = require govuk-frontend/components/error-summary/error-summary.js