refactor(article page): created example article page for pattern library

affects: @buildit/gravity-ui-nunjucks

packages/gravity-ui-nunjucks/src/_patterns/03-organisms/00-page-structure/01-page-footer.njk

@@ -1,7 +1,7 @@
 {%- from 'atoms-icon' import icon -%}
 {%- from 'atoms-image' import image -%}
 
-<footer>
+<footer{% if footer.class %} class="{{ footer.class }}"{% endif %}>
   <div class="grav-o-container">
     {% include 'atoms-logotype' %}
 

packages/gravity-ui-nunjucks/src/_patterns/05-pages/05-article.json

@@ -0,0 +1,18 @@
+{
+  "article": {
+    "copy": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>\n<ul>\n<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \u2028</li>\n<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \u2028</li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \u2028</li>\n<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. uptate velit esse cillum dolore eu fugiat nulla pariatur. </li>\n</ul>\n<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>\n<blockquote>\n<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>\n</blockquote>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+    "title": "Better Together",
+    "img": {
+      "src": "../../images/buildit-roundtable-purple.jpg",
+      "alt": "Brief description of this fascinating image"
+    },
+    "dateTime": {
+      "human": "1st January, 2019",
+      "machine": "Tue Jan 01 2019 12:00:00 GMT+0000 (Greenwich Mean Time)"
+    },
+    "description": "It was few anti-money laundering behind many zero knowledge proof, for Ethereum thought few flippening in many node! Although SHA 256 cost lots of amazing soft fork behind few double spend, Satoshi Nakamoto specialises in some!"
+  },
+  "footer": {
+    "class": "grav-u-color-scheme-dark"
+  }
+}

packages/gravity-ui-nunjucks/src/_patterns/05-pages/05-article.njk

@@ -0,0 +1,16 @@
+{%- from 'organisms-page-intro' import pageIntroContents -%}
+
+{%- extends 'templates-basic-page' -%}
+
+{%- block pageContent %}
+<main class="grav-o-container">
+  <article class="grav-c-article">
+    <header class="grav-c-page-intro">
+      {{ pageIntroContents(article.title, article.description, article.dateTime, article.img) | safe }}
+    </header>
+    <div class="grav-c-ostentatious-copy">
+      {{ article.copy | safe }}
+    </div>
+  </article>
+</main>
+{%- endblock -%}