From 35a889e8d991798b4afc02a116ee9826a132c303 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Tue, 2 Apr 2019 11:38:36 +0100
Subject: [PATCH 01/10] Use Twig macros rather than including templates

---
 source/_patterns/00-atoms/_attributes.twig    | 20 +++++++++++-------
 source/_patterns/00-atoms/_includes.twig      | 21 +++++++++++++++++++
 source/_patterns/00-atoms/_text.twig          | 17 ---------------
 .../00-atoms/block/heading/heading.twig       |  7 +++++--
 .../00-atoms/block/paragraph/paragraph.twig   |  7 +++++--
 .../_patterns/00-atoms/inline/bold/bold.twig  |  7 +++++--
 .../00-atoms/inline/italic/italic.twig        |  7 +++++--
 .../_patterns/00-atoms/inline/link/link.twig  |  9 +++++---
 source/_patterns/00-atoms/inline/sub/sub.twig |  7 +++++--
 source/_patterns/00-atoms/inline/sup/sup.twig |  7 +++++--
 source/_patterns/00-atoms/text.yaml           |  1 -
 .../content-meta/content-meta.twig            | 10 +++++----
 .../01-molecules/section/section.twig         | 11 +++++++---
 .../01-molecules/tag-list/tag-list.twig       | 12 ++++++++---
 .../content-header/content-header.twig        |  4 +++-
 .../02-organisms/item-tags/item-tags.twig     |  4 +++-
 .../content-grid/content-grid.twig            | 11 +++++++---
 .../03-templates/page-grid/page-grid.twig     |  4 +++-
 18 files changed, 109 insertions(+), 57 deletions(-)
 create mode 100644 source/_patterns/00-atoms/_includes.twig
 delete mode 100644 source/_patterns/00-atoms/_text.twig
 delete mode 100644 source/_patterns/00-atoms/text.yaml

diff --git a/source/_patterns/00-atoms/_attributes.twig b/source/_patterns/00-atoms/_attributes.twig
index b673abfb..8aa75ce8 100644
--- a/source/_patterns/00-atoms/_attributes.twig
+++ b/source/_patterns/00-atoms/_attributes.twig
@@ -1,11 +1,15 @@
-{%- for name, value in attributes|default({}) if value is not same as(false) -%}
+{% macro attributes(attributes) %}
 
-  {{- ' ' ~ name -}}
+  {%- for name, value in attributes|default({}) if value is not same as(false) -%}
 
-  {%- if value is iterable -%}
-    ="{{ value|join(' ') }}"
-  {%- elseif value is not same as(true) -%}
-    ="{{ value }}"
-  {%- endif -%}
+    {{- ' ' ~ name -}}
 
-{%- endfor -%}
+    {%- if value is iterable -%}
+      ="{{ value|join(' ') }}"
+    {%- elseif value is not same as(true) -%}
+      ="{{ value }}"
+    {%- endif -%}
+
+  {%- endfor -%}
+
+{% endmacro attributes %}
diff --git a/source/_patterns/00-atoms/_includes.twig b/source/_patterns/00-atoms/_includes.twig
new file mode 100644
index 00000000..acb3d41d
--- /dev/null
+++ b/source/_patterns/00-atoms/_includes.twig
@@ -0,0 +1,21 @@
+{% macro include(includes) %}
+
+  {%- if includes is iterable -%}
+
+    {%- for include in includes -%}
+
+      {%- if include.template is defined -%}
+        {%- include include.template with include.arguments|default({}) only -%}
+      {%- else -%}
+        {{- include -}}
+      {%- endif -%}
+
+    {%- endfor -%}
+
+  {%- else -%}
+
+    {{- includes -}}
+
+  {%- endif -%}
+
+{% endmacro include %}
diff --git a/source/_patterns/00-atoms/_text.twig b/source/_patterns/00-atoms/_text.twig
deleted file mode 100644
index c87ac139..00000000
--- a/source/_patterns/00-atoms/_text.twig
+++ /dev/null
@@ -1,17 +0,0 @@
-{%- if nodes is iterable -%}
-
-  {%- for node in nodes -%}
-
-    {%- if node.template is defined -%}
-      {%- include node.template with node.arguments only -%}
-    {%- else -%}
-      {{- node -}}
-    {%- endif -%}
-
-  {%- endfor -%}
-
-{%- else -%}
-
-  {{- nodes -}}
-
-{%- endif -%}
diff --git a/source/_patterns/00-atoms/block/heading/heading.twig b/source/_patterns/00-atoms/block/heading/heading.twig
index 0d4b1a21..1f7dde53 100644
--- a/source/_patterns/00-atoms/block/heading/heading.twig
+++ b/source/_patterns/00-atoms/block/heading/heading.twig
@@ -1,5 +1,8 @@
-<h{{ level|default(1) }} {%- include 'atoms-attributes' %}>
+{%- from 'atoms-attributes' import attributes -%}
+{%- from 'atoms-includes' import include -%}
 
-  {%- include 'atoms-text' with {nodes: text} only -%}
+<h{{ level|default(1) }} {{- attributes(attributes|default({})) }}>
+
+  {{- include(text) -}}
 
 </h{{ level|default(1) }}>
