API updates, using native ariaRole and NPM updates

  - API uses `onclick` instead of `action` for strict closure action handling
  - Use native Ember `ariaRole` property
  - `package.json` dependencies

Author: alexdiliberto

CHANGELOG.md

@@ -6,6 +6,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Updated
   - `package.json` dependencies
   - Integration tests now use standard DOM instead of jQuery
+  - API uses `onclick` instead of `action` for strict closure action handling
+  - Use native Ember `ariaRole` property
+  - `package.json` dependencies
 
 ### Removed
   - Acceptance tests

README.md

@@ -38,7 +38,7 @@ Global optional parameters:
 ### Menu
 Menu optional parameters:
   * `is-open` boolean - Set initial open menu state.
-  * `action` string - The name of your upstream controller action to handle an icon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
+  * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
 
 **animation**
 ```handlebars
@@ -63,7 +63,7 @@ Menu optional parameters:
 ### Grid
 Grid optional parameters:
   * `is-open` boolean - Set initial open grid state.
-  * `action` string - The name of your upstream controller action to handle an icon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
+  * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
 
 **animation**
 ```handlebars
@@ -84,7 +84,7 @@ Grid optional parameters:
 ### Add
 Add optional parameters:
   * `is-added` boolean - Set initial open add state.
-  * `action` string - The name of your upstream controller action to handle an icon click. Returned with 1 parameter `isAdded`, which is a boolean type indicating if the current state is pending add.
+  * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isAdded`, which is a boolean type indicating if the current state is pending add.
 
 **animation**
 ```handlebars
@@ -105,7 +105,7 @@ Add optional parameters:
 ### Remove
 Remove optional parameters:
   * `is-removed` boolean - Set initial open removed state.
-  * `action` string - The name of your upstream controller action to handle an icon click. Returned with 1 parameter `isRemoved`, which is a boolean type indicating if the current state is pending remove.
+  * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isRemoved`, which is a boolean type indicating if the current state is pending remove.
 
 **animation**
 ```handlebars
@@ -134,7 +134,7 @@ Remove optional parameters:
 ### Mail
 Mail optional parameters:
   * `is-open` boolean - Set initial open mail state.
-  * `action` string - The name of your upstream controller action to handle an icon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
+  * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
 
 ```handlebars
 {{t-mail}}
@@ -152,7 +152,7 @@ Mail optional parameters:
 ### Form
 Form optional parameters:
   * `is-searching` boolean - Set initial searching state.
-  * `action` string - The name of your upstream controller action to handle an icon click. Returned with 1 parameter `isSearching`, which is a boolean type indicating if the current state is searching or not searching.
+  * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isSearching`, which is a boolean type indicating if the current state is searching or not searching.
 
 ```handlebars
 {{t-form}}
@@ -170,7 +170,7 @@ Form optional parameters:
 ### Video
 Video optional parameters:
   * `is-playing` boolean - Set initial playing state.
-  * `action` string - The name of your upstream controller action to handle an icon click. Returned with 1 parameter `isPlaying`, which is a boolean type indicating if the current state is playing or stopped.
+  * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isPlaying`, which is a boolean type indicating if the current state is playing or stopped.
 
 ```handlebars
 {{t-video}}

addon/components/base-transformicon.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 
 const {
   get,
+  assert,
   Component
 } = Ember;
 
@@ -15,10 +16,9 @@ const {
 export default Component.extend({
   tagName: 'button',
 
-  attributeBindings: ['type', 'role', 'aria-label'],
+  attributeBindings: ['type', 'label:aria-label'],
   type: 'button',
-  role: undefined,
-  'aria-label': undefined,
+  label: null,
 
   classNames: ['tcon'],
 
@@ -38,6 +38,7 @@ export default Component.extend({
 
       * `is-open`
       * `is-added`
+      * `is-searching`
       * `is-removed`
       * `is-playing`
 
@@ -51,15 +52,23 @@ export default Component.extend({
   /**
     This click handler does two things after retrieving the transformicons initital state property name.
 
-    - It will toggle the state of the transformicon.
-    - It will also send a boolean action up to the consuming application when the transformicon is clicked. This action is returned with 1 parameter indicating if the current icon state is open/closed | added/removed | playing/stopped.
+    - It will toggle the state of the transformicon by toggling the `initialState` property name.
+    - It will also, if necessary, call an `onclick` closure action from to the consuming application's parent controller or component when the transformicon is clicked. This action is returned with 1 parameter indicating if the current icon state is open | added | searching | removed | playing.
 
     @method click
     @public
   */
   click() {
     let initStateProp = get(this, 'initialState');
+    let onclick = get(this, 'onclick');
+
     this.toggleProperty(initStateProp);
-    this.sendAction('action', get(this, initStateProp));
+
+    if (onclick) {
+      assert(`[ember-cli-transformicons] ${this.toString()} \`onclick\` action handler must be a valid closure action`, typeof onclick === 'function');
+
+      let boolInitStateProp = get(this, initStateProp);
+      onclick(boolInitStateProp);
+    }
   }
 });

addon/components/t-add.js

