[refs #318] Update remaining component Nunjucks templates and READMEs

Tidied up code in Nunjucks templates and READMEs.
For the radio component, removed the conditional parameter as this has
not yet been implemented.

Components amended:
- error-message
- promo
- radios
- review-review
- select
- skip-link
- tables
- textarea
- warning-callout

packages/components/error-message/template.njk

@@ -1,5 +1,6 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="nhsuk-error-message
+<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 %}>
   {{ params.html | safe if params.html else params.text }}
 </span>

packages/components/promo/template.njk

@@ -1,14 +1,15 @@
-<div class="nhsuk-promo {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div class="nhsuk-promo
+{%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <a class="nhsuk-promo__link-wrapper" href="{{ params.href }}">
-    {% if params.imgURL %}
-    <img class="nhsuk-promo__img" src="{{ params.imgURL }}" alt="{{ params.imgALT }}"/>
-    {% endif %}
+    {%- if params.imgURL %}
+    <img class="nhsuk-promo__img" src="{{ params.imgURL }}" alt="{{ params.imgALT }}">
+    {%- endif %}
     <div class="nhsuk-promo__content">
       <h3 class="nhsuk-promo__heading">{{ params.heading | safe }}</h3>
-      {% if params.description %}
+      {%- if params.description %}
       <p class="nhsuk-promo__description">{{ params.description | safe }}</p>
-      {% endif %}
+      {%- endif %}
     </div>
   </a>
 </div>

packages/components/radios/README.md

@@ -484,8 +484,6 @@ If you are using Nunjucks, then macros take the following arguments:
 | **items.{}.hint**   | object   | No        | Provide optional hint to each radio item. See [hint](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/hint) component. |
 | **items.{}.divider** | string   | No        | Optional divider text to separate radio items, for example the text "or". |
 | **items.{}.checked** | boolean   | No        | If true, radio will be checked. |
-| **items.{}.conditional** | boolean   | No        | If true, content provided will be revealed when the item is checked. |
-| **items.{}.conditional.html** | boolean   | No        | Provide content for the conditional reveal. |
 | **items.{}.disabled** | boolean   | No        | If true, radio will be disabled. |
 | **items.{}.attributes** | object   | No        | Any extra HTML attributes (for example data attributes) to add to the radio input tag. |
 | **classes**         | string   | No        | Optional additional classes to add to the radios container. Separate each class with a space. |

packages/components/radios/template.njk

@@ -11,13 +11,6 @@
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = "" %}
 
-{% set isConditional = false %}
-{% for item in params.items %}
-  {% if item.conditional %}
-    {% set isConditional = true %}
-  {% endif %}
-{% endfor %}
-
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
 {% if params.hint %}
@@ -31,30 +24,28 @@
     text: params.hint.text
   }) | indent(2) | trim }}
 {% endif %}
-{% if params.errorMessage %}
-  {% set errorId = idPrefix + '-error' %}
-  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+{%- if params.errorMessage %}
+  {%- set errorId = idPrefix + '-error' %}
+  {%- set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ errorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     html: params.errorMessage.html,
     text: params.errorMessage.text
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="nhsuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}{%- if isConditional %} nhsuk-radios--conditional{% endif -%}"
-    {%- if isConditional %} data-module="radios"{% endif -%}
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    {% for item in params.items %}
-    {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-    {% set conditionalId = "conditional-" + id %}
+  <div class="nhsuk-radios
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {%- for item in params.items %}
+    {%- set id = item.id if item.id else idPrefix + "-" + loop.index %}
     {%- if item.divider %}
     <div class="nhsuk-radios__divider">{{ item.divider }}</div>
     {%- else %}
-    {% set hasHint = true if item.hint.text or item.hint.html %}
-    {% set itemHintId = id + '-item-hint' %}
+    {%- set hasHint = true if item.hint.text or item.hint.html %}
+    {%- set itemHintId = id + '-item-hint' %}
     <div class="nhsuk-radios__item">
-      <input class="nhsuk-radios__input" id="{{ id }}" name="{{ params.name }}"
-      {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%} type="radio" value="{{ item.value }}"
+      <input class="nhsuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
@@ -76,13 +67,8 @@
       }) | indent(6) | trim }}
       {%- endif %}
     </div>
