Merge pull request #67 from LandRegistry/govuk-frontend-46

GOV.UK Frontend 4.6.0

Author: matthew-shaw

.github/workflows/python-app.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: ["3.7", "3.8", "3.9", "3.10", "3.11"]
+        python-version: ["3.8", "3.9", "3.10", "3.11"]
 
     steps:
       - uses: actions/checkout@v3

.python-version

@@ -1 +1 @@
-3.10
+3.11

README.md

@@ -1,6 +1,6 @@
 # GOV.UK Frontend Flask
 
-![govuk-frontend 4.5.0](https://img.shields.io/badge/govuk--frontend%20version-4.5.0-005EA5?logo=gov.uk&style=flat)
+![govuk-frontend 4.6.0](https://img.shields.io/badge/govuk--frontend%20version-4.6.0-005EA5?logo=gov.uk&style=flat)
 
 **GOV.UK Frontend Flask is a [community tool](https://design-system.service.gov.uk/community/resources-and-tools/) of the [GOV.UK Design System](https://design-system.service.gov.uk/). The Design System team is not responsible for it and cannot support you with using it. Contact the [maintainers](#contributors) directly if you need [help](#support) or you want to request a feature.**
 
@@ -15,7 +15,7 @@ The app is provided intentionally bare, with just the essential parts that all s
 
 ### Required
 
-- Python 3.7.x or higher
+- Python 3.8.x or higher
 
 ### Optional
 

app/demos/forms.py

@@ -294,40 +294,46 @@ class KitchenSinkForm(FlaskForm):
 
 
 class ConditionalRevealForm(FlaskForm):
-    how_prefer_contacted = RadioField(
+    contact = RadioField(
         "How would you prefer to be contacted?",
         widget=GovRadioInput(),
-        validators=[InputRequired(message="Choose how you would prefer to be contacted")],
+        validators=[InputRequired(message="Select how you would prefer to be contacted")],
         choices=[
             ("email", "Email"),
             ("phone", "Phone"),
-            ("text_message", "Text message"),
+            ("text", "Text message"),
         ],
         description="Select one option.",
     )
 
-    email_address = StringField(
+    contact_by_email = StringField(
         "Email address",
         widget=GovTextInput(),
         # Set up the validation for each of the conditional fields with a custom RequiredIf validator
         # This will mark this field as required if the how_prefer_contacted is set to email
-        validators=[RequiredIf("how_prefer_contacted", "email", message="Enter an email address")],
+        validators=[
+            RequiredIf(
+                "contact", "email", message="Enter an email address in the correct format, like name@example.com"
+            )
+        ],
     )
 
-    phone = StringField(
+    contact_by_phone = StringField(
         "Phone number",
         widget=GovTextInput(),
-        validators=[RequiredIf("how_prefer_contacted", "phone", message="Enter a phone number")],
+        validators=[
+            RequiredIf("contact", "phone", message="Enter a telephone number, like 01632 960 001 or +44 808 157 0192")
+        ],
     )
 
-    mobile_phone = StringField(
+    contact_by_text = StringField(
         "Mobile phone number",
         widget=GovTextInput(),
         validators=[
             RequiredIf(
-                "how_prefer_contacted",
-                "text_message",
-                message="Enter a mobile phone number",
+                "contact",
+                "text",
+                message="Enter a mobile phone number, like 07700 900 982",
             )
         ],
     )

app/demos/routes.py

@@ -36,33 +36,33 @@ def forms():
 def bank_details():
     form = BankDetailsForm()
     if form.validate_on_submit():
-        flash("Form successfully submitted", "success")
-        return redirect(url_for("main.index"))
+        flash("Demo form successfully submitted", "success")
+        return redirect(url_for("demos.forms"))
     return render_template("bank_details.html", form=form)
 
 
 @bp.route("/forms/create-account", methods=["GET", "POST"])
 def create_account():
     form = CreateAccountForm()
     if form.validate_on_submit():
-        flash("Form successfully submitted", "success")
-        return redirect(url_for("main.index"))
+        flash("Demo form successfully submitted", "success")
+        return redirect(url_for("demos.forms"))
     return render_template("create_account.html", form=form)
 
 
 @bp.route("/forms/kitchen-sink", methods=["GET", "POST"])
 def kitchen_sink():
     form = KitchenSinkForm()
     if form.validate_on_submit():
-        flash("Form successfully submitted", "success")
-        return redirect(url_for("main.index"))
+        flash("Demo form successfully submitted", "success")
+        return redirect(url_for("demos.forms"))
     return render_template("kitchen_sink.html", form=form)
 
 
 @bp.route("/forms/conditional-reveal", methods=["GET", "POST"])
 def conditional_reveal():
     form = ConditionalRevealForm()
     if form.validate_on_submit():
-        flash("Form successfully submitted", "success")
-        return redirect(url_for("main.index"))
+        flash("Demo form successfully submitted", "success")
+        return redirect(url_for("demos.forms"))
     return render_template("conditional_reveal.html", form=form)

app/templates/base.html

@@ -13,8 +13,8 @@
   <meta name="description" content="{{config['SERVICE_NAME']}}">
   <meta name="keywords" content="GOV.UK, govuk, gov, government, uk, frontend, ui, user interface, jinja, python, flask, port, template, templating, macro, component, design system, html, forms, wtf, wtforms, widget, widgets, demo, example">
   <meta name="author" content="{{config['DEPARTMENT_NAME']}}">
-  <!--[if gt IE 8]><!--><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-4.5.0.min.css') }}" /><!--<![endif]-->
-  <!--[if IE 8]><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-ie8-4.5.0.min.css') }}" /><![endif]-->
+  <!--[if gt IE 8]><!--><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-4.6.0.min.css') }}" /><!--<![endif]-->
+  <!--[if IE 8]><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-ie8-4.6.0.min.css') }}" /><![endif]-->
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock %}
 
@@ -162,7 +162,7 @@
 
 {% block bodyEnd %}
   <!--[if gt IE 8]><!-->
-  <script src="{{ url_for('static', filename='govuk-frontend-4.5.0.min.js') }}"> </script>
+  <script src="{{ url_for('static', filename='govuk-frontend-4.6.0.min.js') }}"> </script>
   <script>window.GOVUKFrontend.initAll()</script>
   <!--<![endif]-->
   {% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}

app/templates/demos/conditional_reveal.html

@@ -35,16 +35,29 @@ <h1 class="govuk-heading-xl">Conditionally revealed inputs</h1>
       {{ form.csrf_token }}
 
       <!-- Grab html for conditional fields -->
-      {% set email_address %}
-        {{ form.email_address() }}
+      {% set emailHtml %}
+        {{ form.contact_by_email(params={
+          'type': 'email',
+          'autocomplete': 'email',
+          'spellcheck': false,
+          'classes': 'govuk-!-width-one-third'
+        }) }}
       {% endset %}
 
-      {% set phone %}
-        {{ form.phone() }}
+      {% set phoneHtml %}
+        {{ form.contact_by_phone(params={
+          'type': 'tel',
+          'autocomplete': 'tel',
+          'classes': 'govuk-!-width-one-third'
+        }) }}
       {% endset %}
 
-      {% set mobile_phone %}
-        {{ form.mobile_phone() }}
+      {% set textHtml %}
+        {{ form.contact_by_text(params={
+          'type': 'tel',
+          'autocomplete': 'tel',
+          'classes': 'govuk-!-width-one-third'
+        }) }}
       {% endset %}
 
       <!--
@@ -58,21 +71,21 @@ <h1 class="govuk-heading-xl">Conditionally revealed inputs</h1>
       The field definition in ConditionalRevealForm has three options.
       Therefore we have an array of three items here to match.
       -->
-      {{ form.how_prefer_contacted(params={
+      {{ form.contact(params={
         'items': [
           {
             'conditional': {
-              'html': email_address
+              'html': emailHtml
             }
           },
           {
             'conditional': {
-              'html': phone
+              'html': phoneHtml
             }
           },
           {
             'conditional': {
-              'html': mobile_phone
+              'html': textHtml
             }
           }
         ]

app/templates/demos/forms.html

@@ -22,6 +22,7 @@
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
+    {{ super() }}
     <span class="govuk-caption-xl">Demo</span>
     <h1 class="govuk-heading-l">Forms</h1>
     <ul class="govuk-list govuk-list--bullet">

build.sh

@@ -4,7 +4,7 @@ rm -rf app/static/images
 rm -rf app/static/govuk-frontend*
 
 # Get new release distribution assets and move to static directory
-curl -L https://github.com/alphagov/govuk-frontend/releases/download/v4.5.0/release-v4.5.0.zip > govuk_frontend.zip
+curl -L https://github.com/alphagov/govuk-frontend/releases/download/v4.6.0/release-v4.6.0.zip > govuk_frontend.zip
 unzip -o govuk_frontend.zip -d app/static
 mv app/static/assets/* app/static
 
@@ -21,10 +21,10 @@ rm -rf govuk_frontend.zip
 rm -rf govuk_components
 
 # Get new release source code and move to a directory
-curl -L https://github.com/alphagov/govuk-frontend/archive/v4.5.0.zip > govuk_frontend_source.zip
+curl -L https://github.com/alphagov/govuk-frontend/archive/v4.6.0.zip > govuk_frontend_source.zip
 unzip -o govuk_frontend_source.zip -d govuk_frontend_source
 mkdir govuk_components
-mv govuk_frontend_source/govuk-frontend-4.5.0/package/govuk/components/** govuk_components
+mv govuk_frontend_source/govuk-frontend-4.6.0/package/govuk/components/** govuk_components
 
 # Remove all files apart from test fixtures json
 find govuk_components -type f ! -name 'fixtures.json' -delete

requirements.in

@@ -1,13 +1,13 @@
 cssmin==0.2.0
-email_validator==1.3.1
+email_validator==2.0.0.post2
 flask-assets==2.0
 flask-compress==1.13
-flask-limiter==3.2.0
+flask-limiter==3.3.0
 flask-talisman==1.0.0
-flask==2.2.3
-govuk-frontend-jinja==2.5.0
-govuk-frontend-wtf==2.3.0
+flask==2.3.1
+govuk-frontend-jinja==2.6.0
+govuk-frontend-wtf==2.4.0
 gunicorn==20.1.0
 jsmin==3.0.1
-python-dotenv==0.21.1
-redis==4.5.1
+python-dotenv==1.0.0
+redis==4.5.4

requirements.txt

@@ -1,11 +1,13 @@
 #
-# This file is autogenerated by pip-compile with Python 3.10
+# This file is autogenerated by pip-compile with Python 3.11
 # by the following command:
 #
 #    pip-compile requirements.in
 #
 async-timeout==4.0.2
     # via redis
+blinker==1.6.2
+    # via flask
 brotli==1.0.9
     # via flask-compress
 click==8.1.3
@@ -18,9 +20,9 @@ deprecated==1.2.13
     # via limits
 dnspython==2.3.0
     # via email-validator
-email-validator==1.3.1
+email-validator==2.0.0.post2
     # via -r requirements.in
-flask==2.2.3
+flask==2.3.1
     # via
     #   -r requirements.in
     #   flask-assets
@@ -32,22 +34,24 @@ flask-assets==2.0
     # via -r requirements.in
 flask-compress==1.13
     # via -r requirements.in
-flask-limiter==3.2.0
+flask-limiter==3.3.0
     # via -r requirements.in
 flask-talisman==1.0.0
     # via -r requirements.in
 flask-wtf==1.1.1
     # via govuk-frontend-wtf
-govuk-frontend-jinja==2.5.0
+govuk-frontend-jinja==2.6.0
     # via
     #   -r requirements.in
     #   govuk-frontend-wtf
-govuk-frontend-wtf==2.3.0
+govuk-frontend-wtf==2.4.0
     # via -r requirements.in
 gunicorn==20.1.0
     # via -r requirements.in
 idna==3.4
     # via email-validator
+importlib-resources==5.12.0
+    # via limits
 itsdangerous==2.1.2
     # via
     #   flask
@@ -59,9 +63,9 @@ jinja2==3.1.2
     #   govuk-frontend-wtf
 jsmin==3.0.1
     # via -r requirements.in
-limits==3.2.0
+limits==3.4.0
     # via flask-limiter
-markdown-it-py==2.1.0
+markdown-it-py==2.2.0
     # via rich
 markupsafe==2.1.2
     # via
@@ -72,25 +76,25 @@ mdurl==0.1.2
     # via markdown-it-py
 ordered-set==4.1.0
     # via flask-limiter
-packaging==23.0
+packaging==23.1
     # via limits
-pygments==2.14.0
+pygments==2.15.1
     # via rich
-python-dotenv==0.21.1
+python-dotenv==1.0.0
     # via -r requirements.in
-redis==4.5.1
+redis==4.5.4
     # via -r requirements.in
-rich==13.3.1
+rich==13.3.4
     # via flask-limiter
 typing-extensions==4.5.0
     # via
     #   flask-limiter
     #   limits
 webassets==2.0
     # via flask-assets
-werkzeug==2.2.3
+werkzeug==2.3.0
     # via flask
-wrapt==1.14.1
+wrapt==1.15.0
     # via deprecated
 wtforms==3.0.1
     # via

requirements_dev.in

@@ -1,9 +1,9 @@
-bandit==1.7.4
+bandit==1.7.5
 black==22.12.0
-flake8-bugbear==23.2.13
+flake8-bugbear==23.3.23
 isort==5.12.0
 pep8-naming==0.13.3
-pip-tools==6.12.2
-pur==7.0.0
+pip-tools==6.13.0
+pur==7.1.0
 pytest-cov==4.0.0
 safety==2.3.5