Merge pull request #100 from LandRegistry/govuk-frontend-50

GOV.UK Frontend v5.0

Author: matthew-shaw

.github/workflows/dependency-review.yml

@@ -1,20 +1,39 @@
 # Dependency Review Action
 #
-# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+# This Action will scan dependency manifest files that change as part of a Pull Request,
+# surfacing known-vulnerable versions of the packages declared or updated in the PR.
+# Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable
+# packages will be blocked from merging.
 #
 # Source repository: https://github.com/actions/dependency-review-action
 # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
-name: 'Dependency Review'
-on: [pull_request]
+name: 'Dependency review'
+on:
+  pull_request:
+    branches: [ "main" ]
 
+# If using a dependency submission action in this workflow this permission will need to be set to:
+#
+# permissions:
+#   contents: write
+#
+# https://docs.github.com/en/enterprise-cloud@latest/code-security/supply-chain-security/understanding-your-software-supply-chain/using-the-dependency-submission-api
 permissions:
   contents: read
+  # Write permissions for pull-requests are required for using the `comment-summary-in-pr` option, comment out if you aren't using this option
+  pull-requests: write
 
 jobs:
   dependency-review:
     runs-on: ubuntu-latest
     steps:
-      - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+      - name: 'Checkout repository'
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v3
+        uses: actions/dependency-review-action@v4
+        # Commonly enabled options, see https://github.com/actions/dependency-review-action#configuration-options for all available options.
+        with:
+          comment-summary-in-pr: always
+        #   fail-on-severity: moderate
+        #   deny-licenses: GPL-1.0-or-later, LGPL-2.0-or-later
+        #   retry-on-snapshot-warnings: true

.github/workflows/python-app.yml

@@ -17,10 +17,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Set up Python 3.11
+      - name: Set up Python 3.12
         uses: actions/setup-python@v4
         with:
-          python-version: 3.11
+          python-version: 3.12
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
@@ -32,7 +32,7 @@ jobs:
         run: bandit -r . -x /tests
       - name: Check code formatting
         run: |
-          black . -t py311 -l 120 --check
+          black . -t py312 -l 120 --check
           isort . -c
       - name: Lint with flake8
         run: |

.gitignore

@@ -6,6 +6,7 @@ app/static/fonts*
 app/static/govuk-frontend*
 app/static/images*
 app/static/VERSION.txt
+app/static/manifest.json
 govuk_components*
 
 ### certificates ###

.python-version

@@ -1 +1 @@
-3.11
+3.12

Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.11-slim
+FROM python:3.12-slim
 
 RUN useradd containeruser
 
@@ -17,5 +17,5 @@ ENV FLASK_APP=govuk-frontend-flask.py \
 
 USER containeruser
 
-EXPOSE 8000
+EXPOSE 9876
 ENTRYPOINT ["./docker-entrypoint.sh"]

README.md

@@ -1,6 +1,6 @@
 # GOV.UK Frontend Flask
 
