Merge pull request #338 from ministryofjustice/fix-custom-attributes

fix(components): ensure that custom attributes get a space inserted before each one

src/moj/components/badge/template.njk

@@ -1,3 +1,3 @@
-<span class="moj-badge {{- ' ' + params.classes if params.classes }}" {%- if (params.label) %} aria-label=""{% endif -%} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<span class="moj-badge {{- ' ' + params.classes if params.classes }}" {%- if (params.label) %} aria-label=""{% endif -%} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{- params.html | safe if params.html else params.text -}}
-</span>
+</span>

src/moj/components/banner/template.njk

@@ -1,4 +1,4 @@
-<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   {% if params.type == 'success' %}
     <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>

src/moj/components/button-menu/template.njk

@@ -1,6 +1,6 @@
 {%- from "govuk/components/button/macro.njk" import govukButton %}
 
-<div class="moj-button-menu {{- ' ' + params.classes if params.classes }}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-button-menu {{- ' ' + params.classes if params.classes }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="moj-button-menu__wrapper">
     {%- for item in params.items %}
       {{ govukButton({

src/moj/components/filter/template.njk

@@ -1,6 +1,6 @@
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
-<div class="moj-filter" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-filter" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-filter__header">
 
@@ -57,4 +57,4 @@
 
   </div>
 
-</div>
+</div>

src/moj/components/header/template.njk

@@ -1,4 +1,4 @@
-<header class="moj-header {{- ' ' + params.classes if params.classes}}" role="banner" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<header class="moj-header {{- ' ' + params.classes if params.classes}}" role="banner" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-header__container {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
 
@@ -51,13 +51,13 @@
     {%- if params.navigation %}
       <div class="moj-header__content">
 
-        <nav class="moj-header__navigation{% if params.navigation.classes %} {{ params.navigation.classes }}{% endif %}"{% if (params.navigation.label) %} aria-label="{{ params.navigation.label }}" {% endif %} {%- for attribute, value in params.navigation.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+        <nav class="moj-header__navigation{% if params.navigation.classes %} {{ params.navigation.classes }}{% endif %}"{% if (params.navigation.label) %} aria-label="{{ params.navigation.label }}" {% endif %} {%- for attribute, value in params.navigation.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
           <ul class="moj-header__navigation-list">
 
             {%- for item in params.navigation.items %}
               <li class="moj-header__navigation-item">
-                <a class="moj-header__navigation-link" href="{{ item.href }}" {{ 'aria-current="page"' | safe if item.active }} {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+                <a class="moj-header__navigation-link" href="{{ item.href }}" {{ 'aria-current="page"' | safe if item.active }} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
                   {{- item.html | safe if item.html else item.text -}}
                 </a>
               </li>

src/moj/components/identity-bar/template.njk

@@ -1,6 +1,6 @@
 {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %}
 
-<div class="moj-identity-bar {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-identity-bar {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-identity-bar__container">
 
@@ -22,4 +22,4 @@
 
   </div>
 
-</div>
+</div>

src/moj/components/messages/template.njk

@@ -1,4 +1,4 @@
-<div id="{{ params.id | default('messages') }}" class="moj-messages-container {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div id="{{ params.id | default('messages') }}" class="moj-messages-container {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-message-list">
 
@@ -27,4 +27,4 @@
 
   </div>
 
-</div>
+</div>

src/moj/components/multi-file-upload/template.njk

@@ -1,4 +1,4 @@
-<div class="moj-multi-file-upload {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-multi-file-upload {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="moj-multi-file__uploaded-files {% if params.uploadedFiles.items.length == 0 %}moj-hidden{% endif%}">
     <h2 class="govuk-heading-m">{{ params.uploadedFiles.heading.html | safe if params.uploadedFiles.heading.html else params.uploadedFiles.heading.text }}</h2>
     <div class="govuk-summary-list moj-multi-file-upload__list">
@@ -22,4 +22,4 @@
   <div class="moj-multi-file-upload__upload">
     {{ params.uploadHtml | safe }}
   </div>
-</div>
+</div>

src/moj/components/notification-badge/template.njk

@@ -1,5 +1,5 @@
 {%- if params.text.length %}
-<span id="{{ params.id | default('notifications') }}" class="moj-notification-badge {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<span id="{{ params.id | default('notifications') }}" class="moj-notification-badge {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{- params.text | safe -}}
 </span>
-{% endif -%}
+{% endif -%}

src/moj/components/page-header-actions/template.njk

@@ -1,6 +1,6 @@
 {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %}
 
-<div class="moj-page-header-actions {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-page-header-actions {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <div class="moj-page-header-actions__title">
     <h{{ params.heading.level | default(1) }} class="{{params.heading.classes | default('govuk-heading-xl')}}">
@@ -17,4 +17,4 @@
     </div>
   {% endif %}
 
-</div>
+</div>

src/moj/components/primary-navigation/template.njk

@@ -4,13 +4,13 @@
 
     <div class="moj-primary-navigation__nav">
 
-      <nav class="moj-primary-navigation {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+      <nav class="moj-primary-navigation {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
         <ul class="moj-primary-navigation__list">
 
           {%- for item in params.items %}
             <li class="moj-primary-navigation__item">
-              <a class="moj-primary-navigation__link" {{ 'aria-current="page"' | safe if item.active }} href="{{ item.href }}" {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+              <a class="moj-primary-navigation__link" {{ 'aria-current="page"' | safe if item.active }} href="{{ item.href }}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
                 {{- item.html | safe if item.html else item.text -}}
               </a>
             </li>

src/moj/components/progress-bar/template.njk

@@ -1,12 +1,12 @@
-<div id="{{ params.id | default('progress') }}" class="moj-progress-bar {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div id="{{ params.id | default('progress') }}" class="moj-progress-bar {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <ol class="moj-progress-bar__list">
     {%- for item in params.items %}
-    <li id="{{ item.id | default('progress-item-' + loop.index) }}" class="moj-progress-bar__item {{- ' ' + item.classes if item.classes }}" {{- ' aria-current="step"' | safe if item.active }} {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+    <li id="{{ item.id | default('progress-item-' + loop.index) }}" class="moj-progress-bar__item {{- ' ' + item.classes if item.classes }}" {{- ' aria-current="step"' | safe if item.active }} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
       <span class="moj-progress-bar__icon {{- ' moj-progress-bar__icon--complete' if item.complete }}"></span>
       <span class="moj-progress-bar__label {{- ' ' + item.label.classes if item.label.classes }}">
         {{- item.label.html | safe if item.label.html else item.label.text -}}
       </span>
     </li>
     {% endfor -%}
   </ol>
-</div>
+</div>

src/moj/components/sub-navigation/template.njk

@@ -1,10 +1,10 @@
-<nav class="moj-sub-navigation {{- ' ' + params.classes if params.classes}}" aria-label="{{ params.label or 'Secondary navigation region' }}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<nav class="moj-sub-navigation {{- ' ' + params.classes if params.classes}}" aria-label="{{ params.label or 'Secondary navigation region' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <ul class="moj-sub-navigation__list">
 
     {%- for item in params.items %}
       <li class="moj-sub-navigation__item {{- ' ' + item.classes if item.classes}}">
-        <a class="moj-sub-navigation__link" {{ 'aria-current="page"' | safe if item.active }} href="{{ item.href }}" {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+        <a class="moj-sub-navigation__link" {{ 'aria-current="page"' | safe if item.active }} href="{{ item.href }}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
           {{- item.html | safe if item.html else item.text -}}
         </a>
       </li>

src/moj/components/ticket-panel/template.njk

@@ -1,12 +1,12 @@
-<article 
+<article
   class="moj-ticket-panel {{- ' ' + params.classes if params.classes}}"
-      {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+      {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   {%- for item in params.items %}
 
-    <section 
+    <section
       class="moj-ticket-panel__content {{- ' ' + item.classes if item.classes}}"
-      {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
       {{- item.html | safe if item.html else item.text -}}
     </section>
 

src/moj/components/timeline/template.njk

@@ -1,7 +1,7 @@
-<div class="moj-timeline {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-timeline {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   {%- for item in params.items %}
-  <div class="moj-timeline__item {{- ' ' + item.classes if item.classes}}" {%- for attribute, value in item.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="moj-timeline__item {{- ' ' + item.classes if item.classes}}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
     <div class="moj-timeline__header">
       <h{{ params.headingLevel | default(2) }} class="moj-timeline__title">
@@ -29,4 +29,4 @@
   </div>
   {% endfor -%}
 
-</div>
+</div>