From b0fad430b71627150a96cb768780dbf3794c945f Mon Sep 17 00:00:00 2001
From: Ben Meyrick <bameyrick@gmail.com>
Date: Wed, 6 Mar 2019 09:33:40 +0000
Subject: [PATCH] 205 combine macros and templates into one file (#269)

* Combine templates and macros into one file so Jinja wont complain about caller, and create test templates for unit tests

* Update example macro and subnavigation macro

* Ensure npm bundler doesnt deploy test templates
---
 lib/generate-npm-package.js                   |   4 +-
 lib/helpers/generate-example-params.js        |   8 +-
 src/components/accordion/_macro.njk           |  35 ++++-
 src/components/accordion/_template.njk        |  34 -----
 src/components/accordion/_test-template.njk   |   3 +
 src/components/breadcrumb/_macro.njk          |  14 +-
 src/components/breadcrumb/_template.njk       |  13 --
 src/components/button/_macro.njk              |  16 ++-
 src/components/button/_template.njk           |  16 ---
 src/components/card/_macro.njk                |  13 +-
 src/components/card/_template.njk             |  12 --
 src/components/checkboxes/_macro.njk          |  55 +++++++-
 src/components/checkboxes/_template.njk       |  54 --------
 src/components/checkboxes/_test-template.njk  |   3 +
 src/components/date-input/_macro.njk          |  79 ++++++++++-
 src/components/date-input/_template.njk       |  78 -----------
 src/components/date-input/_test-template.njk  |   3 +
 src/components/details/_macro.njk             |  42 +++++-
 src/components/details/_template.njk          |  42 ------
 src/components/details/_test-template.njk     |   3 +
 src/components/feedback/_macro.njk            |  63 ++++++++-
 src/components/feedback/_template.njk         |  62 ---------
 src/components/feedback/_test-template.njk    |   3 +
 src/components/field/_macro.njk               |  54 +++++++-
 src/components/field/_template.njk            |  53 -------
 src/components/footer/_macro.njk              | 129 +++++++++++++++++-
 src/components/footer/_template.njk           | 128 -----------------
 src/components/header/_macro.njk              |  94 ++++++++++++-
 src/components/header/_template.njk           |  93 -------------
 src/components/header/_test-template.njk      |   3 +
 src/components/input/_macro.njk               |  68 ++++++++-
 src/components/input/_template.njk            |  67 ---------
 src/components/input/_test-template.njk       |   3 +
 src/components/label/_macro.njk               |   8 +-
 src/components/label/_template.njk            |   7 -
 src/components/language-selector/_macro.njk   |  31 ++++-
 .../language-selector/_template.njk           |  30 ----
 .../language-selector/_test-template.njk      |   3 +
 src/components/lists/_macro.njk               |  20 ++-
 src/components/lists/_template.njk            |  19 ---
 src/components/metadata/_macro.njk            |  11 +-
 src/components/metadata/_template.njk         |  10 --
 src/components/pagination/_macro.njk          |  82 ++++++++++-
 src/components/pagination/_template.njk       |  81 -----------
 src/components/panel/_macro.njk               |  27 +++-
 src/components/panel/_template.njk            |  26 ----
 src/components/password/_macro.njk            |  38 +++++-
 src/components/password/_template.njk         |  37 -----
 src/components/password/_test-template.njk    |   3 +
 src/components/phase-banner/_macro.njk        |  13 +-
 src/components/phase-banner/_template.njk     |  12 --
 src/components/radios/_macro.njk              |  50 ++++++-
 src/components/radios/_template.njk           |  49 -------
 src/components/section-navigation/_macro.njk  |  10 +-
 .../section-navigation/_template.njk          |   9 --
 src/components/select/_macro.njk              |  41 +++++-
 src/components/select/_template.njk           |  40 ------
 src/components/select/_test-template.njk      |   2 +
 src/components/status/_macro.njk              |  12 +-
 src/components/status/_template.njk           |  13 --
 src/components/summary/_macro.njk             |  31 ++++-
 src/components/summary/_template.njk          |  30 ----
 src/components/table/_macro.njk               |  39 +++++-
 src/components/table/_template.njk            |  38 ------
 src/components/table/_test-template.njk       |   2 +
 src/components/tabs/_macro.njk                |  14 +-
 src/components/tabs/_template.njk             |  13 --
 src/components/tabs/_test-template.njk        |   3 +
 src/components/textarea/_macro.njk            |  43 +++++-
 src/components/textarea/_template.njk         |  42 ------
 src/components/textarea/_test-template.njk    |   3 +
 src/components/upload/_macro.njk              |  27 +++-
 src/components/upload/_template.njk           |  26 ----
 .../collapsible/collapsible-accordion.spec.js |   2 +-
 .../spec/collapsible/collapsible.spec.js      |   2 +-
 src/tests/spec/feedback/feedback.spec.js      |   2 +-
 .../header-navigation.spec.js                 |   2 +-
 .../spec/language-selector/language.spec.js   |   2 +-
 .../mutually-exclusive-checkboxes.spec.js     |   2 +-
 .../mutually-exclusive-date.spec.js           |   2 +-
 .../mutually-exclusive-email.spec.js          |   2 +-
 .../mutually-exclusive-number.spec.js         |   2 +-
 .../mutually-exclusive-select.spec.js         |   2 +-
 .../mutually-exclusive-textarea.spec.js       |   2 +-
 src/tests/spec/password/password.spec.js      |   2 +-
 src/tests/spec/table/table-scrollable.spec.js |   2 +-
 src/tests/spec/table/table-sortable.spec.js   |   2 +-
 src/tests/spec/tabs/tabs.spec.js              |   2 +-
 .../spec/textarea/character-limit.spec.js     |   2 +-
 src/views/partials/example/_macro.njk         |  65 ++++++++-
 src/views/partials/example/_template.njk      |  64 ---------
 src/views/partials/sub-navigation/_macro.njk  |  19 ++-
 .../partials/sub-navigation/_template.njk     |  18 ---
 93 files changed, 1272 insertions(+), 1268 deletions(-)
 delete mode 100644 src/components/accordion/_template.njk
 create mode 100644 src/components/accordion/_test-template.njk
 delete mode 100644 src/components/breadcrumb/_template.njk
 delete mode 100644 src/components/button/_template.njk
 delete mode 100644 src/components/card/_template.njk
 delete mode 100644 src/components/checkboxes/_template.njk
 create mode 100644 src/components/checkboxes/_test-template.njk
 delete mode 100644 src/components/date-input/_template.njk
 create mode 100644 src/components/date-input/_test-template.njk
 delete mode 100644 src/components/details/_template.njk
 create mode 100644 src/components/details/_test-template.njk
 delete mode 100644 src/components/feedback/_template.njk
 create mode 100644 src/components/feedback/_test-template.njk
 delete mode 100644 src/components/field/_template.njk
 delete mode 100644 src/components/footer/_template.njk
 delete mode 100644 src/components/header/_template.njk
 create mode 100644 src/components/header/_test-template.njk
 delete mode 100644 src/components/input/_template.njk
 create mode 100644 src/components/input/_test-template.njk
 delete mode 100644 src/components/label/_template.njk
 delete mode 100644 src/components/language-selector/_template.njk
 create mode 100644 src/components/language-selector/_test-template.njk
 delete mode 100644 src/components/lists/_template.njk
 delete mode 100644 src/components/metadata/_template.njk
 delete mode 100644 src/components/pagination/_template.njk
 delete mode 100644 src/components/panel/_template.njk
 delete mode 100644 src/components/password/_template.njk
 create mode 100644 src/components/password/_test-template.njk
 delete mode 100644 src/components/phase-banner/_template.njk
 delete mode 100644 src/components/radios/_template.njk
 delete mode 100644 src/components/section-navigation/_template.njk
 delete mode 100644 src/components/select/_template.njk
 create mode 100644 src/components/select/_test-template.njk
 delete mode 100644 src/components/status/_template.njk
 delete mode 100644 src/components/summary/_template.njk
 delete mode 100644 src/components/table/_template.njk
 create mode 100644 src/components/table/_test-template.njk
 delete mode 100644 src/components/tabs/_template.njk
 create mode 100644 src/components/tabs/_test-template.njk
 delete mode 100644 src/components/textarea/_template.njk
 create mode 100644 src/components/textarea/_test-template.njk
 delete mode 100644 src/components/upload/_template.njk
 delete mode 100644 src/views/partials/example/_template.njk
 delete mode 100644 src/views/partials/sub-navigation/_template.njk

diff --git a/lib/generate-npm-package.js b/lib/generate-npm-package.js
index 95b1eaec48..e8c53d7ffb 100644
--- a/lib/generate-npm-package.js
+++ b/lib/generate-npm-package.js
@@ -46,7 +46,9 @@ async function copyComponent(componentName) {
     const componentPath = `${componentsPath}/${componentName}`;
     const newComponentPath = `${newComponentsPath}/${componentName}`;
 
-    const items = await fs.readdirSync(componentPath).filter(path => path.includes('.njk') && path.includes('_'));
+    const items = await fs
+      .readdirSync(componentPath)
+      .filter(path => path.includes('.njk') && path.includes('_') && !path.includes('_test-'));
 
     if (items.length) {
       await createFolder(newComponentPath);
diff --git a/lib/helpers/generate-example-params.js b/lib/helpers/generate-example-params.js
index e4e1299fee..ac38b3419c 100644
--- a/lib/helpers/generate-example-params.js
+++ b/lib/helpers/generate-example-params.js
@@ -20,7 +20,7 @@ export function generateExampleParams(params, addDependency) {
 
     const srcPath = params.componentFolderPath ? `${sourcePath}/${params.componentFolderPath}/` : `${path.split('/examples/')[0]}/`;
     const optionsPath = `${srcPath}_macro-options.md`;
-    const templatePath = `${srcPath}_template.njk`;
+    const macroPath = `${srcPath}_macro.njk`;
 
     let options;
     let scss;
@@ -48,9 +48,9 @@ export function generateExampleParams(params, addDependency) {
       scss = sassRaw.join('\n');
     }
 
-    if (fs.existsSync(templatePath)) {
-      addDependency(templatePath);
-      template = `{% raw %}${fs.readFileSync(templatePath, 'utf8')}{% endraw %}`;
+    if (fs.existsSync(macroPath)) {
+      addDependency(macroPath);
+      template = `{% raw %}${fs.readFileSync(macroPath, 'utf8')}{% endraw %}`;
     }
 
     const loader = new NunjucksLoader(sourcePath);
diff --git a/src/components/accordion/_macro.njk b/src/components/accordion/_macro.njk
index 2e3f677aab..5c51e56922 100644
--- a/src/components/accordion/_macro.njk
+++ b/src/components/accordion/_macro.njk
@@ -1,3 +1,36 @@
 {% macro onsAccordion(params) %}
-    {% include "components/accordion/_template.njk" %}
+    {% from "components/details/_macro.njk" import onsDetails %}
+
+    <div id="{{params.id}}" class="accordion{{ ' ' + params.classes if params.classes }}">
+        {% if params.openAll and params.closeAll %}
+            {% from "components/button/_macro.njk" import onsButton %}
+            {{
+                onsButton({
+                    "text": params.openAll,
+                    "classes": "btn--secondary btn--small js-collapsible-all u-wa--@xs u-mb-s u-d-no",
+                    "attributes": {
+                        "data-ga": "click",
+                        "data-ga-category": "accordion",
+                        "data-ga-action": "Toggle all panels",
+                        "data-ga-label": params.openAll,
+                        "data-close-all": params.closeAll,
+                        "data-group": params.id
+                    }
+                })
+            }}
+        {% endif %}
+        {% for item in params.items %}
+            {{
+                onsDetails({
+                    "isAccordion": true,
+                    "id": params.id + "-" + loop.index,
+                    "buttonOpen": params.buttonOpen,
+                    "closeButton": params.closeButton,
+                    "title": item.title,
+                    "content": item.content,
+                    "group": params.id
+                })
+            }}
+        {% endfor %}
+    </div>
 {% endmacro %}
diff --git a/src/components/accordion/_template.njk b/src/components/accordion/_template.njk
deleted file mode 100644
index 62b466822b..0000000000
--- a/src/components/accordion/_template.njk
+++ /dev/null
@@ -1,34 +0,0 @@
-{% from "components/details/_macro.njk" import onsDetails %}
-
-<div id="{{params.id}}" class="accordion{{ ' ' + params.classes if params.classes }}">
-    {% if params.openAll and params.closeAll %}
-        {% from "components/button/_macro.njk" import onsButton %}
-        {{
-            onsButton({
-                "text": params.openAll,
-                "classes": "btn--secondary btn--small js-collapsible-all u-wa--@xs u-mb-s u-d-no",
-                "attributes": {
-                    "data-ga": "click",
-                    "data-ga-category": "accordion",
-                    "data-ga-action": "Toggle all panels",
-                    "data-ga-label": params.openAll,
-                    "data-close-all": params.closeAll,
-                    "data-group": params.id
-                }
-            })
-        }}
-    {% endif %}
-    {% for item in params.items %}
-        {{
-            onsDetails({
-                "isAccordion": true,
-                "id": params.id + "-" + loop.index,
-                "buttonOpen": params.buttonOpen,
-                "closeButton": params.closeButton,
-                "title": item.title,
-                "content": item.content,
-                "group": params.id
-            })
-        }}
-    {% endfor %}
-</div>
diff --git a/src/components/accordion/_test-template.njk b/src/components/accordion/_test-template.njk
new file mode 100644
index 0000000000..d4fafcedd5
--- /dev/null
+++ b/src/components/accordion/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/accordion/_macro.njk" import onsAccordion %}
+
+{{ onsAccordion(params) }}
diff --git a/src/components/breadcrumb/_macro.njk b/src/components/breadcrumb/_macro.njk
index 96b7b1340d..172f71dc2b 100644
--- a/src/components/breadcrumb/_macro.njk
+++ b/src/components/breadcrumb/_macro.njk
@@ -1,3 +1,15 @@
 {% macro onsBreadcrumb(params) %}
-  {% include "components/breadcrumb/_template.njk" %}
+  <nav class="breadcrumb" aria-label="{{params.ariaLabel}}">
+    <ol class="breadcrumb__items">
+        {% for item in params.items %}
+            <li class="breadcrumb__item u-fs-s{{ ' icon--breadcrumb' if loop.index < loop.length }}{{ '  breadcrumb__item--current' if item.current }}">
+                {% if item.current %} 
+                    {{ item.text }}
+                {% else %}
+                    <a href="{{ item.url }}" class="breadcrumb__link">{{ item.text }}</a>
+                {% endif %}
+            </li>
+        {% endfor %}
+    </ol>
+  </nav>
 {% endmacro %}
diff --git a/src/components/breadcrumb/_template.njk b/src/components/breadcrumb/_template.njk
deleted file mode 100644
index a03a3a7245..0000000000
--- a/src/components/breadcrumb/_template.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-<nav class="breadcrumb" aria-label="{{params.ariaLabel}}">
-    <ol class="breadcrumb__items">
-        {% for item in params.items %}
-            <li class="breadcrumb__item u-fs-s{{ ' icon--breadcrumb' if loop.index < loop.length }}{{ '  breadcrumb__item--current' if item.current }}">
-                {% if item.current %} 
-                    {{ item.text }}
-                {% else %}
-                    <a href="{{ item.url }}" class="breadcrumb__link">{{ item.text }}</a>
-                {% endif %}
-            </li>
-        {% endfor %}
-    </ol>
-</nav>
diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
index 21ced08afb..95e7618d25 100644
--- a/src/components/button/_macro.njk
+++ b/src/components/button/_macro.njk
@@ -1,3 +1,17 @@
 {% macro onsButton(params) %}
-  {% include "components/button/_template.njk" %}
+  {#- Define common attributes we can use for the toggle button type #}
+  {% set buttonToggleAttributes %} aria-haspopup="true" aria-expanded="false" aria-controls="{{ params.ariaControls }}" aria-label="{{ params.ariaLabel }}"{% endset %}
+
+  <button
+      type="{{ params.type if params.type else 'submit' }}"
+      class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}"
+      {% if params.id %}id="{{ params.id }}"{% endif %}
+      {% if params.value %}value="{{ params.value }}"{% endif %}
+      {% if params.name %}name="{{ params.name }}"{% endif %}
+      {% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
+      {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+      {% if params.isToggle %}{{ buttonToggleAttributes | safe }}{% endif %}
+      >
+      {{- params.html | safe if params.html else params.text -}}
+  </button>
 {% endmacro %}
diff --git a/src/components/button/_template.njk b/src/components/button/_template.njk
deleted file mode 100644
index 5bd993ecf6..0000000000
--- a/src/components/button/_template.njk
+++ /dev/null
@@ -1,16 +0,0 @@
-{#- Define common attributes we can use for the toggle button type #}
-{% set buttonToggleAttributes %} aria-haspopup="true" aria-expanded="false" aria-controls="{{ params.ariaControls }}" aria-label="{{ params.ariaLabel }}"{% endset %}
-
-<button
-    type="{{ params.type if params.type else 'submit' }}"
-    class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}"
-    {% if params.id %}id="{{ params.id }}"{% endif %}
-    {% if params.value %}value="{{ params.value }}"{% endif %}
-    {% if params.name %}name="{{ params.name }}"{% endif %}
-    {% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
-    {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-    {% if params.isToggle %}{{ buttonToggleAttributes | safe }}{% endif %}
-    >
-    {{- params.html | safe if params.html else params.text -}}
-</button>
-
diff --git a/src/components/card/_macro.njk b/src/components/card/_macro.njk
index c53f19a5e5..3ac795f228 100644
--- a/src/components/card/_macro.njk
+++ b/src/components/card/_macro.njk
@@ -1,3 +1,14 @@
 {%- macro onsCard(params) -%}
-{% include "components/card/_template.njk" %}
+    <div class="card">
+        <h3 class="u-fs-l">
+            {% if params.url -%}
+                <a href="{{ params.url }}">
+                    {{ params.title }}
+                </a>
+            {%- else %}
+                {{ params.title }}
+            {% endif %}
+        </h3>
+        <p>{{ params.text }}</p>
+    </div>
 {%- endmacro -%}
diff --git a/src/components/card/_template.njk b/src/components/card/_template.njk
deleted file mode 100644
index 263c39c1c3..0000000000
--- a/src/components/card/_template.njk
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="card">
-    <h3 class="u-fs-l">
-        {% if params.url -%}
-            <a href="{{ params.url }}">
-                {{ params.title }}
-            </a>
-        {%- else %}
-            {{ params.title }}
-        {% endif %}
-    </h3>
-    <p>{{ params.text }}</p>
-</div>
diff --git a/src/components/checkboxes/_macro.njk b/src/components/checkboxes/_macro.njk
index b0e45ccf3f..287fad99e9 100644
--- a/src/components/checkboxes/_macro.njk
+++ b/src/components/checkboxes/_macro.njk
@@ -1,3 +1,56 @@
 {% macro onsCheckboxes(params) %}
-    {% include "components/checkboxes/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+    {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+
+    {% call onsField({
+        "id": params.id,
+        "legend": params.legend,
+        "description": params.description,
+        "classes": params.classes,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "legendClasses": params.legendClasses,
+        "questionMode": params.questionMode
+    }) %}
+        <div class="field__label">{{ params.checkboxesLabel }}</div>
+        <div class="field__items">
+            {% for checkbox in params.checkboxes %}
+                {% set labelHTML = checkbox.label.text %}
+                {% if params.mutuallyExclusive %}  
+                    {% set exclusiveClass = ' js-exclusive-group' %}
+                {% endif %}
+                <div class="field__item">
+                    {{
+                        onsCheckbox({
+                            "id": checkbox.id,
+                            "name": checkbox.name,
+                            "value": checkbox.value,
+                            "checked": checkbox.checked,
+                            "classes": checkbox.classes,
+                            "inputClasses": exclusiveClass,
+                            "label": {
+                                "for": checkbox.id,
+                                "text": labelHTML,
+                                "description": checkbox.label.description,
+                                "classes": checkbox.label.classes | default('') 
+                            },
+                            "attributes": checkbox.attributes,
+                            "other": {
+                                "id": checkbox.other.id,
+                                "name": checkbox.other.name,
+                                "type": checkbox.other.type,
+                                "classes": checkbox.other.classes | default('') + exclusiveClass | default(''),
+                                "attributes": checkbox.other.attributes,
+                                "label": {
+                                    "text": checkbox.other.label.text
+                                }
+                            }
+                        })
+                    }}
+                </div>
+                {% if not loop.last %}
+                    <br>
+                {% endif %}
+            {% endfor %}
+        </div>
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/checkboxes/_template.njk b/src/components/checkboxes/_template.njk
deleted file mode 100644
index 49ba6c4d83..0000000000
--- a/src/components/checkboxes/_template.njk
+++ /dev/null
@@ -1,54 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-{% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
-
-{% call onsField({
-    "id": params.id,
-    "legend": params.legend,
-    "description": params.description,
-    "classes": params.classes,
-    "mutuallyExclusive": params.mutuallyExclusive,
-    "legendClasses": params.legendClasses,
-    "questionMode": params.questionMode
-}) %}
-    <div class="field__label">{{ params.checkboxesLabel }}</div>
-    <div class="field__items">
-        {% for checkbox in params.checkboxes %}
-            {% set labelHTML = checkbox.label.text %}
-            {% if params.mutuallyExclusive %}  
-                {% set exclusiveClass = ' js-exclusive-group' %}
-            {% endif %}
-            <div class="field__item">
-                {{
-                    onsCheckbox({
-                        "id": checkbox.id,
-                        "name": checkbox.name,
-                        "value": checkbox.value,
-                        "checked": checkbox.checked,
-                        "classes": checkbox.classes,
-                        "inputClasses": exclusiveClass,
-                        "label": {
-                            "for": checkbox.id,
-                            "text": labelHTML,
-                            "description": checkbox.label.description,
-                            "classes": checkbox.label.classes | default('') 
-                        },
-                        "attributes": checkbox.attributes,
-                        "other": {
-                            "id": checkbox.other.id,
-                            "name": checkbox.other.name,
-                            "type": checkbox.other.type,
-                            "classes": checkbox.other.classes | default('') + exclusiveClass | default(''),
-                            "attributes": checkbox.other.attributes,
-                            "label": {
-                                "text": checkbox.other.label.text
-                            }
-                        }
-                    })
-                }}
-            </div>
-            {% if not loop.last %}
-                <br>
-            {% endif %}
-        {% endfor %}
-    </div>
-{% endcall %}
diff --git a/src/components/checkboxes/_test-template.njk b/src/components/checkboxes/_test-template.njk
new file mode 100644
index 0000000000..a36825d3eb
--- /dev/null
+++ b/src/components/checkboxes/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{{ onsCheckboxes(params) }}
diff --git a/src/components/date-input/_macro.njk b/src/components/date-input/_macro.njk
index b0851e5859..f20f10e1fb 100644
--- a/src/components/date-input/_macro.njk
+++ b/src/components/date-input/_macro.njk
@@ -1,3 +1,80 @@
 {% macro onsDateInput(params) %}
-    {% include "components/date-input/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+    {% from "components/input/_macro.njk" import onsInput %}
+    {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+
+    {% if params.mutuallyExclusive %}
+        {% set exclusiveClass = " js-exclusive-group" %}
+    {% endif %}
+
+    {% call onsField({
+        "id": params.id,
+        "legend": params.legend,
+        "description": params.description,
+        "classes": "field--date" + (" " + params.classes if params.classes),
+        "descriptionClasses": descriptionClasses | default(""),
+        "legendClasses": params.legendClasses,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "questionMode": params.questionMode
+    }) %}
+        <div class="field__group">
+            {% if params.day %}
+            <div class="field__item">
+                {{
+                    onsInput({
+                        "id": params.id + "-day",
+                        "type": "number",
+                        "name": params.day.name,
+                        "classes": "input--w-2" + exclusiveClass | default(""),
+                        "min": 1,
+                        "max": 31,
+                        "attributes": params.day.attributes,
+                        "label": {
+                            "text": params.day.label
+                        },
+                        "value": params.day.value
+                    })
+                }}
+            </div>
+            {% endif %}
+            {% if params.month %}
+            <div class="field__item">
+                {{
+                    onsInput({
+                        "id": params.id + "-month",
+                        "type": "number",
+                        "name": params.month.name,
+                        "classes": "input--w-2" + exclusiveClass | default(""),
+                        "min": 1,
+                        "max": 12,
+                        "attributes": params.month.attributes,
+                        "label": {
+                            "text": params.month.label
+                        },
+                        "value": params.month.value
+                    })
+                }}
+            </div>
+            {% endif %}
+            {% if params.year %}
+            <div class="field__item">
+                {{
+                    onsInput({
+                        "id": params.id + "-year",
+                        "type": "number",
+                        "name": params.year.name,
+                        "classes": "input--w-4" + exclusiveClass | default(""), 
+                        "min": 1000,
+                        "max": 3000,
+                        "attributes": params.year.attributes,
+                        "label": {
+                            "text": params.year.label
+                        },
+                        "value": params.year.value
+                    })
+                }}
+            </div>
+            {% endif %}
+        </div>
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/date-input/_template.njk b/src/components/date-input/_template.njk
deleted file mode 100644
index f265199c5c..0000000000
--- a/src/components/date-input/_template.njk
+++ /dev/null
@@ -1,78 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-{% from "components/input/_macro.njk" import onsInput %}
-{% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
-
-{% if params.mutuallyExclusive %}
-    {% set exclusiveClass = " js-exclusive-group" %}
-{% endif %}
-
-{% call onsField({
-    "id": params.id,
-    "legend": params.legend,
-    "description": params.description,
-    "classes": "field--date" + (" " + params.classes if params.classes),
-    "descriptionClasses": descriptionClasses | default(""),
-    "legendClasses": params.legendClasses,
-    "mutuallyExclusive": params.mutuallyExclusive,
-    "questionMode": params.questionMode
-}) %}
-    <div class="field__group">
-        {% if params.day %}
-        <div class="field__item">
-            {{
-                onsInput({
-                    "id": params.id + "-day",
-                    "type": "number",
-                    "name": params.day.name,
-                    "classes": "input--w-2" + exclusiveClass | default(""),
-                    "min": 1,
-                    "max": 31,
-                    "attributes": params.day.attributes,
-                    "label": {
-                        "text": params.day.label
-                    },
-                    "value": params.day.value
-                })
-            }}
-        </div>
-        {% endif %}
-        {% if params.month %}
-        <div class="field__item">
-            {{
-                onsInput({
-                    "id": params.id + "-month",
-                    "type": "number",
-                    "name": params.month.name,
-                    "classes": "input--w-2" + exclusiveClass | default(""),
-                    "min": 1,
-                    "max": 12,
-                    "attributes": params.month.attributes,
-                    "label": {
-                        "text": params.month.label
-                    },
-                    "value": params.month.value
-                })
-            }}
-        </div>
-        {% endif %}
-        {% if params.year %}
-        <div class="field__item">
-            {{
-                onsInput({
-                    "id": params.id + "-year",
-                    "type": "number",
-                    "name": params.year.name,
-                    "classes": "input--w-4" + exclusiveClass | default(""), 
-                    "min": 1000,
-                    "max": 3000,
-                    "attributes": params.year.attributes,
-                    "label": {
-                        "text": params.year.label
-                    },
-                    "value": params.year.value
-                })
-            }}
-        </div>
-        {% endif %}
-    </div>
-{% endcall %}
diff --git a/src/components/date-input/_test-template.njk b/src/components/date-input/_test-template.njk
new file mode 100644
index 0000000000..5f37fd7b5c
--- /dev/null
+++ b/src/components/date-input/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+
+{{ onsDateInput(params) }}
diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk
index 8281d76d4e..e4b513887e 100644
--- a/src/components/details/_macro.njk
+++ b/src/components/details/_macro.njk
@@ -1,3 +1,43 @@
 {% macro onsDetails(params) %}
-    {% include "components/details/_template.njk" %}
+    {% from "components/button/_macro.njk" import onsButton %}
+
+    <details id="{{ params.id }}" class="details js-collapsible{% if params.isAccordion %} details--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" open{%if params.buttonOpen %} data-btn-close="{{ params.closeButton }}"{% endif %}{% if params.group %} data-group="{{ params.group }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+        <summary class="details__summary js-collapsible-summary" data-ga="click" data-ga-category="{% if params.isAccordion %}accordion{% else %}definition{% endif %}" data-ga-action="Open panel" data-ga-label="{{ params.title }}">
+            {# Required to use display flex on Safari as it's not currently supported: https://bugs.webkit.org/show_bug.cgi?id=167111 #}
+            <div class="details__heading">
+                <h2 class="details__title u-fs-r--b">{{ params.title }}</h2>
+                {% if params.closeButton and params.buttonOpen and params.isAccordion %}
+                    {{
+                        onsButton({
+                            "text": params.buttonOpen,
+                            "classes": "details__btn btn--secondary btn--small js-collapsible-button u-d-no u-d-no@xs@s",
+                            "attributes": {
+                                "data-ga": "click",
+                                "data-ga-category": "definition",
+                                "data-ga-action": "Close panel",
+                                "data-ga-label": params.title
+                            }
+                        })
+                    }}
+                {% endif %}
+            </div>
+        </summary>
+        <div id="{{ params.id }}-content" class="details__content js-collapsible-content">
+            {{ params.content | safe }}{{ caller() if caller }}
+            {% if params.closeButton and params.isAccordion != true %}
+                {{
+                    onsButton({
+                        "text": params.buttonOpen or params.closeButton,
+                        "classes": "btn--small js-collapsible-button u-d-no " + (params.closeButtonClasses | default("btn--secondary")),
+                        "attributes": {
+                            "data-ga": "click",
+                            "data-ga-category": "definition",
+                            "data-ga-action": "Close panel",
+                            "data-ga-label": params.title
+                        }
+                    })
+                }}
+            {% endif %}
+        </div>
+    </details>
 {% endmacro %}
diff --git a/src/components/details/_template.njk b/src/components/details/_template.njk
deleted file mode 100644
index f446425c39..0000000000
--- a/src/components/details/_template.njk
+++ /dev/null
@@ -1,42 +0,0 @@
-
-{% from "components/button/_macro.njk" import onsButton %}
-
-<details id="{{ params.id }}" class="details js-collapsible{% if params.isAccordion %} details--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" open{%if params.buttonOpen %} data-btn-close="{{ params.closeButton }}"{% endif %}{% if params.group %} data-group="{{ params.group }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    <summary class="details__summary js-collapsible-summary" data-ga="click" data-ga-category="{% if params.isAccordion %}accordion{% else %}definition{% endif %}" data-ga-action="Open panel" data-ga-label="{{ params.title }}">
-        {# Required to use display flex on Safari as it's not currently supported: https://bugs.webkit.org/show_bug.cgi?id=167111 #}
-        <div class="details__heading">
-            <h2 class="details__title u-fs-r--b">{{ params.title }}</h2>
-            {% if params.closeButton and params.buttonOpen and params.isAccordion %}
-                {{
-                    onsButton({
-                        "text": params.buttonOpen,
-                        "classes": "details__btn btn--secondary btn--small js-collapsible-button u-d-no u-d-no@xs@s",
-                        "attributes": {
-                            "data-ga": "click",
-                            "data-ga-category": "definition",
-                            "data-ga-action": "Close panel",
-                            "data-ga-label": params.title
-                        }
-                    })
-                }}
-            {% endif %}
-        </div>
-    </summary>
-    <div id="{{ params.id }}-content" class="details__content js-collapsible-content">
-        {{ params.content | safe }}{{ caller() if caller }}
-        {% if params.closeButton and params.isAccordion != true %}
-            {{
-                onsButton({
-                    "text": params.buttonOpen or params.closeButton,
-                    "classes": "btn--small js-collapsible-button u-d-no " + (params.closeButtonClasses | default("btn--secondary")),
-                    "attributes": {
-                        "data-ga": "click",
-                        "data-ga-category": "definition",
-                        "data-ga-action": "Close panel",
-                        "data-ga-label": params.title
-                    }
-                })
-            }}
-        {% endif %}
-    </div>
-</details>
diff --git a/src/components/details/_test-template.njk b/src/components/details/_test-template.njk
new file mode 100644
index 0000000000..1cf6848974
--- /dev/null
+++ b/src/components/details/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/details/_macro.njk" import onsDetails %}
+
+{{ onsDetails(params) }}
diff --git a/src/components/feedback/_macro.njk b/src/components/feedback/_macro.njk
index 3cc7ad566f..cfaa8cc126 100644
--- a/src/components/feedback/_macro.njk
+++ b/src/components/feedback/_macro.njk
@@ -1,3 +1,64 @@
 {% macro onsFeedback(params) %}
-    {% include "components/feedback/_template.njk" %}
+    {% from "components/details/_macro.njk" import onsDetails %}
+    {% from "components/textarea/_macro.njk" import onsTextarea %}
+    {% from "components/input/_macro.njk" import onsInput %}
+    {% from "components/field/_macro.njk" import onsField %}
+    {% from "components/button/_macro.njk" import onsButton %}
+
+    {% call onsDetails({
+            "id": params.id,
+            "classes": "js-feedback",
+            "title": params.title,
+            "closeButton": params.closeButton,
+            "closeButtonClasses": params.closeButtonClasses
+        })
+    %}
+        <form id="{{ params.id }}-form" class="u-mt-s js-feedback-form" method="POST" action="{{ params.action }}" novalidate data-thank-you="{{ params.thankYouMessage }}" data-error-message="{{ params.errorMessage }}">
+            {{
+                onsTextarea({
+                    "id":  params.textarea.id | default(params.id + '-textarea'),
+                    "name": params.textarea.name | default(params.id + '-textarea'),
+                    "label": params.textarea.label,
+                    "classes": "js-feedback-textarea" + (" " + params.textarea.classes if params.textarea.classes),
+                    "value": params.textarea.value,
+                    "maxlength": params.textarea.maxlength,
+                    "charCountPlural": params.textarea.charCountPlural,
+                    "charCountSingular": params.textarea.charCountSingular,
+                    "attributes": params.textarea.attributes
+                })
+            }}
+            {{
+                onsInput({
+                    "id": params.name.id | default(params.id + '-name'),
+                    "name": params.name.name | default(params.id + '-name'),
+                    "label": params.name.label,
+                    "classes": "js-feedback-name" + (" " + params.name.classes if params.name.classes),
+                    "value": params.name.value,
+                    "attributes": params.name.attributes,
+                    "autocomplete": "name"
+                })
+            }}
+            {{
+                onsInput({
+                    "id": params.email.id | default(params.id + '-email'),
+                    "type": "email",
+                    "name": params.email.name | default(params.id + '-email'),
+                    "label": params.email.label,
+                    "classes": "js-feedback-email" + (" " + params.email.classes if params.email.classes),
+                    "value": params.name.value,
+                    "attributes": params.name.attributes
+                })
+            }}
+            {% call onsField({
+                "classes": "u-mt-l u-mb-s"
+            }) %}
+                {{
+                    onsButton({
+                        "text": params.sendButton,
+                        "classes": "js-feedback-send btn--loader"
+                    })
+                }}
+            {% endcall %}
+        </form>
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/feedback/_template.njk b/src/components/feedback/_template.njk
deleted file mode 100644
index e71ff95673..0000000000
--- a/src/components/feedback/_template.njk
+++ /dev/null
@@ -1,62 +0,0 @@
-{% from "components/details/_macro.njk" import onsDetails %}
-{% from "components/textarea/_macro.njk" import onsTextarea %}
-{% from "components/input/_macro.njk" import onsInput %}
-{% from "components/field/_macro.njk" import onsField %}
-{% from "components/button/_macro.njk" import onsButton %}
-
-{% call onsDetails({
-        "id": params.id,
-        "classes": "js-feedback",
-        "title": params.title,
-        "closeButton": params.closeButton,
-        "closeButtonClasses": params.closeButtonClasses
-    })
-%}
-    <form id="{{ params.id }}-form" class="u-mt-s js-feedback-form" method="POST" action="{{ params.action }}" novalidate data-thank-you="{{ params.thankYouMessage }}" data-error-message="{{ params.errorMessage }}">
-        {{
-            onsTextarea({
-                "id":  params.textarea.id | default(params.id + '-textarea'),
-                "name": params.textarea.name | default(params.id + '-textarea'),
-                "label": params.textarea.label,
-                "classes": "js-feedback-textarea" + (" " + params.textarea.classes if params.textarea.classes),
-                "value": params.textarea.value,
-                "maxlength": params.textarea.maxlength,
-                "charCountPlural": params.textarea.charCountPlural,
-                "charCountSingular": params.textarea.charCountSingular,
-                "attributes": params.textarea.attributes
-            })
-        }}
-        {{
-            onsInput({
-                "id": params.name.id | default(params.id + '-name'),
-                "name": params.name.name | default(params.id + '-name'),
-                "label": params.name.label,
-                "classes": "js-feedback-name" + (" " + params.name.classes if params.name.classes),
-                "value": params.name.value,
-                "attributes": params.name.attributes,
-                "autocomplete": "name"
-            })
-        }}
-        {{
-            onsInput({
-                "id": params.email.id | default(params.id + '-email'),
-                "type": "email",
-                "name": params.email.name | default(params.id + '-email'),
-                "label": params.email.label,
-                "classes": "js-feedback-email" + (" " + params.email.classes if params.email.classes),
-                "value": params.name.value,
-                "attributes": params.name.attributes
-            })
-        }}
-        {% call onsField({
-            "classes": "u-mt-l u-mb-s"
-        }) %}
-            {{
-                onsButton({
-                    "text": params.sendButton,
-                    "classes": "js-feedback-send btn--loader"
-                })
-            }}
-        {% endcall %}
-    </form>
-{% endcall %}
diff --git a/src/components/feedback/_test-template.njk b/src/components/feedback/_test-template.njk
new file mode 100644
index 0000000000..e351f8f6ef
--- /dev/null
+++ b/src/components/feedback/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/feedback/_macro.njk" import onsFeedback %}
+
+{{ onsFeedback(params) }}
diff --git a/src/components/field/_macro.njk b/src/components/field/_macro.njk
index 213a6aa2ec..15a4523684 100644
--- a/src/components/field/_macro.njk
+++ b/src/components/field/_macro.njk
@@ -1,3 +1,55 @@
 {% macro onsField(params) %}
-    {% include "components/field/_template.njk" %}
+    {% if params.mutuallyExclusive or params.legend %}
+        {% if params.questionMode %}
+            {% set legend = "<h1>" + params.legend + "</h1>" %}
+            {% set classes = "field--question" + (" " + params.classes if params.classes) %}
+        {% else %}
+            {% set legend = params.legend %}
+            {% set classes = params.classes %}
+        {% endif %}
+        <fieldset{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.mutuallyExclusive %} field--exclusive{% endif %}{% if classes %} {{ classes }}{% endif %}">
+            <legend class="field__legend {{ params.legendClasses }}">
+                {{ legend | safe }}
+                {% if params.description %}
+                <br>
+                <span class="field__description">{{ params.description }}</span>
+                {% endif %}
+            </legend>
+            {{ caller() }}
+            {% if params.mutuallyExclusive %}
+                {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+                <br>
+                <div class="field__item">
+                    <div class="field__label u-fs-r--b" aria-hidden="true">{{ params.mutuallyExclusive.or }}</div>
+                    {{
+                        onsCheckbox({
+                            "id": params.mutuallyExclusive.checkbox.id,
+                            "name": params.mutuallyExclusive.checkbox.name,
+                            "value": params.mutuallyExclusive.checkbox.value,
+                            "classes": params.mutuallyExclusive.checkbox.classes,
+                            "inputClasses": "js-exclusive-checkbox",
+                            "label": {
+                                "text": '<span class="u-vh">' + params.mutuallyExclusive.or + ', </span> ' + params.mutuallyExclusive.checkbox.label.text
+                            },
+                            "attributes": {
+                                "data-deselect-message": params.mutuallyExclusive.deselectMessage
+                            }
+                        })
+                    }}
+                </div>
+                <span class="js-exclusive-alert u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.mutuallyExclusive.deselectGroupAdjective }}" data-checkbox-adjective="{{ params.mutuallyExclusive.deselectCheckboxAdjective }}"></span>
+            {% endif %} 
+        </fieldset>
+    {% else %}
+        {% if not params.noField %}
+            <div{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.classes %} {{ params.classes }}{% endif %}">
+        {% endif %}
+            {% if params.description %}
+                <div class="field__description">{{ params.description }}</div>
+            {% endif %}
+            {{ caller() }}
+        {% if not params.noField %}
+            </div>
+        {% endif %}
+    {% endif %}
 {% endmacro %}
diff --git a/src/components/field/_template.njk b/src/components/field/_template.njk
deleted file mode 100644
index 19687a6505..0000000000
--- a/src/components/field/_template.njk
+++ /dev/null
@@ -1,53 +0,0 @@
-{% if params.mutuallyExclusive or params.legend %}
-    {% if params.questionMode %}
-        {% set legend = "<h1>" + params.legend + "</h1>" %}
-        {% set classes = "field--question" + (" " + params.classes if params.classes) %}
-    {% else %}
-        {% set legend = params.legend %}
-        {% set classes = params.classes %}
-    {% endif %}
-    <fieldset{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.mutuallyExclusive %} field--exclusive{% endif %}{% if classes %} {{ classes }}{% endif %}">
-          <legend class="field__legend {{ params.legendClasses }}">
-            {{ legend | safe }}
-            {% if params.description %}
-              <br>
-              <span class="field__description">{{ params.description }}</span>
-            {% endif %}
-          </legend>
-        {{ caller() }}
-        {% if params.mutuallyExclusive %}
-            {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
-            <br>
-            <div class="field__item">
-                <div class="field__label u-fs-r--b" aria-hidden="true">{{ params.mutuallyExclusive.or }}</div>
-                {{
-                    onsCheckbox({
-                        "id": params.mutuallyExclusive.checkbox.id,
-                        "name": params.mutuallyExclusive.checkbox.name,
-                        "value": params.mutuallyExclusive.checkbox.value,
-                        "classes": params.mutuallyExclusive.checkbox.classes,
-                        "inputClasses": "js-exclusive-checkbox",
-                        "label": {
-                            "text": '<span class="u-vh">' + params.mutuallyExclusive.or + ', </span> ' + params.mutuallyExclusive.checkbox.label.text
-                        },
-                        "attributes": {
-                            "data-deselect-message": params.mutuallyExclusive.deselectMessage
-                        }
-                    })
-                }}
-            </div>
-            <span class="js-exclusive-alert u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.mutuallyExclusive.deselectGroupAdjective }}" data-checkbox-adjective="{{ params.mutuallyExclusive.deselectCheckboxAdjective }}"></span>
-        {% endif %} 
-    </fieldset>
-{% else %}
-    {% if not params.noField %}
-        <div{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.classes %} {{ params.classes }}{% endif %}">
-    {% endif %}
-        {% if params.description %}
-            <div class="field__description">{{ params.description }}</div>
-        {% endif %}
-        {{ caller() }}
-    {% if not params.noField %}
-        </div>
-    {% endif %}
-{% endif %}
diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk
index ced9eabad9..68b0500245 100644
--- a/src/components/footer/_macro.njk
+++ b/src/components/footer/_macro.njk
@@ -1,3 +1,130 @@
 {% macro onsFooter(params) %}
-  {% include "components/footer/_template.njk" %}
+  {% from "components/lists/_macro.njk" import onsList %}
+
+  {% if params.lang %}
+      {% set lang = params.lang %}
+  {% else %}
+      {% set lang = 'en-GB' %}
+  {% endif %}
+
+  {% if params.poweredByONS %}
+      {% if params.poweredByONS.alt %}
+          {% set poweredByAlt = params.poweredByONS.alt %}
+      {% else %}
+          {% set poweredByAlt = 'Office for National Statistics' %}
+      {% endif %}
+  {% endif %}
+
+  <footer class="footer {{ params.classes }}" role="contentinfo">
+      <div class="container">
+          <div class="grid">
+              {% if params.poweredByONS %}
+                  <div class="grid__col u-mb-m">
+                      <img src="/img/ons-logo-black-{{ lang }}.svg" alt="{{ poweredByAlt }}" class="footer__poweredby-img">
+                  </div>
+              {% endif %}
+              {% if params.button %}
+                  {% from "components/button/_macro.njk" import onsButton %}
+                  <div class="grid__col u-mb-m u-d-no@m">
+                      {{
+                          onsButton({
+                              "id": params.button.id,
+                              "type": params.button.type,
+                              "classes": "btn--ghost-blue" + (" " + params.button.classes if params.button.classes),
+                              "text": params.button.text,
+                              "html": params.button.html,
+                              "name": params.button.name,
+                              "value": params.button.value,
+                              "attributes": params.button.attributes
+                          })
+                      }}
+                  </div>
+              {% endif %}
+              {% if params.language %}
+                  {% set currentLanguage = params.language.languages | selectattr("current") | first %}
+                  <div class="grid__col u-d-no@m">
+                      {% set languageItems = params.language.languages | rejectattr("current") %}
+                      {% if currentLanguage.allLanguages and params.language.allLanguagesUrl %}
+                          {% set languageItems = (languageItems.push({ 
+                              "url": params.language.allLanguagesUrl,
+                              "text": currentLanguage.allLanguages,
+                              "lang": currentLanguage.ISOCode 
+                          }), languageItems) %}
+                      {% endif %}
+                      {{
+                          onsList({ 
+                              "classes": 'list--bare list--inline@s u-mb-no',
+                              "items": languageItems
+                          })
+                      }}
+                  </div>
+                  <div class="grid__col u-d-no@m u-mt-m u-mb-m">
+                      <hr class="footer__hr">
+                  </div>
+              {% endif %}
+            
+              {% if params.cols %}
+                  {% for col in params.cols %}
+                      <div class="grid__col col-4@m{{ " u-mt-m@xs@m" if loop.index > 1 }}">
+                          {% if col.title %}
+                              <h4 class="u-fs-r--b footer__heading">{{ col.title }}</h4>
+                          {% endif %}
+                          {{
+                              onsList({
+                                  "classes": 'list--bare u-mb-no',
+                                  "items": col.items
+                              })
+                          }}
+                      </div>
+                  {% endfor %}
+                  <div class="grid__col u-mt-m u-mb-m">
+                      <hr class="footer__hr">
+                  </div>
+              {% endif %}
+              {% if params.rows %}
+                  {% for row in params.rows %}
+                      <div class="grid__col">
+                          {{
+                              onsList({
+                                  "classes": 'list--bare list--inline@s u-mb-no',
+                                  "items": row.items
+                              })
+                          }}
+                      </div>
+                      <div class="grid__col u-mt-m u-mb-m">
+                          <hr class="footer__hr">
+                      </div>
+                  {% endfor %}
+              {% endif %}
+              {% if params.feedback %}
+                  {% from "components/feedback/_macro.njk" import onsFeedback %}
+                  <div class="grid__col col-8@m u-mb-s">
+                      {{
+                          onsFeedback({
+                              "id": params.feedback.id | default("feedback"),
+                              "action": params.feedback.action,
+                              "title": params.feedback.title,
+                              "closeButton": params.feedback.closeButton,
+                              "closeButtonClasses": "btn--ghost-blue",
+                              "textarea": params.feedback.textarea,
+                              "name": params.feedback.name,
+                              "email": params.feedback.email,
+                              "sendButton": params.feedback.sendButton,
+                              "thankYouMessage": params.feedback.thankYouMessage,
+                              "errorMessage": params.feedback.errorMessage
+                          })
+                      }}
+                  </div>
+                  <div class="grid__col u-mb-m">
+                      <hr class="footer__hr">
+                  </div>
+              {% endif %}
+              <div class="grid__col">
+                  <div class="footer__license">
+                      <img alt="OGL" alt="OGL" class="footer__ogl-img" src="{{ '/' + params.version if params.version  }}/img/UKOpenGovernmentLicence-grey.svg">{{ params.OGLLink.pre}} <a href="{{ params.OGLLink.url }}" class="footer__link">{{ params.OGLLink.link }}</a>{{ params.OGLLink.post }}
+                  </div>
+              </div>
+          </div>
+      </div>
+  </footer>
 {% endmacro %}
diff --git a/src/components/footer/_template.njk b/src/components/footer/_template.njk
deleted file mode 100644
index 152bffba50..0000000000
--- a/src/components/footer/_template.njk
+++ /dev/null
@@ -1,128 +0,0 @@
-{% from "components/lists/_macro.njk" import onsList %}
-
-{% if params.lang %}
-    {% set lang = params.lang %}
-{% else %}
-    {% set lang = 'en-GB' %}
-{% endif %}
-
-{% if params.poweredByONS %}
-    {% if params.poweredByONS.alt %}
-        {% set poweredByAlt = params.poweredByONS.alt %}
-    {% else %}
-        {% set poweredByAlt = 'Office for National Statistics' %}
-    {% endif %}
-{% endif %}
-
-<footer class="footer {{ params.classes }}" role="contentinfo">
-    <div class="container">
-        <div class="grid">
-            {% if params.poweredByONS %}
-                <div class="grid__col u-mb-m">
-                    <img src="/img/ons-logo-black-{{ lang }}.svg" alt="{{ poweredByAlt }}" class="footer__poweredby-img">
-                </div>
-            {% endif %}
-            {% if params.button %}
-                {% from "components/button/_macro.njk" import onsButton %}
-                <div class="grid__col u-mb-m u-d-no@m">
-                    {{
-                        onsButton({
-                            "id": params.button.id,
-                            "type": params.button.type,
-                            "classes": "btn--ghost-blue" + (" " + params.button.classes if params.button.classes),
-                            "text": params.button.text,
-                            "html": params.button.html,
-                            "name": params.button.name,
-                            "value": params.button.value,
-                            "attributes": params.button.attributes
-                        })
-                    }}
-                </div>
-            {% endif %}
-            {% if params.language %}
-                {% set currentLanguage = params.language.languages | selectattr("current") | first %}
-                <div class="grid__col u-d-no@m">
-                    {% set languageItems = params.language.languages | rejectattr("current") %}
-                    {% if currentLanguage.allLanguages and params.language.allLanguagesUrl %}
-                        {% set languageItems = (languageItems.push({ 
-                            "url": params.language.allLanguagesUrl,
-                            "text": currentLanguage.allLanguages,
-                            "lang": currentLanguage.ISOCode 
-                        }), languageItems) %}
-                    {% endif %}
-                    {{
-                        onsList({ 
-                            "classes": 'list--bare list--inline@s u-mb-no',
-                            "items": languageItems
-                        })
-                    }}
-                </div>
-                <div class="grid__col u-d-no@m u-mt-m u-mb-m">
-                    <hr class="footer__hr">
-                </div>
-            {% endif %}
-           
-            {% if params.cols %}
-                {% for col in params.cols %}
-                    <div class="grid__col col-4@m{{ " u-mt-m@xs@m" if loop.index > 1 }}">
-                        {% if col.title %}
-                            <h4 class="u-fs-r--b footer__heading">{{ col.title }}</h4>
-                        {% endif %}
-                        {{
-                            onsList({
-                                "classes": 'list--bare u-mb-no',
-                                "items": col.items
-                            })
-                        }}
-                    </div>
-                {% endfor %}
-                <div class="grid__col u-mt-m u-mb-m">
-                    <hr class="footer__hr">
-                </div>
-            {% endif %}
-            {% if params.rows %}
-                {% for row in params.rows %}
-                    <div class="grid__col">
-                        {{
-                            onsList({
-                                "classes": 'list--bare list--inline@s u-mb-no',
-                                "items": row.items
-                            })
-                        }}
-                    </div>
-                    <div class="grid__col u-mt-m u-mb-m">
-                        <hr class="footer__hr">
-                    </div>
-                {% endfor %}
-            {% endif %}
-            {% if params.feedback %}
-                {% from "components/feedback/_macro.njk" import onsFeedback %}
-                <div class="grid__col col-8@m u-mb-s">
-                    {{
-                        onsFeedback({
-                            "id": params.feedback.id | default("feedback"),
-                            "action": params.feedback.action,
-                            "title": params.feedback.title,
-                            "closeButton": params.feedback.closeButton,
-                            "closeButtonClasses": "btn--ghost-blue",
-                            "textarea": params.feedback.textarea,
-                            "name": params.feedback.name,
-                            "email": params.feedback.email,
-                            "sendButton": params.feedback.sendButton,
-                            "thankYouMessage": params.feedback.thankYouMessage,
-                            "errorMessage": params.feedback.errorMessage
-                        })
-                    }}
-                </div>
-                <div class="grid__col u-mb-m">
-                    <hr class="footer__hr">
-                </div>
-            {% endif %}
-            <div class="grid__col">
-                <div class="footer__license">
-                    <img alt="OGL" alt="OGL" class="footer__ogl-img" src="{{ '/' + params.version if params.version  }}/img/UKOpenGovernmentLicence-grey.svg">{{ params.OGLLink.pre}} <a href="{{ params.OGLLink.url }}" class="footer__link">{{ params.OGLLink.link }}</a>{{ params.OGLLink.post }}
-                </div>
-            </div>
-        </div>
-    </div>
-</footer>
diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
index 3aef39e4a5..0f4f5688ab 100644
--- a/src/components/header/_macro.njk
+++ b/src/components/header/_macro.njk
@@ -1,3 +1,95 @@
 {% macro onsHeader(params) %}
-  {% include "components/header/_template.njk" %}
+  {% from "components/button/_macro.njk" import onsButton %}
+
+  <header class="header {{ params.classes if params.classes }}">
+      {% if params.phase %}
+          {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+          {{ onsPhaseBanner(params.phase) }}
+      {% endif %}
+      <div class="header__top" role="banner">
+          <div class=" container{{ ' container--full-width' if params.fullWidth }}">
+              <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
+                  <div class="grid__col col-auto">
+                      <div class="logo">
+                          <img src="{{ '/' + params.version if params.version  }}/img/ons-logo-black-en-GB.svg" alt="Office for National Statistics logo" class="logo__img header__logo--print">
+                          <a href="{{ params.logoHref | default('/') }}">
+                              <img src="{{ '/' + params.version if params.version  }}/img/{{ params.logo | default('ons-logo-pos') }}.svg" alt="Office for National Statistics logo" class="logo__img header__logo print__hidden">
+                          </a>
+                      </div>
+                  </div>
+                  {% if params.language or params.serviceLinks %}
+                      <div class="header__links grid__col col-auto">
+                          {% if params.language %}
+                              <div class="grid__col col-auto u-d-no@xs@m {{ 'u-mr-s@m' if params.serviceLinks }}">
+                                  {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                                  {{
+                                      onsLanguageSelector(params.language)
+                                  }}
+                              </div>
+                          {% endif %}
+                          {% if params.serviceLinks %}
+                              <div class="grid__col col-auto u-d-no@xs@m">
+                                  <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel }}">
+                                      <ul class="header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel }}" role="menubar">
+                                          {% for item in params.serviceLinks.items %}
+                                              <li class="header-service-nav__item">
+                                                  <a href="{{ item.path }}" class="header-service-nav__link" role="menuitem">{{ item.title }}</a>
+                                              </li>
+                                          {% endfor %}
+                                      </ul>
+                                  </nav>
+                              </div>
+                          {% endif %}
+                      </div>
+                  {% endif %}
+              </div>
+          </div>
+      </div>
+      <div class="header__main">
+          <div class="container{{ ' container--full-width' if params.fullWidth }}">
+              <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
+                  <div class="grid__col col-auto u-flex-shrink">
+                      <h1 class="header__title">{{ params.title }}</h1>
+                      {% if params.desc %}
+                          <p class="header__desc">{{ params.desc }}</p>
+                      {% endif %}
+                  </div>
+                  {% if params.button %}
+                      <div class="grid__col col-auto u-flex-no-shrink">
+                          {{ onsButton({
+                              "text": params.button.text,
+                              "classes": "btn--ghost u-d-no@xs@m"
+                          }) }}
+                      </div>
+                  {% endif %}
+                  {% if params.toggleButton %}
+                      <div class="grid__col col-auto u-flex-no-shrink">
+                          {{ onsButton({
+                              "buttonToggleAttributes": true,
+                              "text": params.toggleButton.text,
+                              "ariaControls": params.navigation.id,
+                              "ariaLabel": params.toggleButton.ariaLabel,
+                              "classes": "btn--mobile js-toggle-main"
+                          }) }}
+                      </div>
+                  {% endif %}
+              </div>
+          </div>
+      </div>
+      {% if params.navigation %}
+          <div class="header__bottom">
+              <div class="container container--gutterless@xs@m{{ ' container--full-width' if params.fullWidth }}">
+                  <nav class="header-nav header-nav--mobile js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel }}">
+                      <ul class="header-nav__list" aria-label="{{ params.navigation.ariaListLabel }}" role="menubar">
+                          {% for item in params.navigation.items %}
+                              <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.path == params.navigation.currentPath) or (item.path in params.navigation.currentPath) }}">
+                                  <a href="{{ item.path }}" class="header-nav__link" role="menuitem">{{ item.title }}</a>
+                              </li>
+                          {% endfor %}
+                      </ul>
+                  </nav>
+              </div>
+          </div>
+      {% endif %}
+  </header>
 {% endmacro %}
diff --git a/src/components/header/_template.njk b/src/components/header/_template.njk
deleted file mode 100644
index f6a8bc82c0..0000000000
--- a/src/components/header/_template.njk
+++ /dev/null
@@ -1,93 +0,0 @@
-{% from "components/button/_macro.njk" import onsButton %}
-
-<header class="header {{ params.classes if params.classes }}">
-    {% if params.phase %}
-        {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
-        {{ onsPhaseBanner(params.phase) }}
-    {% endif %}
-    <div class="header__top" role="banner">
-        <div class=" container{{ ' container--full-width' if params.fullWidth }}">
-            <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
-                <div class="grid__col col-auto">
-                    <div class="logo">
-                        <img src="{{ '/' + params.version if params.version  }}/img/ons-logo-black-en-GB.svg" alt="Office for National Statistics logo" class="logo__img header__logo--print">
-                        <a href="{{ params.logoHref | default('/') }}">
-                            <img src="{{ '/' + params.version if params.version  }}/img/{{ params.logo | default('ons-logo-pos') }}.svg" alt="Office for National Statistics logo" class="logo__img header__logo print__hidden">
-                        </a>
-                    </div>
-                </div>
-                {% if params.language or params.serviceLinks %}
-                    <div class="header__links grid__col col-auto">
-                        {% if params.language %}
-                            <div class="grid__col col-auto u-d-no@xs@m {{ 'u-mr-s@m' if params.serviceLinks }}">
-                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
-                                {{
-                                    onsLanguageSelector(params.language)
-                                }}
-                            </div>
-                        {% endif %}
-                        {% if params.serviceLinks %}
-                            <div class="grid__col col-auto u-d-no@xs@m">
-                                <nav class="header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel }}">
-                                    <ul class="header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel }}" role="menubar">
-                                        {% for item in params.serviceLinks.items %}
-                                            <li class="header-service-nav__item">
-                                                <a href="{{ item.path }}" class="header-service-nav__link" role="menuitem">{{ item.title }}</a>
-                                            </li>
-                                        {% endfor %}
-                                    </ul>
-                                </nav>
-                            </div>
-                        {% endif %}
-                    </div>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-    <div class="header__main">
-        <div class="container{{ ' container--full-width' if params.fullWidth }}">
-            <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
-                <div class="grid__col col-auto u-flex-shrink">
-                    <h1 class="header__title">{{ params.title }}</h1>
-                    {% if params.desc %}
-                        <p class="header__desc">{{ params.desc }}</p>
-                    {% endif %}
-                </div>
-                {% if params.button %}
-                    <div class="grid__col col-auto u-flex-no-shrink">
-                        {{ onsButton({
-                            "text": params.button.text,
-                            "classes": "btn--ghost u-d-no@xs@m"
-                        }) }}
-                    </div>
-                {% endif %}
-                {% if params.toggleButton %}
-                    <div class="grid__col col-auto u-flex-no-shrink">
-                        {{ onsButton({
-                            "buttonToggleAttributes": true,
-                            "text": params.toggleButton.text,
-                            "ariaControls": params.navigation.id,
-                            "ariaLabel": params.toggleButton.ariaLabel,
-                            "classes": "btn--mobile js-toggle-main"
-                        }) }}
-                    </div>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-    {% if params.navigation %}
-        <div class="header__bottom">
-            <div class="container container--gutterless@xs@m{{ ' container--full-width' if params.fullWidth }}">
-                <nav class="header-nav header-nav--mobile js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel }}">
-                    <ul class="header-nav__list" aria-label="{{ params.navigation.ariaListLabel }}" role="menubar">
-                        {% for item in params.navigation.items %}
-                            <li class="header-nav__item {{ item.classes }}{{ ' header-nav__item--active' if (item.path == params.navigation.currentPath) or (item.path in params.navigation.currentPath) }}">
-                                <a href="{{ item.path }}" class="header-nav__link" role="menuitem">{{ item.title }}</a>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </nav>
-            </div>
-        </div>
-    {% endif %}
-</header>
diff --git a/src/components/header/_test-template.njk b/src/components/header/_test-template.njk
new file mode 100644
index 0000000000..114644327e
--- /dev/null
+++ b/src/components/header/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{ onsHeader(params) }}
diff --git a/src/components/input/_macro.njk b/src/components/input/_macro.njk
index 59e7e6f38f..ea8b5411af 100644
--- a/src/components/input/_macro.njk
+++ b/src/components/input/_macro.njk
@@ -1,3 +1,69 @@
 {% macro onsInput(params) %}
-    {% include "components/input/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+    {% from "components/label/_macro.njk" import onsLabel %}
+
+    {% if params.type == "number" %}
+    {# Type must be "text" or Firefox and Safari will set a blank value to the server if non numeric characters are entered - 
+    they don't block non numeric characters: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528 #}
+        {% set type = "text" %}
+        {% set pattern = "[0-9]*" %}
+        {% set inputmode = "numeric" %}
+    {% elif params.type %}
+        {% set type = params.type %}
+    {% else %}
+        {% set type = "text" %}
+    {% endif %}
+
+    {% set exclusiveClass = " js-exclusive-group" if params.mutuallyExclusive else "" %}
+
+    {% call onsField({
+        "id": params.fieldId,
+        "classes": params.fieldClasses,
+        "legendClasses": params.legendClasses,
+        "noField": params.noField,
+        "legend": params.label.text if params.mutuallyExclusive,
+        "description": params.label.description if params.mutuallyExclusive,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "questionMode": params.questionMode
+    }) %}
+        {% if params.label and not params.mutuallyExclusive %}
+            {{
+                onsLabel({
+                    "for": params.id,
+                    "id": params.label.id,
+                    "text": params.label.text,
+                    "classes": params.label.classes,
+                    "description": params.label.description
+                })
+            }}
+        {% endif %}
+
+        {% if params.prefix !== undefined or params.suffix !== undefined %}
+            {% if params.prefix !== undefined %}
+                {% set prefixClass = " input-type--prefix" %}
+            {% endif %}
+            <div class="input-type{{ prefixClass }}">
+                <div class="input-type__inner">
+        {% endif %}
+        <input
+            type="{{ type }}"
+            id="{{ params.id }}"
+            class="input input--text input-type__input {{ params.classes }}{{ exclusiveClass }}"
+            {% if params.prefix or params.suffix %}title="{{ params.prefix.title }}{{ params.suffix.title }}"{% endif %}
+            {% if params.name !== undefined %}name="{{ params.name }}"{% endif %}
+            {% if params.value !== undefined %}value="{{ params.value }}"{% endif %}
+            {% if params.accept !== undefined %}accept="{{ params.accept }}"{% endif %}
+            {% if params.min !== undefined %}min="{{ params.min }}"{% endif %}
+            {% if params.max !== undefined %}max="{{ params.max }}"{% endif %}
+            {% if pattern !== undefined %}pattern="{{ pattern }}"{% endif %}
+            {% if inputmode != undefined %}inputmode="{{ inputmode }}"{% endif %}
+            {% if params.autocomplete !== undefined %}autocomplete="{{ params.autocomplete }}"{% endif %}
+            {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+        />
+        {% if params.prefix !== undefined or params.suffix !== undefined %}
+                    <abbr class="input-type__type" aria-hidden="true" title="{{ params.prefix.title }}{{ params.suffix.title }}">{{ params.prefix.text or params.prefix.title }}{{ params.suffix.text or params.suffix.title }}</abbr>
+                </div>
+            </div>
+        {% endif %}
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/input/_template.njk b/src/components/input/_template.njk
deleted file mode 100644
index 5e46751935..0000000000
--- a/src/components/input/_template.njk
+++ /dev/null
@@ -1,67 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-{% from "components/label/_macro.njk" import onsLabel %}
-
-{% if params.type == "number" %}
-{# Type must be "text" or Firefox and Safari will set a blank value to the server if non numeric characters are entered - 
-   they don't block non numeric characters: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528 #}
-    {% set type = "text" %}
-    {% set pattern = "[0-9]*" %}
-    {% set inputmode = "numeric" %}
-{% elif params.type %}
-    {% set type = params.type %}
-{% else %}
-    {% set type = "text" %}
-{% endif %}
-
-{% set exclusiveClass = " js-exclusive-group" if params.mutuallyExclusive else "" %}
-
-{% call onsField({
-    "id": params.fieldId,
-    "classes": params.fieldClasses,
-    "legendClasses": params.legendClasses,
-    "noField": params.noField,
-    "legend": params.label.text if params.mutuallyExclusive,
-    "description": params.label.description if params.mutuallyExclusive,
-    "mutuallyExclusive": params.mutuallyExclusive,
-    "questionMode": params.questionMode
-}) %}
-    {% if params.label and not params.mutuallyExclusive %}
-        {{
-            onsLabel({
-                "for": params.id,
-                "id": params.label.id,
-                "text": params.label.text,
-                "classes": params.label.classes,
-                "description": params.label.description
-            })
-        }}
-    {% endif %}
-
-    {% if params.prefix !== undefined or params.suffix !== undefined %}
-        {% if params.prefix !== undefined %}
-            {% set prefixClass = " input-type--prefix" %}
-        {% endif %}
-        <div class="input-type{{ prefixClass }}">
-            <div class="input-type__inner">
-    {% endif %}
-    <input
-        type="{{ type }}"
-        id="{{ params.id }}"
-        class="input input--text input-type__input {{ params.classes }}{{ exclusiveClass }}"
-        {% if params.prefix or params.suffix %}title="{{ params.prefix.title }}{{ params.suffix.title }}"{% endif %}
-        {% if params.name !== undefined %}name="{{ params.name }}"{% endif %}
-        {% if params.value !== undefined %}value="{{ params.value }}"{% endif %}
-        {% if params.accept !== undefined %}accept="{{ params.accept }}"{% endif %}
-        {% if params.min !== undefined %}min="{{ params.min }}"{% endif %}
-        {% if params.max !== undefined %}max="{{ params.max }}"{% endif %}
-        {% if pattern !== undefined %}pattern="{{ pattern }}"{% endif %}
-        {% if inputmode != undefined %}inputmode="{{ inputmode }}"{% endif %}
-        {% if params.autocomplete !== undefined %}autocomplete="{{ params.autocomplete }}"{% endif %}
-        {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-    />
-    {% if params.prefix !== undefined or params.suffix !== undefined %}
-                <abbr class="input-type__type" aria-hidden="true" title="{{ params.prefix.title }}{{ params.suffix.title }}">{{ params.prefix.text or params.prefix.title }}{{ params.suffix.text or params.suffix.title }}</abbr>
-            </div>
-        </div>
-    {% endif %}
-{% endcall %}
diff --git a/src/components/input/_test-template.njk b/src/components/input/_test-template.njk
new file mode 100644
index 0000000000..66fa21bc9c
--- /dev/null
+++ b/src/components/input/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/input/_macro.njk" import onsInput %}
+
+{{ onsInput(params) }}
diff --git a/src/components/label/_macro.njk b/src/components/label/_macro.njk
index 5041ec9d0f..2f20deb532 100644
--- a/src/components/label/_macro.njk
+++ b/src/components/label/_macro.njk
@@ -1,3 +1,9 @@
 {% macro onsLabel(params) %}
-  {% include "components/label/_template.njk" %}
+  <label class="label {{ params.classes }}"{% if params.for %} for="{{ params.for }}"{% endif %}{% if params.id %} id="{{params.id}}"{% endif%}>
+      {{ params.text | safe }}
+      {% if params.description %}
+          <br>
+          <span class="label__description">{{ params.description }}</span>
+      {% endif %}
+  </label>
 {% endmacro %}
diff --git a/src/components/label/_template.njk b/src/components/label/_template.njk
deleted file mode 100644
index ab436e681b..0000000000
--- a/src/components/label/_template.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-<label class="label {{ params.classes }}"{% if params.for %} for="{{ params.for }}"{% endif %}{% if params.id %} id="{{params.id}}"{% endif%}>
-    {{ params.text | safe }}
-    {% if params.description %}
-        <br>
-        <span class="label__description">{{ params.description }}</span>
-    {% endif %}
-</label>
diff --git a/src/components/language-selector/_macro.njk b/src/components/language-selector/_macro.njk
index b219522ac2..99f74d591c 100644
--- a/src/components/language-selector/_macro.njk
+++ b/src/components/language-selector/_macro.njk
@@ -1,3 +1,32 @@
 {% macro onsLanguageSelector(params) %}
-    {% include "components/language-selector/_template.njk" %}
+    {% if params.languages | length <= 3 %}
+        {% set alternativeLanguages = params.languages | rejectattr("current") %}
+        <ul class="language-links u-d-no@xs@m">
+            {% for language in alternativeLanguages %}
+                <li class="language-links__item">
+                    <a href="{{ language.url }}" lang="{{ language.ISOCode }}">{{ language.text }}</a>
+                </li>
+            {% endfor %}
+        </ul>
+    {% else %}
+        {% set currentLanguage = params.languages | selectattr("current") | first %}
+        <div class="language-switcher u-d-no@xs@m js-language-switcher" lang="{{ currentLanguage.ISOCode }}">
+        <a class="js-language-switcher-link" href="{{ params.allLanguagesUrl }}">{{ currentLanguage.chooseLanguage }}</a>
+        <button type="button" class="u-d-no language-switcher__button js-language-switcher-button" aria-label="{{ currentLanguage.buttonAriaLabel }}">{{ currentLanguage.text }}</button>
+        <ul id="language-switcher-items" class="u-d-no language-switcher__items js-language-switcher-items">
+            {% for language in params.languages %}
+                {% if language.ISOCode !== currentLanguage.ISOCode %}
+                    <li class="language-switcher__item">
+                        <a href="{{ language.url }}" class="language-switcher__language js-language-switcher-item" lang="{{ language.ISOCode }}" tabindex="-1">{{ language.text }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+            {% if currentLanguage.allLanguages and params.allLanguagesUrl %}
+                <li class="language-switcher__item">
+                    <a href="{{ params.allLanguagesUrl }}" class="language-switcher__language js-language-switcher-item" lang="{{ currentLanguage.ISOCode }}" tabindex="-1">{{ currentLanguage.allLanguages }}</a>
+                </li>
+            {% endif %}
+        </ul>
+        </div>
+    {% endif %}
 {% endmacro %}
diff --git a/src/components/language-selector/_template.njk b/src/components/language-selector/_template.njk
deleted file mode 100644
index 8564fbfe31..0000000000
--- a/src/components/language-selector/_template.njk
+++ /dev/null
@@ -1,30 +0,0 @@
-{% if params.languages | length <= 3 %}
-    {% set alternativeLanguages = params.languages | rejectattr("current") %}
-    <ul class="language-links u-d-no@xs@m">
-        {% for language in alternativeLanguages %}
-            <li class="language-links__item">
-                <a href="{{ language.url }}" lang="{{ language.ISOCode }}">{{ language.text }}</a>
-            </li>
-        {% endfor %}
-    </ul>
-{% else %}
-    {% set currentLanguage = params.languages | selectattr("current") | first %}
-    <div class="language-switcher u-d-no@xs@m js-language-switcher" lang="{{ currentLanguage.ISOCode }}">
-    <a class="js-language-switcher-link" href="{{ params.allLanguagesUrl }}">{{ currentLanguage.chooseLanguage }}</a>
-    <button type="button" class="u-d-no language-switcher__button js-language-switcher-button" aria-label="{{ currentLanguage.buttonAriaLabel }}">{{ currentLanguage.text }}</button>
-    <ul id="language-switcher-items" class="u-d-no language-switcher__items js-language-switcher-items">
-        {% for language in params.languages %}
-            {% if language.ISOCode !== currentLanguage.ISOCode %}
-                <li class="language-switcher__item">
-                    <a href="{{ language.url }}" class="language-switcher__language js-language-switcher-item" lang="{{ language.ISOCode }}" tabindex="-1">{{ language.text }}</a>
-                </li>
-            {% endif %}
-        {% endfor %}
-        {% if currentLanguage.allLanguages and params.allLanguagesUrl %}
-            <li class="language-switcher__item">
-                <a href="{{ params.allLanguagesUrl }}" class="language-switcher__language js-language-switcher-item" lang="{{ currentLanguage.ISOCode }}" tabindex="-1">{{ currentLanguage.allLanguages }}</a>
-            </li>
-        {% endif %}
-    </ul>
-    </div>
-{% endif %}
diff --git a/src/components/language-selector/_test-template.njk b/src/components/language-selector/_test-template.njk
new file mode 100644
index 0000000000..a3abfa55b8
--- /dev/null
+++ b/src/components/language-selector/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+
+{{ onsLanguageSelector(params) }}
diff --git a/src/components/lists/_macro.njk b/src/components/lists/_macro.njk
index 47847f3eb0..616e629f26 100644
--- a/src/components/lists/_macro.njk
+++ b/src/components/lists/_macro.njk
@@ -1,3 +1,21 @@
 {% macro onsList(params) %}
-  {% include "components/lists/_template.njk" %}
+  {% if params.element %}
+      {% set listEl = params.element | lower %}
+  {% else %}
+      {% set listEl = 'ul' %}
+  {% endif %}
+
+  <{{listEl}} {% if params.id %}id="{{ params.id }}"{% endif %} class="list {{ params.classes }}">
+      {% for item in params.items %}
+          <li class="list__item {{ item.listclass }}">
+              {% if item.url %}
+                  {% if item.index %}{{ loop.index }}) {% endif %} <a href="{{ item.url }}"{% if item.classes %} class="{{ item.classes }}"{% endif %}{% if item.target %} target="{{ item.target }}"{% endif %}>
+                      {{ item.text | safe }}
+                  </a>
+              {% else %}
+                  {{ item.text | safe }}
+              {% endif %}
+          </li>
+      {% endfor %}
+  </{{listEl}}>
 {% endmacro %}
diff --git a/src/components/lists/_template.njk b/src/components/lists/_template.njk
deleted file mode 100644
index a594ae5d48..0000000000
--- a/src/components/lists/_template.njk
+++ /dev/null
@@ -1,19 +0,0 @@
-{% if params.element %}
-    {% set listEl = params.element | lower %}
-{% else %}
-    {% set listEl = 'ul' %}
-{% endif %}
-
-<{{listEl}} {% if params.id %}id="{{ params.id }}"{% endif %} class="list {{ params.classes }}">
-    {% for item in params.items %}
-        <li class="list__item {{ item.listclass }}">
-            {% if item.url %}
-                {% if item.index %}{{ loop.index }}) {% endif %} <a href="{{ item.url }}"{% if item.classes %} class="{{ item.classes }}"{% endif %}{% if item.target %} target="{{ item.target }}"{% endif %}>
-                    {{ item.text | safe }}
-                </a>
-            {% else %}
-                {{ item.text | safe }}
-            {% endif %}
-        </li>
-    {% endfor %}
-</{{listEl}}>
diff --git a/src/components/metadata/_macro.njk b/src/components/metadata/_macro.njk
index 5bf662d0f7..48aab8e1fa 100644
--- a/src/components/metadata/_macro.njk
+++ b/src/components/metadata/_macro.njk
@@ -1,3 +1,12 @@
 {% macro onsMetadata(params) %}
-  {% include "components/metadata/_template.njk" %}
+  <dl class="metadata metadata__list grid grid--gutterless"{% if params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
+  {% if params.items %}
+      {% for item in params.items %}
+          <dt class="metadata__term grid__col col-{{ params.termCol }}@m">{{ item.term }}</dt>
+          {% for description in item.descriptions %}
+                  <dd class="metadata__value grid__col col-{{ params.descriptionCol }}@m">{{ description.description }}</dd>
+          {% endfor %}           
+      {% endfor %}
+  {% endif %}
+  </dl>
 {% endmacro %}
diff --git a/src/components/metadata/_template.njk b/src/components/metadata/_template.njk
deleted file mode 100644
index 1cf826c0c3..0000000000
--- a/src/components/metadata/_template.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-<dl class="metadata metadata__list grid grid--gutterless"{% if params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
-{% if params.items %}
-    {% for item in params.items %}
-        <dt class="metadata__term grid__col col-{{ params.termCol }}@m">{{ item.term }}</dt>
-        {% for description in item.descriptions %}
-                <dd class="metadata__value grid__col col-{{ params.descriptionCol }}@m">{{ description.description }}</dd>
-        {% endfor %}           
-    {% endfor %}
-{% endif %}
-</dl>
diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
index 3db1d2b338..583ebb214f 100644
--- a/src/components/pagination/_macro.njk
+++ b/src/components/pagination/_macro.njk
@@ -1,3 +1,83 @@
 {% macro onsPagination(params) %}
-  {% include "components/pagination/_template.njk" %}
+  {% set currentPageIndex = "" %}
+  {% for page in params.pages %}
+      {% if page.current %}
+          {% set currentPageIndex = loop.index %}
+      {% endif %}
+  {% endfor %}
+
+  {% set totalPages = params.pages | length %}
+  {% set position = "Page " + currentPageIndex + " of " + totalPages %}
+
+  {# Calculate middle pages #}
+  {% set middlePageCount = 5 %}
+  {% set middlePagesEachSide = (middlePageCount - 1) / 2 %}
+
+  {% if (currentPageIndex - middlePagesEachSide) <= 1 %}
+      {% set geoff = '1' %}
+      {% set middlePagesStart = 1 %}
+      {% set middlePagesEnd = middlePageCount - 1 %}
+  {% elif (currentPageIndex + middlePagesEachSide) >= totalPages %}
+      {% set geoff = '2' %}
+      {% set middlePagesStart = totalPages - middlePageCount + 1 %}
+      {% set middlePagesEnd = totalPages %}
+  {% else %}
+      {% set geoff = '3' %}
+      {% set middlePagesStart = currentPageIndex - middlePagesEachSide %}
+      {% set middlePagesEnd = currentPageIndex + middlePagesEachSide %}
+  {% endif %}
+
+
+  <nav class="pagination {{ params.classes }}{% if params.hideRangeIndicator %} pagination--no-indicator{% endif %}" role="navigation" arial-label="Pagination ({{ position }})">
+      <div class="pagination__position">{{ position }}</div>
+      <ul class="pagination__items">
+          {% if currentPageIndex != 1 %}
+              <li class="pagination__item pagination__item--previous">
+                  <a href="{{ params.pages[currentPageIndex - 1].url }}" class="pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
+              </li>
+          {% endif %}
+          {% if currentPageIndex > 3 %}
+              {% set first = params.pages | first %}
+              <li class="pagination__item">
+                  <a href="{{ first.url }}" class="pagination__link" aria-label="Go to the first page (Page 1)">1</a>
+              </li>
+          {% endif %}
+          {% if currentPageIndex > 4 %}
+              <li class="pagination__item pageination__item--gap">&hellip;</li>
+          {% endif %}
+          {% for page in params.pages %}
+              {% if loop.index >= middlePagesStart and loop.index <= middlePagesEnd %}
+                  <li class="pagination__item{% if page.current %} pagination__item--current{% endif %}">
+                      <a href="{{ page.url }}" class="pagination__link"
+                          {%- if page.current -%}
+                              aria-current="true" aria-label="Current page ({{ position }})"
+                          {%- else -%}
+                              aria-label="Go to page {{ loop.index }}"
+                          {%- endif -%}
+                          {%- if loop.index == currentPageIndex - 1 -%}
+                              rel="prev"
+                          {%- endif -%}
+                          {%- if loop.index == currentPageIndex + 1 -%}
+                              rel="next"
+                          {%- endif -%}
+                      >{{ loop.index }}</a>
+                  </li>
+              {% endif %}
+          {% endfor %}
+          {% if currentPageIndex < totalPages - 3 %}
+              <li class="pagination__item pageination__item--gap">&hellip;</li>
+          {% endif %}
+          {% if currentPageIndex < totalPages - 2 %}
+              {% set lastPage = params.pages | last %}
+              <li class="pagination__item">
+                  <a href="{{ lastPage.url }}" class="pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
+              </li>
+          {% endif %}
+          {% if totalPages > 1 and totalPages != currentPageIndex %}
+              <li class="pagination__item pagination__item--next">
+                  <a href="{{ params.pages[currentPageIndex + 1].url }}" class="pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
+              </li>
+          {% endif %}
+      </ul>
+  </nav>
 {% endmacro %}
diff --git a/src/components/pagination/_template.njk b/src/components/pagination/_template.njk
deleted file mode 100644
index 7d579740bf..0000000000
--- a/src/components/pagination/_template.njk
+++ /dev/null
@@ -1,81 +0,0 @@
-{% set currentPageIndex = "" %}
-{% for page in params.pages %}
-    {% if page.current %}
-        {% set currentPageIndex = loop.index %}
-    {% endif %}
-{% endfor %}
-
-{% set totalPages = params.pages | length %}
-{% set position = "Page " + currentPageIndex + " of " + totalPages %}
-
-{# Calculate middle pages #}
-{% set middlePageCount = 5 %}
-{% set middlePagesEachSide = (middlePageCount - 1) / 2 %}
-
-{% if (currentPageIndex - middlePagesEachSide) <= 1 %}
-    {% set geoff = '1' %}
-    {% set middlePagesStart = 1 %}
-    {% set middlePagesEnd = middlePageCount - 1 %}
-{% elif (currentPageIndex + middlePagesEachSide) >= totalPages %}
-    {% set geoff = '2' %}
-    {% set middlePagesStart = totalPages - middlePageCount + 1 %}
-    {% set middlePagesEnd = totalPages %}
-{% else %}
-    {% set geoff = '3' %}
-    {% set middlePagesStart = currentPageIndex - middlePagesEachSide %}
-    {% set middlePagesEnd = currentPageIndex + middlePagesEachSide %}
-{% endif %}
-
-
-<nav class="pagination {{ params.classes }}{% if params.hideRangeIndicator %} pagination--no-indicator{% endif %}" role="navigation" arial-label="Pagination ({{ position }})">
-    <div class="pagination__position">{{ position }}</div>
-    <ul class="pagination__items">
-        {% if currentPageIndex != 1 %}
-            <li class="pagination__item pagination__item--previous">
-                <a href="{{ params.pages[currentPageIndex - 1].url }}" class="pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
-            </li>
-        {% endif %}
-        {% if currentPageIndex > 3 %}
-            {% set first = params.pages | first %}
-            <li class="pagination__item">
-                <a href="{{ first.url }}" class="pagination__link" aria-label="Go to the first page (Page 1)">1</a>
-            </li>
-        {% endif %}
-        {% if currentPageIndex > 4 %}
-            <li class="pagination__item pageination__item--gap">&hellip;</li>
-        {% endif %}
-        {% for page in params.pages %}
-            {% if loop.index >= middlePagesStart and loop.index <= middlePagesEnd %}
-                <li class="pagination__item{% if page.current %} pagination__item--current{% endif %}">
-                    <a href="{{ page.url }}" class="pagination__link"
-                        {%- if page.current -%}
-                            aria-current="true" aria-label="Current page ({{ position }})"
-                        {%- else -%}
-                            aria-label="Go to page {{ loop.index }}"
-                        {%- endif -%}
-                        {%- if loop.index == currentPageIndex - 1 -%}
-                            rel="prev"
-                        {%- endif -%}
-                        {%- if loop.index == currentPageIndex + 1 -%}
-                            rel="next"
-                        {%- endif -%}
-                    >{{ loop.index }}</a>
-                </li>
-            {% endif %}
-        {% endfor %}
-        {% if currentPageIndex < totalPages - 3 %}
-            <li class="pagination__item pageination__item--gap">&hellip;</li>
-        {% endif %}
-        {% if currentPageIndex < totalPages - 2 %}
-            {% set lastPage = params.pages | last %}
-            <li class="pagination__item">
-                <a href="{{ lastPage.url }}" class="pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
-            </li>
-        {% endif %}
-        {% if totalPages > 1 and totalPages != currentPageIndex %}
-             <li class="pagination__item pagination__item--next">
-                <a href="{{ params.pages[currentPageIndex + 1].url }}" class="pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
-            </li>
-        {% endif %}
-    </ul>
-</nav>
diff --git a/src/components/panel/_macro.njk b/src/components/panel/_macro.njk
index f73cd76110..10f87682bd 100644
--- a/src/components/panel/_macro.njk
+++ b/src/components/panel/_macro.njk
@@ -1,3 +1,28 @@
 {% macro onsPanel(params) %}
-  {% include "components/panel/_template.njk" %}
+  {% if params.classes %}
+      {% set utilityClasses  = ' ' + params.classes %}
+  {% endif %}
+
+  {% if params.title === undefined %}
+      {% set simpleClass = ' panel--simple' %}
+  {% endif %}
+
+  {% if params.type %}
+      {% set typeClass = ' panel--' + params.type %}
+  {% else %}
+      {% set typeClass = ' panel--info' %}
+  {% endif %}
+
+  {% if params.spacious %}
+      {% set spaciousClass = ' panel--spacious' %}
+  {% endif %}
+
+  <div class="panel{{typeClass}}{{ simpleClass }}{{ spaciousClass }}{{ utilityClasses }}">
+      {% if params.title %} <div class="panel__header">
+          <div class="u-fs-r--b">{{ params.title | safe }}</div>
+      </div>{% endif %}
+      <div class="panel__body">{{ params.body | safe }}
+          {{ caller() if caller }}
+      </div>
+  </div>
 {% endmacro %}
diff --git a/src/components/panel/_template.njk b/src/components/panel/_template.njk
deleted file mode 100644
index d0392c9b44..0000000000
--- a/src/components/panel/_template.njk
+++ /dev/null
@@ -1,26 +0,0 @@
-{% if params.classes %}
-    {% set utilityClasses  = ' ' + params.classes %}
-{% endif %}
-
-{% if params.title === undefined %}
-    {% set simpleClass = ' panel--simple' %}
-{% endif %}
-
-{% if params.type %}
-    {% set typeClass = ' panel--' + params.type %}
-{% else %}
-    {% set typeClass = ' panel--info' %}
-{% endif %}
-
-{% if params.spacious %}
-    {% set spaciousClass = ' panel--spacious' %}
-{% endif %}
-
-<div class="panel{{typeClass}}{{ simpleClass }}{{ spaciousClass }}{{ utilityClasses }}">
-    {% if params.title %} <div class="panel__header">
-        <div class="u-fs-r--b">{{ params.title | safe }}</div>
-    </div>{% endif %}
-    <div class="panel__body">{{ params.body | safe }}
-        {{ caller() if caller }}
-    </div>
-</div>
diff --git a/src/components/password/_macro.njk b/src/components/password/_macro.njk
index e2b5996b6e..67fcd30820 100644
--- a/src/components/password/_macro.njk
+++ b/src/components/password/_macro.njk
@@ -1,3 +1,39 @@
 {% macro onsPassword(params) %}
-    {% include "components/password/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+    {% from "components/label/_macro.njk" import onsLabel %}
+    {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+    {% from "components/input/_macro.njk" import onsInput %}
+
+    {% call onsField({
+        "id": params.fieldId,
+        "classes": params.fieldClasses
+    }) %}
+        {{
+            onsLabel({
+                "for": params.id,
+                "text": params.label.text,
+                "description": params.label.description,
+                "classes": params.label.classes
+            })
+        }}
+        {{
+            onsCheckbox({
+                "id": params.id + "-toggle",
+                "classes": "js-password-toggle-wrap checkbox--toggle u-d-no",
+                "inputClasses": "js-password-toggle",
+                "name": "show-password",
+                "label": {
+                    "text": params.showPasswordText
+                }
+            })
+        }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": "password",
+                "classes": "u-mt-xs js-password",
+                "noField": true
+            })
+        }}
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/password/_template.njk b/src/components/password/_template.njk
deleted file mode 100644
index ef5296adfc..0000000000
--- a/src/components/password/_template.njk
+++ /dev/null
@@ -1,37 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-{% from "components/label/_macro.njk" import onsLabel %}
-{% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
-{% from "components/input/_macro.njk" import onsInput %}
-
-{% call onsField({
-    "id": params.fieldId,
-    "classes": params.fieldClasses
-}) %}
-    {{
-        onsLabel({
-            "for": params.id,
-            "text": params.label.text,
-            "description": params.label.description,
-            "classes": params.label.classes
-        })
-    }}
-    {{
-        onsCheckbox({
-            "id": params.id + "-toggle",
-            "classes": "js-password-toggle-wrap checkbox--toggle u-d-no",
-            "inputClasses": "js-password-toggle",
-            "name": "show-password",
-            "label": {
-                "text": params.showPasswordText
-            }
-        })
-    }}
-    {{
-        onsInput({
-            "id": params.id,
-            "type": "password",
-            "classes": "u-mt-xs js-password",
-            "noField": true
-        })
-    }}
-{% endcall %}
diff --git a/src/components/password/_test-template.njk b/src/components/password/_test-template.njk
new file mode 100644
index 0000000000..2edbdd513d
--- /dev/null
+++ b/src/components/password/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/password/_macro.njk" import onsPassword %}
+
+{{ onsPassword(params) }}
diff --git a/src/components/phase-banner/_macro.njk b/src/components/phase-banner/_macro.njk
index 3fa1dbc404..b28311ffb0 100644
--- a/src/components/phase-banner/_macro.njk
+++ b/src/components/phase-banner/_macro.njk
@@ -1,3 +1,14 @@
 {% macro onsPhaseBanner(params) %}
-    {% include "components/phase-banner/_template.njk" %}
+    <div class="phase-banner">
+        <div class="container">
+            <div class="grid grid--flex grid--gutterless grid--vertical-center grid--no-wrap">
+                <div class="grid__col col-auto u-flex-no-grow">
+                    <h3 class="phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
+                </div>
+                <div class="grid__col col-auto u-flex-shrink">
+                    <p class="phase-banner__desc u-fs-s u-mb-no">{{ params.html | safe }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endmacro %}
diff --git a/src/components/phase-banner/_template.njk b/src/components/phase-banner/_template.njk
deleted file mode 100644
index 17ae9def16..0000000000
--- a/src/components/phase-banner/_template.njk
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="phase-banner">
-    <div class="container">
-        <div class="grid grid--flex grid--gutterless grid--vertical-center grid--no-wrap">
-            <div class="grid__col col-auto u-flex-no-grow">
-                <h3 class="phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
-            </div>
-            <div class="grid__col col-auto u-flex-shrink">
-                <p class="phase-banner__desc u-fs-s u-mb-no">{{ params.html | safe }}</p>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/src/components/radios/_macro.njk b/src/components/radios/_macro.njk
index 8a8dbe9254..987086f5dc 100644
--- a/src/components/radios/_macro.njk
+++ b/src/components/radios/_macro.njk
@@ -1,3 +1,51 @@
 {% macro onsRadios(params) %}
-    {% include "components/radios/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+
+    {% call onsField({
+        "id": params.id,
+        "legend": params.legend,
+        "description": params.description,
+        "classes": params.classes,
+        "legendClasses": params.legendClasses,
+        "questionMode": params.questionMode
+    }) %}
+        <div class="field__items">
+            {% for radio in params.radios %}
+                <div class="field__item">
+                    <div class="radio">
+                        <input class="radio__input {{ radio.classes }}" name="{{ params.name }}" id="{{ radio.id }}" value="{{ radio.value }}" aria-labeledby="{{ params.id }}-label"{% if radio.checked %} checked{% endif %} type="radio"{% for attribute, value in radio.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+                        {# aria-hidden is used to prevent screen readers from being able to focus the individual elements within a label, and combined with aria-labeledby on the input to ensure the label is still read #}
+                        <label id="{{ params.id }}-label" aria-hidden="true"  class="radio__label {{ radio.label.classes }}" for="{{ radio.id }}">
+                            {{ radio.label.text | safe }}
+                            {% if radio.label.description %}
+                                <br>
+                                <span class="radio__description u-fs-s">{{ radio.label.description }}</span>
+                            {% endif %}
+                        </label>
+                        {% if radio.other %}
+                            <div class="radio__other">
+                                {% from "components/input/_macro.njk" import onsInput %}
+                                {{
+                                    onsInput({
+                                        "id": radio.other.id,
+                                        "name": radio.other.name,
+                                        "type": radio.other.type,
+                                        "classes": "input--w-auto " + radio.other.classes | default(''),
+                                        "attributes": radio.other.attributes,
+                                        "label": {
+                                            "text": radio.other.label.text,
+                                            "classes": 'u-fs-s--b'
+                                        }
+                                    })
+                                }}
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+                {% if not loop.last %}
+                    <br>
+                {% endif %}
+            {% endfor %}
+        </div>
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/radios/_template.njk b/src/components/radios/_template.njk
deleted file mode 100644
index cdcde49edc..0000000000
--- a/src/components/radios/_template.njk
+++ /dev/null
@@ -1,49 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-
-{% call onsField({
-    "id": params.id,
-    "legend": params.legend,
-    "description": params.description,
-    "classes": params.classes,
-    "legendClasses": params.legendClasses,
-    "questionMode": params.questionMode
-}) %}
-    <div class="field__items">
-        {% for radio in params.radios %}
-            <div class="field__item">
-                <div class="radio">
-                    <input class="radio__input {{ radio.classes }}" name="{{ params.name }}" id="{{ radio.id }}" value="{{ radio.value }}" aria-labeledby="{{ params.id }}-label"{% if radio.checked %} checked{% endif %} type="radio"{% for attribute, value in radio.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-                    {# aria-hidden is used to prevent screen readers from being able to focus the individual elements within a label, and combined with aria-labeledby on the input to ensure the label is still read #}
-                    <label id="{{ params.id }}-label" aria-hidden="true"  class="radio__label {{ radio.label.classes }}" for="{{ radio.id }}">
-                        {{ radio.label.text | safe }}
-                        {% if radio.label.description %}
-                            <br>
-                            <span class="radio__description u-fs-s">{{ radio.label.description }}</span>
-                        {% endif %}
-                    </label>
-                    {% if radio.other %}
-                        <div class="radio__other">
-                            {% from "components/input/_macro.njk" import onsInput %}
-                            {{
-                                onsInput({
-                                    "id": radio.other.id,
-                                    "name": radio.other.name,
-                                    "type": radio.other.type,
-                                    "classes": "input--w-auto " + radio.other.classes | default(''),
-                                    "attributes": radio.other.attributes,
-                                    "label": {
-                                        "text": radio.other.label.text,
-                                        "classes": 'u-fs-s--b'
-                                    }
-                                })
-                            }}
-                        </div>
-                    {% endif %}
-                </div>
-            </div>
-            {% if not loop.last %}
-                <br>
-            {% endif %}
-        {% endfor %}
-    </div>
-{% endcall %}
diff --git a/src/components/section-navigation/_macro.njk b/src/components/section-navigation/_macro.njk
index 8daeaf6154..a3a95964c4 100644
--- a/src/components/section-navigation/_macro.njk
+++ b/src/components/section-navigation/_macro.njk
@@ -1,3 +1,11 @@
 {% macro onsSectionNavigation(params) %}
-  {% include "components/section-navigation/_template.njk" %}
+  <nav class="section-nav" id="{{ params.id }}" aria-label="{{ params.ariaLabel }}">
+      <ul class="section-nav__list" aria-label="{{ params.ariaListLabel }}" role="menubar">
+        {% for item in params.items %}
+              <li class="section-nav__item {{ item.classes }}{{ ' section-nav__item--active' if (item.path == params.currentPath) or (item.path in params.currentPath) }}">
+                  <a href="{{ item.path }}" class="section-nav__link" role="menuitem">{{ item.title }}</a>
+              </li>
+        {% endfor %}
+      </ul>
+  </nav>
 {% endmacro %}
diff --git a/src/components/section-navigation/_template.njk b/src/components/section-navigation/_template.njk
deleted file mode 100644
index b2de3aba49..0000000000
--- a/src/components/section-navigation/_template.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-<nav class="section-nav" id="{{ params.id }}" aria-label="{{ params.ariaLabel }}">
-    <ul class="section-nav__list" aria-label="{{ params.ariaListLabel }}" role="menubar">
-       {% for item in params.items %}
-            <li class="section-nav__item {{ item.classes }}{{ ' section-nav__item--active' if (item.path == params.currentPath) or (item.path in params.currentPath) }}">
-                <a href="{{ item.path }}" class="section-nav__link" role="menuitem">{{ item.title }}</a>
-            </li>
-       {% endfor %}
-    </ul>
-</nav>
diff --git a/src/components/select/_macro.njk b/src/components/select/_macro.njk
index 930262527a..ff09c305a0 100644
--- a/src/components/select/_macro.njk
+++ b/src/components/select/_macro.njk
@@ -1,3 +1,42 @@
 {% macro onsSelect(params) %}
-    {% include "components/select/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+
+    {% set exclusiveClass = " js-exclusive-group" if params.mutuallyExclusive else "" %}
+
+    {% call onsField({
+        "id": params.fieldId,
+        "legend": params.label.text if params.mutuallyExclusive,
+        "description": params.label.description if params.mutuallyExclusive,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "classes": params.fieldClases,
+        "legendClasses": params.legendClasses,
+        "questionMode": params.questionMode
+    }) %}
+        {% if params.label and not params.mutuallyExclusive %}
+            {% from "components/label/_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 }}"
+            name="{{ params.name }}" 
+            class="input input--select {{ params.classes }}{{ exclusiveClass }}"
+            {% if params.value %} value="{{ params.value}}" {% endif %}
+            {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+            {% for option in params.options %}
+            <option value="{{ option.value | default(option.text) }}"
+                {% if option.selected %} selected {% endif %}
+                {% if option.disabled %} disabled {% endif %}
+                {% for attribute, value in option.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>   
+                {{ option.text }}
+            </option>   
+            {% endfor %}
+        </select>
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/select/_template.njk b/src/components/select/_template.njk
deleted file mode 100644
index 952ff5aeff..0000000000
--- a/src/components/select/_template.njk
+++ /dev/null
@@ -1,40 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-
-{% set exclusiveClass = " js-exclusive-group" if params.mutuallyExclusive else "" %}
-
-{% call onsField({
-    "id": params.fieldId,
-    "legend": params.label.text if params.mutuallyExclusive,
-    "description": params.label.description if params.mutuallyExclusive,
-    "mutuallyExclusive": params.mutuallyExclusive,
-    "classes": params.fieldClases,
-    "legendClasses": params.legendClasses,
-    "questionMode": params.questionMode
-}) %}
-    {% if params.label and not params.mutuallyExclusive %}
-        {% from "components/label/_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 }}"
-        name="{{ params.name }}" 
-        class="input input--select {{ params.classes }}{{ exclusiveClass }}"
-        {% if params.value %} value="{{ params.value}}" {% endif %}
-        {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-        {% for option in params.options %}
-        <option value="{{ option.value | default(option.text) }}"
-            {% if option.selected %} selected {% endif %}
-            {% if option.disabled %} disabled {% endif %}
-            {% for attribute, value in option.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>   
-            {{ option.text }}
-        </option>   
-        {% endfor %}
-    </select>
-{% endcall %}
diff --git a/src/components/select/_test-template.njk b/src/components/select/_test-template.njk
new file mode 100644
index 0000000000..18b038a66a
--- /dev/null
+++ b/src/components/select/_test-template.njk
@@ -0,0 +1,2 @@
+{% from "components/select/_macro.njk" import onsSelect %}
+{{ onsSelect(params) }}
diff --git a/src/components/status/_macro.njk b/src/components/status/_macro.njk
index 905f93f24b..8aff150489 100644
--- a/src/components/status/_macro.njk
+++ b/src/components/status/_macro.njk
@@ -1,3 +1,13 @@
 {% macro onsStatus(params) %}
-    {% include "components/status/_template.njk" %}
+    {% if params.type %}
+        {% set typeClass = ' status--' + params.type %}
+    {% else %}
+        {% set typeClass = ' status--info' %}
+    {% endif %}
+
+    {% if params.size == 'small' %}
+        {% set sizeClass = ' status--small' %}
+    {% endif %}
+
+    <span class="status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
 {% endmacro %}
diff --git a/src/components/status/_template.njk b/src/components/status/_template.njk
deleted file mode 100644
index 34cd5767c4..0000000000
--- a/src/components/status/_template.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-{% from "components/status/_macro.njk" import onsStatus %}
-
-{% if params.type %}
-    {% set typeClass = ' status--' + params.type %}
-{% else %}
-    {% set typeClass = ' status--info' %}
-{% endif %}
-
-{% if params.size == 'small' %}
-    {% set sizeClass = ' status--small' %}
-{% endif %}
-
-<span class="status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk
index 8876c9bb7c..12966759a5 100644
--- a/src/components/summary/_macro.njk
+++ b/src/components/summary/_macro.njk
@@ -1,3 +1,32 @@
 {% macro onsSummary(params) %}
-    {% include "components/summary/_template.njk" %}
+    <div class="summary">
+        {% if params.title %}
+            <h2 class="u-fs-m">{{ params.title }}</h2>
+        {% endif %}
+        <table class="summary__items">
+            {% for item in params.items %}
+                {% set itemClass = "" %}
+                {% if item.error %} {% set itemClass = " summary__item--error" %}{% endif %}
+                {% if item.total %} {% set itemClass = itemClass + " summary__item--total" %}{% endif %}
+                <tbody class="summary__item{{ itemClass }}">
+                    {% if item.title %}
+                        <tr class="summary__row">
+                            <th colspan="3" class="summary__item-title u-fs-r">{{ item.title }}</th>
+                        </tr>
+                    {% endif %}
+                    {% for question in item.questions %}
+                        <tr class="summary__row">
+                            <td class="summary__question">{{ question.question }}</td>
+                            <td {% if question.action == null %}colspan="2" {% endif %}class="summary__answer u-fs-r--b">{{ question.answer | safe }}</td>
+                            {% if question.action %}
+                                <td class="summary__action">
+                                    <a href="{{ question.action.url }}" class="summary__button"{% if question.action.ariaLabel %} aria-label="{{ question.action.ariaLabel }}"{% endif %}>{{ question.action.text }}</a>
+                                </td>
+                            {% endif %}
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            {% endfor %}
+        </table>
+    </div>
 {% endmacro %}
diff --git a/src/components/summary/_template.njk b/src/components/summary/_template.njk
deleted file mode 100644
index c256534ce4..0000000000
--- a/src/components/summary/_template.njk
+++ /dev/null
@@ -1,30 +0,0 @@
-<div class="summary">
-    {% if params.title %}
-        <h2 class="u-fs-m">{{ params.title }}</h2>
-    {% endif %}
-    <table class="summary__items">
-        {% for item in params.items %}
-            {% set itemClass = "" %}
-            {% if item.error %} {% set itemClass = " summary__item--error" %}{% endif %}
-            {% if item.total %} {% set itemClass = itemClass + " summary__item--total" %}{% endif %}
-            <tbody class="summary__item{{ itemClass }}">
-                {% if item.title %}
-                    <tr class="summary__row">
-                        <th colspan="3" class="summary__item-title u-fs-r">{{ item.title }}</th>
-                    </tr>
-                {% endif %}
-                {% for question in item.questions %}
-                    <tr class="summary__row">
-                        <td class="summary__question">{{ question.question }}</td>
-                        <td {% if question.action == null %}colspan="2" {% endif %}class="summary__answer u-fs-r--b">{{ question.answer | safe }}</td>
-                        {% if question.action %}
-                            <td class="summary__action">
-                                <a href="{{ question.action.url }}" class="summary__button"{% if question.action.ariaLabel %} aria-label="{{ question.action.ariaLabel }}"{% endif %}>{{ question.action.text }}</a>
-                            </td>
-                        {% endif %}
-                    </tr>
-                {% endfor %}
-            </tbody>
-        {% endfor %}
-    </table>
-</div>
diff --git a/src/components/table/_macro.njk b/src/components/table/_macro.njk
index d0826d6fa4..8f4d2b7dc5 100644
--- a/src/components/table/_macro.njk
+++ b/src/components/table/_macro.njk
@@ -1,3 +1,40 @@
 {% macro onsTable(params) %}
-    {% include "components/table/_template.njk" %}
+    {% if params.scrollable %}
+    <div class="table-scrollable table-scrollable--on">
+        <div class="table-scrollable__content" tabindex="0" role="region" aria-label="{{ params.caption }}. {{ params.aria_label }} ">
+    {% endif %}
+            <table class="table {{ params.table_class }}" {% if params.sortable %}data-aria-sort="{{ params.sort_by }}" data-aria-asc="{{ params.aria_asc }}" data-aria-desc="{{ params.aria_desc }}"{% endif %}>
+                {% if params.caption %}
+                <caption class="table__caption">{{ params.caption }}</caption>
+                {% endif %}
+                <thead class="table__head">
+                    <tr class="table__row">
+                        {% for th in params.ths %}
+                        <th scope="col" class="table__header {{ th.class }}"{% if th.aria_sort %} aria-sort="{{ th.aria_sort }}"{% endif %}>{{ th.value }}</th>
+                        {% endfor %}
+                    </tr>
+                </thead>
+                <tbody class="table__body">
+                    {% for tr in params.trs %}
+                    <tr class="table__row">
+                        {% for td in tr.tds %}
+                        <td role="cell" class="table__cell {{ td.class }}" {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.data_sort %} data-sort-value="{{ td.data_sort }}"{% endif %}>{{ td.value | safe }}</td>
+                        {% endfor %}
+                    </tr>
+                    {% endfor %}
+                </tbody>
+                {% if params.tfoot %}
+                <tfoot class="table__foot">
+                    <tr class="table__row">
+                        {% for tfootCell in params.tfoot %}
+                        <td role="cell" class="table__cell u-fs-s">{{ tfootCell.value }}</td>
+                        {% endfor %}
+                    </tr>
+                </tfoot>
+                {% endif %}
+            </table>
+        {% if params.scrollable %}
+        </div>
+    </div>
+    {% endif %}
 {% endmacro %}
diff --git a/src/components/table/_template.njk b/src/components/table/_template.njk
deleted file mode 100644
index 2dd219f868..0000000000
--- a/src/components/table/_template.njk
+++ /dev/null
@@ -1,38 +0,0 @@
-{% if params.scrollable %}
-<div class="table-scrollable table-scrollable--on">
-    <div class="table-scrollable__content" tabindex="0" role="region" aria-label="{{ params.caption }}. {{ params.aria_label }} ">
-{% endif %}
-        <table class="table {{ params.table_class }}" {% if params.sortable %}data-aria-sort="{{ params.sort_by }}" data-aria-asc="{{ params.aria_asc }}" data-aria-desc="{{ params.aria_desc }}"{% endif %}>
-            {% if params.caption %}
-            <caption class="table__caption">{{ params.caption }}</caption>
-            {% endif %}
-            <thead class="table__head">
-                <tr class="table__row">
-                    {% for th in params.ths %}
-                    <th scope="col" class="table__header {{ th.class }}"{% if th.aria_sort %} aria-sort="{{ th.aria_sort }}"{% endif %}>{{ th.value }}</th>
-                    {% endfor %}
-                </tr>
-            </thead>
-            <tbody class="table__body">
-                {% for tr in params.trs %}
-                <tr class="table__row">
-                    {% for td in tr.tds %}
-                    <td role="cell" class="table__cell {{ td.class }}" {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.data_sort %} data-sort-value="{{ td.data_sort }}"{% endif %}>{{ td.value | safe }}</td>
-                    {% endfor %}
-                </tr>
-                {% endfor %}
-            </tbody>
-            {% if params.tfoot %}
-            <tfoot class="table__foot">
-                <tr class="table__row">
-                    {% for tfootCell in params.tfoot %}
-                    <td role="cell" class="table__cell u-fs-s">{{ tfootCell.value }}</td>
-                    {% endfor %}
-                </tr>
-            </tfoot>
-            {% endif %}
-        </table>
-    {% if params.scrollable %}
-    </div>
-</div>
-{% endif %}
diff --git a/src/components/table/_test-template.njk b/src/components/table/_test-template.njk
new file mode 100644
index 0000000000..f206711255
--- /dev/null
+++ b/src/components/table/_test-template.njk
@@ -0,0 +1,2 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{ onsTable(params) }}
diff --git a/src/components/tabs/_macro.njk b/src/components/tabs/_macro.njk
index ec1b757258..62e48560a8 100644
--- a/src/components/tabs/_macro.njk
+++ b/src/components/tabs/_macro.njk
@@ -1,3 +1,15 @@
 {% macro onsTabs(params) %}
-    {% include "components/tabs/_template.njk" %}
+    <section role="region" class="tabs">
+        <h2 class="tabs__title u-fs-m u-vh">{{params.title}}</h2>
+        <ul class="tabs__list">
+            {% for tab in params.tabs %}
+                <li id="tabId{{loop.index}}Item" class="tab__list-item"><a href="#tabId{{loop.index}}" class="tab" data=ga="click" data-ga-category="tabs" data-ga-action="Show: {{tab.title}}" data-ga-label="Show: {{tab.title}}">{{tab.title}}</a></li>
+            {% endfor %}
+        </ul>
+        {% for tab in params.tabs %}
+            <section id="tabId{{loop.index}}" class="tabs__panel">
+                {{tab.content | safe}}
+            </section>  
+        {% endfor %}
+    </section>
 {% endmacro %}
diff --git a/src/components/tabs/_template.njk b/src/components/tabs/_template.njk
deleted file mode 100644
index ab8c36a72b..0000000000
--- a/src/components/tabs/_template.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-<section role="region" class="tabs">
-    <h2 class="tabs__title u-fs-m u-vh">{{params.title}}</h2>
-    <ul class="tabs__list">
-        {% for tab in params.tabs %}
-            <li id="tabId{{loop.index}}Item" class="tab__list-item"><a href="#tabId{{loop.index}}" class="tab" data=ga="click" data-ga-category="tabs" data-ga-action="Show: {{tab.title}}" data-ga-label="Show: {{tab.title}}">{{tab.title}}</a></li>
-        {% endfor %}
-    </ul>
-    {% for tab in params.tabs %}
-        <section id="tabId{{loop.index}}" class="tabs__panel">
-            {{tab.content | safe}}
-        </section>  
-    {% endfor %}
-</section>
diff --git a/src/components/tabs/_test-template.njk b/src/components/tabs/_test-template.njk
new file mode 100644
index 0000000000..ed066d6bfc
--- /dev/null
+++ b/src/components/tabs/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/tabs/_macro.njk" import onsTabs %}
+
+{{ onsTabs(params) }}
diff --git a/src/components/textarea/_macro.njk b/src/components/textarea/_macro.njk
index 4cb1691894..d94a538c6a 100644
--- a/src/components/textarea/_macro.njk
+++ b/src/components/textarea/_macro.njk
@@ -1,3 +1,44 @@
 {% macro onsTextarea(params) %}
-    {% include "components/textarea/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+
+    {% call onsField({
+        "id": params.fieldId,
+        "legend": params.label.text if params.mutuallyExclusive,
+        "description": params.label.description if params.mutuallyExclusive,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "classes": params.fieldClasses,
+        "legendClasses": params.legendClasses
+    }) %}
+        {% if params.mutuallyExclusive  %} 
+            {% set textareaExlusiveClass = " js-exclusive-group" %}
+        {% else %}
+            {% from "components/label/_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 }}"
+            class="input input--textarea {% if params.maxlength %} js-charlimit-input{% endif %}{{ textareaExlusiveClass }} {{ params.classes }}"
+            name="{{ params.name }}"
+            rows="{{ params.rows | default(8) }}"
+            {% if params.maxlength %}
+            maxlength="{{ params.maxlength }}"
+            data-char-limit-ref="{{ params.id }}-lim-remaining"
+            {% endif %}
+            {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}></textarea>
+        {% if params.maxlength %}
+            <div
+                id="{{ params.id }}-lim-remaining"
+                class="input__limit u-mt-xs u-fs-s--b u-d-no"
+                data-charcount-singular="{{ params.charCountSingular }}"
+                data-charcount-plural="{{ params.charCountPlural }}">
+            </div>
+        {% endif %}
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/textarea/_template.njk b/src/components/textarea/_template.njk
deleted file mode 100644
index 0d286de419..0000000000
--- a/src/components/textarea/_template.njk
+++ /dev/null
@@ -1,42 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-
-{% call onsField({
-    "id": params.fieldId,
-    "legend": params.label.text if params.mutuallyExclusive,
-    "description": params.label.description if params.mutuallyExclusive,
-    "mutuallyExclusive": params.mutuallyExclusive,
-    "classes": params.fieldClasses,
-    "legendClasses": params.legendClasses
-}) %}
-    {% if params.mutuallyExclusive  %} 
-        {% set textareaExlusiveClass = " js-exclusive-group" %}
-    {% else %}
-        {% from "components/label/_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 }}"
-        class="input input--textarea {% if params.maxlength %} js-charlimit-input{% endif %}{{ textareaExlusiveClass }} {{ params.classes }}"
-        name="{{ params.name }}"
-        rows="{{ params.rows | default(8) }}"
-        {% if params.maxlength %}
-        maxlength="{{ params.maxlength }}"
-        data-char-limit-ref="{{ params.id }}-lim-remaining"
-        {% endif %}
-        {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}></textarea>
-    {% if params.maxlength %}
-        <div
-            id="{{ params.id }}-lim-remaining"
-            class="input__limit u-mt-xs u-fs-s--b u-d-no"
-            data-charcount-singular="{{ params.charCountSingular }}"
-            data-charcount-plural="{{ params.charCountPlural }}">
-        </div>
-    {% endif %}
-{% endcall %}
diff --git a/src/components/textarea/_test-template.njk b/src/components/textarea/_test-template.njk
new file mode 100644
index 0000000000..e3bfc126ae
--- /dev/null
+++ b/src/components/textarea/_test-template.njk
@@ -0,0 +1,3 @@
+{% from "components/textarea/_macro.njk" import onsTextarea %}
+
+{{ onsTextarea(params) }}
diff --git a/src/components/upload/_macro.njk b/src/components/upload/_macro.njk
index 2c1fd84dac..915bf538c0 100644
--- a/src/components/upload/_macro.njk
+++ b/src/components/upload/_macro.njk
@@ -1,3 +1,28 @@
 {% macro onsUpload(params) %}
-    {% include "components/upload/_template.njk" %}
+    {% from "components/field/_macro.njk" import onsField %}
+    {% from "components/label/_macro.njk" import onsLabel %}
+    {% from "components/input/_macro.njk" import onsInput %}
+
+    {% call onsField({
+        "id": params.fieldId,
+        "classes": params.fieldClasses
+    }) %}
+        {{
+            onsLabel({
+                "for": params.id,
+                "text": params.label.text,
+                "description": params.label.description
+            })
+        }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": "file",
+                "classes": "input--upload",
+                "accept": params.accept,
+                "name": "file",
+                "noField": true
+            })
+        }}
+    {% endcall %}
 {% endmacro %}
diff --git a/src/components/upload/_template.njk b/src/components/upload/_template.njk
deleted file mode 100644
index 713378845e..0000000000
--- a/src/components/upload/_template.njk
+++ /dev/null
@@ -1,26 +0,0 @@
-{% from "components/field/_macro.njk" import onsField %}
-{% from "components/label/_macro.njk" import onsLabel %}
-{% from "components/input/_macro.njk" import onsInput %}
-
-{% call onsField({
-    "id": params.fieldId,
-    "classes": params.fieldClasses
-}) %}
-    {{
-        onsLabel({
-            "for": params.id,
-            "text": params.label.text,
-            "description": params.label.description
-        })
-    }}
-    {{
-        onsInput({
-            "id": params.id,
-            "type": "file",
-            "classes": "input--upload",
-            "accept": params.accept,
-            "name": "file",
-            "noField": true
-        })
-    }}
-{% endcall %}
diff --git a/src/tests/spec/collapsible/collapsible-accordion.spec.js b/src/tests/spec/collapsible/collapsible-accordion.spec.js
index 83b5e242bd..958e7267fc 100644
--- a/src/tests/spec/collapsible/collapsible-accordion.spec.js
+++ b/src/tests/spec/collapsible/collapsible-accordion.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/accordion/_template.njk';
+import template from 'components/accordion/_test-template.njk';
 import collapsible, { Collapsible } from 'components/details/collapsible';
 import CollapsibleGroup from 'components/details/collapsible.group';
 import eventMock from 'stubs/event.stub.spec';
diff --git a/src/tests/spec/collapsible/collapsible.spec.js b/src/tests/spec/collapsible/collapsible.spec.js
index 03853346e4..2765b2b597 100644
--- a/src/tests/spec/collapsible/collapsible.spec.js
+++ b/src/tests/spec/collapsible/collapsible.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/details/_template.njk';
+import template from 'components/details/_test-template.njk';
 import collapsible, { Collapsible } from 'components/details/collapsible';
 
 const params = {
diff --git a/src/tests/spec/feedback/feedback.spec.js b/src/tests/spec/feedback/feedback.spec.js
index 5eea2199ae..50c56630a3 100644
--- a/src/tests/spec/feedback/feedback.spec.js
+++ b/src/tests/spec/feedback/feedback.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/feedback/_template.njk';
+import template from 'components/feedback/_test-template.njk';
 import Feedback from 'components/feedback/feedback';
 
 import fetchMock from 'stubs/window.fetch.stub.spec';
diff --git a/src/tests/spec/header-navigation/header-navigation.spec.js b/src/tests/spec/header-navigation/header-navigation.spec.js
index fa6c0a9c7e..bb68950c25 100644
--- a/src/tests/spec/header-navigation/header-navigation.spec.js
+++ b/src/tests/spec/header-navigation/header-navigation.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/header/_template.njk';
+import template from 'components/header/_test-template.njk';
 
 const params = {
   toggleButton: {
diff --git a/src/tests/spec/language-selector/language.spec.js b/src/tests/spec/language-selector/language.spec.js
index 418e0f231e..f1dc7c834e 100644
--- a/src/tests/spec/language-selector/language.spec.js
+++ b/src/tests/spec/language-selector/language.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/language-selector/_template.njk';
+import template from 'components/language-selector/_test-template.njk';
 import LanguageSelector from 'components/language-selector/language';
 import eventMock from 'stubs/event.stub.spec';
 import { throttle } from 'throttle-typescript';
diff --git a/src/tests/spec/mutually-exclusive/mutually-exclusive-checkboxes.spec.js b/src/tests/spec/mutually-exclusive/mutually-exclusive-checkboxes.spec.js
index bbb8143071..23d6d2a2a1 100644
--- a/src/tests/spec/mutually-exclusive/mutually-exclusive-checkboxes.spec.js
+++ b/src/tests/spec/mutually-exclusive/mutually-exclusive-checkboxes.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/checkboxes/_template.njk';
+import template from 'components/checkboxes/_test-template.njk';
 import mutuallyExclusive from 'components/mutually-exclusive/mutually-exclusive';
 
 const params = {
diff --git a/src/tests/spec/mutually-exclusive/mutually-exclusive-date.spec.js b/src/tests/spec/mutually-exclusive/mutually-exclusive-date.spec.js
index 74080f3119..053c04a31f 100644
--- a/src/tests/spec/mutually-exclusive/mutually-exclusive-date.spec.js
+++ b/src/tests/spec/mutually-exclusive/mutually-exclusive-date.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/date-input/_template.njk';
+import template from 'components/date-input/_test-template.njk';
 import mutuallyExclusive from 'components/mutually-exclusive/mutually-exclusive';
 
 const params = {
diff --git a/src/tests/spec/mutually-exclusive/mutually-exclusive-email.spec.js b/src/tests/spec/mutually-exclusive/mutually-exclusive-email.spec.js
index 763f0fe2cb..f335cfd8c3 100644
--- a/src/tests/spec/mutually-exclusive/mutually-exclusive-email.spec.js
+++ b/src/tests/spec/mutually-exclusive/mutually-exclusive-email.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/input/_template.njk';
+import template from 'components/input/_test-template.njk';
 import mutuallyExclusive from 'components/mutually-exclusive/mutually-exclusive';
 
 const params = {
diff --git a/src/tests/spec/mutually-exclusive/mutually-exclusive-number.spec.js b/src/tests/spec/mutually-exclusive/mutually-exclusive-number.spec.js
index 2864181cb3..b490c061e0 100644
--- a/src/tests/spec/mutually-exclusive/mutually-exclusive-number.spec.js
+++ b/src/tests/spec/mutually-exclusive/mutually-exclusive-number.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/input/_template.njk';
+import template from 'components/input/_test-template.njk';
 import mutuallyExclusive from 'components/mutually-exclusive/mutually-exclusive';
 
 const params = {
diff --git a/src/tests/spec/mutually-exclusive/mutually-exclusive-select.spec.js b/src/tests/spec/mutually-exclusive/mutually-exclusive-select.spec.js
index 761058fadc..571bb2a558 100644
--- a/src/tests/spec/mutually-exclusive/mutually-exclusive-select.spec.js
+++ b/src/tests/spec/mutually-exclusive/mutually-exclusive-select.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/select/_template.njk';
+import template from 'components/select/_test-template.njk';
 import mutuallyExclusive from 'components/mutually-exclusive/mutually-exclusive';
 
 const params = {
diff --git a/src/tests/spec/mutually-exclusive/mutually-exclusive-textarea.spec.js b/src/tests/spec/mutually-exclusive/mutually-exclusive-textarea.spec.js
index 2c9c3a8030..ca6a19186f 100644
--- a/src/tests/spec/mutually-exclusive/mutually-exclusive-textarea.spec.js
+++ b/src/tests/spec/mutually-exclusive/mutually-exclusive-textarea.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/textarea/_template.njk';
+import template from 'components/textarea/_test-template.njk';
 import mutuallyExclusive from 'components/mutually-exclusive/mutually-exclusive';
 import characterLimit from 'components/textarea/character-limit';
 import { populateTextarea } from '../textarea/character-limit.spec';
diff --git a/src/tests/spec/password/password.spec.js b/src/tests/spec/password/password.spec.js
index 302b8780f8..be7eebd770 100644
--- a/src/tests/spec/password/password.spec.js
+++ b/src/tests/spec/password/password.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/password/_template.njk';
+import template from 'components/password/_test-template.njk';
 import password from 'components/password/password';
 
 const params = {
diff --git a/src/tests/spec/table/table-scrollable.spec.js b/src/tests/spec/table/table-scrollable.spec.js
index d44f1f3bf1..55117a022c 100644
--- a/src/tests/spec/table/table-scrollable.spec.js
+++ b/src/tests/spec/table/table-scrollable.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/table/_template.njk';
+import template from 'components/table/_test-template.njk';
 import tableScroll from 'components/table/scrollable-table';
 
 const params = {
diff --git a/src/tests/spec/table/table-sortable.spec.js b/src/tests/spec/table/table-sortable.spec.js
index 98cd3fc10b..57668a3ace 100644
--- a/src/tests/spec/table/table-sortable.spec.js
+++ b/src/tests/spec/table/table-sortable.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/table/_template.njk';
+import template from 'components/table/_test-template.njk';
 import tableSorter from 'components/table/sortable-table';
 
 const params = {
diff --git a/src/tests/spec/tabs/tabs.spec.js b/src/tests/spec/tabs/tabs.spec.js
index 88f19a6ac6..2e22be0b4e 100644
--- a/src/tests/spec/tabs/tabs.spec.js
+++ b/src/tests/spec/tabs/tabs.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/tabs/_template.njk';
+import template from 'components/tabs/_test-template.njk';
 import matchMediaDesktopMock from 'stubs/matchMediaDesktop.stub.spec';
 import matchMediaMobileMock from 'stubs/matchMediaMobile.stub.spec';
 import eventMock from 'stubs/event.stub.spec';
diff --git a/src/tests/spec/textarea/character-limit.spec.js b/src/tests/spec/textarea/character-limit.spec.js
index 87fea4eca3..f84a72d86d 100644
--- a/src/tests/spec/textarea/character-limit.spec.js
+++ b/src/tests/spec/textarea/character-limit.spec.js
@@ -1,5 +1,5 @@
 import { awaitPolyfills } from 'js/polyfills/await-polyfills';
-import template from 'components/textarea/_template.njk';
+import template from 'components/textarea/_test-template.njk';
 import charLimit from 'components/textarea/character-limit';
 
 const params = {
diff --git a/src/views/partials/example/_macro.njk b/src/views/partials/example/_macro.njk
index b363ddd908..c873b6f9f3 100644
--- a/src/views/partials/example/_macro.njk
+++ b/src/views/partials/example/_macro.njk
@@ -1,4 +1,67 @@
 {% macro patternlibExample(params) %}
   {% set params = helpers.generateExampleParams(params, helpers.addDependency) %}
-  {% include "./_template.njk" %}
+  <div class="patternlib-example js-example">
+    <div class="patternlib-example__frame">
+        <iframe class="patternlib-example__iframe" frameborder="0" scrolling="auto" src="{{ params.link }}" style="background-color: {{ params.backgroundColor | default ('#fff') }}"></iframe>
+    </div>
+    <div class="patternlib-example__source">
+        <input id="{{ params.name }}-html" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example" {% if params.openTab == "html" %} checked {% endif %}>
+        {% if params.raw %}
+            <input id="{{ params.name }}-nunjucks" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example" {% if params.openTab == "nunjucks" %} checked {% endif %}>
+        {% endif %}
+        {% if params.template %}
+            <input id="{{ params.name }}-template" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example" {% if params.openTab == "template" %} checked {% endif %}>
+        {% endif %}
+        {% if params.scss %}
+            <input id="{{ params.name }}-scss" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example"{% if params.openTab == "scss" %} checked {% endif %}>
+        {% endif %}
+        <div class="patternlib-example__tabs">
+            <a href="{{ params.link }}" target="_blank" class="patternlib-example__link u-fs-s">Open this example in a new window</a>  
+            <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-html">HTML</label>
+            {% if params.raw %}
+                <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-nunjucks">Nunjucks</label>
+            {% endif %}
+            {% if params.template %}
+                <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-template">Nunjucks Template</label>
+            {% endif %}
+            {% if params.scss %}
+                <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-scss">SCSS</label>
+            {% endif %}
+        </div>
+        <div class="patternlib-example__panels">  
+            <div class="patternlib-example__panel">
+                <pre class="patternlib-example__pre">
+                    <code class="patternlib-example__code html">{{ params.html }}</code>
+                </pre>
+            </div>
+            {%- if params.raw -%}
+            <div class="patternlib-example__panel">
+                {% if params.options %}
+                    <details class="macro-options">
+                        <summary class="macro-options__summary">Nunjucks macro options</summary>
+                        <div class="macro-options__content">{{ params.options | safe }}</div>
+                    </details>
+                {% endif %}
+                <pre class="patternlib-example__pre">
+                    <code class="patternlib-example__code js">{{ params.raw }}</code>
+                </pre>
+            </div>
+            {%- endif -%}
+            {%- if params.template -%}
+                <div class="patternlib-example__panel">
+                    <pre class="patternlib-example__pre">
+                        <code class="patternlib-example__code html">{{ params.template }}</code>
+                    </pre>
+                </div>
+            {%- endif -%}
+            {%- if params.scss -%}
+                <div class="patternlib-example__panel">
+                    <pre class="patternlib-example__pre">
+                        <code class="patternlib-example__code scss">{{ params.scss }}</code>
+                    </pre>
+                </div>
+            {%- endif -%}
+        </div>
+    </div>
+  </div>
 {% endmacro %}
diff --git a/src/views/partials/example/_template.njk b/src/views/partials/example/_template.njk
deleted file mode 100644
index 983a582291..0000000000
--- a/src/views/partials/example/_template.njk
+++ /dev/null
@@ -1,64 +0,0 @@
-<div class="patternlib-example js-example">
-    <div class="patternlib-example__frame">
-        <iframe class="patternlib-example__iframe" frameborder="0" scrolling="auto" src="{{ params.link }}" style="background-color: {{ params.backgroundColor | default ('#fff') }}"></iframe>
-    </div>
-    <div class="patternlib-example__source">
-        <input id="{{ params.name }}-html" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example" {% if params.openTab == "html" %} checked {% endif %}>
-        {% if params.raw %}
-            <input id="{{ params.name }}-nunjucks" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example" {% if params.openTab == "nunjucks" %} checked {% endif %}>
-        {% endif %}
-        {% if params.template %}
-            <input id="{{ params.name }}-template" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example" {% if params.openTab == "template" %} checked {% endif %}>
-        {% endif %}
-        {% if params.scss %}
-            <input id="{{ params.name }}-scss" type="radio" class="patternlib-example__radio js-example-radio" name="{{ params.name }}-example"{% if params.openTab == "scss" %} checked {% endif %}>
-        {% endif %}
-        <div class="patternlib-example__tabs">
-            <a href="{{ params.link }}" target="_blank" class="patternlib-example__link u-fs-s">Open this example in a new window</a>  
-            <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-html">HTML</label>
-            {% if params.raw %}
-                <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-nunjucks">Nunjucks</label>
-            {% endif %}
-            {% if params.template %}
-                <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-template">Nunjucks Template</label>
-            {% endif %}
-            {% if params.scss %}
-                <label class="patternlib-example__tab u-fs-r--b js-example-tab" for="{{ params.name }}-scss">SCSS</label>
-            {% endif %}
-        </div>
-        <div class="patternlib-example__panels">  
-            <div class="patternlib-example__panel">
-                <pre class="patternlib-example__pre">
-                    <code class="patternlib-example__code html">{{ params.html }}</code>
-                </pre>
-            </div>
-            {%- if params.raw -%}
-            <div class="patternlib-example__panel">
-                {% if params.options %}
-                    <details class="macro-options">
-                        <summary class="macro-options__summary">Nunjucks macro options</summary>
-                        <div class="macro-options__content">{{ params.options | safe }}</div>
-                    </details>
-                {% endif %}
-                <pre class="patternlib-example__pre">
-                    <code class="patternlib-example__code js">{{ params.raw }}</code>
-                </pre>
-            </div>
-            {%- endif -%}
-            {%- if params.template -%}
-                <div class="patternlib-example__panel">
-                    <pre class="patternlib-example__pre">
-                        <code class="patternlib-example__code html">{{ params.template }}</code>
-                    </pre>
-                </div>
-            {%- endif -%}
-            {%- if params.scss -%}
-                <div class="patternlib-example__panel">
-                    <pre class="patternlib-example__pre">
-                        <code class="patternlib-example__code scss">{{ params.scss }}</code>
-                    </pre>
-                </div>
-            {%- endif -%}
-        </div>
-    </div>
-</div>
diff --git a/src/views/partials/sub-navigation/_macro.njk b/src/views/partials/sub-navigation/_macro.njk
index e9cb6f8392..c20534820f 100644
--- a/src/views/partials/sub-navigation/_macro.njk
+++ b/src/views/partials/sub-navigation/_macro.njk
@@ -1,3 +1,20 @@
 {% macro patternlibSubNavigation(params) %}
-  {% include "./_template.njk" %}
+  <nav class="patternlib-subnav" aria-label="{{ params.ariaLabel }}">
+      <ul class="patternlib-subnav__list" aria-label="{{ params.ariaListLabel }}" role="menubar">
+        {% for item in params.items %}
+              <li class="patternlib-subnav__item {{ ' patternlib-subnav__item--active' if (item.path == params.currentPath) or (item.path in params.currentPath) }}">
+                  <a href="{{ item.path }}" class="patternlib-subnav__link" role="menuitem">{{ item.title }}</a>
+                  {% if item.anchors %}
+                      <ul class="patternlib-subnav__sub-items">
+                          {% for anchor in item.anchors %}
+                              <li class="patternlib-subnav__item">
+                                  <a href="{{ anchor.path }}" class="patternlib-subnav__link" role="menuitem">{{ anchor.title }}</a>
+                              </li>
+                          {% endfor %}
+                      </ul>
+                  {% endif %}
+              </li>
+        {% endfor %}
+      </ul>
+  </nav>
 {% endmacro %}
diff --git a/src/views/partials/sub-navigation/_template.njk b/src/views/partials/sub-navigation/_template.njk
deleted file mode 100644
index dece818a57..0000000000
--- a/src/views/partials/sub-navigation/_template.njk
+++ /dev/null
@@ -1,18 +0,0 @@
-<nav class="patternlib-subnav" aria-label="{{ params.ariaLabel }}">
-    <ul class="patternlib-subnav__list" aria-label="{{ params.ariaListLabel }}" role="menubar">
-       {% for item in params.items %}
-            <li class="patternlib-subnav__item {{ ' patternlib-subnav__item--active' if (item.path == params.currentPath) or (item.path in params.currentPath) }}">
-                <a href="{{ item.path }}" class="patternlib-subnav__link" role="menuitem">{{ item.title }}</a>
-                {% if item.anchors %}
-                    <ul class="patternlib-subnav__sub-items">
-                        {% for anchor in item.anchors %}
-                            <li class="patternlib-subnav__item">
-                                <a href="{{ anchor.path }}" class="patternlib-subnav__link" role="menuitem">{{ anchor.title }}</a>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                {% endif %}
-            </li>
-       {% endfor %}
-    </ul>
-</nav>