From 1d2a73a1a4550a736bcf4577efb76a737d2cd364 Mon Sep 17 00:00:00 2001
From: Pea Tyczynska <pea.tyczynska@digital.cabinet-office.gov.uk>
Date: Wed, 5 Aug 2020 11:57:00 +0100
Subject: [PATCH] Update TemplateAndFoldersSelectionForm fields

Changes its StringFields to GovukTextInputFields.

Includes changes to templates that use this form
and associated tests.
---
 app/main/forms.py                            |  4 ++--
 app/templates/views/templates/_move_to.html  |  4 ++--
 tests/javascripts/templateFolderForm.test.js | 12 ++++++------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/main/forms.py b/app/main/forms.py
index d730293ed..f102dbda3 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -2178,8 +2178,8 @@ class TemplateAndFoldersSelectionForm(Form):
             required_for_ops('move-to-existing-folder'),
             Optional()
         ])
-    add_new_folder_name = StringField('Folder name', validators=[required_for_ops('add-new-folder')])
-    move_to_new_folder_name = StringField('Folder name', validators=[required_for_ops('move-to-new-folder')])
+    add_new_folder_name = GovukTextInputField('Folder name', validators=[required_for_ops('add-new-folder')])
+    move_to_new_folder_name = GovukTextInputField('Folder name', validators=[required_for_ops('move-to-new-folder')])
 
     add_template_by_template_type = RadioFieldWithRequiredMessage('New template', validators=[
         required_for_ops('add-new-template'),
diff --git a/app/templates/views/templates/_move_to.html b/app/templates/views/templates/_move_to.html
index f4d2ee494..01c22f3fb 100644
--- a/app/templates/views/templates/_move_to.html
+++ b/app/templates/views/templates/_move_to.html
@@ -16,7 +16,7 @@
     <div id="move_to_new_folder_form">
       <fieldset class="js-will-stick-at-bottom-when-scrolling">
         <legend class="govuk-visually-hidden">Add to new folder</legend>
-        {{ textbox(templates_and_folders_form.move_to_new_folder_name, width='1-1') }}
+        {{ templates_and_folders_form.move_to_new_folder_name(param_extensions={"classes": "govuk-!-width-full"}) }}
         {{ page_footer('Add to new folder', button_name='operation', button_value='move-to-new-folder') }}
       </fieldset>
     </div>
@@ -24,7 +24,7 @@
   <div id="add_new_folder_form">
     <fieldset class="js-will-stick-at-bottom-when-scrolling">
       <legend class="govuk-visually-hidden">Add new folder</legend>
-      {{ textbox(templates_and_folders_form.add_new_folder_name, width='1-1') }}
+      {{ templates_and_folders_form.add_new_folder_name(param_extensions={"classes": "govuk-!-width-full"}) }}
       {{ page_footer('Add new folder', button_name='operation', button_value='add-new-folder') }}
     </fieldset>
   </div>
diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js
index cf880c4bb..173d78580 100644
--- a/tests/javascripts/templateFolderForm.test.js
+++ b/tests/javascripts/templateFolderForm.test.js
@@ -53,11 +53,11 @@ function setFixtures (hierarchy) {
               <div id="move_to_new_folder_form">
                 <fieldset class="js-will-stick-at-bottom-when-scrolling">
                   <legend class="visuallyhidden">Add to new folder</legend>
-                  <div class="form-group">
-                    <label class="form-label" for="move_to_new_folder_name">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label" for="move_to_new_folder_name">
                       Folder name
                     </label>
-                    <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="">
+                    <input class="govuk-input govuk-!-width-full" id="move_to_new_folder_name" name="move_to_new_folder_name" type="text">
                   </div>
                   <div class="page-footer">
                     <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>
@@ -67,11 +67,11 @@ function setFixtures (hierarchy) {
               <div id="add_new_folder_form">
                 <fieldset class="js-will-stick-at-bottom-when-scrolling">
                   <legend class="visuallyhidden">Add new folder</legend>
-                  <div class="form-group">
-                    <label class="form-label" for="add_new_folder_name">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label" for="add_new_folder_name">
                       Folder name
                     </label>
-                    <input class="form-control form-control-1-1 " id="add_new_folder_name" name="add_new_folder_name" rows="8" type="text" value="">
+                    <input class="govuk-input govuk-!-width-full" id="add_new_folder_name" name="add_new_folder_name" type="text">
                   </div>
                   <div class="page-footer">
                     <button type="submit" class="govuk-button page-footer__button" name="operation" value="add-new-folder">Add new folder</button>