-    {% if item.conditional %}
-      <div class="nhsuk-radios__conditional{% if not item.checked %} nhsuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
-        {{ item.conditional.html | safe }}
-      </div>
-    {% endif %}
-    {% endif %}
-    {% endfor %}
+    {%- endif %}
+    {%- endfor %}
   </div>
 {% endset -%}
 
@@ -96,7 +82,7 @@
   }) %}
   {{ innerHtml | trim | safe }}
   {% endcall %}
-{% else %}
+{%- else %}
   {{ innerHtml | trim | safe }}
-{% endif %}
+{%- endif %}
 </div>

packages/components/review-date/template.njk

@@ -1,8 +1,10 @@
 {% if params.lastReview or params.nextReview %}
-  <div class="nhsuk-review-date{%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="nhsuk-review-date
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     <p class="nhsuk-body-s">
       {% if params.lastReview %}Page last reviewed: <time>{{ params.lastReview }}</time><br>{% endif %}
       {% if params.nextReview %}Next review due: <time>{{ params.nextReview }}</time>{% endif %}
     </p>
   </div>
-{% endif %}
+{%- endif %}

packages/components/select/template.njk

@@ -4,8 +4,9 @@
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
-{% set describedBy = "" %}
-<div class="nhsuk-form-group {%- if params.errorMessage %} nhsuk-form-group--error{% endif %}">
+{%- set describedBy = "" -%}
+<div class="nhsuk-form-group
+{%- if params.errorMessage %} nhsuk-form-group--error{% endif %}">
   {{ label({
     html: params.label.html,
     text: params.label.text,
@@ -14,34 +15,37 @@
     attributes: params.label.attributes,
     for: params.id
   }) | indent(2) | trim }}
-{% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
-  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+{%- if params.hint %}
+  {%- set hintId = params.id + '-hint' %}
+  {%- set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ hint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
     html: params.hint.html,
     text: params.hint.text
   }) | indent(2) | trim }}
-{% endif %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+{%- endif -%}
+{%- if params.errorMessage %}
+  {%- set errorId = params.id + '-error' %}
+  {%- set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ errorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     html: params.errorMessage.html,
     text: params.errorMessage.text
   }) | indent(2) | trim }}
-{% endif %}
+{%- endif %}
   <select class="nhsuk-select
-    {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} nhsuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {% for item in params.items %}
+    {%- if params.classes %} {{ params.classes }}{% endif %}
+    {%- if params.errorMessage %} nhsuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}"
+    {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for item in params.items %}
     <option value="{{ item.value }}"
       {{-" selected" if item.selected }}
       {{-" disabled" if item.disabled }}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
-  {% endfor %}
+  {%- endfor %}
   </select>
 </div>

packages/components/skip-link/template.njk

@@ -1 +1,5 @@
-<a class="nhsuk-skip-link{%- if params.classes %} {{ params.classes }}{% endif -%}" href="{% if params.href %}{{ params.href }}{% else %}#maincontent{% endif %}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{% if params.text %}{{ params.text }}{% else %}Skip to main content{% endif %}</a>
+<a class="nhsuk-skip-link
+{%- if params.classes %} {{ params.classes }}{% endif %}" href="
+{%- if params.href %}{{ params.href }}{% else %}#maincontent{% endif %}"
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- if params.text %}{{ params.text }}{% else %}Skip to main content{% endif %}</a>

packages/components/tables/template.njk

