Merge pull request #669 from communitiesuk/bau/govuk-frontend-5.4.0

Bau/govuk frontend 5.4.0
communitiesuk · Aug 12, 2024 · 4a2408b · 4a2408b
2 parents 21283f3 + 25c6a7e
commit 4a2408b
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 38 deletions.
diff --git a/app.py b/app.py
@@ -130,6 +130,9 @@ def pop_host_from_current_request(endpoint, values):
             "'self'",
             "'sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU='",
             "'sha256-l1eTVSK8DTnK8+yloud7wZUqFrI0atVo6VlC6PJvYaQ='",
+            "'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw='",
+            "'sha256-ndKdvEBfUn27+cpVrq2H697Dg88x3tsepe3veTUtsaA='",
+            "'sha256-oR+vHsLl1DMudaF9Ay6TIDK2lXwFka0z5sbdN5RZQxE='",
         ],
     }
     talisman.init_app(flask_app, content_security_policy=csp, force_https=False)

diff --git a/build.py b/build.py
@@ -8,7 +8,7 @@
 
 
 def build_govuk_assets(static_dist_root="static/src"):
-    GOVUK_FRONTEND_VERSION = "4.7.0"
+    GOVUK_FRONTEND_VERSION = "5.4.0"
     DIST_ROOT = "./" + static_dist_root
     GOVUK_DIR = "/govuk-frontend"
     GOVUK_URL = (

diff --git a/common/templates/common/base.html b/common/templates/common/base.html
@@ -12,7 +12,7 @@
 <meta name="description" content="{{ service_name }}">
 <meta name="keywords" content="GOV.UK, govuk, gov, government, uk, mhclg, funding">
 <meta name="author" content="{{ config['DEPARTMENT_NAME'] }}">
-<link rel="stylesheet" type="text/css" href="{{ url_for('.static', filename='govuk-frontend/govuk-frontend-4.7.0.min.css') }}" />
+<link rel="stylesheet" type="text/css" href="{{ url_for('.static', filename='govuk-frontend/govuk-frontend-5.4.0.min.css') }}" />
 <link rel="shortcut icon" href="{{ url_for('static', filename='govuk-frontend/images/favicon.ico') }}">
 {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock head %}
@@ -74,9 +74,11 @@ <h2 class="govuk-visually-hidden">Support links</h2>
 {% endblock footer %}
 
 {% block bodyEnd %}
-<!--[if gt IE 8]><!-->
-<script src="{{ url_for('static', filename='govuk-frontend/govuk-frontend-4.7.0.min.js') }}"> </script>
-<script>window.GOVUKFrontend.initAll()</script>
-<!--<![endif]-->
+  {% set govukFrontendJsURI %}{{ url_for('static', filename='govuk-frontend/govuk-frontend-5.4.0.min.js') }}{% endset %}
+  <script type="module" src="{{ govukFrontendJsURI }}"> </script>
+  <script type="module">
+      import { initAll } from '{{ govukFrontendJsURI }}'
+      initAll()
+  </script>
 {% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}
 {% endblock bodyEnd %}
diff --git a/find/templates/find/base.html b/find/templates/find/base.html
@@ -6,15 +6,15 @@
 {%- from 'govuk_frontend_jinja/components/phase-banner/macro.html' import govukPhaseBanner -%}
 {%- from 'govuk_frontend_jinja/components/header/macro.html' import govukHeader -%}
 
-{% set assetPath = url_for('static', filename='').rstrip('/') %}
+{% set assetPath = url_for('static', filename='govuk-frontend').rstrip('/') %}
 
 {% block pageTitle %}{{ config['FIND_SERVICE_NAME'] }} – GOV.UK{% endblock pageTitle %}
 
 {% block head %}
   <meta name="description" content="{{ config['FIND_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'] }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('.static', filename='govuk-frontend/govuk-frontend-4.7.0.min.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('.static', filename='govuk-frontend/govuk-frontend-5.4.0.min.css') }}" />
   <link rel="shortcut icon" href="{{ url_for('static', filename='govuk-frontend/images/favicon.ico') }}">
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock head %}
@@ -109,9 +109,11 @@ <h2 class="govuk-visually-hidden">Support links</h2>
 {% endblock footer %}
 
 {% block bodyEnd %}
