From 8c2a90b41c25eeef6cb56e1cb31e156e14d2acac Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Fri, 26 Aug 2016 21:16:03 +0100
Subject: [PATCH] Mark selection buttons with a class that matches their input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In govuk_elements we’d like to differentiate between selection buttons that contain a radio and those that contain a checkbox. This initialises selection buttons with a namespaced class that we can bind to.
---
 javascripts/govuk/selection-buttons.js |  4 ++++
 spec/unit/selection-button.spec.js     | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/javascripts/govuk/selection-buttons.js b/javascripts/govuk/selection-buttons.js
index 77505a52..2d553896 100644
--- a/javascripts/govuk/selection-buttons.js
+++ b/javascripts/govuk/selection-buttons.js
@@ -8,6 +8,8 @@
 
     this.selectedClass = 'selected';
     this.focusedClass = 'focused';
+    this.radioClass = 'selection-button-radio';
+    this.checkboxClass = 'selection-button-checkbox';
     if (opts !== undefined) {
       $.each(opts, function (optionName, optionObj) {
         this[optionName] = optionObj;
@@ -33,6 +35,8 @@
     $elms.each(function (idx, elm) {
       var $elm = $(elm);
 
+      var labelClass = $elm.attr('type') === 'radio' ? this.radioClass : this.checkboxClass;
+      $elm.parent('label').addClass(labelClass);
       if ($elm.is(':checked')) {
         this.markSelected($elm);
       }
diff --git a/spec/unit/selection-button.spec.js b/spec/unit/selection-button.spec.js
index 5f00a4b9..d5cb8afa 100644
--- a/spec/unit/selection-button.spec.js
+++ b/spec/unit/selection-button.spec.js
@@ -337,7 +337,14 @@ describe("selection-buttons", function () {
       });
 
       describe("At the point it is called", function () {
-        it("Should do nothing if no radios are checked", function () {
+        it("Should mark radios with the selection-button-radio class", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='radio']");
+          expect($radioLabels.eq(0).hasClass('selection-button-radio')).toBe(true);
+          expect($radioLabels.eq(1).hasClass('selection-button-radio')).toBe(true);
+          expect($radioLabels.eq(2).hasClass('selection-button-radio')).toBe(true);
+        });
+
+        it("Should not add a selected class 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);
@@ -411,7 +418,14 @@ describe("selection-buttons", function () {
       });
 
       describe("At the point it is called", function () {
-        it("Should do nothing if no checkboxes are checked", function () {
+        it("Should mark checkboxes with the selection-button-checkbox class", function () {
+          buttonsInstance = new GOVUK.SelectionButtons("label.selectable input[type='checkbox']");
+          expect($checkboxLabels.eq(0).hasClass('selection-button-checkbox')).toBe(true);
+          expect($checkboxLabels.eq(1).hasClass('selection-button-checkbox')).toBe(true);
+          expect($checkboxLabels.eq(2).hasClass('selection-button-checkbox')).toBe(true);
+        });
+
+        it("Should not add a selected class 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);