diff --git a/source/_patterns/00-atoms/block/paragraph/paragraph.twig b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
index f70acfba..7f71bda8 100644
--- a/source/_patterns/00-atoms/block/paragraph/paragraph.twig
+++ b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
@@ -1,7 +1,10 @@
+{%- from 'atoms-attributes' import attributes -%}
+{%- from 'atoms-includes' import include -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
 
-<p {%- include 'atoms-attributes' -%}>
+<p {{- attributes(attributes) }}>
 
-  {%- include 'atoms-text' with {nodes: text} -%}
+  {{ include(text) }}
 
 </p>
diff --git a/source/_patterns/00-atoms/inline/bold/bold.twig b/source/_patterns/00-atoms/inline/bold/bold.twig
index f6d6bec1..00a2aea5 100644
--- a/source/_patterns/00-atoms/inline/bold/bold.twig
+++ b/source/_patterns/00-atoms/inline/bold/bold.twig
@@ -1,8 +1,11 @@
+{%- from 'atoms-attributes' import attributes -%}
+{%- from 'atoms-includes' import include -%}
+
 {% spaceless %}
 
-  <b {%- include 'atoms-attributes' %}>
+  <b {{- attributes(attributes|default({})) }}>
 
-    {%- include 'atoms-text' with {nodes: text} only -%}
+    {{- include(text) -}}
 
   </b>
 
diff --git a/source/_patterns/00-atoms/inline/italic/italic.twig b/source/_patterns/00-atoms/inline/italic/italic.twig
index 64416ecd..91d06fe6 100644
--- a/source/_patterns/00-atoms/inline/italic/italic.twig
+++ b/source/_patterns/00-atoms/inline/italic/italic.twig
@@ -1,8 +1,11 @@
+{%- from 'atoms-attributes' import attributes -%}
+{%- from 'atoms-includes' import include -%}
+
 {% spaceless %}
 
-  <i {%- include 'atoms-attributes' %}>
+  <i {{- attributes(attributes|default({})) }}>
 
-    {%- include 'atoms-text' with {nodes: text} only -%}
+    {{- include(text) -}}
 
   </i>
 
diff --git a/source/_patterns/00-atoms/inline/link/link.twig b/source/_patterns/00-atoms/inline/link/link.twig
index aa203e67..adb0421a 100644
--- a/source/_patterns/00-atoms/inline/link/link.twig
+++ b/source/_patterns/00-atoms/inline/link/link.twig
@@ -1,11 +1,14 @@
+{%- from 'atoms-attributes' import attributes -%}
+{%- from 'atoms-includes' import include -%}
+
 {% spaceless %}
 
   {%- if attributes|default({}).href is defined -%}
-    <a {%- include 'atoms-attributes' %}>{%- include 'atoms-text' with {nodes: text} only -%}</a>
+    <a {{- attributes(attributes|default({})) }}>{{- include(text) -}}</a>
   {%- elseif attributes|default({})|length -%}
-    <span {%- include 'atoms-attributes' %}>{%- include 'atoms-text' with {nodes: text} only -%}</span>
+    <span {{- attributes(attributes|default({})) }}>{{- include(text) -}}</span>
   {%- else -%}
-    {%- include 'atoms-text' with {nodes: text} only -%}
+    {{- include(text) -}}
   {%- endif -%}
 
 {% endspaceless %}
diff --git a/source/_patterns/00-atoms/inline/sub/sub.twig b/source/_patterns/00-atoms/inline/sub/sub.twig
index ed64afa3..f8e368bd 100644
--- a/source/_patterns/00-atoms/inline/sub/sub.twig
+++ b/source/_patterns/00-atoms/inline/sub/sub.twig
@@ -1,8 +1,11 @@
+{%- from 'atoms-attributes' import attributes -%}
+{%- from 'atoms-includes' import include -%}
+
 {% spaceless %}
 
-  <sub {%- include 'atoms-attributes' %}>
+  <sub {{- attributes(attributes|default({})) }}>
 
-    {%- include 'atoms-text' with {nodes: text} only -%}
+    {{- include(text) -}}
 
   </sub>
 
diff --git a/source/_patterns/00-atoms/inline/sup/sup.twig b/source/_patterns/00-atoms/inline/sup/sup.twig
index 227c6dfa..a1aea049 100644
--- a/source/_patterns/00-atoms/inline/sup/sup.twig
+++ b/source/_patterns/00-atoms/inline/sup/sup.twig
@@ -1,8 +1,11 @@
+{%- from 'atoms-attributes' import attributes -%}
+{%- from 'atoms-includes' import include -%}
+
 {% spaceless %}
 
-  <sup {%- include 'atoms-attributes' %}>
+  <sup {{- attributes(attributes|default({})) }}>
 
-    {%- include 'atoms-text' with {nodes: text} only -%}
+    {{- include(text) -}}
 
   </sup>
 
diff --git a/source/_patterns/00-atoms/text.yaml b/source/_patterns/00-atoms/text.yaml
deleted file mode 100644
index 0b644f05..00000000
--- a/source/_patterns/00-atoms/text.yaml
+++ /dev/null
@@ -1 +0,0 @@
-nodes: Fake value
diff --git a/source/_patterns/01-molecules/content-meta/content-meta.twig b/source/_patterns/01-molecules/content-meta/content-meta.twig
index 33f78b45..df6f180d 100644
--- a/source/_patterns/01-molecules/content-meta/content-meta.twig
+++ b/source/_patterns/01-molecules/content-meta/content-meta.twig
@@ -1,16 +1,18 @@
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta']) }) -%}
+{%- from 'atoms-attributes' import attributes -%}
 
-<ul {%- include('atoms-attributes') -%}>
+{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta']) }) -%}
 
+<ul {{- attributes(attributes|default({})) }}>
   {%- for item in items -%}
 
     {%- with item only -%}
       {%- block item -%}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
+        {%- from 'atoms-attributes' import attributes -%}
 
-        <li {%- include('atoms-attributes') -%}>
+        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
 
+        <li {{- attributes(attributes|default({})) }}>
           {%- with content only -%}
             {%- block content -%}
 
diff --git a/source/_patterns/01-molecules/section/section.twig b/source/_patterns/01-molecules/section/section.twig
index 6ed5b944..ecfc2745 100644
--- a/source/_patterns/01-molecules/section/section.twig
+++ b/source/_patterns/01-molecules/section/section.twig
@@ -1,6 +1,8 @@
+{%- from 'atoms-attributes' import attributes -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section']) }) -%}
 
-<section {%- include 'atoms-attributes' -%}>
+<section {{- attributes(attributes|default({})) }}>
 
   {%- with heading|default({}) only -%}
 
@@ -23,10 +25,13 @@
 
     {%- block content -%}
 
+      {%- from 'atoms-attributes' import attributes -%}
+      {%- from 'atoms-includes' import include -%}
+
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section__body']) }) -%}
 
-      <div {%- include 'atoms-attributes' -%}>
-        {%- include 'atoms-text' with {nodes: content} -%}
+      <div {{- attributes(attributes|default({})) }}>
+        {{- include(content) -}}
       </div>
 
     {%- endblock -%}
diff --git a/source/_patterns/01-molecules/tag-list/tag-list.twig b/source/_patterns/01-molecules/tag-list/tag-list.twig
index 573877b9..c81d7b8c 100644
--- a/source/_patterns/01-molecules/tag-list/tag-list.twig
+++ b/source/_patterns/01-molecules/tag-list/tag-list.twig
@@ -1,6 +1,8 @@
+{%- from 'atoms-attributes' import attributes -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list']) }) -%}
 
-<div {%- include('atoms-attributes') -%}>
+<div {{- attributes(attributes|default({})) }}>
 
   {%- with title|default({}) only -%}
     {%- block title -%}
@@ -18,22 +20,26 @@
   {%- with list only -%}
     {%- block list -%}
 
+      {%- from 'atoms-attributes' import attributes -%}
+
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__list']) }) -%}
 
       {%- if singleLine|default(false) -%}
         {%- set attributes = attributes|merge({class: attributes.class|merge(['tag-list__list--single-line']) }) -%}
       {%- endif -%}
 
-      <ul {%- include('atoms-attributes') -%}>
+      <ul {{- attributes(attributes|default({})) }}>
 
         {%- for item in items -%}
 
           {%- with item only -%}
             {%- block item -%}
 
+              {%- from 'atoms-attributes' import attributes -%}
+
               {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__item']) }) -%}
 
-              <li {%- include('atoms-attributes') -%}>
+              <li {{- attributes(attributes|default({})) }}>
 
                 {%- with content only -%}
                   {%- block content -%}
diff --git a/source/_patterns/02-organisms/content-header/content-header.twig b/source/_patterns/02-organisms/content-header/content-header.twig
index db181687..e45f10d7 100644
--- a/source/_patterns/02-organisms/content-header/content-header.twig
+++ b/source/_patterns/02-organisms/content-header/content-header.twig
@@ -1,6 +1,8 @@
+{%- from 'atoms-attributes' import attributes -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-header']) }) -%}
 
-<header {%- include 'atoms-attributes' %}>
+<header {{- attributes(attributes|default({})) }}>
 
   {%- block body -%}
 
diff --git a/source/_patterns/02-organisms/item-tags/item-tags.twig b/source/_patterns/02-organisms/item-tags/item-tags.twig
index 741db1be..3359ec14 100644
--- a/source/_patterns/02-organisms/item-tags/item-tags.twig
+++ b/source/_patterns/02-organisms/item-tags/item-tags.twig
@@ -1,6 +1,8 @@
+{%- from 'atoms-attributes' import attributes -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['item-tags']) }) -%}
 
-<div {%- include('atoms-attributes') -%}>
+<div {{- attributes(attributes|default({})) }}>
 
   {%- block body -%}
 
diff --git a/source/_patterns/03-templates/content-grid/content-grid.twig b/source/_patterns/03-templates/content-grid/content-grid.twig
index ff4bb3fb..2909b4c8 100644
--- a/source/_patterns/03-templates/content-grid/content-grid.twig
+++ b/source/_patterns/03-templates/content-grid/content-grid.twig
@@ -1,3 +1,5 @@
+{%- from 'atoms-attributes' import attributes -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-grid']) }) -%}
 
 {%- set hasSecondary = false -%}
@@ -9,7 +11,7 @@
   {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid--has-secondary']) }) -%}
 {%- endif -%}
 
-<{{ element|default('div') }} {%- include 'atoms-attributes' %}>
+<{{ element|default('div') }} {{- attributes(attributes|default({})) }}>
 
   {%- for area in content -%}
     {%- with area only -%}
@@ -22,10 +24,13 @@
 
           {%- if content|default([])|length -%}
 
+            {%- from 'atoms-attributes' import attributes -%}
+            {%- from 'atoms-includes' import include -%}
+
             {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid__item--' ~ area]) }) -%}
 
-            <div {%- include 'atoms-attributes' %}>
-              {%- include 'atoms-text' with {nodes: content} -%}
+            <div {{- attributes(attributes|default({})) }}>
+              {{- include(content) -}}
             </div>
 
           {%- endif -%}
diff --git a/source/_patterns/03-templates/page-grid/page-grid.twig b/source/_patterns/03-templates/page-grid/page-grid.twig
index fc75adba..61d045dc 100644
--- a/source/_patterns/03-templates/page-grid/page-grid.twig
+++ b/source/_patterns/03-templates/page-grid/page-grid.twig
@@ -1,6 +1,8 @@
+{%- from 'atoms-attributes' import attributes -%}
+
 {% set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['page-grid']) }) -%}
 
-<div {%- include 'atoms-attributes' %}>
+<div {{- attributes(attributes|default({})) }}>
 
   {%- with start|default({}) only -%}
     {%- block start -%}

From 87c080d0190fd7f3af57b2c0d1acd87c659a9bc3 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Tue, 2 Apr 2019 15:44:16 +0100
Subject: [PATCH 02/10] Spacing fix

---
 source/_patterns/00-atoms/block/paragraph/paragraph.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/_patterns/00-atoms/block/paragraph/paragraph.twig b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
index 7f71bda8..5fe4c7d9 100644
--- a/source/_patterns/00-atoms/block/paragraph/paragraph.twig
+++ b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
@@ -5,6 +5,6 @@
 
 <p {{- attributes(attributes) }}>
 
-  {{ include(text) }}
+  {{- include(text) -}}
 
 </p>

From f82d27035d5b9001cc8f0eb81362c72fd668417a Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Tue, 2 Apr 2019 16:01:48 +0100
Subject: [PATCH 03/10] Combine, and remove some redundant default filters

---
 source/_patterns/00-atoms/_attributes.twig    | 15 --------
 source/_patterns/00-atoms/_html.twig          | 37 +++++++++++++++++++
 source/_patterns/00-atoms/_includes.twig      | 21 -----------
 .../00-atoms/block/heading/heading.twig       |  7 ++--
 .../00-atoms/block/paragraph/paragraph.twig   |  7 ++--
 .../_patterns/00-atoms/inline/bold/bold.twig  |  7 ++--
 .../00-atoms/inline/italic/italic.twig        |  7 ++--
 .../_patterns/00-atoms/inline/link/link.twig  |  9 ++---
 source/_patterns/00-atoms/inline/sub/sub.twig |  7 ++--
 source/_patterns/00-atoms/inline/sup/sup.twig |  7 ++--
 .../content-meta/content-meta.twig            |  8 ++--
 .../01-molecules/section/section.twig         | 11 +++---
 .../01-molecules/tag-list/tag-list.twig       | 12 +++---
 .../content-header/content-header.twig        |  4 +-
 .../02-organisms/item-tags/item-tags.twig     |  4 +-
 .../content-grid/content-grid.twig            | 11 +++---
 .../03-templates/page-grid/page-grid.twig     |  4 +-
 17 files changed, 85 insertions(+), 93 deletions(-)
 delete mode 100644 source/_patterns/00-atoms/_attributes.twig
 create mode 100644 source/_patterns/00-atoms/_html.twig
 delete mode 100644 source/_patterns/00-atoms/_includes.twig

diff --git a/source/_patterns/00-atoms/_attributes.twig b/source/_patterns/00-atoms/_attributes.twig
deleted file mode 100644
index 8aa75ce8..00000000
--- a/source/_patterns/00-atoms/_attributes.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-{% macro attributes(attributes) %}
-
-  {%- for name, value in attributes|default({}) if value is not same as(false) -%}
-
-    {{- ' ' ~ name -}}
-
-    {%- if value is iterable -%}
-      ="{{ value|join(' ') }}"
-    {%- elseif value is not same as(true) -%}
-      ="{{ value }}"
-    {%- endif -%}
-
-  {%- endfor -%}
-
-{% endmacro attributes %}
diff --git a/source/_patterns/00-atoms/_html.twig b/source/_patterns/00-atoms/_html.twig
new file mode 100644
index 00000000..89a82bff
--- /dev/null
+++ b/source/_patterns/00-atoms/_html.twig
@@ -0,0 +1,37 @@
+{% macro content(content) %}
+
+  {% import _self as html %}
+
+  {%- if content.template is defined -%}
+
+    {%- include content.template with content.arguments|default({}) only -%}
+
+  {%- elseif content is iterable -%}
+
+    {%- for node in content -%}
+      {{- html.content(node) -}}
+    {%- endfor -%}
+
+  {%- else -%}
+
+    {{- content -}}
+
+  {%- endif -%}
+
+{% endmacro content %}
+
+{% macro attributes(attributes) %}
+
+  {%- for name, value in attributes|default({}) if value is not same as(false) -%}
+
+    {{- ' ' ~ name -}}
+
+    {%- if value is iterable -%}
+      ="{{ value|join(' ') }}"
+    {%- elseif value is not same as(true) -%}
+      ="{{ value }}"
+    {%- endif -%}
+
+  {%- endfor -%}
+
+{% endmacro attributes %}
diff --git a/source/_patterns/00-atoms/_includes.twig b/source/_patterns/00-atoms/_includes.twig
deleted file mode 100644
index acb3d41d..00000000
--- a/source/_patterns/00-atoms/_includes.twig
+++ /dev/null
@@ -1,21 +0,0 @@
-{% macro include(includes) %}
-
-  {%- if includes is iterable -%}
-
-    {%- for include in includes -%}
-
-      {%- if include.template is defined -%}
-        {%- include include.template with include.arguments|default({}) only -%}
-      {%- else -%}
-        {{- include -}}
-      {%- endif -%}
-
-    {%- endfor -%}
-
-  {%- else -%}
-
-    {{- includes -}}
-
-  {%- endif -%}
-
-{% endmacro include %}
diff --git a/source/_patterns/00-atoms/block/heading/heading.twig b/source/_patterns/00-atoms/block/heading/heading.twig
index 1f7dde53..b323143b 100644
--- a/source/_patterns/00-atoms/block/heading/heading.twig
+++ b/source/_patterns/00-atoms/block/heading/heading.twig
@@ -1,8 +1,7 @@
-{%- from 'atoms-attributes' import attributes -%}
-{%- from 'atoms-includes' import include -%}
+{%- import 'atoms-html' as html -%}
 
-<h{{ level|default(1) }} {{- attributes(attributes|default({})) }}>
+<h{{ level|default(1) }} {{- html.attributes(attributes|default({})) }}>
 
-  {{- include(text) -}}
+  {{- html.content(text) -}}
 
 </h{{ level|default(1) }}>
diff --git a/source/_patterns/00-atoms/block/paragraph/paragraph.twig b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
index 5fe4c7d9..86799482 100644
--- a/source/_patterns/00-atoms/block/paragraph/paragraph.twig
+++ b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
@@ -1,10 +1,9 @@
-{%- from 'atoms-attributes' import attributes -%}
-{%- from 'atoms-includes' import include -%}
+{%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
 
-<p {{- attributes(attributes) }}>
+<p {{- html.attributes(attributes) }}>
 
-  {{- include(text) -}}
+  {{- html.content(text) -}}
 
 </p>
diff --git a/source/_patterns/00-atoms/inline/bold/bold.twig b/source/_patterns/00-atoms/inline/bold/bold.twig
index 00a2aea5..fa81a533 100644
--- a/source/_patterns/00-atoms/inline/bold/bold.twig
+++ b/source/_patterns/00-atoms/inline/bold/bold.twig
@@ -1,11 +1,10 @@
-{%- from 'atoms-attributes' import attributes -%}
-{%- from 'atoms-includes' import include -%}
+{%- import 'atoms-html' as html -%}
 
 {% spaceless %}
 
-  <b {{- attributes(attributes|default({})) }}>
+  <b {{- html.attributes(attributes|default({})) }}>
 
-    {{- include(text) -}}
+    {{- html.content(text) -}}
 
   </b>
 
diff --git a/source/_patterns/00-atoms/inline/italic/italic.twig b/source/_patterns/00-atoms/inline/italic/italic.twig
index 91d06fe6..6efc7b02 100644
--- a/source/_patterns/00-atoms/inline/italic/italic.twig
+++ b/source/_patterns/00-atoms/inline/italic/italic.twig
@@ -1,11 +1,10 @@
-{%- from 'atoms-attributes' import attributes -%}
-{%- from 'atoms-includes' import include -%}
+{%- import 'atoms-html' as html -%}
 
 {% spaceless %}
 
-  <i {{- attributes(attributes|default({})) }}>
+  <i {{- html.attributes(attributes|default({})) }}>
 
-    {{- include(text) -}}
+    {{- html.content(text) -}}
 
   </i>
 
diff --git a/source/_patterns/00-atoms/inline/link/link.twig b/source/_patterns/00-atoms/inline/link/link.twig
index adb0421a..ddc987f2 100644
--- a/source/_patterns/00-atoms/inline/link/link.twig
+++ b/source/_patterns/00-atoms/inline/link/link.twig
@@ -1,14 +1,13 @@
-{%- from 'atoms-attributes' import attributes -%}
-{%- from 'atoms-includes' import include -%}
+{%- import 'atoms-html' as html -%}
 
 {% spaceless %}
 
   {%- if attributes|default({}).href is defined -%}
-    <a {{- attributes(attributes|default({})) }}>{{- include(text) -}}</a>
+    <a {{- html.attributes(attributes|default({})) }}>{{- html.content(text) -}}</a>
   {%- elseif attributes|default({})|length -%}
-    <span {{- attributes(attributes|default({})) }}>{{- include(text) -}}</span>
+    <span {{- html.attributes(attributes|default({})) }}>{{- html.content(text) -}}</span>
   {%- else -%}
-    {{- include(text) -}}
+    {{- html.content(text) -}}
   {%- endif -%}
 
 {% endspaceless %}
diff --git a/source/_patterns/00-atoms/inline/sub/sub.twig b/source/_patterns/00-atoms/inline/sub/sub.twig
index f8e368bd..903ba097 100644
--- a/source/_patterns/00-atoms/inline/sub/sub.twig
+++ b/source/_patterns/00-atoms/inline/sub/sub.twig
@@ -1,11 +1,10 @@
-{%- from 'atoms-attributes' import attributes -%}
-{%- from 'atoms-includes' import include -%}
+{%- import 'atoms-html' as html -%}
 
 {% spaceless %}
 
-  <sub {{- attributes(attributes|default({})) }}>
+  <sub {{- html.attributes(attributes|default({})) }}>
 
-    {{- include(text) -}}
+    {{- html.content(text) -}}
 
   </sub>
 
diff --git a/source/_patterns/00-atoms/inline/sup/sup.twig b/source/_patterns/00-atoms/inline/sup/sup.twig
index a1aea049..1b3fcfd0 100644
--- a/source/_patterns/00-atoms/inline/sup/sup.twig
+++ b/source/_patterns/00-atoms/inline/sup/sup.twig
@@ -1,11 +1,10 @@
-{%- from 'atoms-attributes' import attributes -%}
-{%- from 'atoms-includes' import include -%}
+{%- import 'atoms-html' as html -%}
 
 {% spaceless %}
 
-  <sup {{- attributes(attributes|default({})) }}>
+  <sup {{- html.attributes(attributes|default({})) }}>
 
-    {{- include(text) -}}
+    {{- html.content(text) -}}
 
   </sup>
 
diff --git a/source/_patterns/01-molecules/content-meta/content-meta.twig b/source/_patterns/01-molecules/content-meta/content-meta.twig
index df6f180d..f1d8d75c 100644
--- a/source/_patterns/01-molecules/content-meta/content-meta.twig
+++ b/source/_patterns/01-molecules/content-meta/content-meta.twig
@@ -1,18 +1,18 @@
-{%- from 'atoms-attributes' import attributes -%}
+{%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta']) }) -%}
 
-<ul {{- attributes(attributes|default({})) }}>
+<ul {{- html.attributes(attributes) }}>
   {%- for item in items -%}
 
     {%- with item only -%}
       {%- block item -%}
 
-        {%- from 'atoms-attributes' import attributes -%}
+        {%- import 'atoms-html' as html -%}
 
         {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
 
-        <li {{- attributes(attributes|default({})) }}>
+        <li {{- html.attributes(attributes) }}>
           {%- with content only -%}
             {%- block content -%}
 
diff --git a/source/_patterns/01-molecules/section/section.twig b/source/_patterns/01-molecules/section/section.twig
index ecfc2745..bd858f7d 100644
--- a/source/_patterns/01-molecules/section/section.twig
+++ b/source/_patterns/01-molecules/section/section.twig
@@ -1,8 +1,8 @@
-{%- from 'atoms-attributes' import attributes -%}
+{%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section']) }) -%}
 
-<section {{- attributes(attributes|default({})) }}>
+<section {{- html.attributes(attributes) }}>
 
   {%- with heading|default({}) only -%}
 
@@ -25,13 +25,12 @@
 
     {%- block content -%}
 
-      {%- from 'atoms-attributes' import attributes -%}
-      {%- from 'atoms-includes' import include -%}
+      {%- import 'atoms-html' as html -%}
 
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section__body']) }) -%}
 
-      <div {{- attributes(attributes|default({})) }}>
-        {{- include(content) -}}
+      <div {{- html.attributes(attributes) }}>
+        {{- html.content(content) -}}
       </div>
 
     {%- endblock -%}
diff --git a/source/_patterns/01-molecules/tag-list/tag-list.twig b/source/_patterns/01-molecules/tag-list/tag-list.twig
index c81d7b8c..be7db5b7 100644
--- a/source/_patterns/01-molecules/tag-list/tag-list.twig
+++ b/source/_patterns/01-molecules/tag-list/tag-list.twig
@@ -1,8 +1,8 @@
-{%- from 'atoms-attributes' import attributes -%}
+{%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list']) }) -%}
 
-<div {{- attributes(attributes|default({})) }}>
+<div {{- html.attributes(attributes) }}>
 
   {%- with title|default({}) only -%}
     {%- block title -%}
@@ -20,7 +20,7 @@
   {%- with list only -%}
     {%- block list -%}
 
-      {%- from 'atoms-attributes' import attributes -%}
+      {%- import 'atoms-html' as html -%}
 
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__list']) }) -%}
 
@@ -28,18 +28,18 @@
         {%- set attributes = attributes|merge({class: attributes.class|merge(['tag-list__list--single-line']) }) -%}
       {%- endif -%}
 
-      <ul {{- attributes(attributes|default({})) }}>
+      <ul {{- html.attributes(attributes) }}>
 
         {%- for item in items -%}
 
           {%- with item only -%}
             {%- block item -%}
 
-              {%- from 'atoms-attributes' import attributes -%}
+              {%- import 'atoms-html' as html -%}
 
               {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__item']) }) -%}
 
-              <li {{- attributes(attributes|default({})) }}>
+              <li {{- html.attributes(attributes) }}>
 
                 {%- with content only -%}
                   {%- block content -%}
diff --git a/source/_patterns/02-organisms/content-header/content-header.twig b/source/_patterns/02-organisms/content-header/content-header.twig
index e45f10d7..5a98775f 100644
--- a/source/_patterns/02-organisms/content-header/content-header.twig
+++ b/source/_patterns/02-organisms/content-header/content-header.twig
@@ -1,8 +1,8 @@
-{%- from 'atoms-attributes' import attributes -%}
+{%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-header']) }) -%}
 
-<header {{- attributes(attributes|default({})) }}>
+<header {{- html.attributes(attributes) }}>
 
   {%- block body -%}
 
diff --git a/source/_patterns/02-organisms/item-tags/item-tags.twig b/source/_patterns/02-organisms/item-tags/item-tags.twig
index 3359ec14..f063265a 100644
--- a/source/_patterns/02-organisms/item-tags/item-tags.twig
+++ b/source/_patterns/02-organisms/item-tags/item-tags.twig
@@ -1,8 +1,8 @@
-{%- from 'atoms-attributes' import attributes -%}
+{%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['item-tags']) }) -%}
 
-<div {{- attributes(attributes|default({})) }}>
+<div {{- html.attributes(attributes) }}>
 
   {%- block body -%}
 
diff --git a/source/_patterns/03-templates/content-grid/content-grid.twig b/source/_patterns/03-templates/content-grid/content-grid.twig
index 2909b4c8..fd7fb39f 100644
--- a/source/_patterns/03-templates/content-grid/content-grid.twig
+++ b/source/_patterns/03-templates/content-grid/content-grid.twig
@@ -1,4 +1,4 @@
-{%- from 'atoms-attributes' import attributes -%}
+{%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-grid']) }) -%}
 
@@ -11,7 +11,7 @@
   {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid--has-secondary']) }) -%}
 {%- endif -%}
 
-<{{ element|default('div') }} {{- attributes(attributes|default({})) }}>
+<{{ element|default('div') }} {{- html.attributes(attributes) }}>
 
   {%- for area in content -%}
     {%- with area only -%}
@@ -24,13 +24,12 @@
 
           {%- if content|default([])|length -%}
 
-            {%- from 'atoms-attributes' import attributes -%}
-            {%- from 'atoms-includes' import include -%}
+            {%- import 'atoms-html' as html -%}
 
             {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid__item--' ~ area]) }) -%}
 
-            <div {{- attributes(attributes|default({})) }}>
-              {{- include(content) -}}
+            <div {{- html.attributes(attributes) }}>
+              {{- html.content(content) -}}
             </div>
 
           {%- endif -%}
diff --git a/source/_patterns/03-templates/page-grid/page-grid.twig b/source/_patterns/03-templates/page-grid/page-grid.twig
index 61d045dc..dd850053 100644
--- a/source/_patterns/03-templates/page-grid/page-grid.twig
+++ b/source/_patterns/03-templates/page-grid/page-grid.twig
@@ -1,8 +1,8 @@
-{%- from 'atoms-attributes' import attributes -%}
+{%- import 'atoms-html' as html -%}
 
 {% set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['page-grid']) }) -%}
 
-<div {{- attributes(attributes|default({})) }}>
+<div {{- html.attributes(attributes) }}>
 
   {%- with start|default({}) only -%}
     {%- block start -%}

From ca9ac9cb5b5cee9374ee6c92ef1d7fd12c57d3e6 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Tue, 2 Apr 2019 16:17:02 +0100
Subject: [PATCH 04/10] Add element macro

---
 source/_patterns/00-atoms/_html.twig          | 26 +++++++++++++++----
 .../00-atoms/block/heading/heading.twig       |  6 +----
 .../00-atoms/block/paragraph/paragraph.twig   |  6 +----
 .../_patterns/00-atoms/inline/bold/bold.twig  | 10 +------
 .../00-atoms/inline/italic/italic.twig        | 10 +------
 .../_patterns/00-atoms/inline/link/link.twig  | 16 +++++-------
 source/_patterns/00-atoms/inline/sub/sub.twig | 10 +------
 source/_patterns/00-atoms/inline/sup/sup.twig | 10 +------
 .../01-molecules/section/section.twig         |  4 +--
 .../content-grid/content-grid.twig            |  4 +--
 10 files changed, 36 insertions(+), 66 deletions(-)

diff --git a/source/_patterns/00-atoms/_html.twig b/source/_patterns/00-atoms/_html.twig
index 89a82bff..1cdd40ea 100644
--- a/source/_patterns/00-atoms/_html.twig
+++ b/source/_patterns/00-atoms/_html.twig
@@ -1,6 +1,22 @@
-{% macro content(content) %}
+{%- macro element(name, content, attributes = {}) -%}
 
-  {% import _self as html %}
+  {%- import _self as html -%}
+
+  {%- spaceless -%}
+
+    <{{ name }} {{- html.attributes(attributes) }}>
+
+      {{- html.content(content) -}}
+
+    </{{ name }}>
+
+  {%- endspaceless -%}
+
+{%- endmacro element -%}
+
+{%- macro content(content) -%}
+
+  {%- import _self as html -%}
 
   {%- if content.template is defined -%}
 
@@ -18,9 +34,9 @@
 
   {%- endif -%}
 
-{% endmacro content %}
+{%- endmacro content -%}
 
-{% macro attributes(attributes) %}
+{%- macro attributes(attributes) -%}
 
   {%- for name, value in attributes|default({}) if value is not same as(false) -%}
 
@@ -34,4 +50,4 @@
 
   {%- endfor -%}
 
-{% endmacro attributes %}
+{%- endmacro attributes -%}
diff --git a/source/_patterns/00-atoms/block/heading/heading.twig b/source/_patterns/00-atoms/block/heading/heading.twig
index b323143b..b4ca595b 100644
--- a/source/_patterns/00-atoms/block/heading/heading.twig
+++ b/source/_patterns/00-atoms/block/heading/heading.twig
@@ -1,7 +1,3 @@
 {%- import 'atoms-html' as html -%}
 
-<h{{ level|default(1) }} {{- html.attributes(attributes|default({})) }}>
-
-  {{- html.content(text) -}}
-
-</h{{ level|default(1) }}>
+{{- html.element('h' ~ level|default(1), text, attributes|default({})) -}}
diff --git a/source/_patterns/00-atoms/block/paragraph/paragraph.twig b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
index 86799482..fd323f22 100644
--- a/source/_patterns/00-atoms/block/paragraph/paragraph.twig
+++ b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
@@ -2,8 +2,4 @@
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
 
-<p {{- html.attributes(attributes) }}>
-
-  {{- html.content(text) -}}
-
-</p>
+{{- html.element('p', text, attributes|default({})) -}}
diff --git a/source/_patterns/00-atoms/inline/bold/bold.twig b/source/_patterns/00-atoms/inline/bold/bold.twig
index fa81a533..9286af13 100644
--- a/source/_patterns/00-atoms/inline/bold/bold.twig
+++ b/source/_patterns/00-atoms/inline/bold/bold.twig
@@ -1,11 +1,3 @@
 {%- import 'atoms-html' as html -%}
 
-{% spaceless %}
-
-  <b {{- html.attributes(attributes|default({})) }}>
-
-    {{- html.content(text) -}}
-
-  </b>
-
-{% endspaceless %}
+{{- html.element('b', text, attributes|default({})) -}}
diff --git a/source/_patterns/00-atoms/inline/italic/italic.twig b/source/_patterns/00-atoms/inline/italic/italic.twig
index 6efc7b02..c79ee6c1 100644
--- a/source/_patterns/00-atoms/inline/italic/italic.twig
+++ b/source/_patterns/00-atoms/inline/italic/italic.twig
@@ -1,11 +1,3 @@
 {%- import 'atoms-html' as html -%}
 
-{% spaceless %}
-
-  <i {{- html.attributes(attributes|default({})) }}>
-
-    {{- html.content(text) -}}
-
-  </i>
-
-{% endspaceless %}
+{{- html.element('i', text, attributes|default({})) -}}
diff --git a/source/_patterns/00-atoms/inline/link/link.twig b/source/_patterns/00-atoms/inline/link/link.twig
index ddc987f2..39eb0c5a 100644
--- a/source/_patterns/00-atoms/inline/link/link.twig
+++ b/source/_patterns/00-atoms/inline/link/link.twig
@@ -1,13 +1,11 @@
 {%- import 'atoms-html' as html -%}
 
-{% spaceless %}
+{%- if attributes|default({})|length -%}
 
-  {%- if attributes|default({}).href is defined -%}
-    <a {{- html.attributes(attributes|default({})) }}>{{- html.content(text) -}}</a>
-  {%- elseif attributes|default({})|length -%}
-    <span {{- html.attributes(attributes|default({})) }}>{{- html.content(text) -}}</span>
-  {%- else -%}
-    {{- html.content(text) -}}
-  {%- endif -%}
+  {{- html.element(attributes.href is defined ? 'a' : 'span', text, attributes|default({})) -}}
 
-{% endspaceless %}
+{%- else -%}
+
+  {{- html.content(text) -}}
+
+{%- endif -%}
diff --git a/source/_patterns/00-atoms/inline/sub/sub.twig b/source/_patterns/00-atoms/inline/sub/sub.twig
index 903ba097..e06c1900 100644
--- a/source/_patterns/00-atoms/inline/sub/sub.twig
+++ b/source/_patterns/00-atoms/inline/sub/sub.twig
@@ -1,11 +1,3 @@
 {%- import 'atoms-html' as html -%}
 
-{% spaceless %}
-
-  <sub {{- html.attributes(attributes|default({})) }}>
-
-    {{- html.content(text) -}}
-
-  </sub>
-
-{% endspaceless %}
+{{- html.element('sub', text, attributes|default({})) -}}
diff --git a/source/_patterns/00-atoms/inline/sup/sup.twig b/source/_patterns/00-atoms/inline/sup/sup.twig
index 1b3fcfd0..85713912 100644
--- a/source/_patterns/00-atoms/inline/sup/sup.twig
+++ b/source/_patterns/00-atoms/inline/sup/sup.twig
@@ -1,11 +1,3 @@
 {%- import 'atoms-html' as html -%}
 
-{% spaceless %}
-
-  <sup {{- html.attributes(attributes|default({})) }}>
-
-    {{- html.content(text) -}}
-
-  </sup>
-
-{% endspaceless %}
+{{- html.element('sup', text, attributes|default({})) -}}
diff --git a/source/_patterns/01-molecules/section/section.twig b/source/_patterns/01-molecules/section/section.twig
index bd858f7d..4e946fff 100644
--- a/source/_patterns/01-molecules/section/section.twig
+++ b/source/_patterns/01-molecules/section/section.twig
@@ -29,9 +29,7 @@
 
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section__body']) }) -%}
 
-      <div {{- html.attributes(attributes) }}>
-        {{- html.content(content) -}}
-      </div>
+      {{- html.element('div', content, attributes) -}}
 
     {%- endblock -%}
 
diff --git a/source/_patterns/03-templates/content-grid/content-grid.twig b/source/_patterns/03-templates/content-grid/content-grid.twig
index fd7fb39f..cc51c026 100644
--- a/source/_patterns/03-templates/content-grid/content-grid.twig
+++ b/source/_patterns/03-templates/content-grid/content-grid.twig
@@ -28,9 +28,7 @@
 
             {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid__item--' ~ area]) }) -%}
 
-            <div {{- html.attributes(attributes) }}>
-              {{- html.content(content) -}}
-            </div>
+            {{- html.element('div', content, attributes) -}}
 
           {%- endif -%}
 

From 176e1bfaa76a902083e2532d20b8d7cdae7a1b1e Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Tue, 2 Apr 2019 16:27:52 +0100
Subject: [PATCH 05/10] Not needed

---
 source/_patterns/00-atoms/block/paragraph/paragraph.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/_patterns/00-atoms/block/paragraph/paragraph.twig b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
index fd323f22..1158e4a2 100644
--- a/source/_patterns/00-atoms/block/paragraph/paragraph.twig
+++ b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
@@ -2,4 +2,4 @@
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
 
-{{- html.element('p', text, attributes|default({})) -}}
+{{- html.element('p', text, attributes) -}}

From bfa397578ccff816713b40f7f4a60e0b5d9889f8 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Fri, 5 Apr 2019 15:37:48 +0100
Subject: [PATCH 06/10] Trigger build


From ab7b6295f15fe41894f9cf1498d2df65ff8afb66 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Fri, 5 Apr 2019 15:41:35 +0100
Subject: [PATCH 07/10] Whitespace

---
 source/_patterns/03-templates/page-grid/page-grid.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/_patterns/03-templates/page-grid/page-grid.twig b/source/_patterns/03-templates/page-grid/page-grid.twig
index dd850053..32c24513 100644
--- a/source/_patterns/03-templates/page-grid/page-grid.twig
+++ b/source/_patterns/03-templates/page-grid/page-grid.twig
@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{% set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['page-grid']) }) -%}
+{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['page-grid']) }) -%}
 
 <div {{- html.attributes(attributes) }}>
 

From 3951d2a605fb63a05a1ff40e998092b919250cc1 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Wed, 10 Apr 2019 14:30:02 +0100
Subject: [PATCH 08/10] Remove element

---
 .../00-atoms/block/paragraph/paragraph.twig   | 10 ++++++-
 .../_patterns/00-atoms/inline/bold/bold.twig  | 10 ++++++-
 .../00-atoms/inline/italic/italic.twig        | 10 ++++++-
 .../_patterns/00-atoms/inline/link/link.twig  | 27 +++++++++++++++----
 source/_patterns/00-atoms/inline/sub/sub.twig | 10 ++++++-
 source/_patterns/00-atoms/inline/sup/sup.twig | 10 ++++++-
 .../_patterns/00-atoms/inline/time/time.twig  | 10 ++++++-
 7 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/source/_patterns/00-atoms/block/paragraph/paragraph.twig b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
index 1158e4a2..ade03653 100644
--- a/source/_patterns/00-atoms/block/paragraph/paragraph.twig
+++ b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
@@ -2,4 +2,12 @@
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
 
-{{- html.element('p', text, attributes) -}}
+{%- spaceless -%}
+
+  <p {{- html.attributes(attributes) }}>
+
+    {{- html.content(text) -}}
+
+  </p>
+
+{%- endspaceless -%}
diff --git a/source/_patterns/00-atoms/inline/bold/bold.twig b/source/_patterns/00-atoms/inline/bold/bold.twig
index 9286af13..a6a53629 100644
--- a/source/_patterns/00-atoms/inline/bold/bold.twig
+++ b/source/_patterns/00-atoms/inline/bold/bold.twig
@@ -1,3 +1,11 @@
 {%- import 'atoms-html' as html -%}
 
-{{- html.element('b', text, attributes|default({})) -}}
+{%- spaceless -%}
+
+  <b {{- html.attributes(attributes|default({})) }}>
+
+    {{- html.content(text) -}}
+
+  </b>
+
+{%- endspaceless -%}
diff --git a/source/_patterns/00-atoms/inline/italic/italic.twig b/source/_patterns/00-atoms/inline/italic/italic.twig
index c79ee6c1..70a471f8 100644
--- a/source/_patterns/00-atoms/inline/italic/italic.twig
+++ b/source/_patterns/00-atoms/inline/italic/italic.twig
@@ -1,3 +1,11 @@
 {%- import 'atoms-html' as html -%}
 
-{{- html.element('i', text, attributes|default({})) -}}
+{%- spaceless -%}
+
+  <i {{- html.attributes(attributes|default({})) }}>
+
+    {{- html.content(text) -}}
+
+  </i>
+
+{%- endspaceless -%}
diff --git a/source/_patterns/00-atoms/inline/link/link.twig b/source/_patterns/00-atoms/inline/link/link.twig
index 39eb0c5a..097a609c 100644
--- a/source/_patterns/00-atoms/inline/link/link.twig
+++ b/source/_patterns/00-atoms/inline/link/link.twig
@@ -1,11 +1,28 @@
 {%- import 'atoms-html' as html -%}
 
-{%- if attributes|default({})|length -%}
+{%- spaceless -%}
 
-  {{- html.element(attributes.href is defined ? 'a' : 'span', text, attributes|default({})) -}}
+  {%- if attributes|default({}).href is defined -%}
 
-{%- else -%}
+    <a {{- html.attributes(attributes) }}>
 
-  {{- html.content(text) -}}
+      {{- html.content(text) -}}
+
+    </a>
+
+  {%- elseif attributes|default({})|length -%}
+
+    <span {{- html.attributes(attributes) }}>
+
+      {{- html.content(text) -}}
+
+    </span>
+
+  {%- else -%}
+
+    {{- html.content(text) -}}
+
+  {%- endif -%}
+
+{%- endspaceless -%}
 
-{%- endif -%}
diff --git a/source/_patterns/00-atoms/inline/sub/sub.twig b/source/_patterns/00-atoms/inline/sub/sub.twig
index e06c1900..47a694a7 100644
--- a/source/_patterns/00-atoms/inline/sub/sub.twig
+++ b/source/_patterns/00-atoms/inline/sub/sub.twig
@@ -1,3 +1,11 @@
 {%- import 'atoms-html' as html -%}
 
-{{- html.element('sub', text, attributes|default({})) -}}
+{%- spaceless -%}
+
+  <sub {{- html.attributes(attributes|default({})) }}>
+
+    {{- html.content(text) -}}
+
+  </sub>
+
+{%- endspaceless -%}
diff --git a/source/_patterns/00-atoms/inline/sup/sup.twig b/source/_patterns/00-atoms/inline/sup/sup.twig
index 85713912..21377991 100644
--- a/source/_patterns/00-atoms/inline/sup/sup.twig
+++ b/source/_patterns/00-atoms/inline/sup/sup.twig
@@ -1,3 +1,11 @@
 {%- import 'atoms-html' as html -%}
 
-{{- html.element('sup', text, attributes|default({})) -}}
+{%- spaceless -%}
+
+  <sup {{- html.attributes(attributes|default({})) }}>
+
+    {{- html.content(text) -}}
+
+  </sup>
+
+{%- endspaceless -%}
diff --git a/source/_patterns/00-atoms/inline/time/time.twig b/source/_patterns/00-atoms/inline/time/time.twig
index 514fdaaf..0afc52bb 100644
--- a/source/_patterns/00-atoms/inline/time/time.twig
+++ b/source/_patterns/00-atoms/inline/time/time.twig
@@ -1,3 +1,11 @@
 {%- import 'atoms-html' as html -%}
 
-{{- html.element('time', text, attributes|default({})) -}}
+{%- spaceless -%}
+
+  <time {{- html.attributes(attributes|default({})) }}>
+
+    {{- html.content(text) -}}
+
+  </time>
+
+{%- endspaceless -%}

From 2f348a0c68c0e0c7161886e9581cffdd2d61e65a Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Wed, 10 Apr 2019 14:45:08 +0100
Subject: [PATCH 09/10] Remove last of them, and try and reduce diff

---
 source/_patterns/00-atoms/_html.twig          | 16 -------------
 .../00-atoms/block/paragraph/paragraph.twig   | 10 +++-----
 .../_patterns/00-atoms/inline/bold/bold.twig  |  4 ++--
 .../00-atoms/inline/italic/italic.twig        |  4 ++--
 .../_patterns/00-atoms/inline/link/link.twig  | 23 ++++---------------
 source/_patterns/00-atoms/inline/sub/sub.twig |  4 ++--
 source/_patterns/00-atoms/inline/sup/sup.twig |  4 ++--
 .../_patterns/00-atoms/inline/time/time.twig  |  4 ++--
 .../content-meta/content-meta.twig            |  4 +---
 .../01-molecules/section/section.twig         |  8 +++----
 .../01-molecules/tag-list/tag-list.twig       |  8 ++-----
 .../02-organisms/teaser-list/teaser-list.twig | 12 +++-------
 .../content-grid/content-grid.twig            |  8 +++----
 13 files changed, 31 insertions(+), 78 deletions(-)

diff --git a/source/_patterns/00-atoms/_html.twig b/source/_patterns/00-atoms/_html.twig
index 1cdd40ea..0bd85aa9 100644
--- a/source/_patterns/00-atoms/_html.twig
+++ b/source/_patterns/00-atoms/_html.twig
@@ -1,19 +1,3 @@
-{%- macro element(name, content, attributes = {}) -%}
-
-  {%- import _self as html -%}
-
-  {%- spaceless -%}
-
-    <{{ name }} {{- html.attributes(attributes) }}>
-
-      {{- html.content(content) -}}
-
-    </{{ name }}>
-
-  {%- endspaceless -%}
-
-{%- endmacro element -%}
-
 {%- macro content(content) -%}
 
   {%- import _self as html -%}
diff --git a/source/_patterns/00-atoms/block/paragraph/paragraph.twig b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
index ade03653..86799482 100644
--- a/source/_patterns/00-atoms/block/paragraph/paragraph.twig
+++ b/source/_patterns/00-atoms/block/paragraph/paragraph.twig
@@ -2,12 +2,8 @@
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
 
-{%- spaceless -%}
+<p {{- html.attributes(attributes) }}>
 
-  <p {{- html.attributes(attributes) }}>
+  {{- html.content(text) -}}
 
-    {{- html.content(text) -}}
-
-  </p>
-
-{%- endspaceless -%}
+</p>
diff --git a/source/_patterns/00-atoms/inline/bold/bold.twig b/source/_patterns/00-atoms/inline/bold/bold.twig
index a6a53629..fa81a533 100644
--- a/source/_patterns/00-atoms/inline/bold/bold.twig
+++ b/source/_patterns/00-atoms/inline/bold/bold.twig
@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- spaceless -%}
+{% spaceless %}
 
   <b {{- html.attributes(attributes|default({})) }}>
 
@@ -8,4 +8,4 @@
 
   </b>
 
-{%- endspaceless -%}
+{% endspaceless %}
diff --git a/source/_patterns/00-atoms/inline/italic/italic.twig b/source/_patterns/00-atoms/inline/italic/italic.twig
index 70a471f8..6efc7b02 100644
--- a/source/_patterns/00-atoms/inline/italic/italic.twig
+++ b/source/_patterns/00-atoms/inline/italic/italic.twig
@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- spaceless -%}
+{% spaceless %}
 
   <i {{- html.attributes(attributes|default({})) }}>
 