-  <!--[if gt IE 8]><!-->
-  <script src="{{ url_for('static', filename='govuk-frontend/govuk-frontend-4.7.0.min.js') }}"> </script>
-  <script>window.GOVUKFrontend.initAll()</script>
-  <!--<![endif]-->
+  {% set govukFrontendJsURI %}{{ url_for('static', filename='govuk-frontend/govuk-frontend-5.4.0.min.js') }}{% endset %}
+  <script type="module" src="{{ govukFrontendJsURI }}"> </script>
+  <script type="module">
+      import { initAll } from '{{ govukFrontendJsURI }}'
+      initAll()
+  </script>
   {% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}
 {% endblock bodyEnd %}
diff --git a/find/templates/find/main/download.html b/find/templates/find/main/download.html
@@ -10,10 +10,6 @@
 {%- from "find/main/checkboxes.html" import checkboxItems -%}
 {%- from "find/main/select.html" import selectItems -%}
 
-{% block beforeContent %}
-  {{ super() }}
-{% endblock beforeContent %}
-
 {% block content %}
 <div class="govuk-grid-row">
 	<div class="govuk-grid-column-two-thirds">

diff --git a/find/templates/find/main/help.html b/find/templates/find/main/help.html
@@ -7,7 +7,7 @@
   <meta name="description" content="{{ config['FIND_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'] }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend/govuk-frontend-4.7.0.min.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend/govuk-frontend-5.4.0.min.css') }}" />
   <link rel="shortcut icon" href="{{ url_for('static', filename='govuk-frontend/images/favicon.ico') }}">
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock head %}

diff --git a/find/templates/find/main/login.html b/find/templates/find/main/login.html
@@ -8,7 +8,7 @@
   <meta name="description" content="{{ config['FIND_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'] }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend/govuk-frontend-4.7.0.min.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend/govuk-frontend-5.4.0.min.css') }}" />
   <link rel="shortcut icon" href="{{ url_for('static', filename='govuk-frontend/images/favicon.ico') }}">
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock head %}
@@ -46,7 +46,11 @@ <h2 class="govuk-heading-l govuk-!-margin-top-4">Get help</h2>
 {{ govukFooter({}) }}
 
 {% block bodyEnd %}
-  <script src="{{ url_for('static', filename='govuk-frontend/govuk-frontend-4.7.0.min.js') }}"> </script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  {% set govukFrontendJsURI %}{{ url_for('static', filename='govuk-frontend/govuk-frontend-5.4.0.min.js') }}{% endset %}
+  <script type="module" src="{{ govukFrontendJsURI }}"> </script>
+  <script type="module">
+      import { initAll } from '{{ govukFrontendJsURI }}'
+      initAll()
+  </script>
   {% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}
 {% endblock bodyEnd %}
diff --git a/requirements-dev.txt b/requirements-dev.txt
@@ -160,11 +160,11 @@ flask-wtf==1.1.1
     #   govuk-frontend-wtf
 funding-service-design-utils==5.0.1
     # via -r requirements.txt
-govuk-frontend-jinja==2.7.0
+govuk-frontend-jinja==3.1.0
     # via
     #   -r requirements.txt
     #   govuk-frontend-wtf
-govuk-frontend-wtf==2.5.0
+govuk-frontend-wtf==3.1.0
     # via -r requirements.txt
 greenlet==3.0.3
     # via playwright
@@ -518,7 +518,7 @@ wrapt==1.16.0
     # via
     #   -r requirements.txt
     #   pandera
-wtforms==3.0.1
+wtforms==3.1.2
     # via
     #   -r requirements.txt
     #   flask-wtf

diff --git a/requirements.in b/requirements.in
@@ -52,9 +52,9 @@ sentry-sdk
 #-----------------------------------
 #   GOV.UK Frontend
 #-----------------------------------
