Add and use textarea component from GOV.UK Frontend

For the "Something else" branding form we want the form label to be the
title. This brings in the textarea component from GOV.UK Frontend in
order to do this since that contains code to set a the textarea label as
the page heading in an accessible way.

The rest of the textarea fields have not been switched to use the new
component yet.

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

@@ -35,6 +35,7 @@ $govuk-assets-path: "/static/";
 @import "components/checkboxes/_checkboxes";
 @import "components/input/_input";
 @import "components/inset-text/_inset-text";
+@import "components/textarea/_textarea";
 
 // update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
 @import "./focus/components";

app/main/forms.py

@@ -812,6 +812,49 @@ class GovukCheckboxField(BooleanField):
         return govuk_checkbox_field_widget(self, field, param_extensions=param_extensions, **kwargs)
 
 
+class GovukTextareaField(TextAreaField):
+
+    def __init__(self, label='', validators=None, param_extensions=None, **kwargs):
+        super(TextAreaField, self).__init__(label, validators, **kwargs)
+        self.param_extensions = param_extensions
+
+    # self.__call__ renders the HTML for the field by:
+    # 1. delegating to self.meta.render_field which
+    # 2. calls field.widget
+    # this bypasses that by making self.widget a method with the same interface as widget.__call__
+    def widget(self, field, param_extensions=None, **kwargs):
+        # error messages
+        error_message = None
+        if field.errors:
+            error_message = {"text": field.errors[0]}
+
+        params = {
+            "name": field.name,
+            "id": field.id,
+            "rows": 8,
+            "label": {
+                "text": field.label.text,
+                "classes": None,
+                "isPageHeading": False
+            },
+            "hint": {
+              "text": None
+            },
+            "errorMessage": error_message
+        }
+
+        # extend default params with any sent in during instantiation
+        if self.param_extensions:
+            merge_jsonlike(params, self.param_extensions)
+
+        # add any sent in though use in templates
+        if param_extensions:
+            merge_jsonlike(params, param_extensions)
+
+        return Markup(
+            render_template('components/textarea/template.njk', params=params))
+
+
 # based on work done by @richardjpope: https://github.com/richardjpope/recourse/blob/master/recourse/forms.py#L6
 class GovukCheckboxesField(SelectMultipleField):
 
@@ -2210,7 +2253,19 @@ class BrandingOptions(StripWhitespaceForm):
 
 
 class SomethingElseBrandingForm(StripWhitespaceForm):
-    something_else = TextAreaField('', validators=[DataRequired('Cannot be empty')])
+    something_else = GovukTextareaField(
+        'Describe the branding you want',
+        validators=[DataRequired('Cannot be empty')],
+        param_extensions={
+            "label": {
+                "isPageHeading": True,
+                "classes": "govuk-label--l",
+            },
+            "hint": {
+                "text": "Include links to your brand guidelines or examples of how to use your branding."
+            }
+        }
+    )
 
 
 class ServiceDataRetentionForm(StripWhitespaceForm):

app/templates/views/service-settings/branding/email-branding-something-else.html

@@ -2,8 +2,8 @@
 {% from "components/form.html" import form_wrapper %}
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/page-header.html" import page_header %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/textarea/macro.njk" import govukTextarea %}
 
 {% block service_page_title %}
   Describe the branding you want
@@ -17,14 +17,8 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header('Describe the branding you want') }}
-
-  {% call form_wrapper() %}
-    {{ textbox(
-      form.something_else,
-        hint='Include links to your brand guidelines or examples of how to use your branding.',
-        width='1-1',
-    ) }}
+  {% call form_wrapper(class="govuk-!-margin-top-3") %}
+    {{ form.something_else }}
     <p class="form-group">We’ll email you when your branding is ready, or if we need any more information.</p>
     {{ page_footer('Request new branding') }}
   {% endcall %}