app/main/views/styleguide.py

from flask import render_template
from flask_wtf import Form
from wtforms import StringField, PasswordField, TextAreaField, FileField, validators
from app.main import main


@main.route('/_styleguide')
def styleguide():

    class FormExamples(Form):
        username = StringField(u'Username')
        password = PasswordField(u'Password', [validators.required()])
        message = TextAreaField(u'Message')
        file_upload = FileField('Upload a CSV file to add your recipients’ details')

    form = FormExamples()

    form.message.data = "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax"  # noqa

    form.validate()

    return render_template(
        'views/styleguide.html',
        form=form
    )
-												Add a styleguide page

There are now quite a few frontend components in the app.

It’s good to have a reference for them to:
- document for developers what patterns are available and how they are used
- check for regressions
  - when working on one variation of a pattern you can check that your changes
    don’t break other variations of it
  - when changing the arguments to a pattern you can check that this doesn’t
    change the expected arguments already in use

This commit adds a single page (`/_styleguide`) which has examples of all the
patterns.

											
										
										
											2016-01-11 11:13:06 +00:00
+								from flask import render_template
-												Add a WTForms-compatible textbox macro

This macro:
- accepts a WTForm form field as a parameter
- renders a form field which follows the GOV.UK Elements patterns, both visually
  and in markup terms

It then changes any page which uses either:
- the old, non-WTForms macro or
- the old, WTFforms `render_field` macro

…to use this new macro and removes both of the old ones.

It also adds the option to display hint text above the textbox.

											
										
										
											2016-01-11 13:15:10 +00:00
+								from flask_wtf import Form
-												Add custom file upload component

The default browser file upload control is difficult to style, but looks totally
out of place.

This commit replaces it with one that has a GOV.UK style button, as a first
step.

Based heavily on this example:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

											
										
										
											2016-02-02 17:28:30 +00:00
+								from wtforms import StringField, PasswordField, TextAreaField, FileField, validators
-												Add a styleguide page

There are now quite a few frontend components in the app.

It’s good to have a reference for them to:
- document for developers what patterns are available and how they are used
- check for regressions
  - when working on one variation of a pattern you can check that your changes
    don’t break other variations of it
  - when changing the arguments to a pattern you can check that this doesn’t
    change the expected arguments already in use

This commit adds a single page (`/_styleguide`) which has examples of all the
patterns.

											
										
										
											2016-01-11 11:13:06 +00:00
+								from app.main import main
 								@main.route('/_styleguide')
 								def styleguide():
-												Add a WTForms-compatible textbox macro

This macro:
- accepts a WTForm form field as a parameter
- renders a form field which follows the GOV.UK Elements patterns, both visually
  and in markup terms

It then changes any page which uses either:
- the old, non-WTForms macro or
- the old, WTFforms `render_field` macro

…to use this new macro and removes both of the old ones.

It also adds the option to display hint text above the textbox.

											
										
										
											2016-01-11 13:15:10 +00:00
 								    class FormExamples(Form):
 								        username = StringField(u'Username')
 								        password = PasswordField(u'Password', [validators.required()])
 								        message = TextAreaField(u'Message')
-												Add custom file upload component

The default browser file upload control is difficult to style, but looks totally
out of place.

This commit replaces it with one that has a GOV.UK style button, as a first
step.

Based heavily on this example:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

											
										
										
											2016-02-02 17:28:30 +00:00
+								        file_upload = FileField('Upload a CSV file to add your recipients’ details')
-												Add a WTForms-compatible textbox macro

This macro:
- accepts a WTForm form field as a parameter
- renders a form field which follows the GOV.UK Elements patterns, both visually
  and in markup terms

It then changes any page which uses either:
- the old, non-WTForms macro or
- the old, WTFforms `render_field` macro

…to use this new macro and removes both of the old ones.

It also adds the option to display hint text above the textbox.

											
										
										
											2016-01-11 13:15:10 +00:00
 								    form = FormExamples()
 								    form.message.data = "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax"  # noqa
 								    form.validate()
 								    return render_template(
 								        'views/styleguide.html',
 								        form=form
 								    )