Make done button, and its surround, sticky

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

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 = () => {