@@ -21,7 +21,7 @@ const animationTypeTable = EmberObject.create({
     * `animation` string - Set the add animation type.
     * `a` string - Shorthand alias for `animation`.
     * `is-added` boolean - Set initial open added state.
-    * `action` string - The name of your controller/route action to handle an icon click. Returned with 1 parameter `isAdded`, which is a boolean type indicating if the current state is pending add.
+    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isAdded`, which is a boolean type indicating if the current state is pending add.
 
   Available `animation` types:
     * minus
@@ -45,7 +45,7 @@ const animationTypeTable = EmberObject.create({
 export default BaseTransformicon.extend({
   layout,
 
-  'aria-label': 'add item',
+  label: 'add item',
 
   classNames: ['tcon-plus'],
   classNameBindings: ['animationType', 'isAdded'],
@@ -59,7 +59,7 @@ export default BaseTransformicon.extend({
   animationType: computed('animation', {
     get() {
       let anim = get(this, 'animation');
-      return animationTypeTable.get(anim) || animationTypeTable.get(defaultAnimation);
+      return get(animationTypeTable, anim) || get(animationTypeTable, defaultAnimation);
     }
   }),
   /**

addon/components/t-form.js

@@ -12,7 +12,7 @@ const {
 
   PUBLIC - Optional parameters:
     * `is-searching` boolean - Set initial searching state.
-    * `action` string - The name of your controller/route action to handle an icon click. Returned with 1 parameter `isSearching`, which is a boolean type indicating if the current state is searching or not searching.
+    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isSearching`, which is a boolean type indicating if the current state is searching or not searching.
 
   Examples:
 
@@ -30,7 +30,7 @@ const {
 export default BaseTransformicon.extend({
   layout,
 
-  'aria-label': 'toggle search',
+  label: 'toggle search',
 
   classNames: ['tcon-search--xcross'],
   classNameBindings: ['isSearching'],

addon/components/t-grid.js

@@ -21,7 +21,7 @@ const animationTypeTable = EmberObject.create({
     * `animation` string - Set the grid animation type.
     * `a` string - Shorthand alias for `animation`.
     * `is-open` boolean - Set initial open grid state.
-    * `action` string - The name of your controller/route action to handle an icon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
+    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
 
   Available `animation` types:
     * rearrange
@@ -45,7 +45,7 @@ const animationTypeTable = EmberObject.create({
 export default BaseTransformicon.extend({
   layout,
 
-  'aria-label': 'toggle grid',
+  label: 'toggle grid',
 
   classNames: ['tcon-grid'],
   classNameBindings: ['animationType', 'isOpen'],
@@ -59,7 +59,7 @@ export default BaseTransformicon.extend({
   animationType: computed('animation', {
     get() {
       let anim = get(this, 'animation');
-      return animationTypeTable.get(anim) || animationTypeTable.get(defaultAnimation);
+      return get(animationTypeTable, anim) || get(animationTypeTable, defaultAnimation);
     }
   }),
   /**

addon/components/t-loader.js

@@ -23,8 +23,8 @@ export default Component.extend({
 
   tagName: 'span',
 
-  attributeBindings: ['aria-label'],
-  'aria-label': 'loading',
+  attributeBindings: ['label:aria-label'],
+  label: 'loading',
 
   classNames: ['tcon-loader--spinner360']
 });

addon/components/t-mail.js

@@ -5,15 +5,15 @@ import BaseTransformicon from './base-transformicon';
 const {
   get,
   computed,
-  computed: { alias }
+  computed: { reads }
 } = Ember;
 
 /**
   Transformicon Mail component.
 
   PUBLIC - Optional parameters:
     * `is-open` boolean - Set initial open mail state.
-    * `action` string - The name of your controller/route action to handle an icon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
+    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
 
   Examples:
 
@@ -31,8 +31,8 @@ const {
 export default BaseTransformicon.extend({
   layout,
 
-  role: alias('type'),
-  'aria-label': 'open mailbox',
+  ariaRole: reads('type'),
+  label: 'open mailbox',
 
   classNames: ['tcon-mail--envelope'],
   classNameBindings: ['isOpen'],

addon/components/t-menu.js

@@ -25,7 +25,7 @@ const animationTypeTable = EmberObject.create({
     * `animation` string - Set the menu animation type.
     * `a` string - Shorthand alias for `animation`.
     * `is-open` boolean - Set initial open menu state.
-    * `action` string - The name of your controller/route action to handle an icon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
+    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
 
   Available `animation` types:
     * butterfly
@@ -53,7 +53,7 @@ const animationTypeTable = EmberObject.create({
 export default BaseTransformicon.extend({
   layout,
 
-  'aria-label': 'toggle menu',
+  label: 'toggle menu',
 
   classNameBindings: ['animationType', 'isOpen'],
   /**
@@ -66,7 +66,7 @@ export default BaseTransformicon.extend({
   animationType: computed('animation', {
     get() {
       let anim = get(this, 'animation');
-      return animationTypeTable.get(anim) || animationTypeTable.get(defaultAnimation);
+      return get(animationTypeTable, anim) || get(animationTypeTable, defaultAnimation);
     }
   }),
   /**

addon/components/t-remove.js

@@ -24,7 +24,7 @@ const animationTypeTable = EmberObject.create({
     * `animation` string - Set the menu animation type.
     * `a` string - Shorthand alias for `animation`.
     * `is-removed` boolean - Set initial open removed state.
-    * `action` string - The name of your controller/route action to handle an icon click. Returned with 1 parameter `isRemoved`, which is a boolean type indicating if the current state is pending remove.
+    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isRemoved`, which is a boolean type indicating if the current state is pending remove.
 
   Available `animation` types:
     * check
@@ -51,7 +51,7 @@ const animationTypeTable = EmberObject.create({
 export default BaseTransformicon.extend({
   layout,
 
-  'aria-label': 'remove item',
+  label: 'remove item',
 
   classNames: ['tcon-remove'],
   classNameBindings: ['animationType', 'isRemoved'],
@@ -65,7 +65,7 @@ export default BaseTransformicon.extend({
   animationType: computed('animation', {
     get() {
       let anim = get(this, 'animation');
-      return animationTypeTable.get(anim) || animationTypeTable.get(defaultAnimation);
+      return get(animationTypeTable, anim) || get(animationTypeTable, defaultAnimation);
     }
   }),
   /**