govuk_frontend_toolkit 4.4.0 → 4.5.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 7f7e29e171f3a719dcc43d1470a99ded731cc407
+  data.tar.gz: 0ef85b576091648e8779abc142ac523d358a6660
+SHA512:
+  metadata.gz: 6b1d7075816ead4ec7dcdee8573a329a523c4e6d7ff8579e2e338f6c9014c98927a33946744e8cd431b93381a402ccf765f26b72cee16b6ff2465d06ffd73858
+  data.tar.gz: d22ceb97296f12f9ab556e507403a132a61d1f9af7b030a644a6851c8818e8fdbff25277c4adf383037f51c72b22ead629ec2bb6df67e2553a5bfbda37f7b2ec

data/.ruby-version

@@ -0,0 +1 @@
+2.2

data/app/assets/.ruby-version

@@ -0,0 +1 @@
+2.2

data/app/assets/.travis.yml

@@ -1,7 +1,5 @@
 language: node_js
 node_js:
   - "0.10"
-rvm:
-  - 2.1.0
 before_install:
   - bundle install

data/app/assets/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 4.5.0
+
+- Find and auto-start JavaScript modules from markup: `data-module="module-name"`(PR #227)
+
 # 4.4.0
 
 - Add helpers partial for functions

data/app/assets/Gruntfile.js

@@ -29,7 +29,7 @@ module.exports = function(grunt) {
     jasmine: {
       javascripts: {
         src: [
-          'node_modules/jquery-browser/lib/jquery.js',
+          'node_modules/jquery/dist/jquery.js',
           'javascripts/govuk/analytics/google-analytics-universal-tracker.js',
           'javascripts/govuk/analytics/analytics.js',
           'javascripts/**/*.js'

data/app/assets/README.md

@@ -115,6 +115,7 @@ In production:
   * [Phase banner](/docs/mixins.md#-phase-banner)
   * [Phase tags](/docs/mixins.md#-phase-tags)
 * [JavaScript](/docs/javascript.md)
+  * [Modules](/docs/javascript.md#modules)
   * [Media player](/docs/javascript.md#media-player)
   * [Multivariate test framework](/docs/javascript.md#multivariate-test-framework)
   * [Primary links](/docs/javascript.md#primary-links)

data/app/assets/VERSION.txt

@@ -1 +1 @@
-4.4.0
+4.5.0

data/app/assets/docs/javascript.md

@@ -5,6 +5,115 @@ page. It can be included with the asset_pipeline by adding the line:
 
     //=require govuk_toolkit
 
+## Modules
+
+The toolkit comes with a module pattern that makes it easy to write re-usable modular components, without having to worry about where and when the module should be instantiated.
+
+### Usage
+
+Javascript modules can be specified in markup using `data-` attributes:
+
+```html
+<div data-module="some-module">
+  <strong>Some other markup inside the module</strong>
+</div>
+```
+
+Modules can be found and started by including `govuk/modules.js` and running:
+
+```javascript
+$(document).ready(function(){
+  GOVUK.modules.start();
+});
+```
+
+This will attempt to find and start all modules in the page. For the example above it will look for a module at `GOVUK.Modules.SomeModule`. Note the value of the data attribute has been converted to _PascalCase_.
+
+The module will be instantiated and then its `start` method called. The HTML element with the `data-module` attribute is passed as the first argument to the module. This limits modules to acting only within their containing elements.
+
+```javascript
+module = new GOVUK.Modules[type]();
+module.start(element);
+```
+
+Running `GOVUK.modules.start()` multiple times will have no additional affect. When a module is started a flag is set on the element using the data attribute `module-started`. `data-module-started` is a reserved attribute. It can however be called with an element as the first argument, to allow modules to be started in dynamically loaded content:
+
+```javascript
+var container = $('.dynamic-content');
+GOVUK.modules.start(container);
+```
+
+### Module structure
+
+A module must add its constructor to `GOVUK.Modules` and it must have a `start` method.
+The simplest module looks like:
+
+```javascript
+(function(Modules) {
+  "use strict";
+  Modules.SomeModule = function() {
+    this.start = function(element) {
+      // module code
+    }
+  };
+})(window.GOVUK.Modules);
+```
+
+### Writing modules
+
+Whilst this isn’t prescriptive, it helps if modules look and behave in a similar manner.
+
+#### Use `js-` prefixed classes for interaction hooks
+
+Make it clear where a javascript module will be applying behaviour:
+
+```html
+<div data-module="toggle-thing">
+  <a href="/" class="js-toggle">Toggle</a>
+  <div class="js-toggle-target">Target</div>
+</div>
+```
+
+#### Declare event listeners at the start
+
+Beginning with a set of event listeners clearly indicates the module’s intentions.
+
+```js
+this.start = function(element) {
+  element.on('click', '.js-toggle', toggle);
+  element.on('click', '.js-cancel', cancel);
+}
+```
+
+Where possible, assign listeners to the module element to minimise the number of listeners and to allow for flexible markup:
+
+```html
+<div data-module="toggle-thing">
+  <a href="/" class="js-toggle">This toggles</a>
+  <div class="js-toggle-target">
+    <p>Some content</p>
+    <a href="/" class="js-toggle">This also toggles</a>
+  </div>
+</div>
+```
+
+#### Use data-attributes for configuration
+
+Keep modules flexible by moving configuration to data attributes on the module’s element:
+
+```html
+<div
+  data-module="html-stream"
+  data-url="/some/endpoint"
+  data-refresh-ms="5000">
+  <!-- updates with content from end point -->
+</div>
+```
+
+#### Include Jasmine specs
+
+Modules should have their own tests, whether they’re being included with the toolkit or are app specific.
+
 ## Media player
 
 There is a forked version of the Nomensa video player included and custom
@@ -106,7 +215,7 @@ This code requires analytics to be loaded in order to run; static is the app tha
 6. Check that it works: launch the app, open the page of your app, and check that there is a cookie with the name you had picked in your experiment. You can delete the cookie and refresh the page to check whether you can be assigned to another cohort. Then in your browser console, go to the Networks tab and search for xid and xvar. The values should correspond to your contentExperimentId and the cohort your cookie indicates you were assigned to.
 
 7. If it works, in Google Universal Analytics, click on "Next Step" and then "Start Experiment". You can ignore the error messages relative to Experiment Code Validation as they don't concern us in our setup.
- 
+
 ```js
 var test = new GOVUK.MultivariateTest({
   name: 'car_tax_button_text',

data/app/assets/javascripts/govuk/modules.js

@@ -0,0 +1,56 @@
+(function($, root) {
+  "use strict";
+  root.GOVUK = root.GOVUK || {};
+  GOVUK.Modules = GOVUK.Modules || {};
+
+  GOVUK.modules = {
+    find: function(container) {
+      var modules,
+          moduleSelector = '[data-module]',
+          container = container || $('body');
+
+      modules = container.find(moduleSelector);
+
+      // Container could be a module too
+      if (container.is(moduleSelector)) {
+        modules = modules.add(container);
+      }
+
+      return modules;
+    },
+
+    start: function(container) {
+      var modules = this.find(container);
+
+      for (var i = 0, l = modules.length; i < l; i++) {
+        var module,
+            element = $(modules[i]),
+            type = camelCaseAndCapitalise(element.data('module')),
+            started = element.data('module-started');
+
+        if (typeof GOVUK.Modules[type] === "function" && !started) {
+          module = new GOVUK.Modules[type]();
+          module.start(element);
+          element.data('module-started', true);
+        }
+      }
+
+      // eg selectable-table to SelectableTable
+      function camelCaseAndCapitalise(string) {
+        return capitaliseFirstLetter(camelCase(string));
+      }
+
+      // http://stackoverflow.com/questions/6660977/convert-hyphens-to-camel-case-camelcase
+      function camelCase(string) {
+        return string.replace(/-([a-z])/g, function (g) {
+          return g[1].toUpperCase();
+        });
+      }
+
+      // http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript
+      function capitaliseFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+      }
+    }
+  }
+})(jQuery, window);

data/app/assets/javascripts/govuk/modules/auto-track-event.js

@@ -0,0 +1,26 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.AutoTrackEvent = function() {
+    this.start = function(element) {
+      var options = {nonInteraction: 1}, // automatic events shouldn't affect bounce rate
+          category = element.data('track-category'),
+          action = element.data('track-action'),
+          label = element.data('track-label'),
+          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);
+      }
+    }
+  };
+
+})(window.GOVUK.Modules);

data/app/assets/package.json

@@ -9,7 +9,7 @@
     "grunt-contrib-jasmine": "~0.8.2",
     "grunt-contrib-sass": "0.7.4",
     "grunt-scss-lint": "0.3.4",
-    "jquery-browser": "~1.7.2-3"
+    "jquery": "~1.11.3"
   },
   "scripts": {
     "test": "node_modules/.bin/grunt test"

data/app/assets/spec/manifest.js

@@ -1,7 +1,9 @@
-// files are loaded from the /spec/support folder so paths are relative to that
+// Paths are relative to the /spec/support folder
 var manifest = {
   support : [
-    '../../node_modules/jquery-browser/lib/jquery.js',
+    '../../node_modules/jquery/dist/jquery.js',
+    '../../javascripts/govuk/modules.js',
+    '../../javascripts/govuk/modules/auto-track-event.js',
     '../../javascripts/govuk/multivariate-test.js',
     '../../javascripts/govuk/primary-links.js',
     '../../javascripts/govuk/stick-at-top-when-scrolling.js',
@@ -14,6 +16,8 @@ var manifest = {
     '../../javascripts/govuk/analytics/download-link-tracker.js'
   ],
   test : [
+    '../unit/ModulesSpec.js',
+    '../unit/Modules/AutoTrackEventSpec.js',
     '../unit/MultivariateTestSpec.js',
     '../unit/PrimaryLinksSpec.js',
     '../unit/StickAtTopWhenScrollingSpec.js',

data/app/assets/spec/unit/ModulesSpec.js

@@ -0,0 +1,89 @@
+describe('GOVUK Modules', function() {
+  "use strict";
+  var GOVUK = window.GOVUK;
+
+  it('finds modules', function() {
+    var module = $('<div data-module="a-module"></div>');
+    $('body').append(module);
+
+    expect(GOVUK.modules.find().length).toBe(1);
+    expect(GOVUK.modules.find().eq(0).is('[data-module="a-module"]')).toBe(true);
+    module.remove();
+  });
+
+  it('finds modules in a container', function() {
+    var module = $('<div data-module="a-module"></div>'),
+        container = $('<div></div>').append(module);
+
+    expect(GOVUK.modules.find(container).length).toBe(1);
+    expect(GOVUK.modules.find(container).eq(0).data('module')).toBe('a-module');
+  });
+
+  it('finds modules that are a container', function() {
+    var module = $('<div data-module="a-module"></div>'),
+        container = $('<div data-module="container-module"></div>').append(module);
+
+    expect(GOVUK.modules.find(container).length).toBe(2);
+    expect(GOVUK.modules.find(container).eq(0).data('module')).toBe('container-module');
+    expect(GOVUK.modules.find(container).eq(1).data('module')).toBe('a-module');
+  });
+
+  describe('when a module exists', function() {
+    var callback;
+
+    beforeEach(function() {
+      callback = jasmine.createSpy();
+      GOVUK.Modules.TestAlertModule = function() {
+        var that = this;
+        that.start = function(element) {
+          callback(element);
+        }
+      };
+    });
+
+    afterEach(function() {
+      delete GOVUK.Modules.TestAlertModule;
+    });
+
+    it('starts modules within a container', function() {
+      var module = $('<div data-module="test-alert-module"></div>'),
+          container = $('<div></div>').append(module);
+
+      GOVUK.modules.start(container);
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it('does not start modules that are already started', function() {
+      var module = $('<div data-module="test-alert-module"></div>'),
+          container = $('<div></div>').append(module);
+
+      GOVUK.modules.start(module);
+      GOVUK.modules.start(module);
+      expect(callback.calls.count()).toBe(1);
+    });
+
+    it('passes the HTML element to the module\'s start method', function() {
+      var module = $('<div data-module="test-alert-module"></div>'),
+          container = $('<h1></h1>').append(module);
+
+      GOVUK.modules.start(container);
+
+      var args = callback.calls.argsFor(0);
+      expect(args[0].is('div[data-module="test-alert-module"]')).toBe(true);
+    });
+
+    it('starts all modules that are on the page', function() {
+      var modules = $(
+            '<div data-module="test-alert-module"></div>\
+             <strong data-module="test-alert-module"></strong>\
+             <span data-module="test-alert-module"></span>'
+          );
+
+      $('body').append(modules);
+      GOVUK.modules.start();
+      expect(callback.calls.count()).toBe(3);
+
+      modules.remove();
+    });
+  });
+});

data/app/assets/spec/unit/SelectionButtonSpec.js

@@ -61,13 +61,13 @@ describe("selection-buttons", function () {
         });
 
         it("Should mark checked radios with the selected class", function () {
-          $radioButtons.eq(0).attr('checked', true);
+          $radioButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
           expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should mark checked radios with the custom selected class if given", function () {
-          $radioButtons.eq(0).attr('checked', true);
+          $radioButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons($radioButtons, { 'selectedClass' : 'selectable-selected' });
           expect($radioLabels.eq(0).hasClass('selectable-selected')).toBe(true);
         });
@@ -108,18 +108,14 @@ describe("selection-buttons", function () {
       describe("If one of those radios is clicked", function () {
         it("Should mark that radio with the selected class", function () {
           buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
-          $radioButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $radioButtons.eq(0).trigger('click');
           expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should remove the selected class from all other radios", function () {
           buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
           $radioLabels.eq(1).addClass('selected');
-          $radioButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $radioButtons.eq(0).trigger('click');
           expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
         });
       });
@@ -135,21 +131,21 @@ describe("selection-buttons", function () {
         });
 
         it("Should mark checked checkboxes with the selected class", function () {
-          $checkboxButtons.eq(0).attr('checked', true);
+          $checkboxButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons);
           expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should mark all checked checkboxes with the selected class if there are more than one", function () {
-          $checkboxButtons.eq(0).attr('checked', true);
-          $checkboxButtons.eq(1).attr('checked', true);
+          $checkboxButtons.eq(0).prop('checked', true);
+          $checkboxButtons.eq(1).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons);
           expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
           expect($checkboxLabels.eq(1).hasClass('selected')).toBe(true);
         });
 
         it("Should mark checked checkboxes with the custom selected class if given", function () {
-          $checkboxButtons.eq(0).attr('checked', true);
+          $checkboxButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons, { 'selectedClass' : 'selectable-selected' });
           expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
         });
@@ -190,17 +186,13 @@ describe("selection-buttons", function () {
       describe("If one of those checkboxes is clicked", function () {
         it("Should add the selected class to that checkbox", function () {
           buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons);
-          $checkboxButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $checkboxButtons.eq(0).trigger('click');
           expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should add the selected class to that checkbox", function () {
           buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons, { 'selectedClass' : 'selectable-selected' });
-          $checkboxButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $checkboxButtons.eq(0).trigger('click');
           expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
         });
       });
@@ -225,8 +217,8 @@ describe("selection-buttons", function () {
         });
 
         it("Should mark checked checkboxes or radios with the selected class", function () {
-          $mixedButtons.eq(0).attr('checked', true);
-          $mixedButtons.eq(3).attr('checked', true);
+          $mixedButtons.eq(0).prop('checked', true);
+          $mixedButtons.eq(3).prop('checked', true);
 
           buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
           expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
@@ -234,8 +226,8 @@ describe("selection-buttons", function () {
         });
 
         it("Should mark checked checkboxes or radios with the custom selected class if given", function () {
-          $mixedButtons.eq(0).attr('checked', true);
-          $mixedButtons.eq(3).attr('checked', true);
+          $mixedButtons.eq(0).prop('checked', true);
+          $mixedButtons.eq(3).prop('checked', true);
 
           buttonsInstance = new GOVUK.SelectionButtons($mixedButtons, { 'selectedClass' : 'selectable-selected' });
           expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
@@ -278,17 +270,13 @@ describe("selection-buttons", function () {
       describe("If one of those checkboxes is clicked", function () {
         it("Should add the selected class to that checkbox", function () {
           buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
-          $checkboxButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $checkboxButtons.eq(0).trigger('click');
           expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should add the selected class to that checkbox", function () {
           buttonsInstance = new GOVUK.SelectionButtons($mixedButtons, { 'selectedClass' : 'selectable-selected' });
-          $checkboxButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $checkboxButtons.eq(0).trigger('click');
           expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
         });
       });
@@ -328,18 +316,14 @@ describe("selection-buttons", function () {
       describe("If a radio in the set is clicked", function () {
         it("Should mark that radio with the selected class", function () {
           buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
-          $radioButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $radioButtons.eq(0).trigger('click');
           expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should remove the selected class from all other radios", function () {
           buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
           $radioLabels.eq(1).addClass('selected');
-          $radioButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $radioButtons.eq(0).trigger('click');
           expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
         });
       });
@@ -361,13 +345,13 @@ describe("selection-buttons", function () {
         });
 
         it("Should mark checked radios with the selected class", function () {
-          $radioButtons.eq(0).attr('checked', true);
+          $radioButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
           expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should mark checked radios with the custom selected class if given", function () {
-          $radioButtons.eq(0).attr('checked', true);
+          $radioButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']", { 'selectedClass' : 'selectable-selected' });
           expect($radioLabels.eq(0).hasClass('selectable-selected')).toBe(true);
         });
@@ -408,18 +392,14 @@ describe("selection-buttons", function () {
       describe("If one of those radios is clicked", function () {
         it("Should mark that radio with the selected class", function () {
           buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
-          $radioButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $radioButtons.eq(0).trigger('click');
           expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should remove the selected class from all other radios", function () {
           buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
           $radioLabels.eq(1).addClass('selected');
-          $radioButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $radioButtons.eq(0).trigger('click');
           expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
         });
       });
@@ -439,21 +419,21 @@ describe("selection-buttons", function () {
         });
 
         it("Should mark checked checkboxes with the selected class", function () {
-          $checkboxButtons.eq(0).attr('checked', true);
+          $checkboxButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
           expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
         });
 
         it("Should mark all checked checkboxes with the selected class if there are more than one", function () {
-          $checkboxButtons.eq(0).attr('checked', true);
-          $checkboxButtons.eq(1).attr('checked', true);
+          $checkboxButtons.eq(0).prop('checked', true);
+          $checkboxButtons.eq(1).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
           expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
           expect($checkboxLabels.eq(1).hasClass('selected')).toBe(true);
         });
 
         it("Should mark checked checkboxes with the custom selected class if given", function () {
-          $checkboxButtons.eq(0).attr('checked', true);
+          $checkboxButtons.eq(0).prop('checked', true);
           buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']", { 'selectedClass' : 'selectable-selected' });
           expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
         });
@@ -514,8 +494,8 @@ describe("selection-buttons", function () {
       });
 
       it("Should mark checked checkboxes or radios with the selected class", function () {
-        $mixedButtons.eq(0).attr('checked', true);
-        $mixedButtons.eq(3).attr('checked', true);
+        $mixedButtons.eq(0).prop('checked', true);
+        $mixedButtons.eq(3).prop('checked', true);
 
         buttonsInstance = new GOVUK.SelectionButtons("label.selectable input");
         expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
@@ -523,8 +503,8 @@ describe("selection-buttons", function () {
       });
 
       it("Should mark checked checkboxes or radios with the custom selected class if given", function () {
-        $mixedButtons.eq(0).attr('checked', true);
-        $mixedButtons.eq(3).attr('checked', true);
+        $mixedButtons.eq(0).prop('checked', true);
+        $mixedButtons.eq(3).prop('checked', true);
 
         buttonsInstance = new GOVUK.SelectionButtons("label.selectable input", { 'selectedClass' : 'selectable-selected' });
         expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
@@ -547,9 +527,7 @@ describe("selection-buttons", function () {
           contentCache = $('#content').html();
           $('#content').html('');
           $('#content').html(contentCache);
-          $("label.selectable input[type='radio']").eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $("label.selectable input[type='radio']").eq(0).trigger('click');
           expect($("label.selectable input[type='radio']").eq(0).parent('label').hasClass('selected')).toBe(true);
         });
 
@@ -563,9 +541,7 @@ describe("selection-buttons", function () {
           $radioButtons = $("label.selectable input[type='radio']");
           $radioLabels = $radioButtons.parent('label');
           $radioLabels.eq(1).addClass('selected');
-          $radioButtons.eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $radioButtons.eq(0).trigger('click');
           expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
         });
       });
@@ -631,9 +607,7 @@ describe("selection-buttons", function () {
           contentCache = $('#content').html();
           $('#content').html('');
           $('#content').html(contentCache);
-          $("label.selectable input[type='checkbox']").eq(0)
-            .attr('checked', true)
-            .trigger('click');
+          $("label.selectable input[type='checkbox']").eq(0).trigger('click');
           expect($("label.selectable input[type='checkbox']").eq(0).parent('label').hasClass('selected')).toBe(true);
         });
       });

data/app/assets/spec/unit/modules/AutoTrackEventSpec.js

@@ -0,0 +1,49 @@
+describe('An auto event tracker', function() {
+  "use strict";
+
+  var tracker,
+      element;
+
+  beforeEach(function() {
+    GOVUK.analytics = {trackEvent: function() {}};
+    tracker = new GOVUK.Modules.AutoTrackEvent();
+  });
+
+  afterEach(function() {
+    delete GOVUK.analytics;
+  });
+
+  it('tracks non-interactive events on start', function() {
+    spyOn(GOVUK.analytics, 'trackEvent');
+
+    element = $('\
+      <div \
+        data-track-category="category"\
+        data-track-action="action">\
+        Some content\
+      </div>\
+    ');
+
+    tracker.start(element);
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+      'category', 'action', {nonInteraction: 1});
+  });
+
+  it('can track non-interactive events with optional label and value', function() {
+    spyOn(GOVUK.analytics, 'trackEvent');
+
+    element = $('\
+      <div \
+        data-track-category="category"\
+        data-track-action="action"\
+        data-track-label="label"\
+        data-track-value="10">\
+        Some content\
+      </div>\
+    ');
+
+    tracker.start(element);
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+      'category', 'action', {label: 'label', value: 10, nonInteraction: 1});
+  });
+});

metadata

@@ -1,52 +1,46 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 4.4.0
-  prerelease: 
+  version: 4.5.0
 platform: ruby
 authors:
 - Bradley Wright
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-05 00:00:00.000000000 Z
+date: 2015-11-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.1.0
 - !ruby/object:Gem::Dependency
   name: sass
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.2.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.2.0
 - !ruby/object:Gem::Dependency
   name: gem_publisher
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - '='
       - !ruby/object:Gem::Version
@@ -54,7 +48,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - '='
       - !ruby/object:Gem::Version
@@ -62,7 +55,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - '='
       - !ruby/object:Gem::Version
@@ -70,7 +62,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - '='
       - !ruby/object:Gem::Version
@@ -81,19 +72,16 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
-- .gitmodules
+- ".gitignore"
+- ".gitmodules"
+- ".ruby-version"
 - CONTRIBUTING.md
 - Gemfile
 - LICENCE
 - README.md
 - Rakefile
-- govuk_frontend_toolkit.gemspec
-- jenkins.sh
-- lib/govuk_frontend_toolkit.rb
-- lib/govuk_frontend_toolkit/engine.rb
-- lib/govuk_frontend_toolkit/version.rb
 - app/assets/.gitignore
+- app/assets/.ruby-version
 - app/assets/.scss-lint.yaml
 - app/assets/.travis.yml
 - app/assets/CHANGELOG.md
@@ -237,6 +225,8 @@ files:
 - app/assets/javascripts/govuk/analytics/external-link-tracker.js
 - app/assets/javascripts/govuk/analytics/google-analytics-universal-tracker.js
 - app/assets/javascripts/govuk/analytics/print-intent.js
+- app/assets/javascripts/govuk/modules.js
+- app/assets/javascripts/govuk/modules/auto-track-event.js
 - app/assets/javascripts/govuk/multivariate-test.js
 - app/assets/javascripts/govuk/primary-links.js
 - app/assets/javascripts/govuk/selection-buttons.js
@@ -253,6 +243,7 @@ files:
 - app/assets/spec/support/console-runner.js
 - app/assets/spec/support/load.js
 - app/assets/spec/support/run_jasmine_test.js
+- app/assets/spec/unit/ModulesSpec.js
 - app/assets/spec/unit/MultivariateTestSpec.js
 - app/assets/spec/unit/PrimaryLinksSpec.js
 - app/assets/spec/unit/SelectionButtonSpec.js
@@ -262,6 +253,7 @@ files:
 - app/assets/spec/unit/analytics/ErrorTrackingSpec.js
 - app/assets/spec/unit/analytics/ExternalLinkTrackerSpec.js
 - app/assets/spec/unit/analytics/GoogleAnalyticsUniversalTrackerSpec.js
+- app/assets/spec/unit/modules/AutoTrackEventSpec.js
 - app/assets/stylesheets/.gitkeep
 - app/assets/stylesheets/_colours.scss
 - app/assets/stylesheets/_conditionals.scss
@@ -277,36 +269,34 @@ files:
 - app/assets/stylesheets/design-patterns/_alpha-beta.scss
 - app/assets/stylesheets/design-patterns/_buttons.scss
 - app/assets/stylesheets/design-patterns/_media-player.scss
+- govuk_frontend_toolkit.gemspec
+- jenkins.sh
+- lib/govuk_frontend_toolkit.rb
+- lib/govuk_frontend_toolkit/engine.rb
+- lib/govuk_frontend_toolkit/version.rb
 homepage: https://github.com/alphagov/govuk_frontend_toolkit
 licenses:
 - MIT
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 - app
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
-      segments:
-      - 0
-      hash: -607685694881966234
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
-      segments:
-      - 0
-      hash: -607685694881966234
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.23
+rubygems_version: 2.4.5.1
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: Tools for building frontend applications
 test_files: []