-![govuk-frontend 4.7.0](https://img.shields.io/badge/govuk--frontend%20version-4.7.0-005EA5?logo=gov.uk&style=flat)
+![govuk-frontend 5.1.0](https://img.shields.io/badge/govuk--frontend%20version-5.1.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.**
 
@@ -53,7 +53,7 @@ python -c 'import secrets; print(secrets.token_hex())'
 docker compose up --build
 ```
 
-You should now have the app running on <https://localhost:8000/>. Accept the browsers security warning due to the self-signed HTTPS certificate to continue.
+You should now have the app running on <https://localhost:9876/>. Accept the browsers security warning due to the self-signed HTTPS certificate to continue.
 
 ## Demos
 

app/__init__.py

@@ -39,17 +39,63 @@ def create_app(config_class=Config):
         "default-src": "'self'",
         "script-src": [
             "'self'",
-            "'sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU='",
-            "'sha256-l1eTVSK8DTnK8+yloud7wZUqFrI0atVo6VlC6PJvYaQ='",
+            "'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw='",
+            "'sha256-EOlYC7YurunqHZxQoZ/zL5TKc/rPajg45h85KVyb5So='",
         ],
     }
 
+    # Set permissions policy
+    permissions_policy = {
+        "accelerometer": "()",
+        "ambient-light-sensor": "()",
+        "autoplay": "()",
+        "battery": "()",
+        "camera": "()",
+        "cross-origin-isolated": "()",
+        "display-capture": "()",
+        "document-domain": "()",
+        "encrypted-media": "()",
+        "execution-while-not-rendered": "()",
+        "execution-while-out-of-viewport": "()",
+        "fullscreen": "()",
+        "geolocation": "()",
+        "gyroscope": "()",
+        "keyboard-map": "()",
+        "magnetometer": "()",
+        "microphone": "()",
+        "midi": "()",
+        "navigation-override": "()",
+        "payment": "()",
+        "picture-in-picture": "()",
+        "publickey-credentials-get": "()",
+        "screen-wake-lock": "()",
+        "sync-xhr": "()",
+        "usb": "()",
+        "web-share": "()",
+        "xr-spatial-tracking": "()",
+        "clipboard-read": "()",
+        "clipboard-write": "()",
+        "gamepad": "()",
+        "speaker-selection": "()",
+        "conversion-measurement": "()",
+        "focus-without-user-activation": "()",
+        "hid": "()",
+        "idle-detection": "()",
+        "interest-cohort": "()",
+        "serial": "()",
+        "sync-script": "()",
+        "trust-token-redemption": "()",
+        "unload": "()",
+        "window-management": "()",
+        "vertical-scroll": "()",
+    }
+
     # Initialise app extensions
     assets.init_app(app)
     compress.init_app(app)
     csrf.init_app(app)
     limiter.init_app(app)
-    talisman.init_app(app, content_security_policy=csp)
+    talisman.init_app(app, content_security_policy=csp, permissions_policy=permissions_policy)
     WTFormsHelpers(app)
 
     # Create static asset bundles

app/demos/forms.py

@@ -164,42 +164,42 @@ class KitchenSinkForm(FlaskForm):
         "StringField",
         widget=GovTextInput(),
         validators=[InputRequired(message="StringField is required")],
-        description="Hint text: WTForm StringField rendered using a GovTextInput widget.",
+        description="StringField rendered using a GovTextInput widget.",
     )
 
     email_field = StringField(
         "EmailField",
         widget=GovTextInput(),
         validators=[InputRequired(message="EmailField is required"), Email()],
-        description="Hint text: WTForm StringField rendered using a GovTextInput widget.",
+        description="StringField rendered using a GovTextInput widget.",
     )
 
     float_field = FloatField(
         "FloatField",
         widget=GovTextInput(),
         validators=[InputRequired(message="FloatField is required")],
-        description="Hint text: WTForm FloatField rendered using a GovTextInput widget.",
+        description="FloatField rendered using a GovTextInput widget.",
     )
 
     integer_field = IntegerField(
         "IntegerField",
         widget=GovTextInput(),
         validators=[InputRequired(message="IntegerField is required")],
-        description="Hint text: WTForm IntegerField rendered using a GovTextInput widget.",
+        description="IntegerField rendered using a GovTextInput widget.",
     )
 
     decimal_field = DecimalField(
         "DecimalField",
         widget=GovTextInput(),
         validators=[InputRequired(message="DecimalField is required")],
-        description="Hint text: WTForm DecimalField rendered using a GovTextInput widget.",
+        description="DecimalField rendered using a GovTextInput widget.",
     )
 
     textarea_field = TextAreaField(
         "TextAreaField",
         widget=GovTextArea(),
         validators=[InputRequired(message="TextAreaField is required")],
-        description="Hint text: WTForm TextAreaField rendered using a GovTextArea widget.",
+        description="TextAreaField rendered using a GovTextArea widget.",
     )
 
     charactercount_field = TextAreaField(
@@ -209,14 +209,14 @@ class KitchenSinkForm(FlaskForm):
             InputRequired(message="CharacterCountField is required"),
             Length(max=200, message="CharacterCountField must be 200 characters or fewer "),
         ],
-        description="Hint text: WTForm TextAreaField rendered using a GovCharacterCount widget.",
+        description="TextAreaField rendered using a GovCharacterCount widget.",
     )
 
     boolean_field = BooleanField(
         "BooleanField",
         widget=GovCheckboxInput(),
         validators=[InputRequired(message="Please tick the box")],
-        description="Hint text: WTForm BooleanField rendered using a GovCheckboxInput widget.",
+        description="BooleanField rendered using a GovCheckboxInput widget.",
     )
 
     select_field = SelectField(
@@ -230,37 +230,37 @@ class KitchenSinkForm(FlaskForm):
             ("three", "Three"),
         ],
         default="",
-        description="Hint text: WTForm SelectField rendered using a GovSelect widget.",
+        description="SelectField rendered using a GovSelect widget.",
     )
 
     select_multiple_field = SelectMultipleField(
         "SelectMultipleField",
         widget=GovCheckboxesInput(),
         validators=[InputRequired(message="Please select an option")],
         choices=[("one", "One"), ("two", "Two"), ("three", "Three")],
-        description="Hint text: WTForm SelectMultipleField rendered using a GovCheckboxesInput widget.",
+        description="SelectMultipleField rendered using a GovCheckboxesInput widget.",
     )
 
     radio_field = RadioField(
         "RadioField",
         widget=GovRadioInput(),
         validators=[InputRequired(message="Please select an option")],
         choices=[("one", "One"), ("two", "Two"), ("three", "Three")],
-        description="Hint text: WTForm RadioField rendered using a GovRadioInput widget.",
+        description="RadioField rendered using a GovRadioInput widget.",
     )
 
     file_field = FileField(
         "FileField",
         widget=GovFileInput(),
         validators=[InputRequired(message="Please upload a file")],
-        description="Hint text: WTForm FileField rendered using a GovFileInput widget.",
+        description="FileField rendered using a GovFileInput widget.",
     )
 
     multiple_file_field = MultipleFileField(
         "MultipleFileField",
         widget=GovFileInput(multiple=True),
         validators=[InputRequired(message="Please upload a file")],
-        description="Hint text: WTForm MultipleFileField rendered using a MultipleFileField widget.",
+        description="MultipleFileField rendered using a MultipleFileField widget.",
     )
 
     password_field = PasswordField(
@@ -273,21 +273,21 @@ class KitchenSinkForm(FlaskForm):
                 message="Please ensure both password fields match",
             ),
         ],
-        description="Hint text: WTForm PasswordField rendered using a GovPasswordInput widget.",
+        description="PasswordField rendered using a GovPasswordInput widget.",
     )
 
     date_field = DateField(
         "DateField",
         widget=GovDateInput(),
         validators=[InputRequired(message="DateField is required")],
-        description="Hint text: WTForm DateField rendered using a GovDateInput widget.",
+        description="DateField rendered using a GovDateInput widget.",
     )
 
     date_time_field = DateTimeField(
         "DateTimeField",
         widget=GovDateInput(),
         validators=[InputRequired(message="DateTimeField is required")],
-        description="Hint text: WTForm DateTimeField rendered using a GovDateInput widget.",
+        description="DateTimeField rendered using a GovDateInput widget.",
     )
 
     submit_button = SubmitField("SubmitField", widget=GovSubmitInput())

app/demos/routes.py

@@ -1,6 +1,6 @@
-import json
 import os
 
+import yaml
 from flask import flash, redirect, render_template, url_for
 from werkzeug.exceptions import NotFound
 
@@ -19,12 +19,12 @@ def components():
 @bp.route("/components/<string:component>", methods=["GET"])
 def component(component):
     try:
-        with open("govuk_components/{}/fixtures.json".format(component)) as json_file:
-            fixtures = json.load(json_file)
+        with open(f"govuk_components/{component}/{component}.yaml") as yaml_file:
+            fixtures = yaml.safe_load(yaml_file)
     except FileNotFoundError:
         raise NotFound
 
-    return render_template("component.html", fixtures=fixtures)
+    return render_template("component.html", component=component, fixtures=fixtures)
 
 
 @bp.route("/forms", methods=["GET"])

app/templates/base.html

@@ -13,8 +13,7 @@
   <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.7.0.min.css') }}" /><!--<![endif]-->
-  <!--[if IE 8]><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-ie8-4.7.0.min.css') }}" /><![endif]-->
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-5.1.0.min.css') }}" />
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock %}
 
@@ -111,7 +110,8 @@
   {{ govukHeader({
     'homepageUrl': url_for('main.index'),
     'serviceName': config['SERVICE_NAME'],
-    'serviceUrl': url_for('main.index')
+    'serviceUrl': url_for('main.index'),
+    'useTudorCrown': true
   }) }}
 {% endblock %}
 
@@ -120,7 +120,7 @@
     'tag': {
       'text': config['SERVICE_PHASE']
     },
-    'html': 'This is a new service – your <a class="govuk-link" href="mailto:' + config['CONTACT_EMAIL'] +'?subject=Feedback">feedback</a> will help us to improve it.'
+    'html': 'This is a new service – your <a class="govuk-link" href="mailto:' + config['CONTACT_EMAIL'] + '">feedback</a> will help us to improve it.'
   }) }}
 {% endblock %}
 
@@ -161,9 +161,10 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <!--[if gt IE 8]><!-->
-  <script src="{{ url_for('static', filename='govuk-frontend-4.7.0.min.js') }}"> </script>
-  <script>window.GOVUKFrontend.initAll()</script>
-  <!--<![endif]-->
+  <script type="module" src="{{ url_for('static', filename='govuk-frontend-5.1.0.min.js') }}"></script>
+  <script type="module">
+    import { initAll } from "{{ url_for('static', filename='govuk-frontend-5.1.0.min.js') }}"
+    initAll()
+  </script>
   {% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}
 {% endblock %}