govuk_frontend_toolkit 1.4.0 → 1.5.0

data/README.md

@@ -49,6 +49,19 @@ conditionals and typography mixins you should add:
     @import '_conditionals';
     @import '_typography';
 
+## Updating the version of the toolkit that's included with the gem
+
+1. Find the commit of [the toolkit][govuk_frontend_toolkit] you want to update to. In this
+   repository, `cd app/assets` and then run `git checkout <NEW TOOLKIT COMMIT>` to change
+   the git submodule
+2. Update the version number in `lib/govuk_frontend_toolkit/version.rb`
+3. Commit those two changes together and push them.
+
+Do not create a version tag in this repository - that's handled automatically by the
+job that publishes the gem to RubyGems.
+
 ## Licence
 
 Released under the MIT Licence, a copy of which can be found in the file `LICENCE`.
+
+[govuk_frontend_toolkit]: https://github.com/alphagov/govuk_frontend_toolkit

data/app/assets/Gruntfile.js

@@ -7,8 +7,8 @@ module.exports = function(grunt) {
           'javascripts/**/*.js'
         ],
         options: {
-          specs: 'spec/*Spec.js',
-          helpers: 'spec/*Helper.js'
+          specs: 'spec/unit/*Spec.js',
+          helpers: 'spec/unit/*Helper.js'
         }
       }
     }

data/app/assets/README.md

@@ -48,6 +48,12 @@ Install Node 0.8 or higher and PhantomJS.
     $ npm install
     $ npm test
 
+### Using the local test runner
+
+The test suite can be run by opening the `./spec/support/LocalTestRunner.html` file in a browser for a more detailed trace of errors.
+
+The files for unit tests and any supporting JavaScript should be added to `./spec/manifest.js` file.
+
 ## Usage
 
 At the top of a Sass file in your project you should use an `@import` rule
@@ -822,6 +828,24 @@ GOVUK.stickAtTopWhenScrolling.init();
 If you also include the `stopScrollingAtFooter` JavaScript this will also try
 and stop the elements before they get to the bottom.
 
+## Selection buttons
+
+Script to support a specific design of radio buttons and checkboxes wrapped in `<label>` tags:
+
+    <label>
+      <input type="radio" name="size" value="medium" />
+    </label>
+
+When the input is focused or its `checked` attribute is set, classes are added to their parent labels so their styling can show this.
+
+To apply this behaviour to elements with the above HTML pattern, call the `GOVUK.selectionButtons` function with their inputs:
+
+```
+var $buttons = $("label input[type='radio'], label input[type='checkbox']");
+GOVUK.selectionButtons($buttons);
+```
+
+Note that `GOVUK.selectionButtons` and the constructors it wraps, `GOVUK.RadioButtons` and `GOVUK.CheckboxButtons` use the `bind.js` polyfill.
 
 ## Licence
 

data/app/assets/javascripts/govuk/selection-buttons.js

