Merge pull request #150 from LandRegistry/navigation

Service navigation

Author: matthew-shaw

.github/workflows/codeql.yml

@@ -13,12 +13,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ "main", "develop" ]
+    branches: ["main", "develop"]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ["main"]
   schedule:
-    - cron: '40 16 * * 6'
+    - cron: "40 16 * * 6"
 
 jobs:
   analyze:
@@ -38,45 +38,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript-typescript', 'python' ]
+        language: ["javascript-typescript", "python"]
         # CodeQL supports [ 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift' ]
         # Use only 'java-kotlin' to analyze code written in Java, Kotlin or both
         # Use only 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
+      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:${{matrix.language}}"

.github/workflows/dependency-review.yml

@@ -7,10 +7,10 @@
 #
 # 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'
+name: "Dependency review"
 on:
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
 
 # If using a dependency submission action in this workflow this permission will need to be set to:
 #
@@ -27,9 +27,9 @@ jobs:
   dependency-review:
     runs-on: ubuntu-latest
     steps:
-      - name: 'Checkout repository'
+      - name: "Checkout repository"
         uses: actions/checkout@v4
-      - name: 'Dependency Review'
+      - name: "Dependency Review"
         uses: actions/dependency-review-action@v4
         # Commonly enabled options, see https://github.com/actions/dependency-review-action#configuration-options for all available options.
         with:

.github/workflows/python-app.yml

@@ -5,9 +5,9 @@ name: Python application
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
 
 permissions:
   contents: read

README.md

@@ -1,6 +1,6 @@
 # GOV.UK Frontend Flask
 
