[update] add original attributes to outputted html

contributing.md

@@ -0,0 +1,26 @@
+# Contributing to Foundation
+
+ZURB loves its community! We always want to hear from our users, whether they're reporting bugs, suggesting new features, or even adding them themselves.
+
+## Reporting Bugs
+
+[Open a new issue](https://github.com/zurb/foundation-emails/issues/new) to report a problem you're having with Foundation for Apps. When writing your issue, keep these things in mind:
+
+- **Be descriptive.** If you can, upload a screenshot of problem you're having, or copy and paste any JavaScript or command line errors you encounter. Being detailed will help us hone in on the problem faster.
+- **Post your code.** It's very helpful to see any HTML, Sass, or JavaScript you've written that you think may be causing the problem. In some cases, we might be able to fix your problem just by fixing your code.
+- **Help us recreate it.** If your problem is complex, tell us the steps needed to recreate the issue. Sometimes we need to see the problem for ourselves, in our own testing environment, so we can more easily debug it.
+
+## Submitting Pull Requests
+
+If you think you can solve a problem yourself, or want to implement a new feature, go for it! Follow these guidelines to make the most killer PR ever.
+
+- **Target the right branch.** So we can properly follow [semantic versioning](http://semver.org/), be sure to develop your pull request in the right branch:
+  - Inky bug fixes: `develop`
+  - New features should be pointed to: `v2.2`
+- **Test, test, and test.** The Foundation frameworks are used by thousands and thousands of designers and developers, so making sure your changes work in every email client is important! Please test bug fixes or new features in Litmus, or another email testing service.
+
+## Help Wanted
+
+Want something to work on? Let us guide you in the right direction.
+
+- Browse the [Help Wanted](https://github.com/zurb/foundation-emails/labels/help%20wanted) on here on [Inky](https://github.com/zurb/inky/labels/help%20wanted) issue to see bugs or features we've asked for the community's help on. Feel free to implement them yourself as a pull request!

index.js

@@ -11,7 +11,7 @@ var inky;
 module.exports = function(opts, cb) {
   var stream;
   opts = opts || {};
-
+  opts.cheerio = Inky.mergeCheerioOpts(opts.cheerio);
   if (typeof inky === 'undefined') {
     inky = new Inky(opts);
   }

lib/componentFactory.js

@@ -1,5 +1,6 @@
 var format = require('util').format;
 var $ = require('cheerio');
+var getAttrs = require('./util/getAttrs');
 
 /**
  * Returns output for desired custom element
@@ -8,7 +9,8 @@ var $ = require('cheerio');
  */
 module.exports = function(element) {
   var inner = element.html();
-
+  var attrs = getAttrs(element);
+
   switch (element[0].name) {
     // <column>
     case this.components.columns:
@@ -21,15 +23,21 @@ module.exports = function(element) {
         classes = classes.concat(element.attr('class').split(' '));
       }
 
-      return format('<table class="%s"><tbody><tr>%s</tr></tbody></table>', classes.join(' '), inner);
+      return format('<table %s class="%s"><tbody><tr>%s</tr></tbody></table>', attrs, classes.join(' '), inner);
 
     // <button>
     case this.components.button:
       var expander = '';
 
+      // Prepare optional target attribute for the <a> element
+      var target = '';
+      if (element.attr('target')) {
+        target = ' target=' + element.attr('target');
+      }
+
       // If we have the href attribute we can create an anchor for the inner of the button;
       if (element.attr('href')) {
-        inner = format('<a href="%s">%s</a>', element.attr('href'), inner);
+        inner = format('<a href="%s"%s>%s</a>', element.attr('href'), target, inner);
       }
 
       // If the button is expanded, it needs a <center> tag around the content
@@ -53,7 +61,7 @@ module.exports = function(element) {
         classes = classes.concat(element.attr('class').split(' '));
       }
 
-      return format('<table class="%s"><tbody><tr><td>%s</td></tr></tbody></table>', classes.join(' '), inner);
+      return format('<table %s class="%s"><tbody><tr><td>%s</td></tr></tbody></table>', attrs, classes.join(' '), inner);
 
     // <inky>
     case this.components.inky:
@@ -74,15 +82,15 @@ module.exports = function(element) {
         classes = classes.concat(element.attr('class').split(' '));
       }
       var centerAttr = element.attr('align') ? 'align="center"' : '';
-      return format('<table class="%s"%s><tr><td><table><tr>%s</tr></table></td></tr></table>', classes.join(' '), centerAttr, inner);
+      return format('<table %s class="%s"%s><tr><td><table><tr>%s</tr></table></td></tr></table>', attrs, classes.join(' '), centerAttr, inner);
 
     // <item>
     case this.components.menuItem:
       var classes = ['menu-item'];
       if (element.attr('class')) {
         classes = classes.concat(element.attr('class').split(' '));
       }
-      return format('<th class="%s"><a href="%s">%s</a></th>', classes.join(' '), element.attr('href'), inner);
+      return format('<th %s class="%s"><a href="%s">%s</a></th>', attrs, classes.join(' '), element.attr('href'), inner);
 
     // <center>
     case this.components.center:
@@ -105,7 +113,7 @@ module.exports = function(element) {
         classes = classes.concat(element.attr('class').split(' '));
       }
 
-      return format('<table class="callout"><tr><th class="%s">%s</th><th class="expander"></th></tr></table>', classes.join(' '), inner);
+      return format('<table %s class="callout"><tr><th class="%s">%s</th><th class="expander"></th></tr></table>', attrs, classes.join(' '), inner);
 
     // <spacer>
     case this.components.spacer:
@@ -118,7 +126,7 @@ module.exports = function(element) {
         size = (element.attr('size'));
       }
 
-      return format('<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', classes.join(' '), inner);
+      return format('<table %s class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', attrs, classes.join(' '), inner);
 
     // <wrapper>
     case this.components.wrapper:
@@ -127,7 +135,7 @@ module.exports = function(element) {
         classes = classes.concat(element.attr('class').split(' '));
       }
 
-      return format('<table class="%s" align="center"><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), inner);
+      return format('<table %s class="%s" align="center"><tr><td class="wrapper-inner">%s</td></tr></table>', attrs, classes.join(' '), inner);
 
     default:
       // If it's not a custom component, return it as-is

lib/inky.js

@@ -59,6 +59,14 @@ Inky.prototype.releaseTheKraken = function($) {
   return $;
 }
 
+Inky.mergeCheerioOpts = function(opts) {
+  opts = opts || {};
+  if(typeof(opts.decodeEntities) === 'undefined') {
+    opts.decodeEntities = false;
+  }
+  return opts;
+};
+
 Inky.prototype.componentFactory = require('./componentFactory');
 
 Inky.prototype.makeColumn = require('./makeColumn');

lib/makeColumn.js

@@ -1,6 +1,8 @@
 var format = require('util').format;
 var multiline = require('multiline');
 var $ = require('cheerio');
+var getAttrs = require('./util/getAttrs');
+
 
 /**
  * Returns output for column elements.
@@ -13,6 +15,7 @@ module.exports = function(col) {
   var inner   = $(col).html();
   var classes = [];
   var expander = '';
+  var attrs = getAttrs(col);
 
   // Add 1 to include current column
   var colCount = $(col).siblings().length + 1;
@@ -25,6 +28,7 @@ module.exports = function(col) {
   // Check for sizes. If no attribute is provided, default to small-12. Divide evenly for large columns
   var smallSize = $(col).attr('small') || this.columnCount;
   var largeSize = $(col).attr('large') || $(col).attr('small') || Math.floor(this.columnCount / colCount);
+  var noExpander =  $(col).attr('no-expander');
 
   classes.push(format('small-%s', smallSize));
   classes.push(format('large-%s', largeSize));
@@ -38,13 +42,13 @@ module.exports = function(col) {
 
   // If the column contains a nested row, the .expander class should not be used
   // The == on the first check is because we're comparing a string pulled from $.attr() to a number
-  if (largeSize == this.columnCount && col.find('.row, row').length === 0) {
+  if (largeSize == this.columnCount && col.find('.row, row').length === 0 && (noExpander == undefined || noExpander == "false") ) {
     expander = '\n<th class="expander"></th>';
   }
 
   // Final HTML output
   output = multiline(function() {/*
-    <th class="%s">
+    <th class="%s" %s>
       <table>
         <tr>
           <th>%s</th>%s
@@ -53,5 +57,5 @@ module.exports = function(col) {
     </th>
   */});
 
-  return format(output, classes.join(' '), inner, expander);
+  return format(output, classes.join(' '), attrs, inner, expander);
 }

lib/util/getAttrs.js

@@ -0,0 +1,13 @@
+// Grabs all attributes from an element and returns them as a string
+// to be put back into outputted table elements
+// @returns {string} attributes pulled from inky objects
+module.exports = function(el) {
+	var attrs = el.attr();
+    var ignoredAttributes = ['class', 'id', 'href', 'size', 'large', 'no-expander', 'small'];
+    var result = '';
+
+    for (var key in attrs) {
+      if (ignoredAttributes.indexOf(key) == -1) result += (' ' + key + '=' + '"' + attrs[key] + '"');
+    }
+    return result;
+}

test/components.js

@@ -45,7 +45,7 @@ describe('Center', () => {
 
     var expected = `
       <center data-parsed="">
-        <table class="menu float-center" align="center">
+        <table align="center" class="menu float-center">
           <tr>
             <td>
               <table>
@@ -85,6 +85,25 @@ describe('Button', () => {
     compare(input, expected);
   });
 
+  it('creates a button with target="_blank"', () => {
+    var input = '<button href="http://zurb.com" target="_blank">Button</button>';
+    var expected = `
+      <table class="button">
+        <tr>
+          <td>
+            <table>
+              <tr>
+                <td><a href="http://zurb.com" target="_blank">Button</a></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+    `;
+
+    compare(input, expected);
+  });
+
   it('creates a button with classes', () => {
     var input = `
       <button class="small alert" href="http://zurb.com">Button</button>
@@ -229,7 +248,7 @@ describe('Callout', () => {
     compare(input, expected);
   });
 });
-  
+
 describe('Spacer', () => {
   it('creates a spacer element with correct size', () => {
     var input = '<spacer size="10"></spacer>';
@@ -245,7 +264,7 @@ describe('Spacer', () => {
 
     compare(input, expected);
   });
-  
+
   it('copies classes to the final spacer HTML', () => {
     var input = '<spacer size="10" class="bgcolor"></spacer>';
     var expected = `

test/grid.js

@@ -75,6 +75,52 @@ describe('Grid', () => {
     compare(input, expected);
   });
 
+  it('creates a single column with first and last classes with no-expander', function () {
+    var input = '<columns large="12" small="12" no-expander>One</columns>';
+    var expected = `
+      <th class="small-12 large-12 columns first last">
+        <table>
+          <tr>
+            <th>One</th>
+          </tr>
+        </table>
+      </th>
+    `;
+
+  compare(input, expected);
+  });
+
+  it('creates a single column with first and last classes with no-expander="false"', function () {
+    var input = '<columns large="12" small="12" no-expander="false">One</columns>';
+    var expected = `
+      <th class="small-12 large-12 columns first last">
+        <table>
+          <tr>
+            <th>One</th>
+            <th class="expander"></th>
+          </tr>
+        </table>
+      </th>
+    `;
+
+  compare(input, expected);
+  });
+
+  it('creates a single column with first and last classes with no-expander="true"', function () {
+    var input = '<columns large="12" small="12" no-expander="true">One</columns>';
+    var expected = `
+      <th class="small-12 large-12 columns first last">
+        <table>
+          <tr>
+            <th>One</th>
+          </tr>
+        </table>
+      </th>
+    `;
+
+  compare(input, expected);
+  });
+
   it('creates two columns, one first, one last', function () {
     var input = `
       <columns large="6" small="12">One</columns>
@@ -226,6 +272,22 @@ describe('Grid', () => {
 
     compare(input, expected);
   });
+
+  it('transfers attributes to the final HTML', () => {
+    var input = '<columns dir="rtl" valign="middle">One</columns>';
+    var expected = `
+      <th class="small-12 large-12 columns first last" dir="rtl" valign="middle">
+        <table>
+          <tr>
+            <th>One</th>
+            <th class="expander"></th>
+          </tr>
+        </table>
+      </th>
+    `;
+
+    compare(input, expected)
+  });
 });
 
 describe('Block Grid', () => {

test/lib/compare.js

@@ -10,7 +10,7 @@ var htmlEqual = require('assert-html-equal');
  */
 module.exports = function compare(input, expected, cheerioOpts) {
   var inky = new Inky();
-  var $ = cheerio.load(input, cheerioOpts);
+  var $ = cheerio.load(input, Inky.mergeCheerioOpts(cheerioOpts));
   var output = inky.releaseTheKraken($).html();
 
   htmlEqual(output, expected);