Added some more spec tests for the grid. Added subcolumn functionality.

diff --git a/html/index.html b/html/index.html
index faa6e65911ac4ce1216a0094863541a61d188c43..e87b9c0f1927f2883d8bd27b7d2c267c28c0c6dc 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -88,17 +88,11 @@
     <tr>
       <td class="center" align="center" valign="top">
         <center>
-          <container>
-            <row>
-            <columns large='10'>
-            <h3> This is 10 Columns </h3> 
-
-            </columns>
-            <columns large='2'>
-              <h3> This is 10 Columns </h3> 
-
+          <row>
+            <columns large="12"> 
+              Forever alone
             </columns>
-            </row>
+          </row>
           </container>
           <container>
             <columns small='8' large='2'>

diff --git a/output/gulp-zurb-inky/index.js b/output/gulp-zurb-inky/index.js
index 15633534361b74a7439160666bf07268c687d0b5..b226b445f2aedb398d3fb3c73509213121fd282f 100644 (file)
--- a/output/gulp-zurb-inky/index.js
+++ b/output/gulp-zurb-inky/index.js
@@ -7,7 +7,8 @@ var Inky = function Inky () {
       "row",
       "container",
       "columns",
-      "button"
+      "button",
+      "subcolumns"
   ];
 };
 
