[refs #318] Updates to the Nunjucks templates and READMEs

Added Nunjucks options for the hero and images components. Code tidy of the Nunjucks templates and README updates. Components amended: - fieldset - footer - header - hero - hint - images
nhsuk · Jan 25, 2019 · 8da3e61 · 8da3e61
1 parent c523ea5
commit 8da3e61
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 50 deletions.
diff --git a/app/components/images/index.njk b/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>

diff --git a/packages/components/fieldset/template.njk b/packages/components/fieldset/template.njk
@@ -2,8 +2,8 @@
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {% if params.legend.html or params.legend.text %}
-  <legend class="nhsuk-fieldset__legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
+  {%- if params.legend.html or params.legend.text %}
+  <legend class="nhsuk-fieldset__legend{%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
   {%- if params.legend.isPageHeading %}
     <h1 class="nhsuk-fieldset__heading">
       {{ params.legend.html | safe if params.legend.html else params.legend.text }}
@@ -12,6 +12,6 @@
     {{ params.legend.html | safe if params.legend.html else params.legend.text }}
   {% endif -%}
   </legend>
-  {% endif %}
+  {%- endif %}
 {{ caller() if caller }} {#- if statement allows usage of `call` to be optional -#}
 </fieldset>
diff --git a/packages/components/footer/README.md b/packages/components/footer/README.md
@@ -70,3 +70,5 @@ The footer Nunjucks macro takes the following arguments:
 | **links**             | array    | No        | Array of primary navigation items for use in the footer. |
 | **links.[].url**      | string   | No        | The href of a primary navigation item in the footer. |
 | **links.[].label**    | string   | No        | The label of a primary navigation item in the footer. |
+| **classes**           | string   | No        | Optional additional classes to add to the footer container. Separate each class with a space. |
+| **attributes**        | object   | No        | Any extra HTML attributes (for example data attributes) to add to the footer container. |
diff --git a/packages/components/footer/template.njk b/packages/components/footer/template.njk
@@ -1,12 +1,14 @@
 <footer role="contentinfo">
-  <div class="nhsuk-footer" id="nhsuk-footer">
+  <div class="nhsuk-footer
+    {%- if params.classes %} {{ params.classes }}{% endif %}" id="nhsuk-footer"
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     <div class="nhsuk-width-container">
-      {% if params.links %}
+      {%- if params.links %}
       <h2 class="nhsuk-u-visually-hidden">Support links</h2>
       <ul class="nhsuk-footer__list">
-        {% for item in params.links %}
+        {%- for item in params.links %}
         <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="{{item.URL}}">{{item.label}}</a></li>
-        {% endfor %}
+        {%- endfor %}
       </ul>
       {% endif %}
       <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>

diff --git a/packages/components/header/README.md b/packages/components/header/README.md
@@ -603,3 +603,5 @@ The transactional header with a long service name macro takes the following argu
 | **longName**               | boolean  | Yes       | Set to "true" if the service name is longer than 22 characters. |
 | **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
 | **ariaLabel**              | string   | No        | Aria label for the logo href. Defaults to "NHS homepage". |
+| **classes**                | string   | No        | Optional additional classes to add to the header container. Separate each class with a space. |
+| **attributes**             | object   | No        | Any extra HTML attributes (for example data attributes) to add to the header container. |
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
@@ -1,4 +1,7 @@
-<header class="nhsuk-header{% if params.transactional or params.transactionalService %} nhsuk-header--transactional{% endif %}" role="banner">
+<header class="nhsuk-header
+{%- if params.transactional or params.transactionalService %} nhsuk-header--transactional{% endif %}
+{%- if params.classes %} {{ params.classes }}{% endif %}" role="banner"
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="nhsuk-width-container nhsuk-header__container">
     <div class="nhsuk-header__logo">
       <a class="nhsuk-header__link{% if params.service %} nhsuk-header__link--service {% endif %}" href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" aria-label="{% if params.ariaLabel %}{{ params.ariaLabel }}{% else %}NHS homepage{% endif %}">
@@ -7,25 +10,25 @@
           <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
           <image src="https://assets.nhs.uk/images/nhs-logo.png" xlink:href=""></image>
         </svg>
-        {% if params.service %}
+        {%- if params.service %}
         <span class="nhsuk-header__service-name">
           {{ params.service.name }}
         </span>
-        {% endif %}
+        {%- endif %}
       </a>
     </div>
 
-    {% if params.showNav == "false" and params.showSearch == "false"%}
+    {%- if params.showNav == "false" and params.showSearch == "false"%}
 
-      {% if params.transactionalService%}
+      {%- if params.transactionalService%}
         <div class="nhsuk-header__transactional-service-name{% if params.transactionalService.longName %} nhsuk-header__transactional-service-name--long{% endif %}">
           <a class="nhsuk-header__transactional-service-name--link" href="{% if params.transactionalService.href %}{{ params.transactionalService.href }}{% else %}/{% endif %}">{{ params.transactionalService.name }}</a>
         </div>
-      {% endif %}
+      {%- endif %}
 
     </div>{# close nhsuk-header__container #}
 
-    {% endif %}
+    {% endif -%}
 
     {% if params.showNav == "true" and params.primaryLinks and params.showSearch == "true" %}
 
@@ -85,20 +88,20 @@
             </svg>
           </a>
         </li>
-        {% for item in params.primaryLinks %}
-          <li class="nhsuk-header__navigation-item">
-            <a class="nhsuk-header__navigation-link" href="{{item.url}}">
-              {{item.label}}
-              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-              </svg>
-            </a>
-          </li>
-        {% endfor %}
+        {%- for item in params.primaryLinks %}
+        <li class="nhsuk-header__navigation-item">
+          <a class="nhsuk-header__navigation-link" href="{{item.url}}">
+            {{item.label}}
+            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
+            </svg>
+          </a>
+        </li>
+        {%- endfor %}
       </ul>
     </nav>
 
-    {% endif %}
+    {% endif -%}
 
     {% if params.showSearch == "true" and params.showNav == "false" %}
 
@@ -136,7 +139,7 @@
 
     </div>{# close nhsuk-header__container #}
 
-    {% endif %}
+    {% endif -%}
 
     {% if params.showNav == "true" and params.primaryLinks and params.showSearch == "false" %}
 
@@ -165,7 +168,7 @@
             </svg>
           </a>
         </li>
-        {% for item in params.primaryLinks %}
+        {%- for item in params.primaryLinks %}
         <li class="nhsuk-header__navigation-item">
           <a class="nhsuk-header__navigation-link" href="{{item.url}}">
             {{item.label}}
@@ -174,10 +177,10 @@
             </svg>
           </a>
         </li>
-        {% endfor %}
+        {%- endfor %}
       </ul>
     </nav>
 
-    {% endif %}
+    {% endif -%}
 
 </header>
diff --git a/packages/components/hero/README.md b/packages/components/hero/README.md
@@ -93,3 +93,15 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
   "imageURL": "https://www.nhs.uk/static/nhsuk_shared/img/homepage/hero-2.jpg"
 }) }}
 ```
+
+## Nunjucks arguments
+
+The transactional header with a long service name macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **heading**                | string   | No        | Text heading of the hero component. |
+| **text**                   | string   | No        | Text content of the hero component. |
+| **imageURL**               | string   | No        | URL of the image of the hero component. |
+| **classes**                | string   | No        | Optional additional classes to add to the hero container. Separate each class with a space. |
+| **attributes**             | object   | No        | Any extra HTML attributes (for example data attributes) to add to the hero container. |
diff --git a/packages/components/hero/template.njk b/packages/components/hero/template.njk
@@ -1,6 +1,11 @@
-<section class="nhsuk-hero{% if params.imageURL and params.heading %} nhsuk-hero--image nhsuk-hero--image-description{% elif params.imageURL %} nhsuk-hero--image{% endif %}"{% if params.imageURL %} style="background-image: url('{{ params.imageURL }}');"{% endif %}>
+<section class="nhsuk-hero
+{%- if params.imageURL and params.heading %} nhsuk-hero--image nhsuk-hero--image-description
+{%- elif params.imageURL %} nhsuk-hero--image{% endif %}
+{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- if params.imageURL %} style="background-image: url('{{ params.imageURL }}');"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {% if params.imageURL %}<div class="nhsuk-hero__overlay">{% endif %}
-  {% if params.heading %}
+{%- if params.heading %}
   <div class="nhsuk-width-container nhsuk-hero--border">
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-two-thirds">
@@ -11,6 +16,6 @@
       </div>
     </div>
   </div>
-{% endif %}
-{% if params.imageURL %}</div>{% endif %}
+{% endif -%}
+{%- if params.imageURL %}</div>{% endif %}
 </section>
diff --git a/packages/components/hint/README.md b/packages/components/hint/README.md
@@ -33,7 +33,7 @@ If you are using Nunjucks, then macros take the following arguments:
 | Name                    | Type     | Required  | Description             |
 | ------------------------|----------|-----------|-------------------------|
 | **text or (html) html** | string   | Yes       | Text or HTML to use within the hint. If `html` is provided, the `text` argument will be ignored. |
-| **id**                  | string   | Yes       | Optional id attribute o add to the hint span tag. |
+| **id**                  | string   | Yes       | Optional id attribute to add to the hint span tag. |
 | **classes**             | string   | No        | Optional additional classes to add to the hint span tag. Separate each class with a space. |
 | **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the input component. |
 

diff --git a/packages/components/images/README.md b/packages/components/images/README.md
@@ -12,13 +12,14 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 
 ```html
 <figure class="nhsuk-image">
