From a132880edeb102350cfcdb42520c7ca819fd0779 Mon Sep 17 00:00:00 2001
From: Ben Meyrick <bameyrick@gmail.com>
Date: Thu, 20 Dec 2018 15:46:22 +0000
Subject: [PATCH] Fix homepage rendering (#4)

---
 .editorconfig                                 |  2 +-
 .../beta-bar/examples/beta-bar/index.njk      |  4 +-
 src/components/button/src/_template.njk       |  6 +-
 .../card/examples/card-set/index.njk          | 16 ++-
 src/components/card/src/_macro.njk            |  6 +-
 src/components/card/src/_template.njk         | 10 +-
 .../checkboxes/src/_checkbox-macro.njk        |  2 +-
 src/components/password/src/_macro.njk        |  8 +-
 src/components/radios/src/_template.njk       |  2 +-
 src/components/select/src/_macro.njk          |  6 +-
 src/components/textarea/src/_template.njk     |  4 +-
 src/index.njk                                 | 99 +++++++++----------
 .../examples/error-details/index.njk          | 16 +--
 .../examples/errors-proto/errors/index.njk    |  4 +-
 .../examples/errors-proto/index.njk           | 66 ++++++-------
 src/patterns/error-validation/index.njk       |  4 +-
 src/views/layouts/_home.njk                   |  2 -
 17 files changed, 121 insertions(+), 136 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 168a67c6c6..2ec4a16a29 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -17,4 +17,4 @@ indent_size = 2
 indent_size = 2
 # Templates
 [*.pug,*.jade,*.njk]
-indent_size = 2
+indent_size = 4
diff --git a/src/components/beta-bar/examples/beta-bar/index.njk b/src/components/beta-bar/examples/beta-bar/index.njk
index 2c655a89f1..120a5834b3 100644
--- a/src/components/beta-bar/examples/beta-bar/index.njk
+++ b/src/components/beta-bar/examples/beta-bar/index.njk
@@ -2,9 +2,9 @@
 "fullWidth": true
 ---
 {% from "components/beta-bar/src/_macro.njk" import onsBetaBar %}
-{{-
+{{
     onsBetaBar({
         "beta": "BETA",
         "html": 'This is a new service – your <a href="#feedback">feedback</a> will help us improve it.'
     })
--}}
+}}
diff --git a/src/components/button/src/_template.njk b/src/components/button/src/_template.njk
index dec243426c..c9bbd14337 100644
--- a/src/components/button/src/_template.njk
+++ b/src/components/button/src/_template.njk
@@ -17,13 +17,13 @@
 
 {#- Create a button or a link #}
 {% if element == 'a' %}
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
+<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{ commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
 </a>
 {% elseif element == 'button' %}
-<button {% if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+<button {% if params.value %} value="{{ params.value }}"{% endif %} {{ buttonAttributes | safe }} {{ commonAttributes | safe }}>
     {{ params.html | safe if params.html else params.text }}
 </button>
 {% elseif element == 'input' %}
-<input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+<input value="{{ params.text }}" {{ buttonAttributes | safe }} {{ commonAttributes | safe }}>
 {% endif %}
diff --git a/src/components/card/examples/card-set/index.njk b/src/components/card/examples/card-set/index.njk
index 56bc7f5193..9b869fddcc 100644
--- a/src/components/card/examples/card-set/index.njk
+++ b/src/components/card/examples/card-set/index.njk
@@ -1,31 +1,29 @@
+{% from "components/card/src/_macro.njk" import onsCard %}
 <div class="grid grid--flex grid--column@xs@s">
     <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s col-12@xs@s">
-        {% from "components/card/src/_macro.njk" import onsCard %}
-        {{ 
+        {{-
             onsCard({
                 "title": 'Search for a business',
                 "href": '#',
-                "text": 'A list of UK businesses for statistical use across government. '
+                "text": 'A list of UK businesses for statistical use across government.'
             })
         }}
     </div>
     <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s col-12@xs@s">
-        {% from "components/card/src/_macro.njk" import onsCard %}
-        {{ 
+        {{- 
             onsCard({
                 "title": 'Record management',
                 "href": '#',
-                "text": 'Edit, create new records and view the editing history of businesses. '
+                "text": 'Edit, create new records and view the editing history of businesses.'
             })
         }}
     </div>
     <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s col-12@xs@s">
-        {% from "components/card/src/_macro.njk" import onsCard %}
-        {{ 
+        {{-
             onsCard({
                 "title": 'Address index',
                 "href": '#',
-                "text": 'The most accurate and greographical dataset of addresses and properties in the UK '
+                "text": 'The most accurate and greographical dataset of addresses and properties in the UK.'
             })
         }}
     </div>
diff --git a/src/components/card/src/_macro.njk b/src/components/card/src/_macro.njk
index 9a0951782c..1fe519744b 100644
--- a/src/components/card/src/_macro.njk
+++ b/src/components/card/src/_macro.njk
@@ -1,3 +1,3 @@
-{% macro onsCard(params) %}
-  {% include "components/card/src/_template.njk" %}
-{% endmacro %}
+{%- macro onsCard(params) -%}
+{% include "components/card/src/_template.njk" %}
+{%- endmacro -%}
diff --git a/src/components/card/src/_template.njk b/src/components/card/src/_template.njk
index 4b5997214c..190e1845bd 100644
--- a/src/components/card/src/_template.njk
+++ b/src/components/card/src/_template.njk
@@ -1,9 +1,11 @@
 <div class="card">
     <h3 class="u-fs-l">
-        {% if params.href %}
-        <a href="{{ params.href }}">{{ params.title }}</a>
-        {% else %}
-        {{ params.title }}
+        {% if params.href -%}
+            <a href="{{ params.href }}">
+                {{ params.title }}
+            </a>
+        {%- else %}
+            {{ params.title }}
         {% endif %}
     </h3>
     <p>{{ params.text }}</p>
diff --git a/src/components/checkboxes/src/_checkbox-macro.njk b/src/components/checkboxes/src/_checkbox-macro.njk
index 2556ecba9e..464cd738a3 100644
--- a/src/components/checkboxes/src/_checkbox-macro.njk
+++ b/src/components/checkboxes/src/_checkbox-macro.njk
@@ -2,7 +2,7 @@
     <div class="checkbox {{ params.classes }}">
         <input class="checkbox__input {{ params.inputClasses }}" name="{{ params.name }}" id="{{ params.id }}" value="{{ params.value }}"{% if params.checked %} checked{% endif %} type="checkbox">
         <label class="checkbox__label {{ params.label.classes }}" for="{{ params.id }}">
-            {{- params.label.text | safe -}}
+            {{ params.label.text | safe }}
             {% if params.label.description %}
                 <br>
                 <span class="checkbox__description u-fs-s">{{ params.label.description }}</span>
diff --git a/src/components/password/src/_macro.njk b/src/components/password/src/_macro.njk
index 7ccc9b7895..2e7609f22a 100644
--- a/src/components/password/src/_macro.njk
+++ b/src/components/password/src/_macro.njk
@@ -3,14 +3,14 @@
     {% from "components/checkboxes/src/_checkbox-macro.njk" import onsCheckbox %}
     {% from "components/input/src/_macro.njk" import onsInput %}
     <div class="field">
-        {{-
+        {{
             onsLabel({
                 "for": params.id,
                 "text": params.label.text,
                 "description": params.label.description,
                 "classes": params.label.classes
             })
-        -}}
+        }}
         {{
             onsCheckbox({
                 "id": "show-password-toggle",
@@ -22,12 +22,12 @@
                 }
             })
         }}
-        {{-
+        {{
             onsInput({
                 if: params.id,
                 "type": "password",
                 "classes": "u-mt-xs js-password"
             })
-        -}}
+        }}
     </div>
 {% endmacro %}
diff --git a/src/components/radios/src/_template.njk b/src/components/radios/src/_template.njk
index 19df677473..920d2f1861 100644
--- a/src/components/radios/src/_template.njk
+++ b/src/components/radios/src/_template.njk
@@ -11,7 +11,7 @@
             <div class="radio">
                 <input class="radio__input {{ radio.classes }}" name="{{ params.name }}" id="{{ radio.id }}" value="{{ radio.value }}"{% if radio.checked %} checked{% endif %} type="radio">
                 <label class="radio__label {{ radio.label.classes }}" for="{{ radio.id }}">
-                    {{- radio.label.text | safe -}}
+                    {{ radio.label.text | safe }}
                     {% if radio.label.description %}
                         <br>
                         <span class="radio__description u-fs-s">{{ radio.label.description }}</span>
diff --git a/src/components/select/src/_macro.njk b/src/components/select/src/_macro.njk
index 072b2c79b8..c66181facb 100644
--- a/src/components/select/src/_macro.njk
+++ b/src/components/select/src/_macro.njk
@@ -1,14 +1,14 @@
 {% macro onsSelect(params) %}
     {% if params.label %}
         {% from "components/label/src/_macro.njk" import onsLabel %}
-        {{-
+        {{
             onsLabel({
                 "for": params.id,
                 "text": params.label.text,
                 "description": params.label.description,
                 "classes": params.label.classes
             })
-        -}}
+        }}
     {% endif %}
     <select
         id="{{ params.id }}"
@@ -21,7 +21,7 @@
             {% if option.selected %} selected {% endif %}
             {% if option.disabled %} disabled {% endif %}
             {% for attribute, value in option.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>   
-            {{- option.text -}}
+            {{ option.text }}
         </option>   
         {% endfor %}
     </select>
diff --git a/src/components/textarea/src/_template.njk b/src/components/textarea/src/_template.njk
index 5ffd74f1ef..3d1c58c6ec 100644
--- a/src/components/textarea/src/_template.njk
+++ b/src/components/textarea/src/_template.njk
@@ -9,14 +9,14 @@
         {% set textareaExlusiveClass = " js-exclusive-group" %}
     {% else %}
         {% from "components/label/src/_macro.njk" import onsLabel %}
-        {{-
+        {{
             onsLabel({
                 "for": params.id,
                 "text": params.label.text,
                 "description": params.label.description,
                 "classes": params.label.classes
             })
-        -}}
+        }}
     {% endif %}
     <textarea
         id="{{ params.id }}"
diff --git a/src/index.njk b/src/index.njk
index 4554f8fc5c..83612174c8 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -2,64 +2,61 @@
 "title": ONS Design System - Homepage
 layout: home
 ---
+{% from "components/button/src/_macro.njk" import onsButton %}
+{% from "components/card/src/_macro.njk" import onsCard %}
 <div class="patternlib-hero">
-  <div class="patternlib-hero__content container">
-    <header>
-      <h1 class="patternlib-hero__title u-fs-xxl">Design and build digital services for the ONS</h1>
-    </header>
-    <p class="patternlib-hero__text">Everything you need to make accessible, consistent digital products.</p>
-    {% from "components/button/src/_macro.njk" import onsButton %}
-    {{- 
-        onsButton({
+    <div class="patternlib-hero__content container">
+        <header>
+            <h1 class="patternlib-hero__title u-fs-xxl">Design and build digital services for the ONS</h1>
+        </header>
+        <p class="patternlib-hero__text">Everything you need to make accessible, consistent digital products.</p>
+        {{
+            onsButton({
             "type": 'button',
             "text": 'Get started',
             "classes": 'u-mb-m',
             "href": '/get-started'
-        }) 
-    -}}
-  </div>
+            }) 
+        }}
+    </div>
 </div>
 <div class="container">
-  <div class="grid grid--flex grid--column@xs@s u-mt-xl u-mb-m">
-    <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s u-mb-s col-12@xs@s">
-      {% from "components/card/src/_macro.njk" import onsCard %}
-      {{-
-          onsCard({
-              "title": 'Styles',
-              "href": '/styles',
-              "text": 'Guides for applying layout, typography and colour.'
-          })
-      -}}
-    </div>
-    <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s u-mb-s col-12@xs@s">
-      {% from "components/card/src/_macro.njk" import onsCard %}
-      {{-
-          onsCard({
-              "title": 'Components',
-              "href": '/components',  
-              "text": 'Resuable and accessible code to build the components of a page. '
-          })
-      -}}
-    </div>
-    <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s u-mb-s col-12@xs@s">
-      {% from "components/card/src/_macro.njk" import onsCard %}
-      {{-
-          onsCard({
-              "title": 'Patterns',
-              "href": '/patterns',
-              "text": 'Patterns on common tasks and how components should work together.'
-          })
-      -}}
+    <div class="grid grid--flex grid--column@xs@s u-mt-xl u-mb-m">
+        <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s u-mb-s col-12@xs@s">
+            {{-
+                onsCard({
+                    "title": 'Styles',
+                    "href": '/styles',
+                    "text": 'Guides for applying layout, typography and colour.'
+                })
+            -}}
+        </div>
+        <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s u-mb-s col-12@xs@s">
+            {{-
+                onsCard({
+                    "title": 'Components',
+                    "href": '/components',
+                    "text": 'Resuable and accessible code to build the components of a page.'
+                })
+            -}}
+        </div>
+        <div class="grid__col grid__col--flex u-flex-grow u-flex-no-basis@s u-mb-s col-12@xs@s">
+            {{-
+                onsCard({
+                    "title": 'Patterns',
+                    "href": '/patterns',
+                    "text": 'Patterns on common tasks and how components should work together.'
+                })
+            -}}
+        </div>
     </div>
-  </div>
-  <div class="grid grid--gutterless">
-    <div class="grid__col col-8@m">
-      <h3 class="u-fs-l">Design community</h3>
-      <p>The ONS Design System is available for everyone and brings together the latest research, design and development from across the organisation to ensure our users have an accessible and consistent experience with our services.</p>
-      <p>If you would like to contribute to the design system you can:</p>
-      <p><a href="#">Propose a new pattern or component.</a></p>
-      <p><a href="#">View the current backlog of work.</a></p>
+    <div class="grid grid--gutterless">
+        <div class="grid__col col-8@m">
+            <h3 class="u-fs-l">Design community</h3>
+            <p>The ONS Design System is available for everyone and brings together the latest research, design and development from across the organisation to ensure our users have an accessible and consistent experience with our services.</p>
+            <p>If you would like to contribute to the design system you can:</p>
+            <p><a href="#">Propose a new pattern or component.</a></p>
+            <p><a href="#">View the current backlog of work.</a></p>
+        </div>
     </div>
-  </div>
-
 </div>
diff --git a/src/patterns/error-validation/examples/error-details/index.njk b/src/patterns/error-validation/examples/error-details/index.njk
index 1ed214e03d..12527fc45c 100644
--- a/src/patterns/error-validation/examples/error-details/index.njk
+++ b/src/patterns/error-validation/examples/error-details/index.njk
@@ -5,7 +5,7 @@
     })
 %}
 {% from "components/list/src/_macro.njk" import onsList %}
-{{-
+{{
     onsList({
         id: 'container-test-number',
         classes: 'list--bare list--errors u-mb-s',
@@ -15,9 +15,9 @@
             }
         ]
     })
--}}
+}}
 {% from "components/input/src/_macro.njk" import onsInput %}
-{{-
+{{
     onsInput({
         "id": "number",
         "type": "number",
@@ -30,7 +30,7 @@
             "text": "Number of employees paid monthly"
         }
     })
--}}
+}}
 {% endcall %}
 {% call 
     onsPanel({
@@ -40,7 +40,7 @@
     })
 %}
 {% from "components/list/src/_macro.njk" import onsList %}
-{{-
+{{
     onsList({
         id: 'container-test-percent',
         classes: 'list--bare list--errors u-mb-s',
@@ -50,9 +50,9 @@
             }
         ]
     })
--}}
+}}
 {% from "components/input/src/_macro.njk" import onsInput %}
-{{-
+{{
     onsInput({
         "id": "suffixed",
         "type": "number",
@@ -69,5 +69,5 @@
             "text": "%"
         }
     })
--}}
+}}
 {% endcall %}
diff --git a/src/patterns/error-validation/examples/errors-proto/errors/index.njk b/src/patterns/error-validation/examples/errors-proto/errors/index.njk
index 930a12ac86..29023ee14b 100644
--- a/src/patterns/error-validation/examples/errors-proto/errors/index.njk
+++ b/src/patterns/error-validation/examples/errors-proto/errors/index.njk
@@ -132,13 +132,13 @@
                     </div>
                 </div>
                 {% from "components/button/src/_macro.njk" import onsButton %}
-                {{-
+                {{
                     onsButton({
                         "type": "button",
                         "text": "Save and continue",
                         "classes": "u-mb-m u-mt-l"
                     })
-                -}}
+                }}
             </div>
         </div>
     </div>
diff --git a/src/patterns/error-validation/examples/errors-proto/index.njk b/src/patterns/error-validation/examples/errors-proto/index.njk
index ad8e9f1383..1679681c9c 100644
--- a/src/patterns/error-validation/examples/errors-proto/index.njk
+++ b/src/patterns/error-validation/examples/errors-proto/index.njk
@@ -5,40 +5,30 @@
     <div class="page__container container">
         <div class="grid">
             <div class="grid__col col-8@m">
-                <div class="question">
-                    <h1 class="question__title u-fs-l" data-qa="question-title">How many employees do you pay on a monthly basis?</h1>
-                    {% from "components/field/src/_macro.njk" import onsField %}
-                    {% call
-                        onsField({
-                            "legend": "How many employees do you pay on a monthly basis?",
-                            "legendClasses": "u-vh"
-                        })
-                    %}
-                    <div class="question__answers">
-                        <div class="question__answer">
-                            <div class="answer answer--number" id="container-test-number">
-                                <div class="answer__fields">
-                                {% from "components/input/src/_macro.njk" import onsInput %}
-                                {{
-                                    onsInput({
-                                        "id": "number",
-                                        "type": "number",
-                                        "classes": "input--w-5",
-                                        "attributes": {
-                                            "min": 0,
-                                            "required": true
-                                        },
-                                        "label": {
-                                            "text": "Number of employees paid monthly"
-                                        }
-                                    })
-                                }}
+                <div class="group">
+                    <div class="question">
+                        <h1 class="question__title u-fs-l" data-qa="question-title">How many employees do you pay on a monthly basis?</h1>
+                        <fieldset class="question__fieldset js-question-fieldset">
+                            <legend class="u-vh">How many employees do you pay on a monthly basis?</legend>
+                            <div class="question__answers">
+                                <div class="question__answer">
+                                    {% from "components/input/src/_macro.njk" import onsInput %}
+                                    {{
+                                        onsInput({
+                                            "id": "number",
+                                            "type": "number",
+                                            "classes": "input--w-5",
+                                            "attributes": {
+                                                "min": 0,
+                                                "required": true
+                                            },
+                                            "label": {
+                                                "text": "Number of employees paid monthly"
+                                            }
+                                        })
+                                    }}
                                 </div>
-                            </div>
-                        </div>
-                        <div class="question__answer">
-                            <div class="answer answer--number" id="container-test-percent">
-                                <div class="answer__fields">
+                                <div class="question__answer">
                                     {% from "components/input/src/_macro.njk" import onsInput %}
                                     {{
                                         onsInput({
@@ -60,17 +50,17 @@
                                     }}
                                 </div>
                             </div>
-                        </div>
+                        </fieldset>
                     </div>
                     {% endcall %}
                 </div>
                 {% from "components/button/src/_macro.njk" import onsButton %}
                 {{
                     onsButton({
-                        "type": "button",
-                        "text": "Save and continue",
-                        "classes": "u-mb-m u-mt-l",
-                        "href": "errors"
+                        "type": 'button',
+                        "text": 'Save and continue',
+                        "classes": 'u-mb-m u-mt-l',
+                        "href": 'errors'
                     })
                 }}
             </div>
diff --git a/src/patterns/error-validation/index.njk b/src/patterns/error-validation/index.njk
index 0c49c4f95c..7c96486542 100644
--- a/src/patterns/error-validation/index.njk
+++ b/src/patterns/error-validation/index.njk
@@ -49,13 +49,13 @@ The prototype provides an example of form validation for missing and invalid inp
 </div>
 
 {% from "components/button/src/_macro.njk" import onsButton %}
-{{- 
+{{ 
     onsButton({
         "type": 'button',
         "text": 'Launch prototype',
         "classes": 'u-mb-m',
         "href": '/patterns/error-validation/examples/errors-proto/'
     }) 
--}}
+}}
 
 ##Research on this pattern
diff --git a/src/views/layouts/_home.njk b/src/views/layouts/_home.njk
index 3cd2400b57..e4c279550a 100644
--- a/src/views/layouts/_home.njk
+++ b/src/views/layouts/_home.njk
@@ -21,7 +21,6 @@
             }
         })
     }}
-    
     <div class="patternlib-page__body">
         <div class="patternlib-page__primary">
             <main class="patternlib-page__main">
@@ -40,5 +39,4 @@
             }}
         </div>
     </div>
-   
 {% endblock %}