Fix homepage rendering (#4)

ONSdigital · Dec 20, 2018 · a132880 · a132880
1 parent 411b977
commit a132880
Show file tree

Hide file tree

Showing 17 changed files with 121 additions and 136 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>