-![govuk-frontend 5.6.0](https://img.shields.io/badge/govuk--frontend%20version-5.6.0-005EA5?logo=gov.uk&style=flat)
+![govuk-frontend 5.7.1](https://img.shields.io/badge/govuk--frontend%20version-5.7.1-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.**
 
@@ -35,7 +35,7 @@ In the `compose.yml` file you will find a number of environment variables. These
 - SERVICE_PHASE
 - SERVICE_URL
 
-You must also set a new unique `SECRET_KEY`, which is used to securely sign the session cookie and CSRF tokens. It should be a long random `bytes` or `str`. You can use the output of this Python comand to generate a new key:
+You must also set a new unique `SECRET_KEY`, which is used to securely sign the session cookie and CSRF tokens. It should be a long random `bytes` or `str`. You can use the output of this Python command to generate a new key:
 
 ```shell
 python -c 'import secrets; print(secrets.token_hex())'
@@ -108,7 +108,7 @@ Please refer to the specific packages documentation for more details.
 
 Custom CSS and JavaScript files are merged and minified using [Flask Assets](https://flask-assets.readthedocs.io/en/latest/) and [Webassets](https://webassets.readthedocs.io/en/latest/). This takes all `*.css` files in `app/static/src/css` and all `*.js` files in `app/static/src/js` and outputs a single minified file to both `app/static/dist/css` and `app/static/dist/js` respectively.
 
-CSS is [minified](https://en.wikipedia.org/wiki/Minification_(programming)) using [CSSMin](https://github.com/zacharyvoase/cssmin) and JavaScript is minified using [JSMin](https://github.com/tikitu/jsmin/). This removes all whitespace characters, comments and line breaks to reduce the size of the source code, making its transmission over a network more efficient.
+CSS is [minified](<https://en.wikipedia.org/wiki/Minification_(programming)>) using [CSSMin](https://github.com/zacharyvoase/cssmin) and JavaScript is minified using [JSMin](https://github.com/tikitu/jsmin/). This removes all whitespace characters, comments and line breaks to reduce the size of the source code, making its transmission over a network more efficient.
 
 ### Cache busting
 

app/templates/base.html

@@ -4,6 +4,7 @@
 {%- from 'govuk_frontend_jinja/components/error-summary/macro.html' import govukErrorSummary-%}
 {%- from 'govuk_frontend_jinja/components/notification-banner/macro.html' import govukNotificationBanner -%}
 {%- from 'govuk_frontend_jinja/components/phase-banner/macro.html' import govukPhaseBanner -%}
+{%- from 'govuk_frontend_jinja/components/service-navigation/macro.html' import govukServiceNavigation -%}
 
 {% set assetPath = url_for('static', filename='').rstrip('/') %}
 
@@ -13,7 +14,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']}}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-5.6.0.min.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-5.7.1.min.css') }}" />
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock %}
 
@@ -108,10 +109,17 @@
 
 {% block header %}
   {{ govukHeader({
-    'homepageUrl': url_for('main.index'),
+    'classes': 'govuk-header--full-width-border',
+    'homepageUrl': 'https://www.gov.uk/'
+  }) }}
+
+  {{ govukServiceNavigation({
     'serviceName': config['SERVICE_NAME'],
     'serviceUrl': url_for('main.index'),
-    'useTudorCrown': true
+    'navigation': [
+      {'href': url_for('demos.components'), 'text': 'Components'},
+      {'href': url_for('demos.forms'), 'text': 'Forms'}
+    ]
   }) }}
 {% endblock %}
 
@@ -161,9 +169,9 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ url_for('static', filename='govuk-frontend-5.6.0.min.js') }}"></script>
+  <script type="module" src="{{ url_for('static', filename='govuk-frontend-5.7.1.min.js') }}"></script>
   <script type="module">
-    import { initAll } from "{{ url_for('static', filename='govuk-frontend-5.6.0.min.js') }}"
+    import { initAll } from "{{ url_for('static', filename='govuk-frontend-5.7.1.min.js') }}"
     initAll()
   </script>
   {% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}

app/templates/demos/autocomplete.html

@@ -1,29 +1,7 @@
 {% extends "base.html" %}
 
-{%- from 'govuk_frontend_jinja/components/breadcrumbs/macro.html' import govukBreadcrumbs -%}
-
 {% block pageTitle %}{%- if form.errors %}Error: {% endif -%}Autocomplete – GOV.UK{% endblock %}
 
-{% block beforeContent %}
-  {{ super() }}
-  {{ govukBreadcrumbs({
-    'collapseOnMobile': True,
-    'items': [
-        {
-            'text': "Home",
-            'href': url_for('main.index')
-        },
-        {
-            'text': "Forms",
-            'href': url_for('demos.forms')
-        },
-        {
-            'text': "Autocomplete"
-        }
-    ]
-  }) }}
-{% endblock %}
-
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">

app/templates/demos/bank_details.html

@@ -1,29 +1,7 @@
 {% extends "base.html" %}
 
-{%- from 'govuk_frontend_jinja/components/breadcrumbs/macro.html' import govukBreadcrumbs -%}
-
 {% block pageTitle %}{%- if form.errors %}Error: {% endif -%}Bank details – GOV.UK{% endblock %}
 
-{% block beforeContent %}
-  {{ super() }}
-  {{ govukBreadcrumbs({
-    'collapseOnMobile': True,
-    'items': [
-        {
-            'text': "Home",
-            'href': url_for('main.index')
-        },
-        {
-            'text': "Forms",
-            'href': url_for('demos.forms')
-        },
-        {
-            'text': "Bank details"
-        }
-    ]
-  }) }}
-{% endblock %}
-
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">

app/templates/demos/component.html

@@ -39,26 +39,6 @@
 
 {% block pageTitle %}{{component | replace("-", " ") | capitalize}} – GOV.UK{% endblock %}
 
-{% block beforeContent %}
-  {{ super() }}
-  {{ govukBreadcrumbs({
-    'collapseOnMobile': True,
-    'items': [
-        {
-            'text': "Home",
-            'href': url_for('main.index')
-        },
-        {
-            'text': "Components",
-            'href': url_for('demos.components')
-        },
-        {
-            'text': component | replace("-", " ") | capitalize
-        }
-    ]
-  }) }}
-{% endblock %}
-
 {% block content %}
   <span class="govuk-caption-xl">Components</span>
   <h1 class="govuk-heading-xl">{{component | replace("-", " ") | capitalize}}</h1>

app/templates/demos/components.html

@@ -1,23 +1,5 @@
 {% extends "base.html" %}
 
-{%- from 'govuk_frontend_jinja/components/breadcrumbs/macro.html' import govukBreadcrumbs -%}
-
-{% block beforeContent %}
-    {{ super() }}
-    {{ govukBreadcrumbs({
-        'collapseOnMobile': True,
-        'items': [
-            {
-                'text': "Home",
-                'href': url_for('main.index')
-            },
-            {
-                'text': "Components"
-            }
-        ]
-    }) }}
-{% endblock %}
-
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">

app/templates/demos/conditional_reveal.html

@@ -1,29 +1,7 @@
 {% extends "base.html" %}
 
-{%- from 'govuk_frontend_jinja/components/breadcrumbs/macro.html' import govukBreadcrumbs -%}
-
 {% block pageTitle %}{%- if form.errors %}Error: {% endif -%}Conditionally revealed inputs – GOV.UK{% endblock %}
 
-{% block beforeContent %}
-  {{ super() }}
-  {{ govukBreadcrumbs({
-    'collapseOnMobile': True,
-    'items': [
-        {
-            'text': "Home",
-            'href': url_for('main.index')
-        },
-        {
-            'text': "Forms",
-            'href': url_for('demos.forms')
-        },
-        {
-            'text': "Conditional reveal"
-        }
-    ]
-  }) }}
-{% endblock %}
-
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">

app/templates/demos/create_account.html

@@ -1,29 +1,7 @@
 {% extends "base.html" %}
 
-{%- from 'govuk_frontend_jinja/components/breadcrumbs/macro.html' import govukBreadcrumbs -%}
-
 {% block pageTitle %}{%- if form.errors %}Error: {% endif -%}Create an account – GOV.UK{% endblock %}
 
-{% block beforeContent %}
-  {{ super() }}
-  {{ govukBreadcrumbs({
-    'collapseOnMobile': True,
-    'items': [
-        {
-            'text': "Home",
-            'href': url_for('main.index')
-        },
-        {
-            'text': "Forms",
-            'href': url_for('demos.forms')
-        },
-        {
-            'text': "Create account"
-        }
-    ]
-  }) }}
-{% endblock %}
-
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">

app/templates/demos/forms.html

@@ -1,24 +1,5 @@
 {% extends "base.html" %}
 
-{%- from 'govuk_frontend_jinja/components/breadcrumbs/macro.html' import govukBreadcrumbs -%}
-
-{% block beforeContent %}
-    {{ super() }}
-
-    {{ govukBreadcrumbs({
-        'collapseOnMobile': True,
-        'items': [
-            {
-                'text': "Home",
-                'href': url_for('main.index')
-            },
-            {
-                'text': "Forms"
-            }
-        ]
-    }) }}
-{% endblock %}
-
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">