Merge pull request #78 from LandRegistry/govuk-frontend-52

GOV.UK Frontend v5.4.0

.github/workflows/python-package.yml

@@ -46,5 +46,5 @@ jobs:
       run: |
         (cd tests/utils && nohup python -m flask run --port 3000 &)
         wait-for-it localhost:3000
-        ./govuk-frontend-diff http://localhost:3000 --govuk-frontend-version=v5.1.0 --exclude page-template --ci
+        ./govuk-frontend-diff http://localhost:3000 --govuk-frontend-version=v5.4.0 --exclude page-template --ci
 

CHANGELOG.md

@@ -4,7 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/LandRegistry/govuk-frontend-jinja/compare/3.0.0...main)
+## [Unreleased](https://github.com/LandRegistry/govuk-frontend-jinja/compare/3.1.0...main)
+
+## [3.1.0](https://github.com/LandRegistry/govuk-frontend-jinja/releases/tag/3.1.0) - 28/05/2024
+
+### Added
+
+- [GOV.UK Frontend v5.4.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.4.0) support
 
 ## [3.0.0](https://github.com/LandRegistry/govuk-frontend-jinja/releases/tag/3.0.0) - 08/02/2024
 

README.md

@@ -1,7 +1,7 @@
 # GOV.UK Frontend Jinja Macros
 
 [![PyPI version](https://badge.fury.io/py/govuk-frontend-jinja.svg)](https://pypi.org/project/govuk-frontend-jinja/)
-![govuk-frontend 5.1.0](https://img.shields.io/badge/govuk--frontend%20version-5.1.0-005EA5?logo=gov.uk&style=flat)
+![govuk-frontend 5.4.0](https://img.shields.io/badge/govuk--frontend%20version-5.4.0-005EA5?logo=gov.uk&style=flat)
 [![Python package](https://github.com/LandRegistry/govuk-frontend-jinja/actions/workflows/python-package.yml/badge.svg)](https://github.com/LandRegistry/govuk-frontend-jinja/actions/workflows/python-package.yml)
 
 **GOV.UK Frontend Jinja 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.**
@@ -16,6 +16,7 @@ The following table shows the version of GOV.UK Frontend Jinja that you should u
 
 | GOV.UK Frontend Jinja Version | Target GOV.UK Frontend Version |
 | ----------------------------- | ------------------------------ |
+| [3.1.0](https://github.com/LandRegistry/govuk-frontend-jinja/releases/tag/3.1.0) | [5.4.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.4.0) |
 | [3.0.0](https://github.com/LandRegistry/govuk-frontend-jinja/releases/tag/3.0.0) | [5.1.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.1.0) |
 | [2.8.0](https://github.com/LandRegistry/govuk-frontend-jinja/releases/tag/2.8.0) | [4.8.0](https://github.com/alphagov/govuk-frontend/releases/tag/v4.8.0) |
 | [2.7.0](https://github.com/LandRegistry/govuk-frontend-jinja/releases/tag/2.7.0) | [4.7.0](https://github.com/alphagov/govuk-frontend/releases/tag/v4.7.0) |

govuk_frontend_jinja/templates/components/accordion/macro.html

@@ -1,4 +1,5 @@
 {% macro govukAccordion(params) %}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
 {% from "govuk_frontend_jinja/macros/i18n.html" import govukI18nAttributes %}
 
 {%- macro _accordionItem(params, item, index) %}
@@ -60,7 +61,7 @@
   }) -}}
 
   {%- if params.rememberExpanded is not undefined %} data-remember-expanded="{{ params.rememberExpanded | escape | lower }}"{% endif %}
-  {%- for attribute, value in (params.attributes.items() if params.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- govukAttributes(params.attributes) }}>
   {% for item in params['items'] %}
     {% if item %}{{ _accordionItem(params, item, loop.index) }}{% endif %}
   {% endfor %}

govuk_frontend_jinja/templates/components/back-link/macro.html

@@ -1,4 +1,8 @@
 {% macro govukBackLink(params) %}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes -%}
+
 <a href="{% if params.href %}{{ params.href }}{% else %}#{% endif %}" class="govuk-back-link {%- if params.classes %} {{ params.classes }}{% endif %}"
-  {%- for attribute, value in (params.attributes.items() if params.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>
+  {{- govukAttributes(params.attributes) }}>
+  {{- params.html | safe if params.html else (params.text if params.text else "Back") -}}
+</a>
 {% endmacro %}

govuk_frontend_jinja/templates/components/breadcrumbs/macro.html

@@ -1,21 +1,23 @@
 {% macro govukBreadcrumbs(params) %}
-{# Set classes for this component #}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
+
+{#- Set classes for this component #}
 {%- set classNames = "govuk-breadcrumbs" -%}
 
 {% if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
+  {% set classNames = classNames ~ " " ~ params.classes %}
 {% endif -%}
 
 {% if params.collapseOnMobile %}
-  {% set classNames = classNames + " govuk-breadcrumbs--collapse-on-mobile" %}
+  {% set classNames = classNames ~ " govuk-breadcrumbs--collapse-on-mobile" %}
 {% endif -%}
 
-<div class="{{ classNames }}" {%- for attribute, value in (params.attributes.items() if params.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="{{ classNames }}" {{- govukAttributes(params.attributes) }}>
   <ol class="govuk-breadcrumbs__list">
 {% for item in params['items'] %}
   {% if item.href %}
     <li class="govuk-breadcrumbs__list-item">
-      <a class="govuk-breadcrumbs__link" href="{{ item.href }}" {%- for attribute, value in (item.attributes.items() if item.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}>
+      <a class="govuk-breadcrumbs__link" href="{{ item.href }}" {{- govukAttributes(item.attributes) }}>
         {{- item.html | safe if item.html else item.text -}}
       </a>
     </li>

govuk_frontend_jinja/templates/components/button/macro.html

@@ -1,13 +1,15 @@
 {% macro govukButton(params) %}
-{# Set classes for this component #}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
+
+{#- Set classes for this component #}
 {%- set classNames = "govuk-button" -%}
 
 {%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
+  {% set classNames = classNames ~ " " ~ params.classes %}
 {% endif %}
 
 {%- if params.isStartButton %}
-  {% set classNames = classNames + " govuk-button--start" %}
+  {% set classNames = classNames ~ " govuk-button--start" %}
 {% endif %}
 
 {#- Determine type of element to use, if not explicitly set #}
@@ -32,7 +34,7 @@
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {%- for attribute, value in (params.attributes.items() if params.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
+{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {{- govukAttributes(params.attributes) -}} {% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 

govuk_frontend_jinja/templates/components/character-count/macro.html

@@ -1,14 +1,47 @@
 {% macro govukCharacterCount(params) %}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
 {% from "govuk_frontend_jinja/macros/i18n.html" import govukI18nAttributes %}
 {% from "govuk_frontend_jinja/components/textarea/macro.html" import govukTextarea %}
 {% from "govuk_frontend_jinja/components/hint/macro.html" import govukHint %}
 
+{#-
+  If the limit is set in JavaScript, we won't be able to interpolate the message
+  until JavaScript, so we only set a text if the `maxlength` or `maxwords` options
+  were provided to the macro.
+#}
 {%- set hasNoLimit = (not params.maxwords and not params.maxlength) -%}
+{%- set textareaDescriptionLength = params.maxwords or params.maxlength -%}
+{%- set textareaDescriptionText = params.textareaDescriptionText or 'You can enter up to %{count} ' ~ ('words' if params.maxwords else 'characters') -%}
+{%- set textareaDescriptionTextNoLimit = textareaDescriptionText | replace('%{count}', textareaDescriptionLength) if not hasNoLimit -%}
+
+{%- set countMessageHtml %}
+{{ govukHint({
+  'text': textareaDescriptionTextNoLimit,
+  'id': params.id ~ '-info',
+  'classes': 'govuk-character-count__message' ~ (' ' ~ params.countMessage.classes if params.countMessage and params.countMessage.classes)
+}) | trim }}
+{% if params.formGroup and params.formGroup.afterInput %}
+  {{- params.formGroup.afterInput.html | safe | trim if params.formGroup and params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
+{% endif -%}
+{% endset -%}
+
+{%- set attributesHtml %}
+  {{- govukAttributes({
+    "data-module": "govuk-character-count",
+    "data-maxlength": {
+      'value': params.maxlength,
+      'optional': true
+    },
+    "data-threshold": {
+      'value': params.threshold,
+      'optional': true
+    },
+    "data-maxwords": {
+      'value': params.maxwords,
+      'optional': true
+    }
+  }) -}}
 
-<div class="govuk-character-count" data-module="govuk-character-count"
-  {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
-  {%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
-  {%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}
   {#-
     Without maxlength or maxwords, we can't guess if the component will count words or characters.
     We can't guess a default textarea description to be interpolated in JavaScript
@@ -50,40 +83,42 @@
   {{- govukI18nAttributes({
     'key': 'words-over-limit',
     'messages': params.wordsOverLimitText
-  }) -}}>
-  {{ govukTextarea({
-    'id': params.id,
-    'name': params.name,
-    'describedBy': params.id + '-info',
-    'rows': params.rows,
-    'spellcheck': params.spellcheck,
-    'value': params.value,
-    'formGroup': params.formGroup,
-    'classes': 'govuk-js-character-count' + (' ' + params.classes if params.classes else ''),
-    'label': {
-      'html': params.label.html,
-      'text': params.label.text,
-      'classes': params.label.classes,
-      'isPageHeading': params.label.isPageHeading,
-      'attributes': params.label.attributes,
-      'for': params.id
-    },
-    'hint': params.hint,
-    'errorMessage': params.errorMessage,
-    'attributes': params.attributes
-  }) }}
+  }) -}}
+{% endset -%}
 
-  {%- set textareaDescriptionLength = params.maxwords or params.maxlength %}
-  {%- set textareaDescriptionText = params.textareaDescriptionText or 'You can enter up to %{count} ' + ('words' if params.maxwords else 'characters') %}
-  {#-
-    If the limit is set in JavaScript, we won't be able to interpolate the message
-    until JavaScript, so we only set a text if the `maxlength` or `maxwords` options
-    were provided to the macro.
-  #}
-  {{ govukHint({
-    'text': ((textareaDescriptionText) | replace('%{count}', textareaDescriptionLength) if not hasNoLimit),
-    'id': params.id + '-info',
-    'classes': 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage and params.countMessage.classes else '')
-  }) | trim | indent(2) }}
-</div>
+{#- Append form group attributes onto attributes set above #}
+{%- if params.formGroup -%}
+  {%- for name, value in params.formGroup.attributes if params.formGroup %}
+    {% set attributesHtml = attributesHtml ~ " " ~ name | escape ~ '="' ~ value | escape ~ '"' %}
+  {% endfor -%}
+{%- endif -%}
+
+{{ govukTextarea({
+  'id': params.id,
+  'name': params.name,
+  'describedBy': params.id ~ '-info',
+  'rows': params.rows,
+  'spellcheck': params.spellcheck,
+  'value': params.value,
+  'formGroup': {
+    'classes': 'govuk-character-count' ~ (' ' ~ params.formGroup.classes if params.formGroup and params.formGroup.classes),
+    'attributes': attributesHtml,
+    'beforeInput': params.formGroup.beforeInput if params.fromGroup,
+    'afterInput': {
+      'html': countMessageHtml
+    }
+  },
+  'classes': 'govuk-js-character-count' ~ (' ' ~ params.classes if params.classes),
+  'label': {
+    'html': params.label.html,
+    'text': params.label.text,
+    'classes': params.label.classes,
+    'isPageHeading': params.label.isPageHeading,
+    'attributes': params.label.attributes,
+    'for': params.id
+  },
+  'hint': params.hint,
+  'errorMessage': params.errorMessage,
+  'attributes': params.attributes
+}) | trim }}
 {% endmacro %}