Add attributes macro (#998)

* Add attributes macro copied from GOV.UK

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Fix Sass deprecation on `mix` function (passing a number without unit) ([PR 995](https://github.com/nhsuk/nhsuk-frontend/pull/995))
+- Add nhsukAttributes macro, copied from GOV.UK ([PR 998](https://github.com/nhsuk/nhsuk-frontend/pull/998))
 
 ## 8.3.0 - 24 July 2024
 

packages/components/action-link/template.njk

@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-action-link">
   <a class="nhsuk-action-link__link
   {%- if params.classes %} {{ params.classes }}{% endif %}" href="
   {%- if params.href %}{{ params.href }}{% else %}#{% endif %}"
   {%- if params.openInNewWindow %} target="_blank"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
     <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="36" height="36">
       <path d="M0 0h24v24H0z" fill="none"></path>
       <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path>

packages/components/back-link/template.njk

@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-back-link{%- if params.classes %} {{ params.classes }}{% endif %}">
   {%- if params.element == 'button' %}
     {% set element='button' %}
@@ -6,7 +8,7 @@
   {% endif %}
   <{{element}} class="nhsuk-back-link__link"
   {%- if element == 'a'%} href="{% if params.href %}{{ params.href }}{% else %}#{% endif %}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
   <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="24" width="24">
     <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
   </svg>

packages/components/breadcrumb/template.njk

@@ -1,10 +1,12 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <nav class="nhsuk-breadcrumb{% if params.classes %} {{ params.classes }}{% endif %}" aria-label="Breadcrumb"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <div class="nhsuk-width-container">
     <ol class="nhsuk-breadcrumb__list">
   {%- for item in params.items %}
     {%- if item.href %}
-          <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
+          <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}" {{- nhsukAttributes(item.attributes) }}>{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
     {%- endif -%}
   {% endfor %}
     {% if params.href %}
@@ -18,7 +20,7 @@
     {% endif %}
     </ol>
     <p class="nhsuk-breadcrumb__back">
-      <a class="nhsuk-breadcrumb__backlink" href="{{ lastHref }}" {% for attribute, value in lastItem.attributes %}{{attribute}}="{{value}}"{% endfor %}>
+      <a class="nhsuk-breadcrumb__backlink" href="{{ lastHref }}" {{- nhsukAttributes(lastItem.attributes) }}>
         <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
         {{ lastText }}
       </a>

packages/components/button/template.njk

@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {# Define type of element to use, if not explicitly set #}
 
 {% if params.element %}
@@ -16,7 +18,7 @@
   {%- if params.disabled %} nhsuk-button--disabled{% endif %}"
   data-module="nhsuk-button"
   {% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {{- nhsukAttributes(params.attributes) }}
 {%- endset -%}
 
 {# Define common attributes we can use for both button and input types #}

packages/components/card/template.njk

@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
 
 <div class="nhsuk-card
@@ -7,7 +9,7 @@
 {%- if params.feature %} nhsuk-card--feature{% endif %}
 {%- if params.topTask %} nhsuk-card--top-task{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
 {%- if params.imgURL %}
   <img class="nhsuk-card__img" src="{{ params.imgURL }}" alt="{{ params.imgALT }}">
 {%- endif %}

packages/components/checkboxes/template.njk

@@ -2,6 +2,7 @@
 {% from "../fieldset/macro.njk" import fieldset %}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
@@ -42,7 +43,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <div class="nhsuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %} {%- if isConditional %} nhsuk-checkboxes--conditional{% endif -%}"
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {{- nhsukAttributes(params.attributes) }}>
     {% for item in params.items %}
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
     {% set name = item.name if item.name else params.name %}
@@ -60,7 +61,7 @@
       {%- if item.exclusiveGroup %} data-checkbox-exclusive-group="{{ item.exclusiveGroup }}"{% endif -%}
       {%- if item.conditional %} aria-controls="{{ conditionalId }}" aria-expanded="{{"true" if item.checked else "false"}}"{% endif -%}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {{- nhsukAttributes(item.attributes) }}>
       {{ label({
         html: item.html,
         text: item.text,

packages/components/contents-list/template.njk

@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <nav class="nhsuk-contents-list
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} role="navigation" aria-label="Pages in this guide">
+{{- nhsukAttributes(params.attributes) }} role="navigation" aria-label="Pages in this guide">
   <h2 class="nhsuk-u-visually-hidden">Contents</h2>
   <ol class="nhsuk-contents-list__list">
     {%- for item in params.items %}

packages/components/date-input/template.njk

@@ -2,6 +2,7 @@
 {% from "../fieldset/macro.njk" import fieldset %}
 {% from "../hint/macro.njk" import hint %}
 {% from "../input/macro.njk" import input %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
@@ -52,7 +53,7 @@
 {% endif %}
   <div class="nhsuk-date-input
     {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+    {{- nhsukAttributes(params.attributes) }}
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
     {%- for item in dateInputItems %}
     <div class="nhsuk-date-input__item">

packages/components/details/template.njk

@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <details {%- if params.id %} id="{{params.id}}"{% endif %} class="nhsuk-details
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+{{- nhsukAttributes(params.attributes) }} {{- " open" if params.open }}>
   <summary class="nhsuk-details__summary">
     <span class="nhsuk-details__summary-text">
       {{ params.text }}

packages/components/do-dont-list/template.njk

@@ -1,7 +1,9 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
 <div class="nhsuk-do-dont-list
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <h{{ headingLevel }} class="nhsuk-do-dont-list__label">{{ params.title }}</h{{ headingLevel }}>
   <ul class="nhsuk-list {% if params.type == 'tick' %}nhsuk-list--tick{% else %}nhsuk-list--cross{% endif %}" role="list">
     {%- for data in params.items %}

packages/components/error-message/template.njk

@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 
 <span class="nhsuk-error-message
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.id %} id="{{ params.id }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   {% if visuallyHiddenText %}<span class="nhsuk-u-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
 </span>

packages/components/error-summary/template.njk

@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-error-summary
   {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
   <h2 class="nhsuk-error-summary__title" id="error-summary-title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>
@@ -14,7 +16,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 }}"{{- nhsukAttributes(item.attributes) }}>{{ item.html | safe if item.html else item.text }}</a>
       {% else %}
         {{ item.html | safe if item.html else item.text }}
       {%- endif -%}

packages/components/fieldset/template.njk

@@ -1,7 +1,9 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <fieldset class="nhsuk-fieldset
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
   {%- if params.legend.html or params.legend.text %}
   <legend class="nhsuk-fieldset__legend{%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
   {%- if params.legend.isPageHeading %}

packages/components/footer/template.njk

@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {%- set copyrightText = params.copyright if params.copyright else '© NHS England' -%}
 
 <footer role="contentinfo">
@@ -6,7 +8,7 @@
       <h2 class="nhsuk-u-visually-hidden">Support links</h2>
       <div class="nhsuk-footer
         {%- if params.classes %} {{ params.classes }}{% endif %}"
-        {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+        {{- nhsukAttributes(params.attributes) }}>
           {% if  not params.linksColumn2 %}
               <ul class="nhsuk-footer__list">
                 {%- for item in params.links %}

packages/components/header/template.njk

@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {# Define some defaults #}
 {% set showNav = params.showNav if params.showNav else "false" %}
 {% set showSearch = params.showSearch if params.showSearch else "false" %}
@@ -13,7 +15,7 @@
 {%- if params.transactional or params.transactionalService %} nhsuk-header__transactional{% endif %}
 {%- if params.organisation and params.organisation.name %} nhsuk-header--organisation{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}" role="banner"
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
 
   <div class="nhsuk-header__container">
     <div class="nhsuk-header__logo 
@@ -80,7 +82,7 @@
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
         <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
-          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
               {{item.label}}
             </a>
@@ -138,7 +140,7 @@
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
         <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
-          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
               {{item.label}}
             </a>
@@ -164,4 +166,4 @@
 
     {% endif -%}
 
-</header>
+</header>

packages/components/hero/template.njk

@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <section class="nhsuk-hero
 {%- if params.imageURL and params.heading %} nhsuk-hero--image nhsuk-hero--image-description
 {%- elif params.imageURL %} nhsuk-hero--image{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.imageURL %} style="background-image: url('{{ params.imageURL }}');"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
 {% if params.imageURL %}<div class="nhsuk-hero__overlay">{% endif %}
 {%- if params.heading %}
   <div class="nhsuk-width-container{% if not params.imageURL %} nhsuk-hero--border{% endif %}">

packages/components/hint/template.njk

@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-hint
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.id %} id="{{ params.id }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   {{ params.html | safe if params.html else params.text }}
 </div>

packages/components/images/template.njk

@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <figure class="nhsuk-image
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <img class="nhsuk-image__img" src="{{ params.src }}" alt="{{ params.alt }}" 
   {%- if params.sizes and params.srcset %}
     sizes="{{ params.sizes }}" srcset="{{ params.srcset }}"

packages/components/input/template.njk

@@ -1,6 +1,7 @@
 {% from "../error-message/macro.njk" import errorMessage -%}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
@@ -52,7 +53,7 @@
     {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
     {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
     {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {{- nhsukAttributes(params.attributes) }}>
     {%- if params.suffix %}
     <div class="nhsuk-input__suffix" aria-hidden="true">{{ params.suffix }}</div>
     {% endif %}

packages/components/inset-text/template.njk

@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-inset-text
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <span class="nhsuk-u-visually-hidden">Information: </span>
   {# params.HTML supported for backwards compatibility - see issue #950 #}
   {{ (params.html or params.HTML) | safe }}

packages/components/label/template.njk

@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% if params.html or params.text %}
 {%- set labelHtml %}
 <label class="nhsuk-label
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.for %} for="{{ params.for }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   {{ params.html | safe if params.html else params.text }}
 </label>
 {%- endset -%}

packages/components/pagination/template.njk

@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <nav class="nhsuk-pagination
 {%- if params.classes %} {{ params.classes }}{% endif %}" role="navigation" aria-label="Pagination"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <ul class="nhsuk-list nhsuk-pagination__list">
   {%- if params.previousUrl and params.previousPage %}
     <li class="nhsuk-pagination-item--previous">

packages/components/radios/template.njk

@@ -2,6 +2,7 @@
 {% from "../fieldset/macro.njk" import fieldset %}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
@@ -43,7 +44,7 @@
 {% endif %}
   <div class="nhsuk-radios
   {%- if params.classes %} {{ params.classes }}{% endif %} {%- if isConditional %} nhsuk-radios--conditional{% endif -%}"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
     {%- for item in params.items %}
     {%- set id = item.id if item.id else idPrefix + "-" + loop.index %}
     {% set conditionalId = "conditional-" + id %}
@@ -58,7 +59,7 @@
       {{-" disabled" if item.disabled }}
       {%- if item.conditional.html %} aria-controls="{{ conditionalId }}" aria-expanded="{{"true" if item.checked else "false"}}"{% endif -%}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {{- nhsukAttributes(item.attributes) }}>
       {{ label({
         html: item.html,
         text: item.text,