var tape = require("tape"),
    jsdom = require("jsdom"),
    d3 = Object.assign(require("../"), require("d3-selection"));

/*************************************
 ************ Components *************
 *************************************/

// Leveraging create hook with selection as first argument.
var checkboxHTML = `
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input">
        <span class="checkbox-label-span"></span>
      </label>
    `,
    checkbox = d3.component("div", "form-check")
      .create(function (selection){
        selection.html(checkboxHTML);
      })
      .render(function (selection, props){
        if(props && props.label){
          selection.select(".checkbox-label-span")
              .text(props.label);
        }
      });


/*************************************
 ************** Tests ****************
 *************************************/
tape("Create hook should pass selection on enter.", function(test) {
  var div = d3.select(jsdom.jsdom().body).append("div");
  div.call(checkbox);
  test.equal(div.html(), `<div class="form-check">${checkboxHTML}</div>`);
  test.end();
});

tape("Render should have access to selection content from create hook.", function(test) {
  var div = d3.select(jsdom.jsdom().body).append("div");
  div.call(checkbox, { label: "My Checkbox"});
  test.equal(div.select(".checkbox-label-span").text(), "My Checkbox");
  test.end();
});

@@ -305,312 +305,199 @@
 ar c
-heckboxHTML = %60%0A      %3Clabel class=%22form-check-label%22%3E%0A        %3Cinput type=%22checkbox%22 class=%22form-check-input%22%3E%0A        %3Cspan class=%22checkbox-label-span%22%3E%3C/span%3E%0A      %3C/label%3E%0A    %60,%0A    checkbox = d3.component
+ard = d3.component(%22div%22, %22card%22)%0A      .create(function (selection)%7B%0A        selection%0A          .append
 (%22div%22
-, %22form-check%22)%0A      .create(function (selection)%7B%0A        selection.html(checkboxHTML
+).attr(%22class%22, %22card-block%22)%0A          .append(%22div%22).attr(%22class%22, %22card-text%22
 );%0A 
@@ -559,33 +559,17 @@
     
-if(props && props.label)%7B
+selection
 %0A   
@@ -575,25 +575,16 @@
         
-selection
 .select(
@@ -590,31 +590,19 @@
 (%22.c
-heckbox-label-span
+ard-text
 %22)%0A
-  
     
@@ -625,25 +625,14 @@
 ops.
-label);%0A        %7D
+text);
 %0A   
@@ -896,23 +896,47 @@
 v.call(c
-heckbox
+ard, %7B text: %22I'm in a card.%22 %7D
 );%0A  tes
@@ -955,17 +955,23 @@
 html(), 
-%60
+%5B%0A    '
 %3Cdiv cla
@@ -978,327 +978,174 @@
 ss=%22
-form-check%22%3E$%7BcheckboxHTML%7D%3C/div%3E%60);%0A  test.end();%0A%7D);%0A%0Atape(%22Render should have access to selection content from create hook.%22, function(test) %7B%0A  var div = d3.select(jsdom.jsdom().body).append(%22div%22);%0A  div.call(checkbox, %7B label: %22My Checkbox%22%7D);%0A  test.equal(div.select(%22.checkbox-label-span%22).text(), %22My Checkbox%22
+card%22%3E',%0A      '%3Cdiv class=%22card-block%22%3E',%0A        '%3Cdiv class=%22card-text%22%3E',%0A          %22I%5C'm in a card.%22,%0A        %22%3C/div%3E%22,%0A      %22%3C/div%3E%22,%0A    %22%3C/div%3E%22%0A  %5D.join(%22%22)
 );%0A 

Change test to use card concept