[refs #318] Update Nunjucks templates and READMEs

Added Nunjucks options for emergency alert and feedback banner components. Tidied up code for the other components. Components amended: - details - do-dont-lists - emergency alert - error message - error summary - feedback banner
nhsuk · Jan 25, 2019 · c523ea5 · c523ea5
1 parent 8a40a7d
commit c523ea5
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 40 deletions.
diff --git a/app/components/emergency-alert/index.njk b/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"
   }) }}
 

diff --git a/app/components/feedback-banner/index.njk b/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">

diff --git a/packages/components/details/template.njk b/packages/components/details/template.njk
@@ -1,11 +1,12 @@
-<details class="nhsuk-details{%- if params.classes %} {{ params.classes }}{% endif %}"
+<details class="nhsuk-details
+{%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <summary class="nhsuk-details__summary">
     <span class="nhsuk-details__summary-text">
       {{ params.text }}
     </span>
   </summary>
   <div class="nhsuk-details__text">
-    {{ params.HTML | safe }}
+    {{- params.HTML | safe }}
   </div>
 </details>
diff --git a/packages/components/do-dont-list/template.njk b/packages/components/do-dont-list/template.njk
@@ -1,21 +1,23 @@
 {% 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 %}>
+<div class="nhsuk-do-dont-list
+{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <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 %}">
-      {% for data in params.items %}
-      <li>
-      {% if params.type == 'cross' %}
-        <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"></path>
-          <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"></path>
-        </svg>
-      {% else %}
-        <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" >
-          <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
-        </svg>
-      {% endif %}
+  <ul class="nhsuk-list {% if params.type == 'tick' %}nhsuk-list--tick{% else %}nhsuk-list--cross{% endif %}">
+    {%- for data in params.items %}
+    <li>
+    {%- if params.type == 'cross' %}
+      <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"></path>
+        <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"></path>
+      </svg>
+    {%- else %}
+      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" >
+        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
+      </svg>
+    {%- endif %}
       {% if params.type == 'cross' %}do not {% endif %}{{ data.item | safe}}
-      </li>
-      {% endfor %}
-    </ul>
+    </li>
+    {%- endfor %}
+  </ul>
 </div>
diff --git a/packages/components/emergency-alert/README.md b/packages/components/emergency-alert/README.md
@@ -11,7 +11,7 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 ### HTML markup
 
 ```html
-<div id="nhsuk-global-alert" class="nhsuk-global-alert">
+<div class="nhsuk-global-alert" id="nhsuk-global-alert">
   <div class="nhsuk-width-container">
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-full">
@@ -34,8 +34,22 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 {{ 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"
 }) }}
 ```
+
+## Nunjucks arguments
+
+If you are using Nunjucks, then macros take the following arguments:
+
+| Name              | Type     | Required  | Description |
+| ------------------|----------|-----------|-------------|
+| **title**         | string   | Yes       | Title to be displayed in the emergency alert component. |
+| **content**       | string   | Yes       | Content of the emergency alert component |
+| **label**         | string   | No        | Optional text to be displayed within the link at the end of the content |
+| **href**          | string   | No        | Optional value of the link href attribute at the end of the content |
+| **lastUpdated**   | string   | No        | Optional text displayed below the main content to show last updated message |
+| **classes**       | string   | No        | Optional additional classes to add to the emergency alert container. Separate each class with a space. |
+| **attributes**    | object   | No        | Any extra HTML attributes (for example data attributes) to add to the emergency alert container. |
diff --git a/packages/components/emergency-alert/template.njk b/packages/components/emergency-alert/template.njk
@@ -1,11 +1,15 @@
-<div id="nhsuk-global-alert" class="nhsuk-global-alert">
+<div class="nhsuk-global-alert
+{%- if params.classes %} {{ params.classes }}{% endif %}" id="nhsuk-global-alert"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="nhsuk-width-container">
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-full">
         <div class="nhsuk-global-alert__content">
           <h2 class="nhsuk-global-alert__heading"><span class="nhsuk-u-visually-hidden">Alert: </span>{{ params.title }}</h2>
-          <p class="nhsuk-global-alert__message">{{ params.content }} <a class="nhsuk-u-nowrap" href="{{ params.href }}" >{{ params.label }}</a></p>
-          <p class="nhsuk-global-alert__updated">{{ params.lastUpdated }}</p>
+          <p class="nhsuk-global-alert__message">{{ params.content }}
+          {%- if (params.href) and (params.label) %} <a class="nhsuk-u-nowrap" href="{{ params.href }}">{{ params.label }}</a>{% endif -%}
+          </p>
+          {% if params.lastUpdated %}<p class="nhsuk-global-alert__updated">{{ params.lastUpdated }}</p>{% endif %}
         </div>
       </div>
     </div>

diff --git a/packages/components/error-message/template.njk b/packages/components/error-message/template.njk
@@ -1,3 +1,5 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="nhsuk-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="nhsuk-error-message
+{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
 </span>
diff --git a/packages/components/error-summary/template.njk b/packages/components/error-summary/template.njk
@@ -1,24 +1,25 @@
-<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 %} data-module="error-summary">
+<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 %}>
   <h2 class="nhsuk-error-summary__title" id="error-summary-title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>
   <div class="nhsuk-error-summary__body">