@@ -8,4 +8,4 @@
 
   </i>
 
-{%- endspaceless -%}
+{% endspaceless %}
diff --git a/source/_patterns/00-atoms/inline/link/link.twig b/source/_patterns/00-atoms/inline/link/link.twig
index 097a609c..5c0c22e1 100644
--- a/source/_patterns/00-atoms/inline/link/link.twig
+++ b/source/_patterns/00-atoms/inline/link/link.twig
@@ -1,28 +1,13 @@
 {%- import 'atoms-html' as html -%}
 
-{%- spaceless -%}
+{% spaceless %}
 
   {%- if attributes|default({}).href is defined -%}
-
-    <a {{- html.attributes(attributes) }}>
-
-      {{- html.content(text) -}}
-
-    </a>
-
+    <a {{- html.attributes(attributes) }}>{{- html.content(text) -}}</a>
   {%- elseif attributes|default({})|length -%}
-
-    <span {{- html.attributes(attributes) }}>
-
-      {{- html.content(text) -}}
-
-    </span>
-
+    <span {{- html.attributes(attributes) }}>{{- html.content(text) -}}</span>
   {%- else -%}
-
     {{- html.content(text) -}}
-
   {%- endif -%}
 
-{%- endspaceless -%}
-
+{% endspaceless %}
diff --git a/source/_patterns/00-atoms/inline/sub/sub.twig b/source/_patterns/00-atoms/inline/sub/sub.twig
index 47a694a7..903ba097 100644
--- a/source/_patterns/00-atoms/inline/sub/sub.twig
+++ b/source/_patterns/00-atoms/inline/sub/sub.twig
@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- spaceless -%}
+{% spaceless %}
 
   <sub {{- html.attributes(attributes|default({})) }}>
 
