Merge pull request #622 from GSA/616-remove-sticky-position

616 remove sticky position

app/assets/javascripts/main.js

@@ -9,9 +9,6 @@ if (window.GOVUK.hasConsentFor('analytics', consentData)) {
 
 $(() => $("time.timeago").timeago());
 
-$(() => GOVUK.stickAtTopWhenScrolling.init());
-$(() => GOVUK.stickAtBottomWhenScrolling.init());
-
 var showHideContent = new GOVUK.ShowHideContent();
 showHideContent.init();
 

app/assets/javascripts/templateFolderForm.js

@@ -285,9 +285,6 @@
       if (['move-to-existing-folder', 'add-new-template'].indexOf(this.currentState) !== -1) {
         mode = 'dialog';
       }
-      GOVUK.stickAtBottomWhenScrolling.setMode(mode);
-      // make sticky JS recalculate its cache of the element's position
-      GOVUK.stickAtBottomWhenScrolling.recalculate();
 
       if (currentStateObj && ('setFocus' in currentStateObj)) {
         scrollTop = $(window).scrollTop();
@@ -299,10 +296,12 @@
     this.nothingSelectedButtons = $(`
       <div id="nothing_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="usa-button usa-button--event" value="add-new-template" aria-expanded="false">
+          <div class="usa-button-group">
-            New template
+            <button class="usa-button usa-button--event" value="add-new-template" aria-expanded="false">
-          </button>
+              New template
-          <button class="usa-button usa-button--event" value="add-new-folder" aria-expanded="false">New folder</button>
+            </button>
+            <button class="usa-button usa-button--event" value="add-new-folder" aria-expanded="false">New folder</button>
+          </div>
           <div class="template-list-selected-counter">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.default}
@@ -315,10 +314,12 @@
     this.itemsSelectedButtons = $(`
       <div id="items_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="usa-button usa-button--event" value="move-to-existing-folder" aria-expanded="false">
+          <div class="usa-button-group">
-            Move<span class="usa-sr-only"> selection to folder</span>
+            <button class="usa-button usa-button--event" value="move-to-existing-folder" aria-expanded="false">
-          </button>
+              Move<span class="usa-sr-only"> selection to folder</span>
-          <button class="usa-button usa-button--event" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
+            </button>
+            <button class="usa-button usa-button--event" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
+          </div>
           <div class="template-list-selected-counter" aria-hidden="true">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.selected(1)}

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -195,3 +195,31 @@ td.table-empty-message {
       border: 1px solid color("gray-60");
    }
 }
+
+.usa-hint {
+   display: block;
+}
+
+.js-stick-at-bottom-when-scrolling {
+   margin: 0 0 units(5);
+   padding: units(2) 0;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   overflow: visible;
+   button {
+      margin-right: units(2);
+   }
+   .template-list-selected-counter {
+      position: relative;
+      top: 0;
+   }
+}
+
+.sticky-template-form {
+   margin: 0;
+   padding: 0;
+   &:focus {
+      outline-offset: units(1);
+   }
+}

gulpfile.js

@@ -108,7 +108,6 @@ const javascripts = () => {
     paths.src + 'javascripts/govuk/cookie-functions.js',
     paths.src + 'javascripts/consent.js',
     paths.src + 'javascripts/cookieMessage.js',
-    paths.src + 'javascripts/stick-to-window-when-scrolling.js',
     paths.src + 'javascripts/copyToClipboard.js',
     paths.src + 'javascripts/autofocus.js',
     paths.src + 'javascripts/enhancedTextbox.js',

tests/javascripts/templateFolderForm.test.js

@@ -299,20 +299,6 @@ describe('TemplateFolderForm', () => {
 
     });
 
-    test("should make the current controls sticky", () => {
-
-      // the class the sticky JS hooks into should be present
-      expect(formControls.querySelector('#nothing_selected .js-stick-at-bottom-when-scrolling')).not.toBeNull();
-
-      // .recalculate should have been called so the sticky JS picks up the controls
-      expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
-
-      // mode should have been set to 'default' as the controls only have one part
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
-
-    });
-
   });
 
   describe("Click 'New template' for single channel service", () => {
@@ -421,20 +407,6 @@ describe('TemplateFolderForm', () => {
 
     });
 
-    test("should make the current controls sticky", () => {
-
-      // the classes the sticky JS hooks into should be present for both parts
-      expect(formControls.querySelectorAll('#add_new_template_form .js-stick-at-bottom-when-scrolling').length).toEqual(2);
-
-      // .recalculate should have been called so the sticky JS picks up the controls
-      expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
-
-      // the mode should be set to 'dialog' so both parts can be sticky
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('dialog');
-
-    });
-
     describe("When the 'Cancel' link is clicked after choosing to add a new template", () => {
 
       let addNewTemplateButton;
@@ -533,17 +505,13 @@ describe('TemplateFolderForm', () => {
 
     });
 
-    test("should make the current controls sticky", () => {
+    test("", () => {
 
       // the class the sticky JS hooks into should be present
       expect(formControls.querySelector('#add_new_folder_form .js-stick-at-bottom-when-scrolling')).not.toBeNull();
 
       // .recalculate should have been called so the sticky JS picks up the controls
-      expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
+      expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(0);
-
-      // mode should have been set to 'default' as the controls only have one part
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
 
     });
 
@@ -607,20 +575,6 @@ describe('TemplateFolderForm', () => {
 
     });
 
-    test("should make the current controls sticky", () => {
-
-      // the class the sticky JS hooks into should be present
-      expect(formControls.querySelector('#items_selected .js-stick-at-bottom-when-scrolling')).not.toBeNull();
-
-      // .recalculate should have been called so the sticky JS picks up the controls
-      expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
-
-      // mode should have been set to 'default' as the controls only have one part
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
-      expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
-
-    });
-
     describe("'Clear selection' link", () => {
 
       let clearLink;
@@ -755,20 +709,6 @@ describe('TemplateFolderForm', () => {
 
       });
 
-      test("should make the current controls sticky", () => {
-
-        // the classes the sticky JS hooks into should be present for both parts
-        expect(formControls.querySelectorAll('#move_to_folder_radios .js-stick-at-bottom-when-scrolling').length).toEqual(2);
-
-        // .recalculate should have been called so the sticky JS picks up the controls
-        expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
-
-        // the mode should be set to 'dialog' so both parts can be sticky
-        expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
-        expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('dialog');
-
-      });
-
       describe("When the 'Cancel' link is clicked after choosing to move a template or folder", () => {
 
         let moveToFolderButton;
@@ -857,20 +797,6 @@ describe('TemplateFolderForm', () => {
 
       });
 
-      test("should make the current controls sticky", () => {
-
-        // the class the sticky JS hooks into should be present
-        expect(formControls.querySelector('#move_to_new_folder_form .js-stick-at-bottom-when-scrolling')).not.toBeNull();
-
-        // .recalculate should have been called so the sticky JS picks up the controls
-        expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
-
-        // mode should have been set to 'default' as the controls only have one part
-        expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
-        expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
-
-      });
-
       describe("When the 'Cancel' link is clicked after choosing to add a template or folder to a new folder", () => {
 
         let moveToNewFolderButton;