govuk_frontend_toolkit - npm Package Compare versions

Comparing version 1.7.0 to 2.0.0

govuk_frontend_toolkit/CHANGELOG.md

@@ -0,1 +1,6 @@
+# 2.0.0
+
+- Add support for selection-button events to be document-level https://github.com/alphagov/govuk_frontend_toolkit/pull/139
+- The `GOVUK.selectionButtons` interface is now deprecated. Details are in the [README](https://github.com/alphagov/govuk_frontend_toolkit#deprecated-functionality).
+
 # 1.7.0
@@ -2,0 +7,0 @@

govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js

@@ -8,4 +8,5 @@ (function () {
 
-  var BaseButtons = function ($elms, opts) {
-    this.$elms = $elms;
+  var SelectionButtons = function (elmsOrSelector, opts) {
+    var $elms;
+
     this.selectedClass = 'selected';
@@ -18,13 +19,29 @@ this.focusedClass = 'focused';
     }
-    this.setEventNames();
-    this.getSelections();
-    this.bindEvents();
+    if (typeof elmsOrSelector === 'string') {
+      $elms = $(elmsOrSelector);
+      this.selector = elmsOrSelector;
+      this.setInitialState($(this.selector));
+    } else {
+      this.$elms = elmsOrSelector;
+      this.setInitialState(this.$elms);
+    }
+    this.addEvents();
   };
-  BaseButtons.prototype.setEventNames = function () {
-    this.selectionEvents = 'click';
-    this.focusEvents = 'focus blur';
+  SelectionButtons.prototype.addEvents = function () {
+    if (typeof this.$elms !== 'undefined') {
+      this.addElementLevelEvents();
+    } else {
+      this.addDocumentLevelEvents();
+    }
   };
-  BaseButtons.prototype.markFocused = function ($elm, state) {
-    var elmId = $elm.attr('id');
+  SelectionButtons.prototype.setInitialState = function ($elms) {
+    $elms.each(function (idx, elm) {
+      var $elm = $(elm);
 
+      if ($elm.is(':checked')) {
+        this.markSelected($elm);
+      }
+    }.bind(this));
+  };
+  SelectionButtons.prototype.markFocused = function ($elm, state) {
     if (state === 'focused') {
@@ -36,105 +53,62 @@ $elm.parent('label').addClass(this.focusedClass);
   };
-  BaseButtons.prototype.bindEvents = function () {
-    var selectionEventHandler = this.markSelected.bind(this),
-        focusEventHandler = this.markFocused.bind(this);
+  SelectionButtons.prototype.markSelected = function ($elm) {
+    var radioName;
 
-    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);
-
-    this.selections = {};
-    $.each(this.$elms, function (index, elm) {
-      var $elm = $(elm),
-          radioName = $elm.attr('name');
-
-      if (typeof this.selections[radioName] === 'undefined') {
-        this.selections[radioName] = false;
-      }
+    if ($elm.attr('type') === 'radio') {
+      radioName = $elm.attr('name'),
+      $($elm[0].form).find('input[name="' + radioName + '"]')
+        .parent('label')
+        .removeClass(this.selectedClass);
+      $elm.parent('label').addClass(this.selectedClass);
+    } else { // checkbox
       if ($elm.is(':checked')) {
-        selectionEventHandler($elm);
+        $elm.parent('label').addClass(this.selectedClass);
+      } else {
+        $elm.parent('label').removeClass(this.selectedClass);
       }
-    }.bind(this));
+    }
   };
-  RadioButtons.prototype.bindEvents = function () {
-    BaseButtons.prototype.bindEvents.call(this);
-  };
-  RadioButtons.prototype.markSelected = function ($elm) {
-    var radioName = $elm.attr('name'),
-        $previousSelection = this.selections[radioName];
+  SelectionButtons.prototype.addElementLevelEvents = function () {
+    this.clickHandler = this.getClickHandler();
+    this.focusHandler = this.getFocusHandler({ 'level' : 'element' });
 
-    if ($previousSelection) {
-      $previousSelection.parent('label').removeClass(this.selectedClass);
-    }
-    $elm.parent('label').addClass(this.selectedClass);
-    this.selections[radioName] = $elm;
+    this.$elms
+      .on('click', this.clickHandler)
+      .on('focus blur', this.focusHandler);
   };
-  RadioButtons.prototype.markFocused = function ($elm) {
-    BaseButtons.prototype.markFocused.apply(this, arguments);
-  };
+  SelectionButtons.prototype.addDocumentLevelEvents = function () {
+    this.clickHandler = this.getClickHandler();
+    this.focusHandler = this.getFocusHandler({ 'level' : 'document' });
 
-  var CheckboxButtons = function ($elms, opts) {
-    BaseButtons.apply(this, arguments);
+    $(document)
+      .on('click', this.selector, this.clickHandler)
+      .on('focus blur', this.selector, this.focusHandler);
   };
-  CheckboxButtons.prototype.setEventNames = function () {
-    BaseButtons.prototype.setEventNames.call(this);
+  SelectionButtons.prototype.getClickHandler = function () {
+    return function (e) {
+      this.markSelected($(e.target));
+    }.bind(this);
   };
-  CheckboxButtons.prototype.getSelections = function () {
-    var selectionEventHandler = this.markSelected.bind(this);
+  SelectionButtons.prototype.getFocusHandler = function (opts) {
+    var focusEvent = (opts.level === 'document') ? 'focusin' : 'focus'
 
-    this.$elms.each(function (idx, elm) {
-      var $elm = $(elm);
+    return function (e) {
+      var state = (e.type === focusEvent) ? 'focused' : 'blurred';
 
-      if ($elm.is(':checked')) {
-        selectionEventHandler($elm);
-      }
-    });
+      this.markFocused($(e.target), state);
+    }.bind(this);
   };
-  CheckboxButtons.prototype.bindEvents = function () {
-    BaseButtons.prototype.bindEvents.call(this);
-  };
-  CheckboxButtons.prototype.markSelected = function ($elm) {
-    if ($elm.is(':checked')) {
-      $elm.parent('label').addClass(this.selectedClass);
+  SelectionButtons.prototype.destroy = function () {
+    if (typeof this.selector !== 'undefined') {
+      $(document)
+        .off('click', this.selector, this.clickHandler)
+        .off('focus blur', this.selector, this.focusHandler);
     } else {
-      $elm.parent('label').removeClass(this.selectedClass);
+      this.$elms
+        .off('click', this.clickHandler)
+        .off('focus blur', this.focusHandler);
     }
   };
-  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;
+  root.GOVUK.SelectionButtons = SelectionButtons;
 }).call(this);

govuk_frontend_toolkit/README.md

@@ -865,3 +865,3 @@ # GOV.UK Frontend Toolkit
 
-Script to support a specific design of radio buttons and checkboxes wrapped in `<label>` tags:
+Script to support a design of radio buttons and checkboxes requiring them to be wrapped in `<label>` tags:
 
@@ -874,20 +874,54 @@ <label>
 
-To apply this behaviour to elements with the above HTML pattern, call the `GOVUK.selectionButtons` function with their inputs:
+### Usage
 
+#### GOVUK.SelectionButtons
+
+To apply this behaviour to elements with the above HTML pattern, call the `GOVUK.SelectionButtons` constructor with their inputs:
+
 ```
 var $buttons = $("label input[type='radio'], label input[type='checkbox']");
-GOVUK.selectionButtons($buttons);
+var selectionButtons = new GOVUK.SelectionButtons($buttons);
 ```
 
-The classes that get added can be passed in as options:
+You can also call `GOVUK.SelectionButtons` with a selector:
 
 ```
+var selectionButtons = new GOVUK.SelectionButtons("label input[type='radio'], label input[type='checkbox']");
+```
+
+This will bind all events to the document, meaning any changes to content (for example, by AJAX) will not effect the button's behaviour.
+
+The classes that get added to the `<label>` tags can be passed in as options:
+
+```
 var $buttons = $("label input[type='radio'], label input[type='checkbox']");
-GOVUK.selectionButtons($buttons, { focusedClass : 'selectable-focused', selectedClass : 'selectable-selected' });
+var selectionButtons = new GOVUK.SelectionButtons($buttons, { focusedClass : 'selectable-focused', selectedClass : 'selectable-selected' });
+
+var selectionButtons = new GOVUK.SelectionButtons("label input[type='radio'], label input[type='checkbox']", { focusedClass : 'selectable-focused', selectedClass : 'selectable-selected' });
 ```
 
-Note that `GOVUK.selectionButtons` and the constructors it wraps, `GOVUK.RadioButtons` and `GOVUK.CheckboxButtons` use the `bind.js` polyfill.
+#### destroy method
 
+The returned instance object includes a `destroy` method to remove all events bound to either the elements or the document.
+
+Using any of the `selectionButtons` objects created above, it can be called like so:
+
+```
+selectionButtons.destroy();
+```
+
+### Deprecated functionality
+
+The previous method of calling selection buttons is now deprecated. If you need to call them using this method, you will need to define this function:
+
+```
+GOVUK.selectionButtons = function (elms, opts) {
+  new GOVUK.SelectionButtons(elms, opts);
+};
+```
+
+This method will mean the `destroy` method is not available to call.
+
 ## Licence
 
 Released under the MIT Licence, a copy of which can be found in the file `LICENCE`.

govuk_frontend_toolkit/spec/unit/SelectionButtonSpec.js

@@ -5,3 +5,4 @@ describe("selection-buttons", function () {
       $checkboxButtons,
-      $checkboxLabels;
+      $checkboxLabels,
+      buttonsInstance;
 
@@ -39,307 +40,728 @@ beforeEach(function () {
     $checkboxButtons = $checkboxLabels.find('input');
-    $(document.body).append($radioLabels);
-    $(document.body).append($checkboxLabels);
+    $radioForm = $('<form action="" method="post" />');
+    $checkboxForm = $('<form action="" method="post" />');
+    $content = $('<div id="content" />');
+    $radioForm.append($radioLabels);
+    $checkboxForm.append($checkboxLabels);
+    $content.append($radioForm);
+    $content.append($checkboxForm);
+    $(document.body).append($content);
   });
 
   afterEach(function () {
-    $radioLabels.remove();
-    $checkboxLabels.remove();
+    $content.remove();
   });
 
-  describe("RadioButtons", function () {
-    it("Should create a new instance with the correct interface", function () {
-      var buttons = new GOVUK.RadioButtons($radioButtons);
+  describe("When buttonsInstance = new GOVUK.SelectionButtons is called with a jQuery object", function () {
+    describe("When that object contains only radio inputs", function () {
+      describe("At the point it is called", function () {
+        it("Should do nothing if no radios are checked", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
+          expect($radioLabels.eq(0).hasClass('selected')).toBe(false);
+          expect($radioLabels.eq(1).hasClass('selected')).toBe(false);
+          expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
+        });
 
-      expect(buttons.getSelections).toBeDefined();
-      expect(buttons.bindEvents).toBeDefined();
-      expect(buttons.markSelected).toBeDefined();
-      expect(buttons.markFocused).toBeDefined();
-    });
+        it("Should mark checked radios with the selected class", function () {
+          $radioButtons.eq(0).attr('checked', true);
+          buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
+          expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
+        });
 
-    it("Should set the selectedClass property if sent in as an option", function () {
-      var buttons = new GOVUK.RadioButtons($radioButtons, { 'selectedClass' : 'selectable-selected' });
+        it("Should mark checked radios with the custom selected class if given", function () {
+          $radioButtons.eq(0).attr('checked', true);
+          buttonsInstance = new GOVUK.SelectionButtons($radioButtons, { 'selectedClass' : 'selectable-selected' });
+          expect($radioLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+        });
+      });
 
-      expect(buttons.selectedClass).toEqual('selectable-selected');
-    });
+      describe("If one of those radios receives focus", function () {
+        it("Should add the focused class to that radio", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true);
+        });
 
-    it("Should set the focusedClass property if sent in as an option", function () {
-      var buttons = new GOVUK.RadioButtons($radioButtons, { 'focusedClass' : 'selectable-focused' });
+        it("Should add a custom focused class to that radio if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($radioButtons, { 'focusedClass' : 'selectable-focused' });
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+        });
+      });
 
-      expect(buttons.focusedClass).toEqual('selectable-focused');
-    });
+      describe("If one of those radios loses focus", function () {
+        it("Should remove the focused class from that radio", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true);
+          $radioButtons.eq(0).blur();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(false);
+        });
 
-    describe("getSelections method", function () {
-      it("Should mark the label of any checked radios as selected", function () {
-        var radioButtonsMock = {
-              'markSelected' : GOVUK.RadioButtons.prototype.markSelected,
-              '$elms' : $radioButtons,
-              'selectedClass' : 'selected'
-            };
+        it("Should add a custom focused class to that radio if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($radioButtons, { 'focusedClass' : 'selectable-focused' });
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+          $radioButtons.eq(0).blur();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(false);
+        });
+      });
 
-        $radioButtons.eq(0).attr('checked', true);
-        spyOn(radioButtonsMock, 'markSelected').andCallThrough();
-        GOVUK.RadioButtons.prototype.getSelections.call(radioButtonsMock);
-        expect(radioButtonsMock.markSelected).toHaveBeenCalled();
-        expect($radioButtons.eq(0).parent('label').hasClass('selected')).toBe(true);
+      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');
+          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');
+          expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
+        });
       });
     });
 
-    describe("setEventNames method", function () {
-      it("Should set the selectionEvents and focusEvents properties on the instance", function () {
-        var radioButtonsMock = {};
+    describe("When that object contains only checkbox inputs", function () {
+      describe("At the point it is called", function () {
+        it("Should do nothing if no checkboxes are checked", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons);
+          expect($checkboxLabels.eq(0).hasClass('selected')).toBe(false);
+          expect($checkboxLabels.eq(1).hasClass('selected')).toBe(false);
+          expect($checkboxLabels.eq(2).hasClass('selected')).toBe(false);
+        });
 
-        GOVUK.RadioButtons.prototype.setEventNames.call(radioButtonsMock);
-        expect(typeof radioButtonsMock.focusEvents !== 'undefined').toBe(true);
-        expect(typeof radioButtonsMock.selectionEvents !== 'undefined').toBe(true);
+        it("Should mark checked checkboxes with the selected class", function () {
+          $checkboxButtons.eq(0).attr('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);
+          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);
+          buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons, { 'selectedClass' : 'selectable-selected' });
+          expect($checkboxLabels.eq(0).hasClass('selectable-selected')).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;
+      describe("If one of those checkboxes receives focus", function () {
+        it("Should add the focused class to that checkbox", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons);
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+        });
 
-        spyOn($.fn, 'on').andCallFake(function (evt, func) {
-          if (evt === 'click change') {
-            eventsBound = true;
-          }
-          return $.fn;
+        it("Should add a custom focused class to that checkbox if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons, { 'focusedClass' : 'selectable-focused' });
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(true);
         });
-        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;
+      describe("If one of those checkboxes loses focus", function () {
+        it("Should add the focused class to that checkbox", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons);
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+          $checkboxButtons.eq(0).blur();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(false);
+        });
 
-        spyOn($.fn, 'on').andCallFake(function (evt, func) {
-          if (evt === 'click change') {
-            callback = func;
-          }
-          return $.fn;
+        it("Should add a custom focused class to that checkbox if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($checkboxButtons, { 'focusedClass' : 'selectable-focused' });
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+          $checkboxButtons.eq(0).blur();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(false);
         });
-        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("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');
+          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');
+          expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+        });
+      });
     });
 
-    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);
+    describe("When that object contains a mixture of checkbox and radio inputs", function () {
+      var $mixedButtons;
 
-        GOVUK.RadioButtons.prototype.markSelected.call(radioButtonsMock, $clickedRadio);
-        expect($clickedRadio.parent('label').hasClass('selected')).toEqual(true);
+      beforeEach(function () {
+        $mixedButtons = $checkboxButtons.add($radioButtons);
       });
 
-      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);
+      describe("At the point it is called", function () {
+        it("Should do nothing if no checkboxes or radios are checked", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
+          expect($checkboxLabels.eq(0).hasClass('selected')).toBe(false);
+          expect($checkboxLabels.eq(1).hasClass('selected')).toBe(false);
+          expect($checkboxLabels.eq(2).hasClass('selected')).toBe(false);
+          expect($radioLabels.eq(0).hasClass('selected')).toBe(false);
+          expect($radioLabels.eq(1).hasClass('selected')).toBe(false);
+          expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
+        });
 
-        $radioLabels.eq(1).addClass('selected');
-        GOVUK.RadioButtons.prototype.markSelected.call(radioButtonsMock, $clickedRadio);
-        expect($('#medium').parent('label').hasClass('selected')).toEqual(false);
+        it("Should mark checked checkboxes or radios with the selected class", function () {
+          $mixedButtons.eq(0).attr('checked', true);
+          $mixedButtons.eq(3).attr('checked', true);
 
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
+          expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
+          expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
+        });
+
+        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);
+
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons, { 'selectedClass' : 'selectable-selected' });
+          expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+          expect($radioLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+        });
       });
-    });
 
-    describe("markFocused method", function () {
-      var radioButtonsMock = {
-            'focused' : false,
-            'focusedClass' : 'focused'
-          };
+      describe("If a checkbox in the set receives focus", function () {
+        it("Should add the focused class to that checkbox", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+        });
 
-      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']);
+        it("Should add a custom focused class to that checkbox if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons, { 'focusedClass' : 'selectable-focused' });
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+        });
+      });
 
-        expect($radioLabels.eq(0).hasClass(radioButtonsMock.focusedClass)).toBe(true);
+      describe("If a checkbox in the set loses focus", function () {
+        it("Should add the focused class to that checkbox", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+          $checkboxButtons.eq(0).blur();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(false);
+        });
+
+        it("Should add a custom focused class to that checkbox if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons, { 'focusedClass' : 'selectable-focused' });
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+          $checkboxButtons.eq(0).blur();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(false);
+        });
       });
 
-      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']);
+      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');
+          expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
+        });
 
-        expect($radioLabels.eq(0).hasClass(radioButtonsMock.focusedClass)).toBe(false);
+        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');
+          expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+        });
       });