-  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis"/>
+  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis">
   <figcaption class="nhsuk-image__caption">
     Itchy, red, watering eyes
   </figcaption>
 </figure>
+
 <figure class="nhsuk-image">
-  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis"/>
+  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis">
 </figure>
 ```
 
@@ -28,8 +29,20 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 {% from 'components/images/macro.njk' import image %}
 
 {{ 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"
 }) }}
 ```
+
+## Nunjucks arguments
+
+If you are using Nunjucks, then macros take the following arguments:
+
+| Name                    | Type     | Required  | Description             |
+| ------------------------|----------|-----------|-------------------------|
+| **src**                 | string   | Yes       | The source location of the image. |
+| **alt**                 | string   | Yes       | The alt text of the image. |
+| **caption**             | string   | No        | Optional caption text for the image. |
+| **classes**             | string   | No        | Optional additional classes to add to the image container. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the image container. |
diff --git a/packages/components/images/template.njk b/packages/components/images/template.njk
@@ -1,11 +1,10 @@
-<figure class="nhsuk-image {%- if params.classes %} {{ params.classes }}{% endif %}"
+<figure class="nhsuk-image
+{%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <img class="nhsuk-image__img" src="{{ params.src }}" alt="{{ params.alt }}"/>
-  {% if params.caption %}
-    <figcaption class="nhsuk-image__caption">
-      {{ params.caption | safe }}
-    </figcaption>
-    </figure>
-    {% else %}
-    </figure>
-  {% endif %}
+  <img class="nhsuk-image__img" src="{{ params.src }}" alt="{{ params.alt }}">
+  {%- if params.caption %}
+  <figcaption class="nhsuk-image__caption">
+    {{ params.caption | safe }}
+  </figcaption>
+  {%- endif %}
+</figure>