@@ -1,51 +1,53 @@
-{% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
+{%- set headingLevel = params.headingLevel if params.headingLevel else 3 -%}
 {% if params.panel%}
-<div class="nhsuk-table__panel-with-heading-tab {%- if params.panelClasses %} {{ params.panelClasses }}{% endif %}">
-  {% if params.heading %}
+<div class="nhsuk-table__panel-with-heading-tab
+{%- if params.panelClasses %} {{ params.panelClasses }}{% endif %}">
+  {%- if params.heading %}
   <h{{ headingLevel }} class="nhsuk-table__heading-tab">{{ params.heading | safe }}</h{{ headingLevel }}>
-  {% endif %}
-{% endif %}
+  {%- endif %}
+{%- endif %}
   <div class="nhsuk-table-responsive">
     <table class="nhsuk-table
-      {%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-      {% if params.caption %}
+      {%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"
+      {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+      {%- if params.caption %}
       <caption class="nhsuk-table__caption
       {%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">{{ params.caption }}</caption>
-      {% endif %}
-      {% if params.head %}
+      {%- endif %}
+      {%- if params.head %}
       <thead class="nhsuk-table__head">
         <tr class="nhsuk-table__row">
-        {% for item in params.head %}
+        {%- for item in params.head %}
           <th class="nhsuk-table__header
           {%- if item.format %} nhsuk-table__header--{{ item.format }}{% endif %}"
           {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
           {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %} scope="col">{{ item.html |safe if item.html else item.text }}</th>
-        {% endfor %}
+        {%- endfor %}
         </tr>
       </thead>
-      {% endif %}
+      {%- endif %}
       <tbody class="nhsuk-table__body">
-        {% for row in params.rows %}
+        {%- for row in params.rows %}
         <tr class="nhsuk-table__row">
-        {% for cell in row %}
-          {% if loop.first and params.firstCellIsHeader %}
+        {%- for cell in row %}
+          {%- if loop.first and params.firstCellIsHeader %}
           <th class="nhsuk-table__header" scope="row">{{ cell.html | safe if cell.html else cell.text }}</th>
-          {% elseif loop.first %}
+          {%- elseif loop.first %}
           <td class="nhsuk-table__cell
           {%- if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}"
           {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
           {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
-          {% else %}
+          {%- else %}
           <td class="nhsuk-table__cell {% if cell.format %}nhsuk-table__cell--{{ cell.format }}{% endif %}"
           {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
           {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
-          {% endif %}
-        {% endfor %}
+          {%- endif %}
+        {%- endfor %}
         </tr>
-        {% endfor %}
+        {%- endfor %}
       </tbody>
     </table>
   </div>
-{% if params.panel%}
+{%- if params.panel %}
 </div>
-{% endif %}
+{%- endif %}

packages/components/textarea/template.njk

@@ -14,28 +14,31 @@
     attributes: params.label.attributes,
     for: params.id
   }) | indent(2) | trim }}
-{% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
-  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+{%- if params.hint %}
+  {%- set hintId = params.id + '-hint' %}
+  {%- set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ hint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
     html: params.hint.html,
     text: params.hint.text
   }) | indent(2) | trim }}
-{% endif %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+{%- endif %}
+{%- if params.errorMessage %}
+  {%- set errorId = params.id + '-error' %}
+  {%- set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ errorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     html: params.errorMessage.html,
     text: params.errorMessage.text
   }) | indent(2) | trim }}
-{% endif %}
-  <textarea class="nhsuk-textarea {{- ' nhsuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+{%- endif %}
+  <textarea class="nhsuk-textarea
+  {%- if params.errorMessage %} nhsuk-textarea--error{% endif %}
+  {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" rows="
+  {%- if params.rows %} {{ params.rows }} {% else %}5{%endif %}"
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
 </div>

packages/components/warning-callout/template.njk

@@ -1,5 +1,6 @@
 {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
-<div class="nhsuk-warning-callout {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div class="nhsuk-warning-callout
+{%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <h{{ headingLevel }} class="nhsuk-warning-callout__label">{{ params.heading | safe }}</h{{ headingLevel }}>
   {{ params.HTML | safe }}