@@ -8,4 +8,4 @@
 
   </sub>
 
-{%- endspaceless -%}
+{% endspaceless %}
diff --git a/source/_patterns/00-atoms/inline/sup/sup.twig b/source/_patterns/00-atoms/inline/sup/sup.twig
index 21377991..1b3fcfd0 100644
--- a/source/_patterns/00-atoms/inline/sup/sup.twig
+++ b/source/_patterns/00-atoms/inline/sup/sup.twig
@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- spaceless -%}
+{% spaceless %}
 
   <sup {{- html.attributes(attributes|default({})) }}>
 
@@ -8,4 +8,4 @@
 
   </sup>
 
-{%- endspaceless -%}
+{% endspaceless %}
diff --git a/source/_patterns/00-atoms/inline/time/time.twig b/source/_patterns/00-atoms/inline/time/time.twig
index 0afc52bb..8be890a9 100644
--- a/source/_patterns/00-atoms/inline/time/time.twig
+++ b/source/_patterns/00-atoms/inline/time/time.twig
@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- spaceless -%}
+{% spaceless %}
 
   <time {{- html.attributes(attributes|default({})) }}>
 
@@ -8,4 +8,4 @@
 
   </time>
 
-{%- endspaceless -%}
+{% endspaceless %}
diff --git a/source/_patterns/01-molecules/content-meta/content-meta.twig b/source/_patterns/01-molecules/content-meta/content-meta.twig
index f1d8d75c..0193440b 100644
--- a/source/_patterns/01-molecules/content-meta/content-meta.twig
+++ b/source/_patterns/01-molecules/content-meta/content-meta.twig
@@ -5,11 +5,9 @@
 <ul {{- html.attributes(attributes) }}>
   {%- for item in items -%}
 