+
+      describe("If a radio in the set receives focus", function () {
+        it("Should add the focused class to that radio", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true);
+        });
+
+        it("Should add a custom focused class to that radio if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons, { 'focusedClass' : 'selectable-focused' });
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+        });
+      });
+
+      describe("If a radio in the set loses focus", function () {
+        it("Should remove the focused class from that radio", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons);
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true);
+          $radioButtons.eq(0).blur();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(false);
+        });
+
+        it("Should add a custom focused class to that radio if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons($mixedButtons, { 'focusedClass' : 'selectable-focused' });
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+          $radioButtons.eq(0).blur();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(false);
+        });
+      });
+
+      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');
+          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');
+          expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
+        });
+      });
     });
   });
 
-  describe("CheckboxButtons", function () {
-    it("Should create a new instance with the correct interface", function () {
-      var buttons = new GOVUK.CheckboxButtons($checkboxButtons);
+  describe("When new GOVUK.SelectionButtons is called with a selector", function () {
+    describe("When that selector matches radio inputs", function () {
+      afterEach(function () {
+        buttonsInstance.destroy();
+      });
 
-      expect(buttons.getSelections).toBeDefined();
-      expect(buttons.bindEvents).toBeDefined();
-      expect(buttons.markSelected).toBeDefined();
-      expect(buttons.markFocused).toBeDefined();
-    });
+      describe("At the point it is called", function () {
+        it("Should do nothing if no radios are checked", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          expect($radioLabels.eq(0).hasClass('selected')).toBe(false);
+          expect($radioLabels.eq(1).hasClass('selected')).toBe(false);
+          expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
+        });
 
-    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 () {}
-            };
+        it("Should mark checked radios with the selected class", function () {
+          $radioButtons.eq(0).attr('checked', true);
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
+        });
 
-        checkboxButtonsMock.$elms.eq(0).attr('checked', true);
-        spyOn(checkboxButtonsMock, 'markSelected');
-        GOVUK.CheckboxButtons.prototype.getSelections.call(checkboxButtonsMock);
-        expect(checkboxButtonsMock.markSelected).toHaveBeenCalled();
+        it("Should mark checked radios with the custom selected class if given", function () {
+          $radioButtons.eq(0).attr('checked', true);
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']", { 'selectedClass' : 'selectable-selected' });
+          expect($radioLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+        });
       });
-    });
 
-    describe("setEventNames method", function () {
-      it("Should set the selectionEvents and focusEvents properties on the instance", function () {
-        var checkboxButtonsMock = {};
+      describe("If one of those radios receives focus", function () {
+        it("Should add the focused class to that radio", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true);
+        });
 
-        GOVUK.CheckboxButtons.prototype.setEventNames.call(checkboxButtonsMock);
-        expect(typeof checkboxButtonsMock.focusEvents !== 'undefined').toBe(true);
-        expect(typeof checkboxButtonsMock.selectionEvents !== 'undefined').toBe(true);
+        it("Should add a custom focused class to that radio if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']", { 'focusedClass' : 'selectable-focused' });
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+        });
       });
-    });
 
-    describe("bindEvents method", function () {
-      var checkboxButtonsMock;
+      describe("If one of those radios loses focus", function () {
+        it("Should remove the focused class from that radio", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true);
+          $radioButtons.eq(0).blur();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(false);
+        });
 
-      beforeEach(function () {
-        checkboxButtonsMock = {
-          '$elms' : $checkboxButtons
-        };
+        it("Should add a custom focused class to that radio if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']", { 'focusedClass' : 'selectable-focused' });
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+          $radioButtons.eq(0).blur();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(false);
+        });
       });
 
-      it("Should add a click event to each checkbox that fires the markSelected method", function () {
-        var eventCalled = false;
+      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');
+          expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
+        });
 
-        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;
+        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');
+          expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
         });
