Stashing changes - working Twig template includes!

Author: Ghoweri, Salem (BOS-GEN)

builder/pattern_engines/engine_twig.js

@@ -0,0 +1,86 @@
+/*
+ * handlebars pattern engine for patternlab-node - v0.15.1 - 2015
+ *
+ * Geoffrey Pursell, Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ *
+ */
+
+/*
+ * ENGINE SUPPORT LEVEL:
+ *
+ * Full. Partial calls and lineage hunting are supported. Handlebars does not
+ * support the mustache-specific syntax extensions, style modifiers and pattern
+ * parameters, because their use cases are addressed by the core Handlebars
+ * feature set.
+ *
+ */
+
+(function () {
+  "use strict";
+
+  var Twig = require('twig/twig.js');
+  var twig = Twig.twig;
+
+  var engine_twig = {
+    engine: Twig,
+    engineName: 'twig',
+    engineFileExtension: '.twig',
+
+    //Important! Needed for Twig compilation. Can't resolve paths otherwise.
+    expandPartials: true,
+
+    // regexes, stored here so they're only compiled once
+    findPartialsRE: /{%([ ]+)?(?:extends|include|embed)(\s\S)(.*)%}/g,
+    findListItemsRE: /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g,
+
+    // render it
+    renderPattern: function renderPattern(template, data) {
+      var template = twig({
+        data: template
+      }).render(data);
+
+      return template;
+    },
+
+    // find and return any {{> template-name }} within pattern
+    findPartials: function findPartials(pattern) {
+      var matches = pattern.template.match(this.findPartialsRE);
+      return matches;
+    },
+    findPartialsWithStyleModifiers: function() {
+      // TODO: make the call to this from oPattern objects conditional on their
+      // being implemented here.
+      return [];
+    },
+    // returns any patterns that match {{> value(foo:"bar") }} or {{>
+    // value:mod(foo:"bar") }} within the pattern
+    findPartialsWithPatternParameters: function() {
+      // TODO: make the call to this from oPattern objects conditional on their
+      // being implemented here.
+      return [];
+    },
+    findListItems: function(pattern) {
+      var matches = pattern.template.match(this.findListItemsRE);
+      return matches;
+    },
+    // given a pattern, and a partial string, tease out the "pattern key" and
+    // return it.
+    findPartialKey: function(partialString) {
+
+      // var partialKey = partialString.replace(this.findPartialsRE, '$1');
+      var partialKey = partialString.match(/"((?:\\.|[^"\\])*)"/)[0];
+      partialKey = partialKey.replace(/"/g, '');
+
+      return partialKey;
+    }
+
+
+
+
+  };
+
+  module.exports = engine_twig;
+})();

source/_patterns/00-atoms/08-button.twig

@@ -0,0 +1,10 @@
+<style>
+  .btn {
+    padding: 10px;
+    border-radius: 10px;
+    display: inline-block;
+    text-align: center;
+  }
+</style>
+
+<a href="#" class="btn">Button</a>

source/_patterns/00-atoms/09-image.twig

@@ -0,0 +1,5 @@
+<img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=280%C3%97220&w=280&h=220&fm=pjpg"
+  srcset="http://placeholdit.imgix.net/~text?txtsize=33&txt=280%C3%97220&w=280&h=220&fm=pjpg 280w,
+          http://placeholdit.imgix.net/~text?txtsize=33&txt=560%C3%97440&w=560&h=440&fm=pjpg 560w,
+          http://placeholdit.imgix.net/~text?txtsize=33&txt=840%C3%97660&w=840&h=660&fm=pjpg 840w"
+  sizes="100vw">

source/_patterns/01-molecules/media-object.twig

@@ -0,0 +1,21 @@
+<style>
+  .Media {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .Media > img {
+    margin-right: 1em;
+    max-width: 200px;
+  }
+
+  .Media-body {
+    flex: 1;
+  }
+</style>
+
+
+<div class="Media">
+  {% include "atoms-image" %}
+  <p class="Media-body">Media Object body text</p>
+</div>