-    {%- with item only -%}
+    {%- with item|merge({html: html}) only -%}
       {%- block item -%}
 
-        {%- import 'atoms-html' as html -%}
-
         {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
 
         <li {{- html.attributes(attributes) }}>
diff --git a/source/_patterns/01-molecules/section/section.twig b/source/_patterns/01-molecules/section/section.twig
index 4e946fff..463ab777 100644
--- a/source/_patterns/01-molecules/section/section.twig
+++ b/source/_patterns/01-molecules/section/section.twig
@@ -21,15 +21,15 @@
 
   {%- endwith -%}
 
-  {%- with {content: content} only -%}
+  {%- with {content: content, html: html} only -%}
 
     {%- block content -%}
 
-      {%- import 'atoms-html' as html -%}
-
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section__body']) }) -%}
 
-      {{- html.element('div', content, attributes) -}}
+      <div {{- html.attributes(attributes) }}>
+        {{- html.content(content) -}}
+      </div>
 
     {%- endblock -%}
 
diff --git a/source/_patterns/01-molecules/tag-list/tag-list.twig b/source/_patterns/01-molecules/tag-list/tag-list.twig
index be7db5b7..02e96fed 100644
--- a/source/_patterns/01-molecules/tag-list/tag-list.twig
+++ b/source/_patterns/01-molecules/tag-list/tag-list.twig
@@ -17,11 +17,9 @@
     {%- endblock title -%}
   {%- endwith -%}
 
-  {%- with list only -%}
+  {%- with list|merge({html: html}) only -%}
     {%- block list -%}
 
-      {%- import 'atoms-html' as html -%}
-
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__list']) }) -%}
 
       {%- if singleLine|default(false) -%}
@@ -32,11 +30,9 @@
 
         {%- for item in items -%}
 
-          {%- with item only -%}
+          {%- with item|merge({html: html}) only -%}
             {%- block item -%}
 
-              {%- import 'atoms-html' as html -%}
-
               {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__item']) }) -%}
 
               <li {{- html.attributes(attributes) }}>
diff --git a/source/_patterns/02-organisms/teaser-list/teaser-list.twig b/source/_patterns/02-organisms/teaser-list/teaser-list.twig
index f3cacdb2..a86166af 100644
--- a/source/_patterns/02-organisms/teaser-list/teaser-list.twig
+++ b/source/_patterns/02-organisms/teaser-list/teaser-list.twig
@@ -23,24 +23,20 @@
     {%- endblock title -%}
   {%- endwith -%}
 
-  {%- with list only -%}
+  {%- with list|merge({html: html}) only -%}
     {%- block list -%}
 
       {%- if items|default([])|length -%}
 
-        {%- import 'atoms-html' as html -%}
-
         {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['teaser-list__list']) }) -%}
 
         <ol {{- html.attributes(attributes) }}>
 
           {%- for item in items -%}
 
