Convert text inputs on ServiceUpdateEmailBranding

Includes changes to templates that use this form
and associated tests.

app/assets/javascripts/colourPreview.js

@@ -8,9 +8,9 @@
 
     this.start = component => {
 
-      this.$input = $('input', component);
+      this.$input = $(component);
 
-      $(component).append(
+      this.$input.closest('.govuk-form-group').append(
         this.$preview = $('<span class="textbox-colour-preview"></span>')
       );
 

app/assets/stylesheets/govuk-frontend/extensions.scss

@@ -48,3 +48,7 @@ $govuk-grid-widths: (
   seven-eighths: 87.5%,
   full: 100%
 );
+
+.govuk-input--width-6 {
+  max-width: 14ex;
+}

app/main/forms.py

@@ -1554,13 +1554,17 @@ class PreviewBranding(StripWhitespaceForm):
 
 
 class ServiceUpdateEmailBranding(StripWhitespaceForm):
-    name = StringField('Name of brand')
-    text = StringField('Text')
-    colour = StringField(
+    name = GovukTextInputField('Name of brand')
+    text = GovukTextInputField('Text')
+    colour = GovukTextInputField(
         'Colour',
         validators=[
             Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code (starting with #)')
-        ]
+        ],
+        param_extensions={
+            "classes": "govuk-input--width-6",
+            "attributes": {"data-module": "colour-preview"}
+        }
     )
     file = FileField_wtf('Upload a PNG logo', validators=[FileAllowed(['png'], 'PNG Images only!')])
     brand_type = RadioField(

app/templates/views/email-branding/manage-branding.html

@@ -29,10 +29,10 @@
       {{ file_upload(form.file, button_text='{} logo'.format('Update' if email_branding else 'Upload')) }}
       {% call form_wrapper() %}
         <div class="form-group">
-          <div style='margin-top:15px;'>{{textbox(form.name)}}</div>
-          <div style='margin-top:15px;'>{{textbox(form.text)}}</div>
-          {{ textbox(form.colour, width='1-4', colour_preview=True) }}
-           {{ radios(form.brand_type) }}
+          <div style='margin-top:15px;'>{{form.name}}</div>
+          <div style='margin-top:15px;'>{{form.text}}</div>
+          {{ form.colour }}
+          {{ radios(form.brand_type) }}
           {{ page_footer(
             'Save',
             button_name='operation',