Allow optgroups for selects

dev/config.js

@@ -122,7 +122,14 @@ module.exports = [
           { "label": "", "value": "" },
           { "label": "Berry", "value": "berry" },
           { "label": "This Option is Selected", "value": "grape" },
-          { "label": "Banana", "value": "banana" }
+          { "label": "Banana", "value": "banana" },
+          {
+            "label": "This is an optgroup",
+            "value": [
+              { "label": "Peach", "value": "peach" },
+              { "label": "Mango", "value": "mango" }
+            ]
+          }
         ],
         "attributes": {
           "required": "required"

src/templates/components/select.tpl

@@ -4,7 +4,15 @@
     <span class="value"></span>
     <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
       {{each options}}
-        <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+        {{if Array.isArray(this.value)}}
+          <optgroup label="{{this.label}}">
+            {{each this.value}}
+              <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+            {{/each}}
+          </optgroup>
+        {{else}}
+          <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+        {{/if}}
       {{/each}}
     </select>
   </label>

test/spec/components/select.js

@@ -21,4 +21,26 @@ describe('component - select', function() {
     selectItem.set('value-2');
     assert.strictEqual($valueDisplay.get('innerHTML'), 'label 2');
   });
+
+  it('sets the value display to the correct value on change when using optgroups',
+  function() {
+    var clayConfig = fixture.clayConfig([
+      {
+        type: 'select',
+        defaultValue: 'value-1',
+        options: [
+          { label: 'label 1', value: 'value-1' },
+          { label: 'group', value: [
+            { label: 'label 2', value: 'value-2' },
+            { label: 'label 3', value: 'value-3' }
+          ]}
+        ]
+      }
+    ]);
+    var selectItem = clayConfig.getItemsByType('select')[0];
+    var $valueDisplay = selectItem.$element.select('.value');
+    assert.strictEqual($valueDisplay.get('innerHTML'), 'label 1');
+    selectItem.set('value-2');
+    assert.strictEqual($valueDisplay.get('innerHTML'), 'label 2');
+  });
 });