[refs #318] Tidy up of code and outputted markup of components

Removing any whitespace to tidy up resultant markup and refactor
nunjucks templates to make them more readable.

Templates amended:
- action link
- back link
- breadcrumb
- button
- care card
- contents list
- date input
- hint

More to come...

packages/components/action-link/template.njk

@@ -1,6 +1,9 @@
 <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 %}>
+  <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 %}>
     <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
       <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,5 +1,6 @@
-<div class="nhsuk-back-link{%- if params.classes %} {{ params.classes }}{% endif -%}">
-  <a class="nhsuk-back-link__link" href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" 
+<div class="nhsuk-back-link{%- if params.classes %} {{ params.classes }}{% endif %}">
+  <a class="nhsuk-back-link__link" href="
+  {%- if params.href %}{{ params.href }}{% else %}#{% endif %}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
     <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>

packages/components/breadcrumb/template.njk

@@ -1,11 +1,12 @@
-<nav class="nhsuk-breadcrumb{% if params.classes %} {{ params.classes }}{% endif %}" aria-label="Breadcrumb" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<nav class="nhsuk-breadcrumb{% if params.classes %} {{ params.classes }}{% endif %}" aria-label="Breadcrumb"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <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>
-        {% endif %}
-      {% endfor %}
+  {%- 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>
+    {%- endif -%}
+  {% endfor %}
       <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ params.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.text}}</a></li>
     </ol>
     <p class="nhsuk-breadcrumb__back"><a class="nhsuk-breadcrumb__backlink" href="{{ params.href }}">Back to {{ params.text }}</a></p>

packages/components/button/template.njk

@@ -11,13 +11,20 @@
 {% endif %}
 
 {# Define common attributes that we can use across all element types #}
-{% set commonAttributes %} class="nhsuk-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} nhsuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{% set commonAttributes %} class="nhsuk-button
+  {%- if params.classes %} {{ params.classes }}{% endif %}
+  {%- if params.disabled %} nhsuk-button--disabled{% endif %}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+{%- endset -%}
 
 {# Define common attributes we can use for both button and input types #}
-{% set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
+{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}" {% endif %}type="{{ params.type if params.type else 'submit' }}"
+   {%- if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
+ {%- endset -%}
 
 {% if element == 'a' %}
-<a{{ commonAttributes | safe }} href="{{ params.href if params.href else '#' }}" role="button" draggable="false"{% if params.disabled %} aria-disabled="true"{% endif %}>
+<a{{ commonAttributes | safe }} href="{{ params.href if params.href else '#' }}" role="button" draggable="false"
+  {%- if params.disabled %} aria-disabled="true"{% endif %}>
   {{ params.html | safe if params.html else params.text }}
 </a>
 

packages/components/care-card/template.njk

@@ -1,7 +1,14 @@
 {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
-<div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="nhsuk-care-card
+{%- if params.type %} nhsuk-care-card--{{ params.type }}{% endif %}
+{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="nhsuk-care-card__heading-container">
-    <h{{ headingLevel }} class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">{% if params.type === 'non-urgent' %}Non-urgent advice: {% elseif params.type === 'urgent' %}Urgent advice: {% elseif params.type === 'immediate' %}Immediate action required: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</span></h{{ headingLevel }}>
+    <h{{ headingLevel }} class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">
+    {%- if params.type === 'non-urgent' %}Non-urgent advice:
+    {%- elseif params.type === 'urgent' %}Urgent advice:
+    {%- elseif params.type === 'immediate' %}Immediate action required:
+    {%- else %}Non-urgent advice:{% endif %} </span>{{ params.heading }}</span></h{{ headingLevel }}>
     <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">

packages/components/contents-list/template.njk

@@ -1,16 +1,18 @@
-<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">
+<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">
   <h2 class="nhsuk-u-visually-hidden">Contents</h2>
   <ol class="nhsuk-contents-list__list">
-    {% for item in params.items %}
-      {% if item.current %}
+    {%- for item in params.items %}
+      {%- if item.current %}
         <li class="nhsuk-contents-list__item" aria-current="page">
           <span class="nhsuk-contents-list__current">{{ item.text }}</span>
         </li>
-      {% else %}
+      {%- else %}
         <li class="nhsuk-contents-list__item">
           <a class="nhsuk-contents-list__link" href="{{ item.href }}">{{ item.text }}</a>
         </li>
-      {% endif %}
-    {% endfor %}
+      {%- endif %}
+    {%- endfor %}
   </ol>
 </nav>

packages/components/date-input/template.njk

@@ -27,10 +27,11 @@
 {% endif %}
 
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
+{%- set innerHtml -%}
 {% if params.hint %}
   {% set hintId = params.id + "-hint" %}
   {% set describedBy = describedBy + " " + hintId if describedBy else hintId %}
+
   {{ hint({
     id: hintId,
     classes: params.hint.classes,
@@ -49,10 +50,11 @@
     text: params.errorMessage.text
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="nhsuk-date-input {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="nhsuk-date-input
+    {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
-    {% for item in dateInputItems %}
+    {%- for item in dateInputItems %}
     <div class="nhsuk-date-input__item">
       {{ input({
         label: {
@@ -69,9 +71,9 @@
         }
       }) | indent(6) | trim }}
     </div>
-  {% endfor %}
+  {%- endfor -%}
   </div>
-{% endset %}
+{%- endset -%}
 
 <div class="nhsuk-form-group {%- if params.errorMessage %} nhsuk-form-group--error{% endif %}  {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
@@ -87,9 +89,9 @@
     },
     legend: params.fieldset.legend
   }) %}
-  {{ innerHtml | trim | safe }}
+  {{- innerHtml | trim | safe -}}
   {% endcall %}
 {% else %}
-  {{ innerHtml | trim | safe }}
+  {{- innerHtml | trim | safe -}}
 {% endif %}
 </div>

packages/components/hint/template.njk

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