WIP - converting demo components to new format

For prototypal-io/untitled-ui#76

addon/components/demo--generic.js

@@ -1,49 +1,7 @@
 import Ember from 'ember';
 import layout from '../templates/components/demo--generic';
 
-const SIZES = [
-  'x-small',
-  'small',
-  'medium',
-  'large',
-  'x-large'
-];
-
 export default Ember.Component.extend({
   layout,
-  tagName: '',
-
-  init() {
-    this._super(...arguments);
-
-    if (!this.kinds) {
-      this.kinds = ['default'];
-    }
-
-    if (!this.sizes) {
-      this.sizes = [].concat(SIZES);
-    }
-
-    this.activeStates = {};
-    this.currentKind = 'default';
-  },
-
-  actions: {
-    setKind(size) {
-      this.set('currentKind', size);
-    },
-
-    setState(state) {
-      let activeStates = this.get('activeStates');
-      let newStates = Object.assign({}, activeStates);
-
-      if (newStates[state]) {
-        newStates[state] = false;
-      } else {
-        newStates[state] = true;
-      }
-
-      this.set('activeStates', newStates);
-    }
-  }
+  tagName: ''
 });

addon/components/demo--ui-button.js

@@ -1,20 +1,7 @@
-import DemoGeneric from './demo--generic';
+import Ember from 'ember';
 import layout from 'ui-base-theme/templates/components/demo--ui-button';
 
-export default DemoGeneric.extend({
+export default Ember.Component.extend({
   layout,
-
-  kinds: [
-    'default',
-    'material',
-    'primary',
-    'simple'
-  ],
-
-  states: [
-    'active',
-    'focus',
-    'disabled',
-    'loading'
-  ],
+  tagName: ''
 });

addon/templates/components/demo--ui-checkbox.hbs

@@ -1,6 +1,6 @@
 {{!- BEGIN-SNIPPET demo--ui-checkbox -}}
-{{#ui-field kind=kind states=states size=size type="checkbox" as |f|}}
-  {{#f.input}}
+{{#ui-field kind=kind size=size type="checkbox" as |f|}}
+  {{#f.input disabled=activeStates.disabled error=activeStates.error}}
     {{size}}
   {{/f.input}}
 {{/ui-field}}

addon/templates/components/demo--ui-textarea.hbs

@@ -1,5 +1,5 @@
 {{!- BEGIN-SNIPPET demo--ui-textarea -}}
-{{#ui-field kind=kind states=states size=size type="textarea" as |f|}}
+{{#ui-field kind=kind _activeStates=activeStates size=size type="textarea" as |f|}}
   {{#f.label}}
     {{size}}
   {{/f.label}}
@@ -8,8 +8,8 @@
     value=size
     placeholder=(concat size ", 4 rows")
     rows=4
-    error=states.error
-    disabled=states.disabled
+    error=activeStates.error
+    disabled=activeStates.disabled
   }}
 {{/ui-field}}
 {{!- END-SNIPPET -}}

tests/dummy/app/controllers/styleguide.js

@@ -34,17 +34,19 @@ let componentCustomizations = {
   'ui-button': {
     kinds: ['default', 'material', 'primary', 'simple'],
     states: ['active', 'disabled', 'focus', 'loading']
+  },
+  'ui-checkbox': {
+    states: ['disabled', 'error']
+  },
+  'ui-textarea': {
+    states: ['disabled', 'error']
   }
 };
 
 Ember.A(uiComponentNames).removeObjects(COMPONENT_BLACKLIST);
 
-let kinds = ['default'];
-let states = [];
-// let states = ['active', 'focus', 'disabled', 'loading', 'error'];
-
 let allComponents = uiComponentNames.map((componentName) => {
-  let attrs = { name: componentName, kinds: kinds.slice(), states: states.slice() };
+  let attrs = { name: componentName, kinds: ['default'], states: [] };
   let customizations = componentCustomizations[componentName];
 
   if (customizations) {