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);