@@ -0,0 +1,139 @@
+(function () {
+  "use strict"
+  var root = this,
+      $ = root.jQuery;
+
+  if (typeof GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  var BaseButtons = function ($elms, opts) {
+    this.$elms = $elms;
+    this.selectedClass = 'selected';
+    this.focusedClass = 'focused';
+    if (opts !== undefined) {
+      $.each(opts, function (optionName, optionObj) {
+        this[optionName] = optionObj;
+      }.bind(this));
+    }
+    this.setEventNames();
+    this.getSelections();
+    this.bindEvents();
+  };
+  BaseButtons.prototype.setEventNames = function () {
+    this.selectionEvents = 'click';
+    this.focusEvents = 'focus blur';
+  };
+  BaseButtons.prototype.markFocused = function ($elm, state) {
+    var elmId = $elm.attr('id');
+
+    if (state === 'focused') {
+      $elm.parent('label').addClass(this.focusedClass);
+    } else {
+      $elm.parent('label').removeClass(this.focusedClass);
+    }
+  };
+  BaseButtons.prototype.bindEvents = function () {
+    var selectionEventHandler = this.markSelected.bind(this),
+        focusEventHandler = this.markFocused.bind(this);
+
+    this.$elms
+      .on(this.selectionEvents, function (e) {
+        selectionEventHandler($(e.target));
+      })
+      .on(this.focusEvents, function (e) {
+        var state = (e.type === 'focus') ? 'focused' : 'blurred';
+
+        focusEventHandler($(e.target), state);
+      });
+  };
+
+  var RadioButtons = function ($elms, opts) {
+    BaseButtons.apply(this, arguments);
+  };
+  RadioButtons.prototype.setEventNames = function () {
+    // some browsers fire the 'click' when the selected radio changes by keyboard
+    this.selectionEvents = 'click change';
+    this.focusEvents = 'focus blur';
+  };
+  RadioButtons.prototype.getSelections = function () {
+    var selectionEventHandler = this.markSelected.bind(this),
+        selections = {};
+
+    $.each(this.$elms, function (index, elm) {
+      var $elm = $(elm),
+          radioName = $elm.attr('name');
+
+      if (typeof selections[radioName] === 'undefined') {
+        selections[radioName] = false;
+      }
+      if ($elm.is(':checked')) {
+        selectionEventHandler($elm);
+        selections[radioName] = $elm;
+      }
+    });
+    this.selections = selections;
+  };
+  RadioButtons.prototype.bindEvents = function () {
+    BaseButtons.prototype.bindEvents.call(this);
+  };
+  RadioButtons.prototype.markSelected = function ($elm) {
+    var radioName = $elm.attr('name'),
+        $previousSelection = this.selections[radioName];
+
+    if ($previousSelection) {
+      $previousSelection.parent('label').removeClass(this.selectedClass);
+    }
+    $elm.parent('label').addClass(this.selectedClass);
+    this.selections[radioName] = $elm;
+  };
+  RadioButtons.prototype.markFocused = function ($elm) {
+    BaseButtons.prototype.markFocused.apply(this, arguments);
+  };
+
+  var CheckboxButtons = function ($elms, opts) {
+    BaseButtons.apply(this, arguments);
+  };
+  CheckboxButtons.prototype.setEventNames = function () {
+    BaseButtons.prototype.setEventNames.call(this);
+  };
+  CheckboxButtons.prototype.getSelections = function () {
+    var selectionEventHandler = this.markSelected.bind(this);
+
+    this.$elms.each(function (idx, elm) {
+      var $elm = $(elm);
+
+      if ($elm.is(':checked')) {
+        selectionEventHandler($elm);
+      }
+    });
+  };
+  CheckboxButtons.prototype.bindEvents = function () {
+    BaseButtons.prototype.bindEvents.call(this);
+  };
+  CheckboxButtons.prototype.markSelected = function ($elm) {
+    if ($elm.is(':checked')) {
+      $elm.parent('label').addClass(this.selectedClass);
+    } else {
+      $elm.parent('label').removeClass(this.selectedClass);
+    }
+  };
+  CheckboxButtons.prototype.markFocused = function ($elm) {
+    BaseButtons.prototype.markFocused.apply(this, arguments);
+  };
+
+  root.GOVUK.RadioButtons = RadioButtons;
+  root.GOVUK.CheckboxButtons = CheckboxButtons;
+
+  var selectionButtons = function ($elms, opts) {
+    var $radios = $elms.filter('[type=radio]'),
+        $checkboxes = $elms.filter('[type=checkbox]');
+
+    if ($radios) {
+      new GOVUK.RadioButtons($radios, opts);
+    }
+    if ($checkboxes) {
+      new GOVUK.CheckboxButtons($checkboxes, opts);
+    }
+  };
+
+  root.GOVUK.selectionButtons = selectionButtons;
+}).call(this);

data/app/assets/javascripts/vendor/polyfills/bind.js

@@ -0,0 +1,40 @@
+// Function.prototype.bind
+//
+// A polyfill for Function.prototype.bind. Which lets you bind a defined
+// value to the `this` keyword in a function call.
+//
+// Bind is natively supported in:
+//   IE9+
+//   Chrome 7+
+//   Firefox 4+
+//   Safari 5.1.4+
+//   iOS 6+
+//   Android Browser 4+
+//   Chrome for Android 0.16+
+//
+// Originally from:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function (oThis) {
+    if (typeof this !== "function") {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    }
+
+    var aArgs = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP = function () {},
+        fBound = function () {
+          return fToBind.apply(this instanceof fNOP && oThis
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}

data/app/assets/spec/SelectionButtonSpec.js

@@ -0,0 +1,341 @@
+describe("selection-buttons", function () {
+  var $radioButtons,
+      $radioLabels,
+      $checkboxButtons,
+      $checkboxLabels;
+
+  beforeEach(function () {
+    $radioLabels = $(
+        '<label class="selectable">' +
+          'Small' +
+          '<input type="radio" name="size" id="small" value="small" />' +
+        '</label>' +
+        '<label class="selectable">' +
+          'Medium' +
+          '<input type="radio" name="size" id="medium" value="medium" />' +
+        '</label>' +
+        '<label class="selectable">' +
+          'Large' +
+          '<input type="radio" name="size" id="large" value="large" />' +
+        '</label>'
+    );
+    $checkboxLabels = $(
+        '<label class="selectable">' +
+          'Eggs' +
+          '<input id="eggs" name="food" value="eggs" type="checkbox" />' +
+        '</label>' +
+        '<label class="selectable">' +
+          'Bread' +
+          '<input id="bread" name="food" value="bread" type="checkbox" />' +
+        '</label>' +
+        '<label class="selectable">' +
+          'Fruit' +
+          '<input id="fruit" name="food" value="fruit" type="checkbox" />' +
+        '</label>'
+    );
+    $radioButtons = $radioLabels.find('input');
+    $checkboxButtons = $checkboxLabels.find('input');
+    $(document.body).append($radioLabels);
+    $(document.body).append($checkboxLabels);
+  });
+
+  afterEach(function () {
+    $radioLabels.remove();
+    $checkboxLabels.remove();
+  });
+
+  describe("RadioButtons", function () {
+    it("Should create a new instance with the correct interface", function () {
+      var buttons = new GOVUK.RadioButtons($radioButtons);
+
+      expect(buttons.getSelections).toBeDefined();
+      expect(buttons.bindEvents).toBeDefined();
+      expect(buttons.markSelected).toBeDefined();
+      expect(buttons.markFocused).toBeDefined();
+    });
+
+    it("Should set the selectedClass property if sent in as an option", function () {
+      var buttons = new GOVUK.RadioButtons($radioButtons, { 'selectedClass' : 'selectable-selected' });
+
+      expect(buttons.selectedClass).toEqual('selectable-selected');
+    });
+
+    it("Should set the focusedClass property if sent in as an option", function () {
+      var buttons = new GOVUK.RadioButtons($radioButtons, { 'focusedClass' : 'selectable-focused' });
+
+      expect(buttons.focusedClass).toEqual('selectable-focused');
+    });
+
+    describe("getSelections method", function () {
+      it("Should mark the label of any checked radios as selected", function () {
+        var radioButtonsMock = {
+              'markSelected' : function () {},
+              '$elms' : $radioButtons
+            };
+
+        $radioButtons.eq(0).attr('checked', true);
+        spyOn(radioButtonsMock, 'markSelected');
+        GOVUK.RadioButtons.prototype.getSelections.call(radioButtonsMock);
+        expect(radioButtonsMock.markSelected).toHaveBeenCalled();
+      });
+    });
+
+    describe("setEventNames method", function () {
+      it("Should set the selectionEvents and focusEvents properties on the instance", function () {
+        var radioButtonsMock = {};
+
+        GOVUK.RadioButtons.prototype.setEventNames.call(radioButtonsMock);
+        expect(typeof radioButtonsMock.focusEvents !== 'undefined').toBe(true);
+        expect(typeof radioButtonsMock.selectionEvents !== 'undefined').toBe(true);
+      });
+    });
+
+    describe("bindEvents method", function () {
+      it("Should bind click and change events to each radio", function () {
+        var radioButtonsMock = {
+              '$elms' : $radioButtons,
+              'selectionEvents' : 'click change',
+              'focusEvents' : 'focus blur',
+              'markSelected' : function () {},
+              'markFocused' : function () {}
+            },
+            eventsBound = false;
+
+        spyOn($.fn, 'on').andCallFake(function (evt, func) {
+          if (evt === 'click change') {
+            eventsBound = true;
+          }
+          return $.fn;
+        });
+        expect($.fn.on.calls.length).toEqual(0);
+        GOVUK.RadioButtons.prototype.bindEvents.call(radioButtonsMock);
+        expect($.fn.on).toHaveBeenCalled();
+        expect(eventsBound).toEqual(true);
+      });
+
+      it("Should call the markSelected method on any checked radio that's the target of an event", function () {
+        var radioButtonsMock = {
+              '$elms' : $radioButtons,
+              'selectionEvents' : 'click change',
+              'focusEvents' : 'focus blur',
+              'markSelected' : function () {},
+              'markFocused' : function () {}
+              },
+            eventsBound = false;
+
+        spyOn($.fn, 'on').andCallFake(function (evt, func) {
+          if (evt === 'click change') {
+            callback = func;
+          }
+          return $.fn;
+        });
+        spyOn(radioButtonsMock, 'markSelected');
+        radioButtonsMock.$elms.eq(0).attr('checked', true);
+        GOVUK.RadioButtons.prototype.bindEvents.call(radioButtonsMock);
+        callback({ 'target' : radioButtonsMock.$elms[0] });
+        expect(radioButtonsMock.markSelected).toHaveBeenCalled();
+      });
+    });
+
+    describe("markSelected method", function () {
+      it("Should add the selectedClass class to the label of the sent in radio", function () {
+        var radioButtonsMock = {
+              'selections' : {
+                'size' : false
+              },
+              'selectedClass' : 'selected'
+            },
+            $clickedRadio = $radioButtons.eq(0);
+
+        GOVUK.RadioButtons.prototype.markSelected.call(radioButtonsMock, $clickedRadio);
+        expect($clickedRadio.parent('label').hasClass('selected')).toEqual(true);
+      });
+
+      it("Should remove the selectedClass class from the label of the previously selected radio", function () {
+        var radioButtonsMock = {
+              'selections' : {
+                'size' : $radioButtons.eq(1)
+              },
+              'selectedClass' : 'selected'
+            },
+            $clickedRadio = $radioButtons.eq(0);
+
+        $radioLabels.eq(1).addClass('selected');
+        GOVUK.RadioButtons.prototype.markSelected.call(radioButtonsMock, $clickedRadio);
+        expect($('#medium').parent('label').hasClass('selected')).toEqual(false);
+
+      });
+    });
+
+    describe("markFocused method", function () {
+      var radioButtonsMock = {
+            'focused' : false,
+            'focusedClass' : 'focused'
+          };
+
+      it("Should add the focusedClass class to the sent radio if it is focused", function () {
+        GOVUK.RadioButtons.prototype.markFocused.apply(radioButtonsMock, [$radioButtons.eq(0), 'focused']);
+
+        expect($radioLabels.eq(0).hasClass(radioButtonsMock.focusedClass)).toBe(true);
+      });
+
+      it("Should remove the focusedClass class from the sent radio if it is blurred", function () {
+        $radioLabels.eq(0).addClass(radioButtonsMock.focusedClass);
+        GOVUK.RadioButtons.prototype.markFocused.apply(radioButtonsMock, [$radioButtons.eq(0), 'blurred']);
+
+        expect($radioLabels.eq(0).hasClass(radioButtonsMock.focusedClass)).toBe(false);
+      });
+    });
+  });
+
+  describe("CheckboxButtons", function () {
+    it("Should create a new instance with the correct interface", function () {
+      var buttons = new GOVUK.CheckboxButtons($checkboxButtons);
+
+      expect(buttons.getSelections).toBeDefined();
+      expect(buttons.bindEvents).toBeDefined();
+      expect(buttons.markSelected).toBeDefined();
+      expect(buttons.markFocused).toBeDefined();
+    });
+
+    describe("getSelections method", function () {
+      it("Should add the selectedClass class to the label of a checkbox that is checked", function () {
+        var checkboxButtonsMock = {
+              '$elms' : $checkboxButtons,
+              'markSelected' : function () {}
+            };
+
+        checkboxButtonsMock.$elms.eq(0).attr('checked', true);
+        spyOn(checkboxButtonsMock, 'markSelected');
+        GOVUK.CheckboxButtons.prototype.getSelections.call(checkboxButtonsMock);
+        expect(checkboxButtonsMock.markSelected).toHaveBeenCalled();
+      });
+    });
+
+    describe("setEventNames method", function () {
+      it("Should set the selectionEvents and focusEvents properties on the instance", function () {
+        var checkboxButtonsMock = {};
+
+        GOVUK.CheckboxButtons.prototype.setEventNames.call(checkboxButtonsMock);
+        expect(typeof checkboxButtonsMock.focusEvents !== 'undefined').toBe(true);
+        expect(typeof checkboxButtonsMock.selectionEvents !== 'undefined').toBe(true);
+      });
+    });
+
+    describe("bindEvents method", function () {
+      var checkboxButtonsMock;
+
+      beforeEach(function () {
+        checkboxButtonsMock = {
+          '$elms' : $checkboxButtons
+        };
+      });
+
+      it("Should add a click event to each checkbox that fires the markSelected method", function () {
+        var eventCalled = false;
+
+        checkboxButtonsMock.markSelected = function () {};
+        checkboxButtonsMock.markFocused = function () {};
+        checkboxButtonsMock.selectionEvents = 'click';
+        checkboxButtonsMock.focusEvents = 'focus blur';
+        spyOn(checkboxButtonsMock, 'markSelected');
+        spyOn($.fn, 'on').andCallFake(function (evt, func) {
+          if (evt === 'click') {
+            eventCalled = true;
+            callback = func;
+          }
+          return $.fn;
+        });
+        $checkboxButtons.eq(0).attr('checked', true);
+        GOVUK.CheckboxButtons.prototype.bindEvents.call(checkboxButtonsMock);
+        expect(eventCalled).toBe(true);
+        callback({ 'target' : $checkboxButtons.eq(0) });
+        expect(checkboxButtonsMock.markSelected).toHaveBeenCalled();
+      });
+
+      it("Should add focus and blur events to each checkbox that fires the markFocused method", function () {
+        var eventCalled = false;
+
+        checkboxButtonsMock.markFocused = function () {};
+        checkboxButtonsMock.markSelected = function () {};
+        checkboxButtonsMock.selectionEvents = 'click';
+        checkboxButtonsMock.focusEvents = 'focus blur';
+        spyOn(checkboxButtonsMock, 'markFocused');
+        spyOn($.fn, 'on').andCallFake(function (evt, func) {
+          if (evt === 'focus blur') {
+            eventCalled = true;
+            callback = func;
+          }
+          return $.fn;
+        });
+        GOVUK.CheckboxButtons.prototype.bindEvents.call(checkboxButtonsMock);
+        expect(eventCalled).toBe(true);
+        callback({
+          'target' : $checkboxButtons.eq(0),
+          'type' : 'focus'
+        });
+        expect(checkboxButtonsMock.markFocused).toHaveBeenCalled();
+      });
+    });
+
+    describe("markSelected method", function () {
+      var checkboxButtonsMock = {
+            'selectedClass' : 'selected'
+          };
+
+      it("Should add the selectedClass class to a checked checkbox", function () {
+        $checkboxButtons.eq(0).attr('checked', true);
+        GOVUK.CheckboxButtons.prototype.markSelected.call(checkboxButtonsMock, $checkboxButtons.eq(0));
+        expect($checkboxLabels.eq(0).hasClass(checkboxButtonsMock.selectedClass)).toBe(true);
+      });
+
+      it("Should remove the selectedClass class from an unchecked checkbox", function () {
+        $checkboxButtons.eq(0).addClass(checkboxButtonsMock.selectedClass);
+        GOVUK.CheckboxButtons.prototype.markSelected.call(checkboxButtonsMock, $checkboxButtons.eq(0));
+        expect($checkboxLabels.eq(0).hasClass(checkboxButtonsMock.selectedClass)).toBe(false);
+      });
+    });
+
+    describe("markFocused method", function () {
+      var checkboxButtonsMock = {
+            'focused' : false,
+            'focusedClass' : 'focused'
+          };
+
+      it("Should add the focusedClass class to the sent radio if it is focused", function () {
+        GOVUK.CheckboxButtons.prototype.markFocused.apply(checkboxButtonsMock, [$checkboxButtons.eq(0), 'focused']);
+
+        expect($checkboxLabels.eq(0).hasClass(checkboxButtonsMock.focusedClass)).toBe(true);
+      });
+
+      it("Should remove the focusedClass class from the sent radio if it is blurred", function () {
+        $checkboxLabels.eq(0).addClass(checkboxButtonsMock.focusedClass);
+        GOVUK.CheckboxButtons.prototype.markFocused.apply(checkboxButtonsMock, [$checkboxButtons.eq(0), 'blurred']);
+
+        expect($checkboxLabels.eq(0).hasClass(checkboxButtonsMock.focusedClass)).toBe(false);
+      });
+    });
+  });
+
+  describe("selectionButtons", function () {
+    it("Should create an instance of RadioButtons for a set of radios", function () {
+      spyOn(GOVUK, 'RadioButtons');
+      GOVUK.selectionButtons($radioButtons);
+      expect(GOVUK.RadioButtons).toHaveBeenCalled();
+    }); 
+
+    it("Should create an instance of CheckboxButtons for a set of checkboxes", function () {
+      spyOn(GOVUK, 'CheckboxButtons');
+      GOVUK.selectionButtons($checkboxButtons);
+      expect(GOVUK.CheckboxButtons).toHaveBeenCalled();
+    }); 
+
+    it("Should create instances of RadioButtons and CheckboxButtons for a set containing radios and checkboxes", function () {
+      spyOn(GOVUK, 'RadioButtons');
+      spyOn(GOVUK, 'CheckboxButtons');
+      GOVUK.selectionButtons($checkboxButtons.add($radioButtons));
+      expect(GOVUK.RadioButtons).toHaveBeenCalled();
+      expect(GOVUK.CheckboxButtons).toHaveBeenCalled();
+    }); 
+  });
+});

data/app/assets/spec/manifest.js

@@ -0,0 +1,15 @@
+// files are loaded from the /spec/support folder so paths are relative to that
+var manifest = {
+  support : [
+    '../../node_modules/jquery-browser/lib/jquery.js',
+    '../../javascripts/govuk/multivariate-test.js',
+    '../../javascripts/govuk/primary-links.js',
+    '../../javascripts/govuk/stick-at-top-when-scrolling.js',
+    '../../javascripts/govuk/stop-scrolling-at-footer.js'
+  ],
+  test : [
+    '../unit/MultivariateTestSpec.js',
+    '../unit/PrimaryLinksSpec.js',
+    '../unit/StickAtTopWhenScrollingSpec.js'
+  ]
+};

data/app/assets/spec/support/LocalTestRunner.html

@@ -0,0 +1,21 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Jasmine Test Runner</title>
+
+  <link rel="stylesheet" type="text/css" href="../../node_modules/grunt-contrib-jasmine/vendor/jasmine-1.3.1/jasmine.css">
+  <style>
+    #wrapper { display: none; }
+  </style>
+
+  <!-- JASMINE FILES -->
+  <script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/vendor/jasmine-1.3.1/jasmine.js"></script>
+  <script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/vendor/jasmine-1.3.1/jasmine-html.js"></script>
+
+  <script type="text/javascript" src="./console-runner.js"></script>
+  <script type="text/javascript" src="./load.js"></script>
+</head>
+<body>
+
+</body>
+</html>

data/app/assets/spec/support/console-runner.js

@@ -0,0 +1,103 @@
+/**
+ * Jasmine Reporter that outputs test results to the browser console.
+ * Useful for running in a headless environment such as PhantomJs, ZombieJs etc.
+ *
+ * Usage (from your html file that loads jasmine):
+ *   jasmine.getEnv().addReporter(new jasmine.ConsoleReporter());
+ *   jasmine.getEnv().execute();
+ */
+
+(function(jasmine, console) {
+  if (!jasmine) {
+    throw "jasmine library isn't loaded!";
+  }
+
+  var ANSI = {}
+  ANSI.color_map = {
+    "green": 32,
+    "red": 31
+  }
+
+  ANSI.colorize_text = function(text, color) {
+    var color_code = this.color_map[color];
+    return "\033[" + color_code + "m" + text + "\033[0m";
+  }
+
+  var ConsoleReporter = function() {
+    if (!console || !console.log) { throw "console isn't present!"; }
+    this.status = this.statuses.stopped;
+  };
+
+  var proto = ConsoleReporter.prototype;
+  proto.statuses = {
+    stopped : "stopped",
+    running : "running",
+    fail    : "fail",
+    success : "success"
+  };
+
+  proto.reportRunnerStarting = function(runner) {
+    this.status = this.statuses.running;
+    this.start_time = (new Date()).getTime();
+    this.executed_specs = 0;
+    this.passed_specs = 0;
+    this.log("Starting...");
+  };
+
+  proto.reportRunnerResults = function(runner) {
+    var failed = this.executed_specs - this.passed_specs;
+    var spec_str = this.executed_specs + (this.executed_specs === 1 ? " spec, " : " specs, ");
+    var fail_str = failed + (failed === 1 ? " failure in " : " failures in ");
+    var color = (failed > 0)? "red" : "green";
+    var dur = (new Date()).getTime() - this.start_time;
+
+    this.log("");
+    this.log("Finished");
+    this.log("-----------------");
+    this.log(spec_str + fail_str + (dur/1000) + "s.", color);
+
+    this.status = (failed > 0)? this.statuses.fail : this.statuses.success;
+
+    /* Print something that signals that testing is over so that headless browsers
+       like PhantomJs know when to terminate. */
+    this.log("");
+    this.log("ConsoleReporter finished");
+  };
+
+
+  proto.reportSpecStarting = function(spec) {
+    this.executed_specs++;
+  };
+
+  proto.reportSpecResults = function(spec) {
+    if (spec.results().passed()) {
+      this.passed_specs++;
+      return;
+    }
+
+    var resultText = spec.suite.description + " : " + spec.description;
+    this.log(resultText, "red");
+
+    var items = spec.results().getItems()
+    for (var i = 0; i < items.length; i++) {
+      var trace = items[i].trace.stack || items[i].trace;
+      this.log(trace, "red");
+    }
+  };
+
+  proto.reportSuiteResults = function(suite) {
+    if (!suite.parentSuite) { return; }
+    var results = suite.results();
+    var failed = results.totalCount - results.passedCount;
+    var color = (failed > 0)? "red" : "green";
+    this.log(suite.description + ": " + results.passedCount + " of " + results.totalCount + " passed.", color);
+  };
+
+  proto.log = function(str, color) {
+    var text = (color != undefined)? ANSI.colorize_text(str, color) : str;
+    console.log(text)
+  };
+
+  jasmine.ConsoleReporter = ConsoleReporter;
+})(jasmine, console);
+

data/app/assets/spec/support/load.js

@@ -0,0 +1,55 @@
+(function (root) {
+  "use strict"
+  var loadedScripts = 0,
+      totalScripts,
+      merge,
+      loadScript,
+      runJasmine,
+      manifestScript;
+
+  merge = function (arrays) {
+    var resultingArray = [],
+        workingArray,
+        a, b, x, y;
+
+    for (a = 0, b = arrays.length; a < b; a++) {
+      workingArray = arrays[a];
+      for (x = 0, y = workingArray.length; x < y; x++) {
+        resultingArray.push(workingArray[x]);
+      }
+    }
+    return resultingArray;
+  };
+  loadScript = function (src, nextIdx) {
+    var script = document.createElement('script'),
+        nextScript; 
+
+    script.type = 'text/javascript';
+    script.src = src;
+
+    document.getElementsByTagName('head')[0].appendChild(script);
+    if (nextIdx === undefined) { return script; }
+    script.onload = function () {
+      if (nextIdx < totalScripts.length) {
+        loadScript(totalScripts[nextIdx], nextIdx + 1);
+      } else {
+        runJasmine();
+      }
+    };
+    return script;
+  };
+  runJasmine = function () {
+    var console_reporter = new jasmine.ConsoleReporter()
+    jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
+    jasmine.getEnv().addReporter(console_reporter);
+    jasmine.getEnv().execute();
+  };
+  manifestScript = loadScript('../manifest.js');
+
+  manifestScript.onload = function () {
+    var idx = 0;
+  
+    totalScripts = merge([manifest.support, manifest.test]);
+    loadScript(totalScripts[idx], idx + 1);
+  };
+}).call(this);

data/app/assets/spec/support/run_jasmine_test.js

@@ -0,0 +1,62 @@
+/**
+ * Runs a Jasmine Suite from an html page.
+ * `page` is a PhantomJs page object.
+ * `exit_func` is the function to call in order to exit the script.
+ */
+
+var PhantomJasmineRunner, address, page, runner;
+
+PhantomJasmineRunner = (function() {
+
+  function PhantomJasmineRunner(page, exit_func) {
+    this.page = page;
+    this.exit_func = exit_func != null ? exit_func : phantom.exit;
+    this.tries = 0;
+    this.max_tries = 10;
+  }
+
+  PhantomJasmineRunner.prototype.get_status = function() {
+    return this.page.evaluate(function() {
+      return console_reporter.status;
+    });
+  };
+
+  PhantomJasmineRunner.prototype.terminate = function() {
+    switch (this.get_status()) {
+    case "success":
+      return this.exit_func(0);
+    case "fail":
+      return this.exit_func(1);
+    default:
+      return this.exit_func(2);
+    }
+  };
+
+  return PhantomJasmineRunner;
+
+})();
+
+if (phantom.args.length === 0) {
+  console.log("Need a url as the argument");
+  phantom.exit(1);
+}
+
+page = new WebPage();
+
+runner = new PhantomJasmineRunner(page);
+
+page.onConsoleMessage = function(msg) {
+  console.log(msg);
+  if (msg === "ConsoleReporter finished") {
+    return runner.terminate();
+  }
+};
+
+address = phantom.args[0];
+
+page.open(address, function(status) {
+  if (status !== "success") {
+    console.log("can't load the address!");
+    return phantom.exit(1);
+  }
+});

data/lib/govuk_frontend_toolkit/version.rb

@@ -1,3 +1,3 @@
 module GovUKFrontendToolkit
-  VERSION = "1.4.0"
+  VERSION = "1.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 1.4.0
+  version: 1.5.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-26 00:00:00.000000000 Z
+date: 2014-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -224,16 +224,24 @@ files:
 - app/assets/images/player-icon-volume.png
 - app/assets/javascripts/govuk/multivariate-test.js
 - app/assets/javascripts/govuk/primary-links.js
+- app/assets/javascripts/govuk/selection-buttons.js
 - app/assets/javascripts/govuk/stick-at-top-when-scrolling.js
 - app/assets/javascripts/govuk/stop-scrolling-at-footer.js
 - app/assets/javascripts/govuk_toolkit.js
 - app/assets/javascripts/stageprompt.js
 - app/assets/javascripts/vendor/jquery/jquery.player.min.js
+- app/assets/javascripts/vendor/polyfills/bind.js
 - app/assets/jenkins.sh
 - app/assets/package.json
-- app/assets/spec/MultivariateTestSpec.js
-- app/assets/spec/PrimaryLinksSpec.js
-- app/assets/spec/StickAtTopWhenScrollingSpec.js
+- app/assets/spec/SelectionButtonSpec.js
+- app/assets/spec/manifest.js
+- app/assets/spec/support/LocalTestRunner.html
+- 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/MultivariateTestSpec.js
+- app/assets/spec/unit/PrimaryLinksSpec.js
+- app/assets/spec/unit/StickAtTopWhenScrollingSpec.js
 - app/assets/stylesheets/.gitkeep
 - app/assets/stylesheets/_colours.scss
 - app/assets/stylesheets/_conditionals.scss
@@ -264,7 +272,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3563452542867821047
+      hash: 1799776564228403607
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -273,7 +281,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3563452542867821047
+      hash: 1799776564228403607
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23