diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss index 6cf2aff39..b048562cb 100644 --- a/app/assets/stylesheets/govuk-frontend/_all.scss +++ b/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"; diff --git a/app/main/forms.py b/app/main/forms.py index d688f98f1..64c121641 100644 --- a/app/main/forms.py +++ b/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): diff --git a/app/templates/views/service-settings/branding/email-branding-something-else.html b/app/templates/views/service-settings/branding/email-branding-something-else.html index c022ff9ad..c3301f6db 100644 --- a/app/templates/views/service-settings/branding/email-branding-something-else.html +++ b/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 }}
We’ll email you when your branding is ready, or if we need any more information.
{{ page_footer('Request new branding') }} {% endcall %} diff --git a/gulpfile.js b/gulpfile.js index fa1128fc1..bc77c07bc 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -72,7 +72,8 @@ const copy = { 'checkboxes', 'radios', 'input', - 'inset-text' + 'inset-text', + 'textarea' ]; let done = 0; diff --git a/tests/app/main/views/test_service_settings.py b/tests/app/main/views/test_service_settings.py index 9d7534614..07dd59a76 100644 --- a/tests/app/main/views/test_service_settings.py +++ b/tests/app/main/views/test_service_settings.py @@ -5704,7 +5704,7 @@ def test_submit_email_branding_something_else_page_shows_error_if_textbox_is_emp _follow_redirects=True, ) assert normalize_spaces(page.h1.text) == 'Describe the branding you want' - assert normalize_spaces(page.select_one('.error-message').text) == 'Cannot be empty' + assert normalize_spaces(page.select_one('.govuk-error-message').text) == 'Error: Cannot be empty' def test_service_settings_links_to_branding_request_page_for_letters(