-        $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;
+    describe("When that selector matches checkbox inputs", function () {
+      afterEach(function () {
+        buttonsInstance.destroy();
+      });
 
-        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;
+      describe("At the point it is called", function () {
+        it("Should do nothing if no checkboxes are checked", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          expect($checkboxLabels.eq(0).hasClass('selected')).toBe(false);
+          expect($checkboxLabels.eq(1).hasClass('selected')).toBe(false);
+          expect($checkboxLabels.eq(2).hasClass('selected')).toBe(false);
         });
-        GOVUK.CheckboxButtons.prototype.bindEvents.call(checkboxButtonsMock);
-        expect(eventCalled).toBe(true);
-        callback({
-          'target' : $checkboxButtons.eq(0),
-          'type' : 'focus'
+
+        it("Should mark checked checkboxes with the selected class", function () {
+          $checkboxButtons.eq(0).attr('checked', true);
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
         });
-        expect(checkboxButtonsMock.markFocused).toHaveBeenCalled();
+
+        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);
+          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);
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']", { 'selectedClass' : 'selectable-selected' });
+          expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+        });
       });
+
+      describe("If one of those checkboxes receives focus", function () {
+        it("Should add the focused class to that checkbox", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+        });
+
+        it("Should add a custom focused class to that checkbox if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']", { 'focusedClass' : 'selectable-focused' });
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+        });
+      });
+
+      describe("If one of those checkboxes loses focus", function () {
+        it("Should add the focused class to that checkbox", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+          $checkboxButtons.eq(0).blur();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(false);
+        });
+
+        it("Should add a custom focused class to that checkbox if specified as an option", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']", { 'focusedClass' : 'selectable-focused' });
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+          $checkboxButtons.eq(0).blur();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(false);
+        });
+      });
     });
 
