Allow for different kinds/states per demo component

addon/components/demo--generic.js

@@ -16,10 +16,16 @@ export default Ember.Component.extend({
   init() {
     this._super(...arguments);
 
-    this.sizes = [].concat(SIZES);
+    if (!this.kinds) {
+      this.kinds = ['default'];
+    }
+
+    if (!this.sizes) {
+      this.sizes = [].concat(SIZES);
+    }
+
     this.activeStates = {};
     this.currentKind = 'default';
-    this.kinds = ['default'];
   },
 
   actions: {

addon/components/ui-component.js

@@ -21,10 +21,10 @@ export default Ember.Component.extend({
   didReceiveAttrs() {
     this._super(...arguments);
 
-    let _activeState = this.get('_activeState');
+    let _activeStates = this.get('_activeStates');
 
-    if (_activeState) {
-      this.set('_activeUIStates', _activeState);
+    if (_activeStates) {
+      this.set('_activeUIStates', _activeStates);
     }
   },
 

addon/components/ui-demo.js

@@ -27,6 +27,7 @@ export default Ember.Component.extend({
     let componentName = this.get('demoComponent.name');
     let demoComponentName = `demo--${componentName}`;
     let demoComponent = Ember.getOwner(this)._lookupFactory(`component:${demoComponentName}`);
+
     if (demoComponent) {
       console.log(`rendering ${componentName} demo with ${demoComponentName}`);
       return demoComponentName;
@@ -41,8 +42,8 @@ export default Ember.Component.extend({
       alert(message);
     },
 
-    setKind(size) {
-      this.set('currentKind', size);
+    setKind(kind) {
+      this.set('currentKind', kind);
     },
 
     setState(state) {

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

@@ -1,23 +1,5 @@
-{{#ui-button-group size="x-small" as |group|}}
-  {{#each kinds as |kind|}}
-    {{#group.button active=(eq currentKind kind) onclick=(action "setKind" kind)}}
-      {{kind}}
-    {{/group.button}}
-  {{/each}}
-{{/ui-button-group}}
-
-{{#ui-button-group size="x-small" as |group|}}
-  {{#each states as |state|}}
-    {{#group.button active=(get activeStates state) onclick=(action "setState" state)}}
-      {{state}}
-    {{/group.button}}
-  {{/each}}
-{{/ui-button-group}}
-
-{{#each sizes as |size|}}
 {{!- BEGIN-SNIPPET demo--ui-button -}}
-{{#ui-button _activeState=activeStates kind=currentKind size=size}}
+{{#ui-button _activeStates=activeStates kind=kind size=size}}
   Button
 {{/ui-button}}
 {{!- END-SNIPPET -}}
-{{/each}}

addon/templates/components/ui-demo.hbs

@@ -3,7 +3,6 @@
     {{#p.titlebar}}{{demoComponent.name}}{{/p.titlebar}}
 
     {{#p.content}}
-      {{#if false}}
       <div class="ui-demo--modifiers">
         {{#ui-button-group size="x-small" as |group|}}
           {{#each demoComponent.kinds as |kind|}}
@@ -21,12 +20,16 @@
           {{/each}}
         {{/ui-button-group}}
       </div>
-      {{/if}}
 
+      {{#each sizes as |size|}}
         {{component demoComponentToRender
           componentBeingDemoed=demoComponent.name
+          kind=currentKind
+          activeStates=activeStates
+          size=size
           action=(hash alert=(action "alert"))
         }}
+      {{/each}}
 
       {{code-snippet name=(concat "demo--" demoComponent.name ".hbs")}}
     {{/p.content}}

tests/dummy/app/controllers/styleguide.js

@@ -1,20 +1,15 @@
 /* globals requirejs */
 import Ember from 'ember';
 
-let uiComponentModules = Object.keys(requirejs.entries)
-  .filter((module) => /^ui-base-theme\/components\/ui-/.test(module));
-
-let uiComponentNames = uiComponentModules
-  .map(m => m.replace(/^ui-base-theme\/components\//, ''))
-  .filter(m => !/--/.test(m));
-
-uiComponentNames = ['ui-button'];
-Ember.A(uiComponentNames).removeObjects([
+const COMPONENT_BLACKLIST = [
   'ui-component',
   'ui-demo',
   'ui-dropbutton-trigger',
   'ui-icon',
+  'ui-input',
+  'ui-field',
   'ui-kind',
+  'ui-loading',
   'ui-modal',
   'ui-modal-backdrop',
   'ui-panel-content',
@@ -26,19 +21,38 @@ Ember.A(uiComponentNames).removeObjects([
   'ui-table-cell',
   'ui-table-layout',
   'ui-table-row'
-]);
+];
+
+let uiComponentModules = Object.keys(requirejs.entries)
+  .filter((module) => /^ui-base-theme\/components\/ui-/.test(module));
+
+let uiComponentNames = uiComponentModules
+  .map(m => m.replace(/^ui-base-theme\/components\//, ''))
+  .filter(m => !/--/.test(m));
+
+let componentCustomizations = {
+  'ui-button': {
+    kinds: ['default', 'material', 'primary', 'simple'],
+    states: ['active', 'disabled', 'focus', 'loading']
+  }
+};
+
+Ember.A(uiComponentNames).removeObjects(COMPONENT_BLACKLIST);
 
 let kinds = ['default'];
-let states = ['active', 'focus', 'disabled', 'loading', 'error'];
-let allComponents = uiComponentNames.map(cn => {
-  return {
-    name: cn,
-    kinds: kinds.slice(),
-    states: states.slice()
-  };
-});
+let states = [];
+// let states = ['active', 'focus', 'disabled', 'loading', 'error'];
 
-Ember.A(allComponents).findBy('name', 'ui-button').kinds = ['default', 'material', 'primary', 'simple'];
+let allComponents = uiComponentNames.map((componentName) => {
+  let attrs = { name: componentName, kinds: kinds.slice(), states: states.slice() };
+  let customizations = componentCustomizations[componentName];
+
+  if (customizations) {
+    return Object.assign(attrs, customizations);
+  } else {
+    return attrs;
+  }
+});
 
 export default Ember.Controller.extend({
   allComponents