From 2cbfaf1b6fba0c835c51bddf458dd55a15d1f183 Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Thu, 6 Feb 2020 10:50:57 +0000
Subject: [PATCH] Update the buttons on template folder form

---
 app/assets/javascripts/templateFolderForm.js | 10 +++++-----
 tests/javascripts/templateFolderForm.test.js | 18 +++++++++---------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index c643b12fb..f81a9eabe 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -41,7 +41,7 @@
         this.render();
       }
 
-      this.$form.on('click', 'button.button-secondary', (event) => this.actionButtonClicked(event));
+      this.$form.on('click', 'button.govuk-button--secondary', (event) => this.actionButtonClicked(event));
       this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
     };
 
@@ -225,8 +225,8 @@
     this.nothingSelectedButtons = $(`
       <div id="nothing_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="button-secondary" value="add-new-template">New template</button>
-          <button class="button-secondary" value="add-new-folder">New folder</button>
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="add-new-template">New template</button>
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="add-new-folder">New folder</button>
           <div class="template-list-selected-counter">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.default}
@@ -239,8 +239,8 @@
     this.itemsSelectedButtons = $(`
       <div id="items_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="button-secondary" value="move-to-existing-folder">Move</button>
-          <button class="button-secondary" value="move-to-new-folder">Add to new folder</button>
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="move-to-existing-folder">Move</button>
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="move-to-new-folder">Add to new folder</button>
           <div class="template-list-selected-counter" aria-hidden="true">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.selected(1)}
diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js
index 4439d45c5..cf880c4bb 100644
--- a/tests/javascripts/templateFolderForm.test.js
+++ b/tests/javascripts/templateFolderForm.test.js
@@ -46,7 +46,7 @@ function setFixtures (hierarchy) {
                 </div>
                 <div class="js-will-stick-at-bottom-when-scrolling">
                   <div class="page-footer">
-                    <button type="submit" class="button" name="operation" value="move-to-existing-folder">Move</button>
+                    <button type="submit" class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" name="operation" value="move-to-existing-folder">Move</button>
                   </div>
                 </div>
               </div>
@@ -60,7 +60,7 @@ function setFixtures (hierarchy) {
                     <input class="form-control form-control-1-1 " id="move_to_new_folder_name" name="move_to_new_folder_name" rows="8" type="text" value="">
                   </div>
                   <div class="page-footer">
-                    <button type="submit" class="button" name="operation" value="move-to-new-folder">Add to new folder</button>
+                    <button type="submit" class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" name="operation" value="move-to-new-folder">Add to new folder</button>
                   </div>
                 </fieldset>
               </div>
@@ -74,7 +74,7 @@ function setFixtures (hierarchy) {
                     <input class="form-control form-control-1-1 " id="add_new_folder_name" name="add_new_folder_name" rows="8" type="text" value="">
                   </div>
                   <div class="page-footer">
-                    <button type="submit" class="button" name="operation" value="add-new-folder">Add new folder</button>
+                    <button type="submit" class="govuk-button page-footer__button" name="operation" value="add-new-folder">Add new folder</button>
                   </div>
                 </fieldset>
               </div>
@@ -114,7 +114,7 @@ function setFixtures (hierarchy) {
                 </div>
                 <div class="js-will-stick-at-bottom-when-scrolling">
                   <div class="page-footer">
-                    <button type="submit" class="button" name="operation" value="add-new-template">Continue</button>
+                    <button type="submit" class="govuk-button page-footer__button" name="operation" value="add-new-template">Continue</button>
                   </div>
                 </div>
               </div>
@@ -228,7 +228,7 @@ describe('TemplateFolderForm', () => {
   };
 
   describe("Before the page loads", () => {
-  
+
     // We need parts of the module to be made sticky, but by the module code,
     // not the sticky JS code that operates on the HTML at page load.
     // Because of this, they will need to be marked with classes
@@ -240,7 +240,7 @@ describe('TemplateFolderForm', () => {
       expect(templateFolderForm.querySelectorAll('#add_new_template_form > .js-will-stick-at-bottom-when-scrolling').length).toEqual(2);
 
     });
-  
+
   });
 
   describe("When the page loads", () => {
@@ -578,11 +578,11 @@ describe('TemplateFolderForm', () => {
       });
 
       test("the content of the counter should reflect the selection", () => {
-      
+
         expect(visibleCounterText).toEqual('2 selected');
-      
+
       });
-      
+
     });
 
     describe("Clicking the 'Move' button", () => {