Merge pull request foundation#42 from ClementParis016/feature/button-…

…target

Add optional 'target' attribute for <button>

lib/componentFactory.js

@@ -27,9 +27,15 @@ module.exports = function(element) {
     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

test/components.js

@@ -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 = `