-    describe("markSelected method", function () {
-      var checkboxButtonsMock = {
-            'selectedClass' : 'selected'
-          };
+    describe("When that selector matches a mixture of checkbox and radio inputs", function () {
+      var $mixedButtons;
 
-      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);
+      beforeEach(function () {
+        $mixedButtons = $checkboxButtons.add($radioButtons);
       });
 
-      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);
+      afterEach(function () {
+        buttonsInstance.destroy();
       });
+
+      it("Should do nothing if no checkboxes or radios are checked", function () {
+        buttonsInstance = new GOVUK.SelectionButtons("label.selectable input");
+        expect($checkboxLabels.eq(0).hasClass('selected')).toBe(false);
+        expect($checkboxLabels.eq(1).hasClass('selected')).toBe(false);
+        expect($checkboxLabels.eq(2).hasClass('selected')).toBe(false);
+        expect($radioLabels.eq(0).hasClass('selected')).toBe(false);
+        expect($radioLabels.eq(1).hasClass('selected')).toBe(false);
+        expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
+      });
+
+      it("Should mark checked checkboxes or radios with the selected class", function () {
+        $mixedButtons.eq(0).attr('checked', true);
+        $mixedButtons.eq(3).attr('checked', true);
+
+        buttonsInstance = new GOVUK.SelectionButtons("label.selectable input");
+        expect($checkboxLabels.eq(0).hasClass('selected')).toBe(true);
+        expect($radioLabels.eq(0).hasClass('selected')).toBe(true);
+      });
+
+      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);
+
+        buttonsInstance = new GOVUK.SelectionButtons("label.selectable input", { 'selectedClass' : 'selectable-selected' });
+        expect($checkboxLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+        expect($radioLabels.eq(0).hasClass('selectable-selected')).toBe(true);
+      });
     });