-    {% if params.descriptionHtml or params.descriptionText %}
+    {%- if params.descriptionHtml or params.descriptionText %}
     <p>
       {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }}
     </p>
-    {% endif %}
+    {% endif -%}
     <ul class="nhsuk-list nhsuk-error-summary__list">
-    {% for item in params.errorList %}
+    {%- for item in params.errorList %}
       <li>
-      {% if item.href %}
+      {%- 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>
       {% else %}
         {{ item.html | safe if item.html else item.text }}
-      {% endif %}
+      {%- endif -%}
       </li>
-    {% endfor %}
+    {%- endfor %}
     </ul>
   </div>
 </div>
diff --git a/packages/components/feedback-banner/README.md b/packages/components/feedback-banner/README.md
@@ -39,7 +39,20 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
 {{ 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"
 }) }}
 ```
+
+## Nunjucks arguments
+
+If you are using Nunjucks, then macros take the following arguments:
+
+| Name              | Type     | Required  | Description |
+| ------------------|----------|-----------|-------------|
+| **title**         | string   | Yes       | Title to be displayed in the feedback banner component. |
+| **content**       | string   | Yes       | Content of the feedback banner component |
+| **label**         | string   | No        | Optional text to be displayed within the link at the end of the content |
+| **href**          | string   | No        | Optional value of the link href attribute at the end of the content |
+| **classes**       | string   | No        | Optional additional classes to add to the feedback banner container. Separate each class with a space. |
+| **attributes**    | object   | No        | Any extra HTML attributes (for example data attributes) to add to the feedback banner container. |
diff --git a/packages/components/feedback-banner/template.njk b/packages/components/feedback-banner/template.njk
@@ -1,10 +1,13 @@
-<div class="nhsuk-feedback-banner" id="nhsuk-feedback-banner">
+<div class="nhsuk-feedback-banner
+{%- if params.classes %} {{ params.classes }}{% endif %}" id="nhsuk-feedback-banner"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="nhsuk-width-container">
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-full">
         <div class="nhsuk-feedback-banner__content">
           <h2 class="nhsuk-feedback-banner__heading">{{ params.title }}</h2>
-          <p class="nhsuk-feedback-banner__message">{{ params.content }} <a href="{{ params.href }}" class="nhsuk-u-nowrap">{{ params.label }}</a>.</p>
+          <p class="nhsuk-feedback-banner__message">{{ params.content }}
+          {%- if (params.href) and (params.label) %} <a class="nhsuk-u-nowrap" href="{{ params.href }}">{{ params.label }}</a>{% endif -%}</p>
           <button class="nhsuk-feedback-banner__close" id="nhsuk-feedback-banner-close" type="button">Close<span class="nhsuk-u-visually-hidden"> feedback invite</span></button>
         </div>
       </div>