Merge pull request #317 from alphagov/custom-radios

Mark selection buttons with a class that matches their input
alphagov · Sep 1, 2016 · 308c20c · 308c20c
2 parents d54c9b2 + 8c2a90b
commit 308c20c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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);