+  });
 
-    describe("markFocused method", function () {
-      var checkboxButtonsMock = {
-            'focused' : false,
-            'focusedClass' : 'focused'
-          };
+  describe("When GOVUK.SelectionButtons is called with a selector and then the page content is replaced", function () {
+    describe("When that selector matches radio inputs", function () {
+      describe("If one of those radios is clicked", function () {
+        afterEach(function () {
+          buttonsInstance.destroy();
+        });
 
-      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']);
+        it("Should mark that radio with the selected class", function () {
+          var contentCache;
 
-        expect($checkboxLabels.eq(0).hasClass(checkboxButtonsMock.focusedClass)).toBe(true);
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $("label.selectable input[type='radio']").eq(0)
+            .attr('checked', true)
+            .trigger('click');
+          expect($("label.selectable input[type='radio']").eq(0).parent('label').hasClass('selected')).toBe(true);
+        });
+
+        it("Should remove the selected class from all other radios", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $radioButtons = $("label.selectable input[type='radio']");
+          $radioLabels = $radioButtons.parent('label');
+          $radioLabels.eq(1).addClass('selected');
+          $radioButtons.eq(0)
+            .attr('checked', true)
+            .trigger('click');
+          expect($radioLabels.eq(2).hasClass('selected')).toBe(false);
+        });
       });
 
-      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']);
+      describe("If one of those radios is focused", function () {
+        afterEach(function () {
+          buttonsInstance.destroy();
+        });
 
-        expect($checkboxLabels.eq(0).hasClass(checkboxButtonsMock.focusedClass)).toBe(false);
+        it("Should add the focused class to the radio", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $radioButtons = $("label.selectable input[type='radio']");
+          $radioLabels = $radioButtons.parent('label');
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true)
+        });
+
+        it("Should add a custom focused class to the radio if sent in as an option", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']", { 'focusedClass' : 'selectable-focused' });
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $radioButtons = $("label.selectable input[type='radio']");
+          $radioLabels = $radioButtons.parent('label');
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true)
+        });
+
+        it("Should remove the focused class from a radio when it loses focus", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $radioButtons = $("label.selectable input[type='radio']");
+          $radioLabels = $radioButtons.parent('label');
+          $radioButtons.eq(0).focus();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(true)
+          $radioButtons.eq(0).blur();
+          expect($radioLabels.eq(0).hasClass('focused')).toBe(false)
+        });
       });
     });
