[refs #318] Update Nunjucks templates and READMEs

Code tidy of the Nunjucks templates and README updates. Components amended: - input - inset text - label - list panel - nav a-z - pagination - panel
nhsuk · Jan 25, 2019 · 155cf32 · 155cf32
1 parent 4f4b6de
commit 155cf32
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 182 deletions.
diff --git a/app/components/list-panel/index.njk b/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"
               }
             ]
           }) }}

diff --git a/app/components/nav-a-z/index.njk b/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"
               }
             ]
           }) }}

diff --git a/packages/components/input/template.njk b/packages/components/input/template.njk
@@ -5,38 +5,42 @@
 {#- 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 %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="nhsuk-form-group
+{%- if params.errorMessage %} nhsuk-form-group--error{% endif %}
+{%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ label({
     html: params.label.html,
     text: params.label.text,
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     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 %}
+  }) | indent(2) | trim -}}
+{%- 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 %}
+  }) | indent(2) | trim -}}
+{% 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 }}
+  }) | indent(2) | trim -}}
 {% endif %}
-  <input class="nhsuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} nhsuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+  <input class="nhsuk-input
+  {%- if params.classes %} {{ params.classes }}{% endif %}
+  {%- if params.errorMessage %} nhsuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 </div>
diff --git a/packages/components/inset-text/template.njk b/packages/components/inset-text/template.njk
@@ -1,4 +1,6 @@
-<div class="nhsuk-inset-text{% if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="nhsuk-inset-text
+{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <span class="nhsuk-u-visually-hidden">Information: </span>
   {{ params.HTML | safe }}
 </div>
diff --git a/packages/components/label/template.njk b/packages/components/label/template.njk
@@ -1,15 +1,16 @@
 {% 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 %}>
+{%- 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 %}>
   {{ params.html | safe if params.html else params.text }}
 </label>
-{% endset %}
+{%- endset -%}
 
-{% if params.isPageHeading %}
+{%- if params.isPageHeading %}
 <h1 class="nhsuk-label-wrapper">{{ labelHtml | safe | indent(2) }}</h1>
-{% else %}
+{%- else -%}
 {{ labelHtml | safe }}
-{% endif %}
-{% endif %}
+{%- endif -%}
+{%- endif -%}