add radio component

dev/config.js

@@ -36,7 +36,7 @@ module.exports = [
         "type": "toggle",
         "appKey": "cool_stuff",
         "label": "Enable Cool Stuff",
-        "defaultValue": true
+        "defaultValue": false
       },
       {
         "type": "color",
@@ -62,13 +62,34 @@ module.exports = [
         "defaultValue": "More Settings"
       },
       {
-        "id": "flavor",
+        "type": "radio",
+        "appKey": "radio-test",
+        "defaultValue": "quote' \"test",
+        "label": "Radio test",
+        "options": [
+          { "label": "Test thing 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",
+        "defaultValue": "",
+        "label": "Date",
+        "attributes": {
+          type: "date"
+        }
+      },
+      {
         "type": "select",
         "appKey": "flavor",
         "defaultValue": "grape",
         "label": "Favorite Flavor",
         "options": [
-          { "label": "Berry things", "value": "berry" },
+          { "label": "Berry", "value": "berry" },
           { "label": "Grape", "value": "grape" },
           { "label": "Banana", "value": "banana" }
         ]

src/scripts/components/index.js

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

src/scripts/components/radio.js

@@ -0,0 +1,12 @@
+'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/lib/clay-config.js

@@ -53,22 +53,25 @@ function ClayConfig(settings, config, $rootContainer) {
       $container.add($wrapper);
       _addItems(item.items, $wrapper);
     } else {
-      var clayItem = new ClayItem(item).initialize();
+      var _item = _.copyObj(item);
+      _item.clayId = _items.length;
 
-      if (item.id) {
+      var clayItem = new ClayItem(_item).initialize();
-        _itemsById[item.id] = clayItem;
+
+      if (_item.id) {
+        _itemsById[_item.id] = clayItem;
       }
 
-      if (item.appKey) {
+      if (_item.appKey) {
-        _itemsByAppKey[item.appKey] = clayItem;
+        _itemsByAppKey[_item.appKey] = clayItem;
       }
 
       _items.push(clayItem);
 
       // set the value of the item via the manipulator to ensure consistency
-      var value = typeof _settings[item.appKey] !== 'undefined' ?
+      var value = typeof _settings[_item.appKey] !== 'undefined' ?
-        _settings[item.appKey] :
+        _settings[_item.appKey] :
-        (item.defaultValue || '');
+        (_item.defaultValue || '');
 
       clayItem.set(value);
 

src/scripts/lib/clay-item.js

@@ -58,7 +58,7 @@ function ClayItem(config) {
   };
 
   // attach event methods
-  ClayEvents.call(self, self.$manipulatorTarget);
+  ClayEvents.call(self, self.$element);
 
   // attach the manipulator methods to the clayItem
   _.eachObj(_component.manipulator, function(methodName, method) {

src/scripts/lib/manipulators.js

@@ -48,6 +48,19 @@ module.exports = {
     disable: disable,
     enable: enable
   },
+  radio: {
+    get: function() {
+      return this.$element.select('input:checked').get('value');
+    },
+    set: function(value) {
+      this.$element
+        .select('input[value="' + value.replace('"', '\\"') + '"]')
+        .set('checked', true);
+      return this.trigger('change');
+    },
+    disable: disable,
+    enable: enable
+  },
   color: {
     get: function() {
       return parseInt(this.$manipulatorTarget.get('value'), 16);

src/styles/clay/_base.scss

@@ -50,11 +50,10 @@ h6 {
   @include font-size(0.8);
 }
 
-.component {
+label {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: $item-spacing-v;
 
   .input {
     white-space: nowrap;
@@ -84,6 +83,10 @@ h6 {
   }
 }
 
+.component {
+  padding-bottom: $item-spacing-v;
+  @include tap-highlight();
+}
 
 .section {
   background: $color-gray-4;
@@ -126,14 +129,6 @@ h6 {
 
 }
 
-label.component{
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
-
-  &:active {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-}
-
 strong {
   @include font-pfdin(medium);
   color: $color-orange;

src/styles/clay/_mixins.scss

@@ -33,3 +33,11 @@
   font-size:$font-size;
   line-height: $base-line-height * ceil($font-size / $base-line-height);
 }
+
+@mixin tap-highlight($color: rgba(255, 255, 255, 0.1)) {
+  -webkit-tap-highlight-color: $color;
+
+  &:active {
+    background-color: $color;
+  }
+}

src/styles/clay/components/radio.scss

@@ -0,0 +1,60 @@
+@import "bourbon";
+@import "clay";
+
+.component-radio {
+
+  @include tap-highlight(rgba(0,0,0,0));
+  display: block;
+
+
+  > .label {
+    display: block;
+    padding-bottom: $item-spacing-v / 2;
+  }
+
+  .radio-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: $base-height;
+      width: $base-height;
+      height: $base-height;
+      border: 2px solid $color-gray-7;
+      flex-shrink: 0;
+    }
+
+    input:checked ~ i {
+      border-color: $color-orange;
+      
+      &:after {
+        $padding: 15%;
+        content: '';
+        display: block;
+        position: absolute;
+        left: $padding;
+        right: $padding;
+        top: $padding;
+        bottom: $padding;
+        border-radius: $base-height;
+        background: $color-orange;
+
+      }
+    }
+
+  }
+}

src/templates/components/radio.tpl

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

test/spec/lib/clay-config.js

@@ -42,7 +42,11 @@ describe('ClayConfig', function() {
 
   describe('.getAllItems()', function() {
     it('returns an array of all the items', function() {
-      var config = fixtures.config(['input', 'text', ['input']]);
+      var config = fixtures.config([
+        {type: 'input', clayId: 0},
+        {type: 'text', clayId: 1},
+        [{type: 'input', clayId: 2}]
+      ]);
       var clayConfig = fixtures.clayConfig(config);
       var allItems = clayConfig.getAllItems();
       assert.strictEqual(allItems.length, 3);
@@ -55,8 +59,8 @@ describe('ClayConfig', function() {
   describe('.getItemByAppKey()', function() {
     it('it returns the correct item', function() {
       var config = fixtures.config([
-        {type: 'input', appKey: 'test-app-key'},
+        {type: 'input', appKey: 'test-app-key', clayId: 0},
-        {type: 'input', appKey: undefined}
+        {type: 'input', appKey: undefined, clayId: 1}
       ]);
       var clayConfig = fixtures.clayConfig(config);
       assert.deepEqual(clayConfig.getItemByAppKey('test-app-key').config, config[0]);
@@ -66,8 +70,8 @@ describe('ClayConfig', function() {
   describe('.getItemById()', function() {
     it('it returns the correct item', function() {
       var config = fixtures.config([
-        {type: 'input', id: 'test-id'},
+        {type: 'input', id: 'test-id', clayId: 0},
-        {type: 'input', id: undefined}
+        {type: 'input', id: undefined, clayId: 1}
       ]);
       var clayConfig = fixtures.clayConfig(config);
       assert.deepEqual(clayConfig.getItemById('test-id').config, config[0]);
@@ -76,7 +80,11 @@ describe('ClayConfig', function() {
 
   describe('.getItemsByType()', function() {
     it('it returns the correct items', function() {
-      var config = fixtures.config(['input', 'text', 'input']);
+      var config = fixtures.config([
+        {type: 'input', clayId: 0},
+        {type: 'text', clayId: 1},
+        {type: 'input', clayId: 2}
+      ]);
       var clayConfig = fixtures.clayConfig(config);
       assert.deepEqual(clayConfig.getItemsByType('input')[0].config, config[0]);
       assert.deepEqual(clayConfig.getItemsByType('input')[1].config, config[2]);

test/spec/lib/manipulators.js

@@ -7,7 +7,7 @@ var fixture = require('../../fixture');
 describe('manipulators', function() {
 
   /**
-   * @param {string} itemType
+   * @param {string|Clay~ConfigItem} itemType
    * @param {*} value
    * @param {*} [expected]
    * @return {void}
@@ -31,7 +31,7 @@ describe('manipulators', function() {
   }
 
   /**
-   * @param {string} itemType
+   * @param {string|Clay~ConfigItem} itemType
    * @return {void}
    */
   function testDisable(itemType) {
@@ -85,6 +85,23 @@ describe('manipulators', function() {
     testEnable('toggle');
   });
 
+  describe('radio', function() {
+    var item = {
+      type: 'radio',
+      clayId: 1,
+      options: [
+        { label: '1', value: 'one' },
+        { label: '2', value: 'two' },
+        { label: '3', value: 'three "quote' }
+      ]
+    };
+    testSetGet(item, 'one');
+    testSetGet(item, 'two');
+    testSetGet(item, 'three "quote');
+    testDisable(item);
+    testEnable(item);
+  });
+
   describe('color', function() {
     testSetGet('color', 'FF0000', 0xff0000);
     testSetGet('color', '#FF0000', 0xff0000);