-govuk-frontend-wtf==2.5.0
-govuk-frontend-jinja==2.7.0  # Specific for GOV.UK Frontend v4.7.0
-wtforms==3.0.1  # Pin this specific version until we bump to GOV.UK Frontend v5.x, then we must go to >=3.1.0
+govuk-frontend-wtf==3.1.0
+govuk-frontend-jinja==3.1.0  # Specific for GOV.UK Frontend v5.4.0
+wtforms~=3.1
 
 #-----------------------------------
 #   frontend assets

diff --git a/requirements.txt b/requirements.txt
@@ -96,14 +96,12 @@ flask-wtf==1.1.1
     #   govuk-frontend-wtf
 funding-service-design-utils==5.0.1
     # via -r requirements.in
-govuk-frontend-jinja==2.7.0
+govuk-frontend-jinja==3.1.0
     # via
     #   -r requirements.in
     #   govuk-frontend-wtf
-govuk-frontend-wtf==2.5.0
+govuk-frontend-wtf==3.1.0
     # via -r requirements.in
-greenlet==3.0.3
-    # via sqlalchemy
 gunicorn==22.0.0
     # via funding-service-design-utils
 idna==3.7
@@ -257,7 +255,7 @@ werkzeug==2.3.8
     # via flask
 wrapt==1.16.0
     # via pandera
-wtforms==3.0.1
+wtforms==3.1.2
     # via
     #   -r requirements.in
     #   flask-wtf

diff --git a/submit/templates/submit/base.html b/submit/templates/submit/base.html
@@ -4,7 +4,7 @@
 {%- from 'govuk_frontend_jinja/components/phase-banner/macro.html' import govukPhaseBanner -%}
 {%- from 'govuk_frontend_jinja/components/header/macro.html' import govukHeader -%}
 
-{% set assetPath = url_for('static', filename='').rstrip('/') %}
+{% set assetPath = url_for('static', filename='govuk-frontend').rstrip('/') %}
 
 {% block pageTitle %}{{ config['SUBMIT_SERVICE_NAME'] }} – GOV.UK{% endblock pageTitle %}
 
@@ -14,7 +14,7 @@
   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'] }}">
 <link rel="stylesheet" type="text/css"
-  href="{{ url_for('.static', filename='govuk-frontend/govuk-frontend-4.7.0.min.css') }}" />
+  href="{{ url_for('.static', filename='govuk-frontend/govuk-frontend-5.4.0.min.css') }}" />
 <link rel="shortcut icon" href="{{ url_for('static', filename='govuk-frontend/images/favicon.ico') }}">
 {% assets "css" %}
 <link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
@@ -82,10 +82,12 @@
 {% endblock footer %}
 
 {% block bodyEnd %}
-<!--[if gt IE 8]><!-->
-<script src="{{ url_for('static', filename='govuk-frontend/govuk-frontend-4.7.0.min.js') }}"> </script>
-<script>window.GOVUKFrontend.initAll()</script>
-<!--<![endif]-->
+  {% set govukFrontendJsURI %}{{ url_for('static', filename='govuk-frontend/govuk-frontend-5.4.0.min.js') }}{% endset %}
+  <script type="module" src="{{ govukFrontendJsURI }}"> </script>
+  <script type="module">
+      import { initAll } from '{{ govukFrontendJsURI }}'
+      initAll()
+  </script>
 {% assets "js" %}
 <script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}
 {% endblock bodyEnd %}
diff --git a/tests/common_tests/test_maintenance_mode.py b/tests/common_tests/test_maintenance_mode.py
@@ -44,5 +44,5 @@ def test_maintenance_mode_healthcheck_available(test_client):
 )
 def test_maintenance_mode_static_assets_available(test_client):
     test_client.application.config["MAINTENANCE_MODE"] = True
-    response = test_client.get("/static/govuk-frontend/govuk-frontend-4.7.0.min.css")
+    response = test_client.get("/static/govuk-frontend/govuk-frontend-5.4.0.min.css")
     assert response.status_code == 200