govuk frontend wtf

Widgets wtforms do front -end gov.uk

Gov.uk Frontend WTForms é uma ferramenta comunitária do sistema de design Gov.uk. A equipe do sistema de design não é responsável por isso e não pode apoiá -lo no uso. Entre em contato diretamente com os mantenedores se precisar de ajuda ou deseja solicitar um recurso.

Este repositório contém um conjunto de widgets wtforms usados para renderizar campos wtform usando o estilo do componente de front -end gov.uk. Isso é feito usando as macros Jinja da porta Jinja do frontend Gov.uk do Gov.uk frontend das macros do Gov.uk Frontend Nunjucks. Estes são mantidos atualizados com os lançamentos do Gov.uk front-end, são completamente testados e produzem uma marcação 100% equivalente.

Essa abordagem também renderiza as mensagens de erro associadas no local apropriado, mostra o componente de resumo do erro na parte superior da página e define todos os atributos de acessibilidade relacionados. A adição do widget apropriado à sua classe Python existente, juntamente com modelos muito mais simples, torna rápido e fácil produzir formas totalmente compatíveis com Gov.uk.

Se você deseja criar um aplicativo Flask totalmente em destaque que se integra ao Gov.uk Frontend Jinja e Gov.uk Frontend Wtforms, use o repositório de modelo de Frontend Gov.uk para gerar seu aplicativo.

Como usar

Para exemplos mais detalhados, consulte o código -fonte do aplicativo de demonstração.

Depois de executar pip install govuk-frontend-wtf , verifique se você diz a Jinja onde carregar os modelos de usar o PackageLoader , registrar WTFormsHelpers e defina uma variável de ambiente para SECRET_KEY .

app/__init__.py :

 from flask import Flask
from govuk_frontend_wtf . main import WTFormsHelpers
from jinja2 import ChoiceLoader , PackageLoader , PrefixLoader

app = Flask ( __name__ )
app . config [ "SECRET_KEY" ] = os . environ . get ( "SECRET_KEY" )

app . jinja_loader = ChoiceLoader (
    [
        PackageLoader ( "app" ),
        PrefixLoader (
            {
                "govuk_frontend_jinja" : PackageLoader ( "govuk_frontend_jinja" ),
                "govuk_frontend_wtf" : PackageLoader ( "govuk_frontend_wtf" ),
            }
        ),
    ]
)

WTFormsHelpers ( app )

Importar e incluir o widget relevante em cada campo na sua classe de formulário (consulte a tabela abaixo). Observe que, neste exemplo, widget=GovTextInput() é a única diferença em relação a uma definição padrão de formulário de Flask-WTF.

app/forms.py :

 from flask_wtf import FlaskForm
from govuk_frontend_wtf . wtforms_widgets import GovSubmitInput , GovTextInput
from wtforms import StringField , SubmitField
from wtforms . validators import Email , InputRequired , Length


class ExampleForm ( FlaskForm ):
    email_address = StringField (
        "Email address" ,
        widget = GovTextInput (),
        validators = [
            InputRequired ( message = "Enter an email address" ),
            Length ( max = 256 , message = "Email address must be 256 characters or fewer" ),
            Email ( message = "Enter an email address in the correct format, like [email protected]" ),
        ],
        description = "We’ll only use this to send you a receipt" ,
    )

    submit = SubmitField ( "Continue" , widget = GovSubmitInput ())

Crie uma rota para servir seu formulário e modelo.

app/routes.py :

 from flask import redirect , render_template , url_for

from app import app
from app . forms import ExampleForm

@ app . route ( "/" )
def index ():
    return render_template ( "index.html" )


@ app . route ( "/example-form" , methods = [ "GET" , "POST" ])
def example ():
    form = ExampleForm ()
    if form . validate_on_submit ():
        return redirect ( url_for ( "index" ))
    return render_template ( "example_form.html" , form = form )

Finalmente, em seu modelo, defina o título da página adequadamente se houver algum erro de validação de formulário, conforme as orientações do sistema de design do Gov.uk. Inclua o componente govukErrorSummary() no início do bloco content . Passe os parâmetros em um dicionário para o seu campo de formulário, conforme as opções de macro de componentes associadas.

app/templates/example_form.html :

{% extends "base.html" %}

{%- from 'govuk_frontend_jinja/components/error-summary/macro.html' import govukErrorSummary -%}

{% block pageTitle %}{%- if form and form.errors %}Error: {% endif -%}Example form – GOV.UK Frontend WTForms Demo{% endblock %}

{% block content %}
< div class =" govuk-grid-row " >
    < div class =" govuk-grid-column-two-thirds " >
        {% if form.errors %}
            {{ govukErrorSummary(wtforms_errors(form)) }}
        {% endif %}

        < h1 class =" govuk-heading-xl " > Example form </ h1 >

        < form action ="" method =" post " novalidate >
            {{ form.csrf_token }}
            
            {{ form.email_address(params={
              'type': 'email',
              'autocomplete': 'email',
              'spellcheck': false
            }) }}
            
            {{ form.submit }}
        </ form >
    </ div >
</ div >
{% endblock %}

Widgets

Os widgets disponíveis e seus tipos de campo de Flask-WTF correspondentes são os seguintes:

Campo wtforms	Gov. Widget (s) do Reino Unido	Notas
Booleanfield	GovcheckboxInput
DateField	GovdateInput
DateTimefield	GovdateInput
Decimalfield	GovTextInput
FileField	GovFileInput
Múltiplofilefield	GovfileInput (múltiplo = true)	Observe que você precisa especificar multiple=True ao invocar o widget na sua classe de formulário. Não quando você o renderiza no modelo Jinja.
Floatfield	GovTextInput
Integerfield	GovTextInput	Use params para especificar um type se precisar usar elementos de número HTML5. Isso não acontecerá automaticamente.
PasswordField	GovPasswordInput
Radiofield	GovradioInput
Selectfield	GovSelect
SelectMultipleField	GovcheckboxesInput	Observe que isso renderiza as caixas de seleção, pois <select multiple> elementos são desaprovados.
Submitfield	Govsubmitinput
Stringfield	GovTextInput
TextEAabield	GovTextarea, GovCharacterCount

Para gerar coisas como campos de e -mail usando GovTextInput , você precisará passar parâmetros adicionais ao renderizá -lo da seguinte forma:

{{ form.email_address(params={'type': 'email', 'autocomplete': 'email', 'spellcheck': false}) }}

Executando os testes

python3 -m venv venv
source venv/bin/activate
pip install -r tests/requirements.txt
pytest --cov=govuk_frontend_wtf --cov-report=term-missing --cov-branch

Versão

Usamos o Semver para versões. Para as versões disponíveis, consulte as tags neste repositório.

Como contribuir

Congratulamo -nos com a contribuição da comunidade. Se você deseja contribuir com este projeto, revise as diretrizes Código de Conduta e Contribuição.

Colaboradores

• Matt Shaw (mantenedor primário)
• Andy Mantell (autor original)

Veja a lista completa de colaboradores no GitHub

Apoiar

Este software é fornecido "como está" sem garantia. O suporte é fornecido com base em "melhores empreendimentos" pelos mantenedores e pela comunidade de código aberto.

Se você é um funcionário público, pode se inscrever no espaço de trabalho do Governo do Governo do Reino Unido para entrar em contato com os mantenedores listados acima e a comunidade de pessoas que usam esse projeto no canal #govuk-design-system.

Caso contrário, consulte as diretrizes de contribuição sobre como aumentar um relatório de bug ou solicitação de recurso.