diff --git a/behaviors/checkbox-group.js b/behaviors/checkbox-group.js new file mode 100644 index 000000000..5064f3d96 --- /dev/null +++ b/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 ` +
+ + +
+ `; + }).join('\n'); +} + +module.exports = function (result, args) { + var name = result.name, + options = args.options, + field; + + field = dom.create(` +
+
+ ${ createOptions(name, options) } +
+
+ `); + + result.el = field; + + return result; +}; diff --git a/behaviors/checkbox-group.scss b/behaviors/checkbox-group.scss new file mode 100644 index 000000000..38ba28963 --- /dev/null +++ b/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(); +} diff --git a/behaviors/checkbox-group.test.js b/behaviors/checkbox-group.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/client.js b/client.js index afad4f605..6dc60aa9f 100644 --- a/client.js +++ b/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')); diff --git a/styleguide/_inputs.scss b/styleguide/_inputs.scss index 3b499ae07..980632697 100644 --- a/styleguide/_inputs.scss +++ b/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; +}