+
+    describe("When that selector matches checkbox inputs", function () {
+      describe("If one of those checkboxes is clicked", function () {
+        afterEach(function () {
+          buttonsInstance.destroy();
+        });
+
+        it("Should add the selected class to the checkbox", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $("label.selectable input[type='checkbox']").eq(0)
+            .attr('checked', true)
+            .trigger('click');
+          expect($("label.selectable input[type='checkbox']").eq(0).parent('label').hasClass('selected')).toBe(true);
+        });
+      });
+
+      describe("If one of those checkboxes is focused", function () {
+        afterEach(function () {
+          buttonsInstance.destroy();
+        });
+
+        it("Should add the focused class to the checkbox", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $checkboxButtons = $("label.selectable input[type='checkbox']");
+          $checkboxLabels = $checkboxButtons.parent('label');
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+        });
+
+        it("Should add a custom focused class to the checkbox if sent in as an option", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']", { 'focusedClass' : 'selectable-focused' });
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $checkboxButtons = $("label.selectable input[type='checkbox']");
+          $checkboxLabels = $checkboxButtons.parent('label');
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('selectable-focused')).toBe(true);
+        });
+
+        it("Should remove the focused class from the checkbox when it loses focus", function () {
+          var contentCache;
+
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          contentCache = $('#content').html();
+          $('#content').html('');
+          $('#content').html(contentCache);
+          $checkboxButtons = $("label.selectable input[type='checkbox']");
+          $checkboxLabels = $checkboxButtons.parent('label');
+          $checkboxButtons.eq(0).focus();
+          expect($checkboxLabels.eq(0).hasClass('focused')).toBe(true);
+          $checkboxButtons.eq(0).blur();
+          expect($checkboxLabels.eq(0).hasClass('focused')).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();
-    }); 
+  describe("GOVUK.SelectionButtons.prototype.destroy", function () {
+    it("Should remove the events bound to the jQuery-wrapped elements sent into GOVUK.SelectionButtons", function () {
+      var clickCallbackBound = false,
+          focusBlurCallbackBound = false,
+          clickCallbackCancelled = false,
+          focusBlurCallbackCancelled = false;
 
-    it("Should create an instance of CheckboxButtons for a set of checkboxes", function () {
-      spyOn(GOVUK, 'CheckboxButtons');
-      GOVUK.selectionButtons($checkboxButtons);
-      expect(GOVUK.CheckboxButtons).toHaveBeenCalled();
-    }); 
+      spyOn($.fn, "on").andCallFake(function (evt, callback) {
+        if (this === $radioButtons) {
+          if (evt === "click") {
+            clickCallbackBound = callback;
+          }
+          if (evt === "focus blur") {
+            focusBlurCallbackBound = callback;
+          }
+        }
+        return this;
+      });
 
-    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();
-    }); 
+      spyOn($.fn, "off").andCallFake(function (evt, callback) {
+        if (this === $radioButtons) {
+          if (evt === "click") {
+            clickCallbackCancelled = callback;
+          }
+          if (evt === "focus blur") {
+            focusBlurCallbackCancelled = callback;
+          }
+        }
+        return this;
+      });
+      buttonsInstance = new GOVUK.SelectionButtons($radioButtons);
+      expect(clickCallbackBound).not.toBe(false);
+      expect(focusBlurCallbackBound).not.toBe(false);
+      buttonsInstance.destroy();
+      expect(clickCallbackCancelled).toEqual(clickCallbackBound);
+      expect(focusBlurCallbackCancelled).toEqual(focusBlurCallbackBound);
+    });
+
+    it("Should remove the events bound to the document for the selector was sent into GOVUK.SelectionButtons", function () {
+      var clickCallbackBound = false,
+          focusBlurCallbackBound = false,
+          clickCallbackCancelled = false,
+          focusBlurCallbackCancelled = false;
+
+      spyOn($.fn, "on").andCallFake(function (evt, selector, callback) {
+        if ((this[0] === document) && (selector === "label.selectable input[type='checkbox']")) {
+          if (evt === "click") {
+            clickCallbackBound = callback;
+          }
+          if (evt === "focus blur") {
+            focusBlurCallbackBound = callback;
+          }
+        }
+        return this;
+      });
+
+      spyOn($.fn, "off").andCallFake(function (evt, selector, callback) {
+        if ((this[0] === document) && (selector === "label.selectable input[type='checkbox']")) {
+          if (evt === "click") {
+            clickCallbackCancelled = callback;
+          }
+          if (evt === "focus blur") {
+            focusBlurCallbackCancelled = callback;
+          }
+        }
+        return this;
+      });
+      buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+      expect(clickCallbackBound).not.toBe(false);
+      expect(focusBlurCallbackBound).not.toBe(false);
+      buttonsInstance.destroy();
+      expect(clickCallbackCancelled).toEqual(clickCallbackBound);
+      expect(focusBlurCallbackCancelled).toEqual(focusBlurCallbackBound);
+    });
   });
 });

govuk_frontend_toolkit/VERSION.txt

@@ -1,1 +0,1 @@
-1.7.0
+2.0.0

package.json

 {
   "name": "govuk_frontend_toolkit",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "description": "npm for govuk_frontend_toolkit",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

505087

increased by4.6%

Lines of code

1738

increased by25.76%

No dependency changes