add checkboxgroup and rename radio to radiogroup

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);