Use Twig macros rather than including templates

source/_patterns/00-atoms/_html.twig

@@ -0,0 +1,53 @@
+{%- 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 -%}
+
+  {%- 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 -%}

source/_patterns/00-atoms/block/heading/heading.twig

@@ -1,5 +1,3 @@
-<h{{ level|default(1) }} {%- include 'atoms-attributes' %}>
+{%- import 'atoms-html' as html -%}
 
-  {%- include 'atoms-text' with {nodes: text} only -%}
-
-</h{{ level|default(1) }}>
+{{- html.element('h' ~ level|default(1), text, attributes|default({})) -}}

source/_patterns/00-atoms/block/paragraph/paragraph.twig

@@ -1,7 +1,5 @@
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
-
-<p {%- include 'atoms-attributes' -%}>
+{%- import 'atoms-html' as html -%}
 
-  {%- include 'atoms-text' with {nodes: text} -%}
+{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
 
-</p>
+{{- html.element('p', text, attributes) -}}

source/_patterns/00-atoms/inline/bold/bold.twig

@@ -1,9 +1,3 @@
-{% spaceless %}
+{%- import 'atoms-html' as html -%}
 
-  <b {%- include 'atoms-attributes' %}>
-
-    {%- include 'atoms-text' with {nodes: text} only -%}
-
-  </b>
-
-{% endspaceless %}
+{{- html.element('b', text, attributes|default({})) -}}

source/_patterns/00-atoms/inline/italic/italic.twig

@@ -1,9 +1,3 @@
-{% spaceless %}
+{%- import 'atoms-html' as html -%}
 
-  <i {%- include 'atoms-attributes' %}>
-
-    {%- include 'atoms-text' with {nodes: text} only -%}
-
-  </i>
-
-{% endspaceless %}
+{{- html.element('i', text, attributes|default({})) -}}

source/_patterns/00-atoms/inline/link/link.twig

@@ -1,11 +1,11 @@
-{% spaceless %}
+{%- import 'atoms-html' as html -%}
 
-  {%- if attributes|default({}).href is defined -%}
-    <a {%- include 'atoms-attributes' %}>{%- include 'atoms-text' with {nodes: text} only -%}</a>
-  {%- elseif attributes|default({})|length -%}
-    <span {%- include 'atoms-attributes' %}>{%- include 'atoms-text' with {nodes: text} only -%}</span>
-  {%- else -%}
-    {%- include 'atoms-text' with {nodes: text} only -%}
-  {%- endif -%}
+{%- if attributes|default({})|length -%}
 
-{% endspaceless %}
+  {{- html.element(attributes.href is defined ? 'a' : 'span', text, attributes|default({})) -}}
+
+{%- else -%}
+
+  {{- html.content(text) -}}
+
+{%- endif -%}

source/_patterns/00-atoms/inline/sub/sub.twig

@@ -1,9 +1,3 @@
-{% spaceless %}
+{%- import 'atoms-html' as html -%}
 
-  <sub {%- include 'atoms-attributes' %}>
-
-    {%- include 'atoms-text' with {nodes: text} only -%}
-
-  </sub>
-
-{% endspaceless %}
+{{- html.element('sub', text, attributes|default({})) -}}

source/_patterns/00-atoms/inline/sup/sup.twig

@@ -1,9 +1,3 @@
-{% spaceless %}
+{%- import 'atoms-html' as html -%}
 
-  <sup {%- include 'atoms-attributes' %}>
-
-    {%- include 'atoms-text' with {nodes: text} only -%}
-
-  </sup>
-
-{% endspaceless %}
+{{- html.element('sup', text, attributes|default({})) -}}

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']) }) -%}
+{%- import 'atoms-html' as html -%}
 
-<ul {%- include('atoms-attributes') -%}>
+{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta']) }) -%}
 
+<ul {{- html.attributes(attributes) }}>
   {%- for item in items -%}
 
     {%- with item only -%}
       {%- block item -%}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
+        {%- import 'atoms-html' as html -%}
 
-        <li {%- include('atoms-attributes') -%}>
+        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
 
+        <li {{- html.attributes(attributes) }}>
           {%- with content only -%}
             {%- block content -%}
 

source/_patterns/01-molecules/section/section.twig

@@ -1,6 +1,8 @@
+{%- import 'atoms-html' as html -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section']) }) -%}
 
-<section {%- include 'atoms-attributes' -%}>
+<section {{- html.attributes(attributes) }}>
 
   {%- with heading|default({}) only -%}
 
@@ -23,11 +25,11 @@
 
     {%- block content -%}
 
+      {%- import 'atoms-html' as html -%}
+
       {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section__body']) }) -%}
 
-      <div {%- include 'atoms-attributes' -%}>
-        {%- include 'atoms-text' with {nodes: content} -%}
-      </div>
+      {{- html.element('div', content, attributes) -}}
 
     {%- endblock -%}
 

source/_patterns/01-molecules/tag-list/tag-list.twig

@@ -1,6 +1,8 @@
+{%- import 'atoms-html' as html -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list']) }) -%}
 
-<div {%- include('atoms-attributes') -%}>
+<div {{- html.attributes(attributes) }}>
 
   {%- with title|default({}) only -%}
     {%- block title -%}
@@ -18,22 +20,26 @@
   {%- with list 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) -%}
         {%- set attributes = attributes|merge({class: attributes.class|merge(['tag-list__list--single-line']) }) -%}
       {%- endif -%}
 
-      <ul {%- include('atoms-attributes') -%}>
+      <ul {{- html.attributes(attributes) }}>
 
         {%- for item in items -%}
 
           {%- with item only -%}
             {%- block item -%}
 
+              {%- import 'atoms-html' as html -%}
+
               {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__item']) }) -%}
 
-              <li {%- include('atoms-attributes') -%}>
+              <li {{- html.attributes(attributes) }}>
 
                 {%- with content only -%}
                   {%- block content -%}

source/_patterns/02-organisms/content-header/content-header.twig

@@ -1,6 +1,8 @@
+{%- import 'atoms-html' as html -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-header']) }) -%}
 
-<header {%- include 'atoms-attributes' %}>
+<header {{- html.attributes(attributes) }}>
 
   {%- block body -%}
 

source/_patterns/02-organisms/item-tags/item-tags.twig

@@ -1,6 +1,8 @@
+{%- import 'atoms-html' as html -%}
+
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['item-tags']) }) -%}
 
-<div {%- include('atoms-attributes') -%}>
+<div {{- html.attributes(attributes) }}>
 
   {%- block body -%}
 

source/_patterns/03-templates/content-grid/content-grid.twig

@@ -1,3 +1,5 @@
+{%- import 'atoms-html' as html -%}
+
 {%- 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') }} {{- html.attributes(attributes) }}>
 
   {%- for area in content -%}
     {%- with area only -%}
@@ -22,11 +24,11 @@
 
           {%- if content|default([])|length -%}
 
+            {%- import 'atoms-html' as html -%}
+
             {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid__item--' ~ area]) }) -%}
 
-            <div {%- include 'atoms-attributes' %}>
-              {%- include 'atoms-text' with {nodes: content} -%}
-            </div>
+            {{- html.element('div', content, attributes) -}}
 
           {%- endif -%}
 

source/_patterns/03-templates/page-grid/page-grid.twig

@@ -1,6 +1,8 @@
+{%- import 'atoms-html' as html -%}
+
 {% set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['page-grid']) }) -%}
 
-<div {%- include 'atoms-attributes' %}>
+<div {{- html.attributes(attributes) }}>
 
   {%- with start|default({}) only -%}
     {%- block start -%}