From 4e42fa6f5d2bb1c8f0ecf5c129d33e82dd1f1abe Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Wed, 5 Feb 2020 11:57:43 +0000
Subject: [PATCH] Update buttons for collapsible checkboxes

We use collapsible checkboxes when setting which folders team members
can see (on the manage folder page and on the edit team member page).
---
 .../javascripts/collapsibleCheckboxes.js      |  4 ++--
 .../stylesheets/components/checkboxes.scss    | 18 ++++----------
 .../javascripts/collapsibleCheckboxes.test.js | 24 +++++++++----------
 3 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js
index 7d92b273e..11c14a2e4 100644
--- a/app/assets/javascripts/collapsibleCheckboxes.js
+++ b/app/assets/javascripts/collapsibleCheckboxes.js
@@ -62,7 +62,7 @@
 
     return $(`<div class="selection-footer${stickyClass}">
               <button
-                class="button button-secondary"
+                class="govuk-button govuk-button--secondary selection-footer__button"
                 aria-expanded="${expanded ? 'true' : 'false'}"
                 aria-controls="${this.fieldsetId}">
               ${buttonContent}
@@ -159,7 +159,7 @@
   CollapsibleCheckboxes.prototype.bindEvents = function() {
     const self = this;
 
-    this.$formGroup.on('click', '.button', this.handleClick.bind(this));
+    this.$formGroup.on('click', '.govuk-button', this.handleClick.bind(this));
     this.$checkboxes.on('click', this.handleSelection.bind(this));
 
     this.summary.bindEvents(this);
diff --git a/app/assets/stylesheets/components/checkboxes.scss b/app/assets/stylesheets/components/checkboxes.scss
index 57b957240..9189d46d7 100644
--- a/app/assets/stylesheets/components/checkboxes.scss
+++ b/app/assets/stylesheets/components/checkboxes.scss
@@ -18,14 +18,6 @@
     background-position: 0px 4px;
   }
 
-  // revert full-width button for smaller screens
-  .button {
-    display: inline-block;
-    width: auto;
-    position: relative;
-    top: 1px;
-  }
-
 }
 
 .checkboxes-nested {
@@ -83,12 +75,12 @@
 
 .selection-footer {
   clear: both;
+}
 
-  .button-secondary {
-    // revert full-width button for smaller screens
-    display: inline-block;
-    width: auto;
-  }
+.selection-footer__button {
+  // revert full-width button for smaller screens
+  display: inline-block;
+  width: auto;
 }
 
 // styles specific to the collapsible checkboxes module
diff --git a/tests/javascripts/collapsibleCheckboxes.test.js b/tests/javascripts/collapsibleCheckboxes.test.js
index c3c582525..24eb20239 100644
--- a/tests/javascripts/collapsibleCheckboxes.test.js
+++ b/tests/javascripts/collapsibleCheckboxes.test.js
@@ -119,7 +119,7 @@ describe('Collapsible fieldset', () => {
 
     test("has a button to expand the fieldset", () => {
 
-      const button = formGroup.querySelector('.button');
+      const button = formGroup.querySelector('.govuk-button');
 
       expect(button).not.toBeNull();
       expect(button.textContent.trim()).toEqual('Choose folders');
@@ -128,7 +128,7 @@ describe('Collapsible fieldset', () => {
 
     test("has the correct aria attributes on the button", () => {
 
-      expect(helpers.element(formGroup.querySelector('.button')).hasAttributesSetTo({
+      expect(helpers.element(formGroup.querySelector('.govuk-button')).hasAttributesSetTo({
         'aria-controls': fieldset.getAttribute('id'),
         'aria-expanded': 'false'
       })).toBe(true);
@@ -205,7 +205,7 @@ describe('Collapsible fieldset', () => {
       // start module
       window.GOVUK.modules.start();
 
-      helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
 
     });
 
@@ -223,13 +223,13 @@ describe('Collapsible fieldset', () => {
 
     test("it uses ARIA to mark the checkboxes as expanded", () => {
 
-      expect(formGroup.querySelector('.button').getAttribute('aria-expanded')).toEqual('true');
+      expect(formGroup.querySelector('.govuk-button').getAttribute('aria-expanded')).toEqual('true');
 
     });
 
     test("it changes it's text to indicate it's new action", () => {
 
-      expect(formGroup.querySelector('.button').textContent.trim()).toEqual("Done choosing folders");
+      expect(formGroup.querySelector('.govuk-button').textContent.trim()).toEqual("Done choosing folders");
 
     });
 
@@ -243,10 +243,10 @@ describe('Collapsible fieldset', () => {
       window.GOVUK.modules.start();
 
       // show the checkboxes
-      helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
 
       // click the button
-      helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
 
     });
 
@@ -264,13 +264,13 @@ describe('Collapsible fieldset', () => {
 
     test("it uses ARIA to mark the checkboxes as collapsed", () => {
 
-      expect(formGroup.querySelector('.button').getAttribute('aria-expanded')).toEqual('false');
+      expect(formGroup.querySelector('.govuk-button').getAttribute('aria-expanded')).toEqual('false');
 
     });
 
     test("it changes it's text to indicate it's new action", () => {
 
-      expect(formGroup.querySelector('.button').textContent.trim()).toEqual("Choose folders");
+      expect(formGroup.querySelector('.govuk-button').textContent.trim()).toEqual("Choose folders");
 
     });
   });
@@ -286,7 +286,7 @@ describe('Collapsible fieldset', () => {
       window.GOVUK.modules.start();
 
       // show the checkboxes
-      helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
 
     });
 
@@ -300,7 +300,7 @@ describe('Collapsible fieldset', () => {
     test("has its stickiness removed when the fieldset is collapsed", () => {
 
       // click the button to collapse the fieldset
-      helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
 
       expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(false);
       expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(2);
@@ -311,7 +311,7 @@ describe('Collapsible fieldset', () => {
   describe("when the selection changes", () => {
 
     const showCheckboxes = () => {
-      helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
     };
 
     const checkFirstCheckbox = () => {