Feature/class attributes

app/components/emergency-alert/index.njk

@@ -8,8 +8,8 @@
   {{ emergencyAlert({
     "title": "National flu outbreak",
     "content": "There has been a national flu outbreak.",
-    "href": "https://www.nhs.uk",
     "label": "How does it affect me",
+    "href": "https://www.nhs.uk",
     "lastUpdated": "Updated 23 mins ago"
   }) }}
 

app/components/feedback-banner/index.njk

@@ -8,8 +8,8 @@
   {{ feedbackBanner({
     "title": "Help us make the NHS website better",
     "content": "Your feedback helps us improve the NHS website.",
-    "href": "https://www.nhs.uk",
-    "label": "Take our short survey"
+    "label": "Take our short survey",
+    "href": "https://www.nhs.uk"
   }) }}
 
   <div class="nhsuk-width-container">

app/components/images/index.njk

@@ -11,14 +11,14 @@
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-two-thirds">
           {{ image({
-            "alt": "Picture of allergic conjunctivitis",
             "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
+            "alt": "Picture of allergic conjunctivitis",
             "caption": "Itchy, red, watering eyes"
           }) }}
 
           {{ image({
-            "alt": "Picture of allergic conjunctivitis",
-            "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg"
+            "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
+            "alt": "Picture of allergic conjunctivitis"
           }) }}
         </div>
       </div>

app/components/list-panel/index.njk

@@ -14,72 +14,72 @@
           <ol class="nhsuk-list">
           <li>
           {{ listPanel({
-            label: "A",
-            id: "A",
-            backToTop: "true",
-            backToTopLink: "#nhsuk-nav-a-z",
-            items: [
+            "label": "A",
+            "id": "A",
+            "backToTop": "true",
+            "backToTopLink": "#nhsuk-nav-a-z",
+            "items": [
               {
-                URL: "/conditions/abdominal-aortic-aneurysm/",
-                link: "AAA"
+                "URL": "/conditions/abdominal-aortic-aneurysm/",
+                "link": "AAA"
               },
               {
-                URL: "/conditions/abdominal-aortic-aneurysm/",
-                link: "Abdominal aortic aneurysm"
+                "URL": "/conditions/abdominal-aortic-aneurysm/",
+                "link": "Abdominal aortic aneurysm"
               },
               {
-                URL: "/conditions/abscess/",
-                link: "Abscess"
+                "URL": "/conditions/abscess/",
+                "link": "Abscess"
               }
             ]
           }) }}
           </li>
           <li>
           {{ listPanel({
-            label: "B",
-            id: "B",
-            disable: "true",
-            backToTop: "true",
-            backToTopLink: "#nhsuk-nav-a-z",
-            message: "There are currently no conditions listed"
+            "label": "B",
+            "id": "B",
+            "disable": "true",
+            "backToTop": "true",
+            "backToTopLink": "#nhsuk-nav-a-z",
+            "message": "There are currently no conditions listed"
           }) }}
           </li>
           <li>
           {{ listPanel({
-            label: "C",
-            id: "C",
-            backToTop: "true",
-            backToTopLink: "#nhsuk-nav-a-z",
-            items: [
+            "label": "C",
+            "id": "C",
+            "backToTop": "true",
+            "backToTopLink": "#nhsuk-nav-a-z",
+            "items": [
               {
-                URL: "/conditions/chest-pain/",
-                link: "Chest pain"
+                "URL": "/conditions/chest-pain/",
+                "link": "Chest pain"
               },
               {
-                URL: "/conditions/cold-sores/",
-                link: "Cold sore"
+                "URL": "/conditions/cold-sores/",
+                "link": "Cold sore"
               }
             ]
           }) }}
           </li>
           <li>
           {{ listPanel({
-            label: "D",
-            id: "D",
-            backToTop: "true",
-            backToTopLink: "#nhsuk-nav-a-z",
-            items: [
+            "label": "D",
+            "id": "D",
+            "backToTop": "true",
+            "backToTopLink": "#nhsuk-nav-a-z",
+            "items": [
               {
-                URL: "/conditions/dandruff/",
-                link: "Dandruff"
+                "URL": "/conditions/dandruff/",
+                "link": "Dandruff"
               },
               {
-                URL: "/conditions/dementia/",
-                link: "Dementia"
+                "URL": "/conditions/dementia/",
+                "link": "Dementia"
               },
               {
-                URL: "/conditions/toothache/",
-                link: "Dental pain"
+                "URL": "/conditions/toothache/",
+                "link": "Dental pain"
               }
             ]
           }) }}

app/components/nav-a-z/index.njk

@@ -11,85 +11,85 @@
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-full">
           {{ azNav({
-            items: [
+            "items": [
               {
-                label: "A"
+                "label": "A"
               },
               {
-                disable: "true",
-                label: "B"
+                "disable": "true",
+                "label": "B"
               },
               {
-                label: "C"
+                "label": "C"
               },
               {
-                label: "D"
+                "label": "D"
               },
               {
-                label: "E"
+                "label": "E"
               },
               {
-                label: "F"
+                "label": "F"
               },
               {
-                label: "G"
+                "label": "G"
               },
               {
-                label: "H"
+                "label": "H"
               },
               {
-                label: "I"
+                "label": "I"
               },
               {
-                label: "J"
+                "label": "J"
               },
               {
-                label: "K"
+                "label": "K"
               },
               {
-                label: "L"
+                "label": "L"
               },
               {
-                label: "M"
+                "label": "M"
               },
               {
-                label: "N"
+                "label": "N"
               },
               {
-                label: "O"
+                "label": "O"
               },
               {
-                label: "P"
+                "label": "P"
               },
               {
-                label: "Q"
+                "label": "Q"
               },
               {
-                label: "R"
+                "label": "R"
               },
               {
-                label: "S"
+                "label": "S"
               },
               {
-                label: "T"
+                "label": "T"
               },
               {
-                label: "U"
+                "label": "U"
               },
               {
-                label: "V"
+                "label": "V"
               },
               {
-                label: "W"
+                "label": "W"
               },
               {
-                label: "X"
+                "label": "X"
               },
               {
-                label: "Y"
+                "label": "Y"
               },
               {
-                label: "Z"
+                "label": "Z"
               }
             ]
           }) }}

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>