added checkbox-group behavior

behaviors/checkbox-group.js

@@ -0,0 +1,40 @@
+/*
+Checkbox-Group arguments:
+
+{array} options each has name and value (strings)
+ */
+
+var dom = require('../services/dom');
+
+function createOptions(name, options) {
+  return options.map(function (option) {
+    var optName = option.name,
+      optValue = option.value,
+      id = name + '-' + optValue + '-' + optName;
+
+    return `
+      <div class="checkbox-group-item">
+        <input name="${name}" rv-field="${name}" type="checkbox" id="${id}" rv-checked="${name}.data.${optValue}" value="${optValue}" />
+        <label for="${id}">${optName}</label>
+      </div>
+    `;
+  }).join('\n');
+}
+
+module.exports = function (result, args) {
+  var name = result.name,
+    options = args.options,
+    field;
+
+  field = dom.create(`
+    <div class="input-label">
+      <div class="checkbox-group">
+        ${ createOptions(name, options) }
+      </div>
+    </div>
+  `);
+
+  result.el = field;
+
+  return result;
+};

behaviors/checkbox-group.scss

@@ -0,0 +1,17 @@
+@import '../styleguide/inputs';
+@import '../styleguide/typography';
+
+.checkbox-group .checkbox-group-item {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.checkbox-group input {
+  @include checkbox();
+}
+
+.checkbox-group label {
+  @include normal-text();
+  @include overlay-copy();
+}

client.js

@@ -16,6 +16,7 @@ behaviors.add('soft-maxlength', require('./behaviors/soft-maxlength'));
 behaviors.add('radio', require('./behaviors/radio'));
 behaviors.add('description', require('./behaviors/description'));
 behaviors.add('checkbox', require('./behaviors/checkbox'));
+behaviors.add('checkbox-group', require('./behaviors/checkbox-group'));
 behaviors.add('textarea', require('./behaviors/textarea'));
 behaviors.add('url', require('./behaviors/url'));
 behaviors.add('select', require('./behaviors/select'));

styleguide/_inputs.scss

@@ -27,3 +27,11 @@
     border: 1px solid $yellow;
   }
 }
+
+@mixin checkbox {
+  height: 2.4rem;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  width: 2.4rem;
+}