From d75c26eb83b7661481ea84399b521df7320eb7bb Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 10 May 2019 14:01:12 +0100
Subject: [PATCH] Make done button, and its surround, sticky

---
 .../javascripts/collapsibleCheckboxes.js      | 14 +++++--
 .../javascripts/collapsibleCheckboxes.test.js | 37 +++++++++++++++++++
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js
index 6f378c074..3eea8693d 100644
--- a/app/assets/javascripts/collapsibleCheckboxes.js
+++ b/app/assets/javascripts/collapsibleCheckboxes.js
@@ -1,6 +1,8 @@
-(function (Modules) {
+(function (global) {
   "use strict";
 
+  const GOVUK = global.GOVUK;
+
   function Summary (module) {
     this.module = module;
     this.$el = module.$formGroup.find('.selection-summary');
@@ -56,8 +58,9 @@
   Footer.prototype.getEl = function (expanded) {
     const buttonState = expanded ? 'done' : 'change';
     const buttonContent = this.buttonContent[buttonState](this.fieldLabel);
+    const stickyClass = expanded ? ' js-stick-at-bottom-when-scrolling' : '';
 
-    return $(`<div class="selection-footer">
+    return $(`<div class="selection-footer${stickyClass}">
               <button
                 class="button button-secondary"
                 aria-expanded="${expanded ? 'true' : 'false'}"
@@ -71,6 +74,9 @@
     this.$el = this.getEl(expanded);
 
     this.module.$formGroup.append(this.$el);
+
+    // make footer sticky if expanded, clear up from it being sticky if not
+    GOVUK.stickAtBottomWhenScrolling.recalculate();
   };
 
   function CollapsibleCheckboxes () {}
@@ -159,6 +165,6 @@
     this.summary.bindEvents(this);
   };
 
-  Modules.CollapsibleCheckboxes = CollapsibleCheckboxes;
+  GOVUK.Modules.CollapsibleCheckboxes = CollapsibleCheckboxes;
 
-}(window.GOVUK.Modules));
+}(window));
diff --git a/tests/javascripts/collapsibleCheckboxes.test.js b/tests/javascripts/collapsibleCheckboxes.test.js
index db0636b84..b29a4d624 100644
--- a/tests/javascripts/collapsibleCheckboxes.test.js
+++ b/tests/javascripts/collapsibleCheckboxes.test.js
@@ -7,6 +7,10 @@ beforeAll(() => {
 
   // load module code
   require('govuk_frontend_toolkit/javascripts/govuk/modules.js');
+
+  // TODO: remove this when tests for sticky JS are written
+  require('../../app/assets/javascripts/stick-to-window-when-scrolling.js');
+
   require('../../app/assets/javascripts/collapsibleCheckboxes.js');
 });
 
@@ -281,6 +285,39 @@ describe('Collapsible fieldset', () => {
     });
   });
 
+  describe("the footer (that wraps the button)", () => {
+
+    beforeEach(() => {
+
+      // track calls to sticky JS
+      window.GOVUK.stickAtBottomWhenScrolling.recalculate = jest.fn(() => {});
+
+      // start module
+      window.GOVUK.modules.start();
+
+      // show the checkboxes
+      helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
+
+    });
+
+    test("is made sticky when the fieldset is expanded", () => {
+
+      expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(true);
+      expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(1);
+
+    });
+
+    test("has its stickiness removed when the fieldset is collapsed", () => {
+
+      // click the button to collapse the fieldset
+      helpers.triggerEvent(formGroup.querySelector('.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);
+
+    });
+  });
+
   describe("when the selection changes", () => {
 
     const showCheckboxes = () => {