Review and fix HTML attribute trailing spaces etc

packages/govuk-frontend-review/src/views/component-preview.njk

@@ -4,10 +4,6 @@
 
 {% block pageTitle %}{{ templateTitle }} - GOV.UK Frontend{% endblock %}
 
-{% set bodyClasses %}
-  {{ bodyClasses }}
-{% endset %}
-
 {# Remove standard template banners/headers/frontmatter #}
 {% block skipLink %}{% endblock %}
 {% block bodyStart %} {% endblock %}

packages/govuk-frontend-review/src/views/component.njk

@@ -5,9 +5,7 @@
 
 {% block pageTitle %}{{ componentName | unslugify }} - GOV.UK Frontend{% endblock %}
 
-{% set bodyClasses %}
-  language-markup
-{% endset %}
+{% set bodyClasses = "language-markup" %}
 
 {% set htmlMarkup %}
   {% include componentName + "/" + componentName + ".njk" ignore missing %}

packages/govuk-frontend-review/src/views/components.njk

@@ -5,9 +5,7 @@
 
 {% block pageTitle %}All components - GOV.UK Frontend{% endblock %}
 
-{% set bodyClasses %}
-  language-markup
-{% endset %}
+{% set bodyClasses = "language-markup" %}
 
 {% block beforeContent %}
   {{ govukBreadcrumbs({

packages/govuk-frontend/src/govuk/components/accordion/template.njk

@@ -1,9 +1,9 @@
 {% from "../../macros/i18n.njk" import govukI18nAttributes %}
 
-{% set id = params.id %}
-{% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
+{%- set id = params.id %}
+{% set headingLevel = params.headingLevel if params.headingLevel else 2 -%}
 
-<div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}" data-module="govuk-accordion" id="{{ id }}"
+<div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-accordion" id="{{ id }}"
   {{- govukI18nAttributes({
     key: 'hide-all-sections',
     message: params.hideAllSectionsText
@@ -35,7 +35,7 @@
   }) -}}
 
   {%- if params.rememberExpanded !== undefined %} data-remember-expanded="{{ params.rememberExpanded | escape }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for item in params.items %}
     {% if item %}
       <div class="govuk-accordion__section {%- if item.expanded %} govuk-accordion__section--expanded{% endif %}">

packages/govuk-frontend/src/govuk/components/back-link/template.njk

@@ -1,2 +1,2 @@
-<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 %} {{attribute}}="{{value}}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>
+<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 %} {{ attribute }}="{{ value }}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>

packages/govuk-frontend/src/govuk/components/breadcrumbs/template.njk

@@ -9,12 +9,12 @@
   {% set classNames = classNames + " govuk-breadcrumbs--collapse-on-mobile" %}
 {% endif -%}
 
-<div class="{{classNames}}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="{{ classNames }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <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 %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+      <a class="govuk-breadcrumbs__link" href="{{ item.href }}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
     </li>
     {% else %}
     <li class="govuk-breadcrumbs__list-item" aria-current="page">{{ item.html | safe if item.html else item.text }}</li>

packages/govuk-frontend/src/govuk/components/button/template.njk

@@ -5,7 +5,7 @@
   {% set classNames = classNames + " " + params.classes %}
 {% endif %}
 
-{# Determine type of element to use, if not explicitly set #}
+{#- Determine type of element to use, if not explicitly set #}
 {%- if params.element %}
   {% set element = params.element | lower %}
 {% else %}
@@ -30,11 +30,11 @@ treat it as an interactive element - without this it will be
 
 {#- 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 %} {{attribute}}="{{value}}"{% endfor %}{% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
+{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 
-{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled aria-disabled="true"{% endif %}{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{params.preventDoubleClick}}"{% endif %}{% endset %}
+{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled aria-disabled="true"{% endif %}{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{ params.preventDoubleClick }}"{% endif %}{% endset %}
 
 {#- Actually create a button... or a link! #}
 

packages/govuk-frontend/src/govuk/components/character-count/template.njk

@@ -1,15 +1,14 @@
 {% from "../../macros/i18n.njk" import govukI18nAttributes %}
-
 {% from "../textarea/macro.njk" import govukTextarea %}
 {% from "../hint/macro.njk" import govukHint %}
 
-{%- set hasNoLimit = (not params.maxwords and not params.maxlength) %}
+{%- set hasNoLimit = (not params.maxwords and not params.maxlength) -%}
 
 <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
     once the maximum gets configured there.
@@ -74,7 +73,7 @@
   }) }}
   {%- 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.

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml

@@ -150,7 +150,7 @@ examples:
                 <label class="govuk-label" for="other-country">
                   Country
                 </label>
-              <input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">
+                <input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">
               </div>
       values:
         - british

packages/govuk-frontend/src/govuk/components/checkboxes/template.njk

@@ -1,4 +1,4 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../error-message/macro.njk" import govukErrorMessage %}
 {% from "../fieldset/macro.njk" import govukFieldset %}
 {% from "../hint/macro.njk" import govukHint %}
 {% from "../label/macro.njk" import govukLabel %}
@@ -43,8 +43,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-    data-module="govuk-checkboxes">
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-checkboxes">
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -75,7 +74,7 @@
             {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
             {%- if item.behaviour %} data-behaviour="{{ item.behaviour }}"{% endif -%}
             {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
-            {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+            {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
             {{ govukLabel({
               html: item.html,
               text: item.text,
@@ -94,7 +93,7 @@
             {% endif %}
           </div>
           {% if item.conditional.html %}
-            <div class="govuk-checkboxes__conditional{% if not isChecked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
+            <div class="govuk-checkboxes__conditional {%- if not isChecked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
               {{ item.conditional.html | safe }}
             </div>
           {% endif %}

packages/govuk-frontend/src/govuk/components/cookie-banner/cookie-banner.yaml

@@ -155,7 +155,9 @@ examples:
     options:
       messages:
         - headingHtml: Cookies on <span>my service</span>
-          html: <p class="govuk-body">We use cookies in <span>our service</span>.</p><p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>
+          html: |
+            <p class="govuk-body">We use cookies in <span>our service</span>.</p>
+            <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>
           actions:
             - text: Accept analytics cookies
               type: submit

packages/govuk-frontend/src/govuk/components/cookie-banner/template.njk

@@ -1,17 +1,12 @@
 {% from "../button/macro.njk" import govukButton -%}
 
-<div class="govuk-cookie-banner {{ params.classes if params.classes }}" data-nosnippet role="region" aria-label="{{ params.ariaLabel | default("Cookie banner", true) }}"
+<div class="govuk-cookie-banner {%- if params.classes %} {{ params.classes }}{% endif %}" data-nosnippet role="region" aria-label="{{ params.ariaLabel | default("Cookie banner", true) }}"
   {%- if params.hidden %} hidden{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   {%- for message in params.messages %}
-    {% set classNames = "govuk-cookie-banner__message govuk-width-container" %}
-    {% if message.classes %}
-      {% set classNames = classNames + " " + message.classes %}
-    {% endif %}
-
-    <div class="{{classNames}}" {%- if message.role %} role="{{message.role}}"{% endif %}
-    {%- for attribute, value in message.attributes %} {{attribute}}="{{value}}"{% endfor %}
+    <div class="govuk-cookie-banner__message {%- if message.classes %} {{ message.classes }}{% endif %} govuk-width-container" {%- if message.role %} role="{{ message.role }}"{% endif %}
+    {%- for attribute, value in message.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if message.hidden %} hidden{% endif %}>
 
     <div class="govuk-grid-row">
@@ -49,11 +44,7 @@
                 "attributes": action.attributes
               }) | indent(12) | trim }}
             {% else %}
-              {% set linkClasses = "govuk-link" %}
-              {% if action.classes %}
-                {% set linkClasses = linkClasses + " " + action.classes %}
-              {% endif %}
-              <a class="{{ linkClasses }}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ action.text }}</a>
+              <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ action.text }}</a>
             {% endif %}
           {% else %}
             {{ govukButton({

packages/govuk-frontend/src/govuk/components/date-input/template.njk

@@ -1,4 +1,4 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../error-message/macro.njk" import govukErrorMessage %}
 {% from "../fieldset/macro.njk" import govukFieldset %}
 {% from "../hint/macro.njk" import govukHint %}
 {% from "../input/macro.njk" import govukInput %}
@@ -7,7 +7,7 @@
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
 
-{% if params.items | length %}
+{%- if params.items | length %}
   {% set dateInputItems = params.items %}
 {% else %}
   {% set dateInputItems = [
@@ -52,7 +52,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <div class="govuk-date-input {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
     {% for item in dateInputItems %}
     <div class="govuk-date-input__item">
@@ -74,7 +74,7 @@
     </div>
   {% endfor %}
   </div>
-{% endset %}
+{% endset -%}
 
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}

packages/govuk-frontend/src/govuk/components/details/template.njk

@@ -1,4 +1,4 @@
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+<details {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} {{- " open" if params.open }}>
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}

packages/govuk-frontend/src/govuk/components/error-message/template.njk

@@ -1,6 +1,6 @@
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 
-<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% if visuallyHiddenText %}<span class="govuk-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
 </p>

packages/govuk-frontend/src/govuk/components/error-summary/template.njk

@@ -2,7 +2,7 @@
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.disableAutoFocus !== undefined %} data-disable-auto-focus="{{ params.disableAutoFocus }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-error-summary">
-  {# Keep the role="alert" in a seperate child container to prevent a race condition between
+  {#- Keep the role="alert" in a seperate child container to prevent a race condition between
   the focusing js at the alert, resulting in information getting missed in screen reader announcements #}
   <div role="alert">
     <h2 class="govuk-error-summary__title">
@@ -18,7 +18,7 @@
         {% for item in params.errorList %}
           <li>
           {% if item.href %}
-            <a href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+            <a href="{{ item.href }}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
           {% else %}
             {{ item.html | safe if item.html else item.text }}
           {% endif %}

packages/govuk-frontend/src/govuk/components/exit-this-page/template.njk

@@ -1,11 +1,11 @@
-{% from "../button/macro.njk" import govukButton -%}
+{% from "../button/macro.njk" import govukButton %}
 
-{% set defaultHtml -%}
+{%- set defaultHtml -%}
   <span class="govuk-visually-hidden">Emergency</span> Exit this page
 {%- endset -%}
 
 <div
-  {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-exit-this-page {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-exit-this-page" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-exit-this-page {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-exit-this-page" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
   {%- if params.activatedText %} data-i18n.activated="{{ params.activatedText | escape }}"{% endif %}
   {%- if params.timedOutText %} data-i18n.timed-out="{{ params.timedOutText | escape }}"{% endif %}
   {%- if params.pressTwoMoreTimesText %} data-i18n.press-two-more-times="{{ params.pressTwoMoreTimesText | escape }}"{% endif %}

packages/govuk-frontend/src/govuk/components/file-upload/template.njk

@@ -1,4 +1,4 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../error-message/macro.njk" import govukErrorMessage %}
 {% from "../hint/macro.njk" import govukHint %}
 {% from "../label/macro.njk" import govukLabel %}
 
@@ -41,5 +41,5 @@
   {%- if params.value %} value="{{ params.value }}"{% endif %}
   {%- if params.disabled %} disabled{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 </div>