@@ -147,7 +148,7 @@ Inky.prototype = {
         output = '<table class="button ' + compClass +'"><tbody><tr><td>' + inner + '</td></tr></tbody></table>';
         break;
       // TODO: This is super messed up right now
-      case 'subcolumn':
+      case 'subcolumns':
         var subColSize = '';
 
         if ($(component).attr('small')) {
@@ -156,7 +157,13 @@ Inky.prototype = {
         if ($(component).attr('large')) {
           subColSize += 'large' + '-' + $(component).attr('large') + ' ';
         }
-        output = '<td class="sub-columns ' + compClass + ' ' + subColSize +'">' + inner + '</td>';
+
+        if ($(component).next()[0].name !== 'subcolumns') {
+          output = '<td class="sub-columns last ' + compClass + ' ' + subColSize +'">' + inner + '</td>';
+        }
+        else {
+          output = '<td class="sub-columns ' + compClass + ' ' + subColSize +'">' + inner + '</td>';
+        }
         break;
 
       case 'container':
@@ -182,7 +189,7 @@ Inky.prototype = {
   },
 
   // Description:
-  //    Returns output for column elements
+  //    Returns output for column elements. TODO: this could be refactored to handle both cols and subcols
   //
   // Arguments:
   //    col (obj), siblings (str): the initial target column and its siblings within the same row 
@@ -217,9 +224,17 @@ Inky.prototype = {
         colSize += 'large' + '-' + $(col).attr('large') + ' ';
       }
 
-      wrapperHTML += '<table class="' + colSize + 'columns"><tr><td>';
-      wrapperHTML += inner;
-      wrapperHTML += '</td><td class="expander"></td></tr></table>';
+      wrapperHTML += '<table class="' + colSize + 'columns"><tr>';
+
+      // subcolumns do not need an extra td
+      if ($(col).children()[0] && $(col).children()[0].name !== 'subcolumns') {
+        wrapperHTML += '<td>' + inner + '</td>';
+      }
+      else {
+        wrapperHTML += inner;
+      }
+
+      wrapperHTML += '<td class="expander"></td></tr></table>';
 
       $(col).replaceWith(wrapperHTML);
     });

diff --git a/spec/columns.js b/spec/columns.js
deleted file mode 100644 (file)
index c6e0b2d..0000000
--- a/spec/columns.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* global describe, it, expect */
-
-"use strict";
-
-var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky');
-var cheerio = require('../node_modules/gulp-zurb-foundation-email/node_modules/cheerio');
-
-describe("the grid", function () {
-
-  beforeEach(function() {
-    // var str = inky.getHTML();
-    var $ = cheerio.load("<div>Hello</div>");
-  });
-  it("returns the correct column syntax", function () {
-    var $ = cheerio.load('<center><container><row><columns large="10"><h3>This is 10 Columns</h3></columns><columns large="2"><h3>This is 2 Columns</h3></columns></row></container></center>');
-    $ = inky.releaseTheKraken($);
-    expect($.html()).toEqual('<center><table class="container "><tbody><tr><td><table class="row "><tbody><tr><td class="wrapper "><table class="large-10 columns"><tr><td><h3>This is 10 Columns</h3></td><td class="expander"></td></tr></table></td><td class="wrapper last"><table class="large-2 columns"><tr><td><h3>This is 2 Columns</h3></td><td class="expander"></td></tr></table></td></tr></tbody></table></td></tr></tbody></table></center>');
-  });
-
-
-});

diff --git a/spec/components.js b/spec/components.js
new file mode 100644 (file)
index 0000000..ccb04ee
--- /dev/null
+++ b/spec/components.js
@@ -0,0 +1,20 @@
+/* global describe, it, expect */
+
+"use strict";
+
+var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky');
+var cheerio = require('../node_modules/gulp-zurb-foundation-email/node_modules/cheerio');
+
+describe("the components", function () {
+
+  it("returns basic button syntax", function () {
+    var $ = cheerio.load('<center><row><columns large="12"><button>Big button</button></columns></row></center>');
+    
+    $ = inky.releaseTheKraken($);
+    expect($.html()).toEqual('<center><table class="row "><tbody><tr><td class="wrapper last"><table class="large-12 columns"><tr><td><table class="button "><tbody><tr><td>Big button</td></tr></tbody></table></td><td class="expander"></td></tr></table></td></tr></tbody></table></center>');
+  });
+
+
+
+
+});

diff --git a/spec/grid.js b/spec/grid.js
new file mode 100644 (file)
index 0000000..af07340
--- /dev/null
+++ b/spec/grid.js
@@ -0,0 +1,50 @@
+/* global describe, it, expect */
+
+"use strict";
+
+var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky');
+var cheerio = require('../node_modules/gulp-zurb-foundation-email/node_modules/cheerio');
+
+describe("the grid", function () {
+  it("returns the correct row syntax", function() {
+    var $ = cheerio.load('<center><row>This is a row!</row></center>');
+    
+    $ = inky.releaseTheKraken($);
+    expect($.html()).toEqual('<center><table class="row "><tbody><tr>This is a row!</tr></tbody></table></center>');
+  })
+
+  it("returns the correct container syntax", function() {
+    var $ = cheerio.load('<center><container>This is a container!</container></center>');
+    
+    $ = inky.releaseTheKraken($);
+    expect($.html()).toEqual('<center><table class="container "><tbody><tr><td>This is a container!</td></tr></tbody></table></center>');
+  })
+
+  it("returns the correct column syntax", function () {
+    var $ = cheerio.load('<center><row><columns large="10"><h3>This is 10 Columns</h3></columns><columns large="2"><h3>This is 2 Columns</h3></columns></row></center>');
+    
+    $ = inky.releaseTheKraken($);
+    expect($.html()).toEqual('<center><table class="row "><tbody><tr><td class="wrapper "><table class="large-10 columns"><tr><td><h3>This is 10 Columns</h3></td><td class="expander"></td></tr></table></td><td class="wrapper last"><table class="large-2 columns"><tr><td><h3>This is 2 Columns</h3></td><td class="expander"></td></tr></table></td></tr></tbody></table></center>');
+  });
+
+  it("nests subcolumns correctly", function() {
+    var $ = cheerio.load('<center><row><columns large="10"> <subcolumns large="6"><h3>I\'m just half of the parent 10 column</h3></subcolumns><subcolumns large="6"><h3>I\'m the other half of the parent 10 column</h3></subcolumns></columns><columns large="2"> <h3> This is 2 Columns </h3></columns></row></center>');
+
+    $ = inky.releaseTheKraken($);
+    expect($.html()).toEqual('<center><table class="row "><tbody><tr><td class="wrapper "><table class="large-10 columns"><tr> <td class="sub-columns  large-6 "><h3>I&apos;m just half of the parent 10 column</h3></td><td class="sub-columns last  large-6 "><h3>I&apos;m the other half of the parent 10 column</h3></td><td class="expander"></td></tr></table></td><td class="wrapper last"><table class="large-2 columns"><tr><td> <h3> This is 2 Columns </h3></td><td class="expander"></td></tr></table></td></tr></tbody></table></center>');
+  })
+
+  it("nests rows in containers", function() {
+    var $ = cheerio.load('<center><container></row>Row in container</row></container></center>');
+
+    $ = inky.releaseTheKraken($);
+    expect($.html()).toEqual('<center><table class="container "><tbody><tr><td>Row in container</td></tr></tbody></table></center>');
+  })
+
+  it("will place the 'last' class on the last column", function() {
+  })
+
+  it("will place the 'last' class on a solo column", function() {
+
+  })
+});

diff --git a/spec/inky.js b/spec/inky.js
index 5462f824803a59daf44d45448bb2cec072b1367f..2ec3b5099a7d0e060d7196c14aa033b29ad71fbe 100644 (file)
--- a/spec/inky.js
+++ b/spec/inky.js
@@ -5,7 +5,7 @@ var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp
 describe("inky", function () {
   it("should be targetting custom tags", function () {
 
-  expect(inky.getTags()).toEqual([ 'panel', 'row', 'container', 'columns', 'button' ]);
+  expect(inky.getTags()).toEqual([ 'panel', 'row', 'container', 'columns', 'button', 'subcolumns' ]);
   });
 
 });