-            {%- with item only -%}
+            {%- with item|merge({html: html}) only -%}
               {%- block item -%}
 
-                {%- import 'atoms-html' as html -%}
-
                 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['teaser-list__item']) }) -%}
 
                 <li {{- html.attributes(attributes) }}>
@@ -68,11 +64,9 @@
           {%- set empty = [{template: 'atoms-paragraph', arguments: {text: empty}}] -%}
         {%- endif -%}
 
-        {%- with {empty: empty} only -%}
+        {%- with {empty: empty, html: html} only -%}
           {%- block empty -%}
 
-            {%- import 'atoms-html' as html -%}
-
             {{- html.content(empty) -}}
 
           {%- endblock empty -%}
diff --git a/source/_patterns/03-templates/content-grid/content-grid.twig b/source/_patterns/03-templates/content-grid/content-grid.twig
index cc51c026..f1d0dae3 100644
--- a/source/_patterns/03-templates/content-grid/content-grid.twig
+++ b/source/_patterns/03-templates/content-grid/content-grid.twig
@@ -14,7 +14,7 @@
 <{{ element|default('div') }} {{- html.attributes(attributes) }}>
 
   {%- for area in content -%}
-    {%- with area only -%}
+    {%- with area|merge({html: html}) only -%}
 
       {%- block item -%}
 
@@ -24,11 +24,11 @@
 
           {%- if content|default([])|length -%}
 
-            {%- import 'atoms-html' as html -%}
-
             {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid__item--' ~ area]) }) -%}
 
-            {{- html.element('div', content, attributes) -}}
+            <div {{- html.attributes(attributes) }}>
+              {{- html.content(content) -}}
+            </div>
 
           {%- endif -%}
 

From 830f4bbc87f8e801d814177e48a43510db8fef75 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Wed, 10 Apr 2019 14:48:56 +0100
Subject: [PATCH 10/10] Not meant

---
 source/_patterns/01-molecules/content-meta/content-meta.twig | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/_patterns/01-molecules/content-meta/content-meta.twig b/source/_patterns/01-molecules/content-meta/content-meta.twig
index 0193440b..9d372b0d 100644
--- a/source/_patterns/01-molecules/content-meta/content-meta.twig
+++ b/source/_patterns/01-molecules/content-meta/content-meta.twig
@@ -11,6 +11,7 @@
         {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
 
         <li {{- html.attributes(attributes) }}>
+
           {%- with content only -%}
             {%- block content -%}