add checkboxgroup and rename radio to radiogroup

dev/config.js

@@ -62,8 +62,8 @@ module.exports = [
         "defaultValue": "More Settings"
       },
       {
-        "type": "radio",
-        "appKey": "radio-test",
+        "type": "radiogroup",
+        "appKey": "radiogroup-test",
         "defaultValue": "quote' \"test",
         "label": "Radio test",
         "options": [
@@ -74,6 +74,19 @@ module.exports = [
           { "label": "Final thing", "value": "three" }
         ]
       },
+      {
+        "type": "checkboxgroup",
+        "appKey": "checkboxgroup-test",
+        "defaultValue": ["quote' \"test", "two"],
+        "label": "Checkbox test",
+        "options": [
+          { "label": "Test <strong>thing</strong> one", "value": "one" },
+          { "label": "Another thing", "value": "two" },
+          { "label": "One really long thing that would not fit", "value": "three" },
+          { "label": "Small", "value": "quote' \"test" },
+          { "label": "Final thing", "value": "three" }
+        ]
+      },
       {
         "type": "input",
         "appKey": "date",

src/scripts/components/checkboxgroup.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  name: 'checkboxgroup',
+  template: require('../../templates/components/checkboxgroup.tpl'),
+  style: require('../../styles/clay/components/checkboxgroup.scss'),
+  manipulator: 'checkboxgroup',
+  defaults: {
+    label: '',
+    options: []
+  }
+};

src/scripts/components/index.js

@@ -9,5 +9,6 @@ module.exports = {
   submit: require('./submit'),
   text: require('./text'),
   toggle: require('./toggle'),
-  radio: require('./radio')
+  radiogroup: require('./radiogroup'),
+  checkboxgroup: require('./checkboxgroup')
 };

src/scripts/components/radio.js

@@ -1,12 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'radio',
-  template: require('../../templates/components/radio.tpl'),
-  style: require('../../styles/clay/components/radio.scss'),
-  manipulator: 'radio',
-  defaults: {
-    label: '',
-    options: []
-  }
-};

src/scripts/components/radiogroup.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  name: 'radiogroup',
+  template: require('../../templates/components/radiogroup.tpl'),
+  style: require('../../styles/clay/components/radiogroup.scss'),
+  manipulator: 'radiogroup',
+  defaults: {
+    label: '',
+    options: []
+  }
+};

src/scripts/lib/manipulators.js

@@ -48,7 +48,7 @@ module.exports = {
     disable: disable,
     enable: enable
   },
-  radio: {
+  radiogroup: {
     get: function() {
       return this.$element.select('input:checked').get('value');
     },
@@ -61,6 +61,28 @@ module.exports = {
     disable: disable,
     enable: enable
   },
+  checkboxgroup: {
+    get: function() {
+      var result = [];
+      this.$element.select('input:checked').each(function(item) {
+        result.push(item.value);
+      });
+      return result;
+    },
+    set: function(values) {
+      var self = this;
+      self.$element.select('input').set('checked', false);
+      values = values || [];
+      values.map(function(value) {
+        self.$element
+          .select('input[value="' + value.replace('"', '\\"') + '"]')
+          .set('checked', true);
+      });
+      return self.trigger('change');
+    },
+    disable: disable,
+    enable: enable
+  },
   color: {
     get: function() {
       return parseInt(this.$manipulatorTarget.get('value'), 16);

src/styles/clay/components/checkboxgroup.scss

@@ -0,0 +1,63 @@
+@import "bourbon";
+@import "clay";
+
+.component-checkbox {
+
+  @include tap-highlight(rgba(0,0,0,0));
+  display: block;
+
+
+  > .label {
+    display: block;
+    padding-bottom: $item-spacing-v / 2;
+  }
+
+  .checkbox-group {
+
+    label {
+      padding: $item-spacing-v / 2 0;
+      @include tap-highlight();
+    }
+
+    .label {
+      font-size: 0.9em;
+      padding: 0 $item-spacing-h / 2;
+    }
+
+    input {
+      display: none;
+    }
+
+    i {
+      display: block;
+      position: relative;
+      border-radius: $border-radius;
+      width: $base-height;
+      height: $base-height;
+      border: rem(2px) solid $color-gray-7;
+      flex-shrink: 0;
+    }
+
+    input:checked ~ i {
+      border-color: $color-orange;
+      background: $color-orange;
+      
+      &:after {
+        content: '';
+        box-sizing: border-box;
+        transform: rotate(45deg);
+        position: absolute;
+        left: 0.35rem;
+        top: -0.05rem;
+        display: block;
+        width: 0.5rem;
+        height: 1rem;
+        border: 0 solid $color-white;
+        border-right-width: rem(2px);
+        border-bottom-width: rem(2px);
+
+      }
+    }
+
+  }
+}

src/templates/components/checkboxgroup.tpl

@@ -0,0 +1,17 @@
+<div class="component component-checkbox">
+  <span class="label">{{{label}}}</span>
+  <div class="checkbox-group">
+    {{each options}}
+      <label>
+        <span class="label">{{{this.label}}}</span>
+        <input
+          type="checkbox"
+          value="{{this.value}}"
+          name="clay-{{clayId}}"
+          data-manipulator-target
+        />
+        <i></i>
+      </label>
+    {{/each}}
+  </div>
+</div>

test/spec/lib/manipulators.js

@@ -23,7 +23,7 @@ describe('manipulators', function() {
         clayItem.on('change', handlerSpy);
 
         clayItem.set(value);
-        assert.strictEqual(clayItem.get(), expected);
+        assert.deepEqual(clayItem.get(), expected);
         assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
         assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');
       });
@@ -85,9 +85,9 @@ describe('manipulators', function() {
     testEnable('toggle');
   });
 
-  describe('radio', function() {
+  describe('radiogroup', function() {
     var item = {
-      type: 'radio',
+      type: 'radiogroup',
       clayId: 1,
       options: [
         { label: '1', value: 'one' },
@@ -102,6 +102,24 @@ describe('manipulators', function() {
     testEnable(item);
   });
 
+  describe('checkboxgroup', function() {
+    var item = {
+      type: 'checkboxgroup',
+      clayId: 1,
+      options: [
+        { label: '1', value: 'one' },
+        { label: '2', value: 'two' },
+        { label: '3', value: 'three "quote' }
+      ]
+    };
+    testSetGet(item, ['one', 'two']);
+    testSetGet(item, ['three "quote']);
+    testSetGet(item, []);
+    testSetGet(item, false, []);
+    testDisable(item);
+    testEnable(item);
+  });
+
   describe('color', function() {
     testSetGet('color', 'FF0000', 0xff0000);
     testSetGet('color', '#FF0000', 0xff0000);