darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-18 13:39:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Convert text inputs on ServiceUpdateEmailBranding

Browse Source 
Includes changes to templates that use this form
and associated tests.
This commit is contained in:
Tom Byers
2020-08-06 15:36:34 +01:00
parent 87beaf49ae
commit a3e661830d
6 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/colourPreview.js
View File

@@ -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>')
);

4
app/assets/stylesheets/govuk-frontend/extensions.scss
View File

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

12
app/main/forms.py
View File

@@ -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(

8
app/templates/views/email-branding/manage-branding.html
View File

@@ -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',

8
tests/app/main/views/test_email_branding.py
View File

@@ -78,9 +78,9 @@ def test_create_email_branding_does_not_show_any_branding_info(
page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
assert page.select_one('#logo-img > img') is None
assert page.select_one('#name').attrs.get('value') == ''
assert page.select_one('#text').attrs.get('value') == ''
assert page.select_one('#colour').attrs.get('value') == ''
assert page.select_one('#name').attrs.get('value') is None
assert page.select_one('#text').attrs.get('value') is None
assert page.select_one('#colour').attrs.get('value') is None
def test_create_new_email_branding_without_logo(
@@ -141,7 +141,7 @@ def test_create_email_branding_requires_a_name_when_submitting_logo_details(
_expected_status=200,
)
assert page.select_one('.error-message').text.strip() == 'This field is required'
assert page.select_one('.govuk-error-message').text.strip() == 'Error: This field is required'
assert mock_create_email_branding.called is False

8
tests/javascripts/colourPreview.test.js
View File

@@ -18,14 +18,14 @@ describe('Colour preview', () => {
// set up DOM
document.body.innerHTML = `
<div class="form-group" data-module="colour-preview">
<label class="form-label" for="colour">
<div class="govuk-form-group">
<label class="govuk-form-label" for="colour">
Colour
</label>
<input class="form-control form-control-1-4" id="colour" name="colour" rows="8" type="text" value="">
<input class="govuk-input govuk-input--width-6" id="colour" name="colour" rows="8" type="text" value="" data-module="colour-preview">
</div>`;
field = document.querySelector('.form-group');
field = document.querySelector('.govuk-form-group');
textbox = document.querySelector('input[type=text]');
});