From 8885d0fa5052c0f5760ec2132faa10419256aff7 Mon Sep 17 00:00:00 2001
From: Alex DiLiberto <alex@alexdiliberto.com>
Date: Mon, 29 Jul 2019 00:39:14 -0400
Subject: [PATCH] refactor: remove base class and modernize

---
 addon/components/-private/base.js             | 54 -----------------
 addon/components/t-add.js                     | 58 ++++++-------------
 addon/components/t-form.js                    | 45 ++++++--------
 addon/components/t-grid.js                    | 57 ++++++------------
 addon/components/t-loader.js                  |  9 +--
 addon/components/t-mail.js                    | 50 +++++++---------
 addon/components/t-menu.js                    | 56 ++++++------------
 addon/components/t-remove.js                  | 58 ++++++-------------
 addon/components/t-scroll.js                  | 10 +---
 addon/components/t-video.js                   | 48 ++++++---------
 addon/templates/components/t-add.hbs          |  4 +-
 addon/templates/components/t-form.hbs         |  6 +-
 addon/templates/components/t-grid.hbs         |  6 +-
 addon/templates/components/t-loader.hbs       |  4 +-
 addon/templates/components/t-mail.hbs         |  7 ++-
 addon/templates/components/t-menu.hbs         |  6 +-
 addon/templates/components/t-remove.hbs       |  4 +-
 addon/templates/components/t-scroll.hbs       | 12 ++--
 addon/templates/components/t-video.hbs        |  4 +-
 .../app/templates/docs/transformicons/add.md  | 22 +++----
 .../app/templates/docs/transformicons/form.md | 22 +++----
 .../app/templates/docs/transformicons/grid.md | 20 +++----
 .../app/templates/docs/transformicons/mail.md | 20 +++----
 .../app/templates/docs/transformicons/menu.md | 20 +++----
 .../templates/docs/transformicons/remove.md   | 20 +++----
 .../templates/docs/transformicons/video.md    | 24 ++++----
 tests/dummy/config/optional-features.json     |  2 +-
 tests/integration/components/t-add-test.js    |  8 +--
 tests/integration/components/t-form-test.js   |  8 +--
 tests/integration/components/t-grid-test.js   |  8 +--
 tests/integration/components/t-mail-test.js   |  8 +--
 tests/integration/components/t-menu-test.js   |  8 +--
 tests/integration/components/t-remove-test.js |  8 +--
 tests/integration/components/t-video-test.js  |  8 +--
 34 files changed, 266 insertions(+), 438 deletions(-)
 delete mode 100644 addon/components/-private/base.js

diff --git a/addon/components/-private/base.js b/addon/components/-private/base.js
deleted file mode 100644
index 481a25f5..00000000
--- a/addon/components/-private/base.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Component from '@ember/component';
-import { get } from '@ember/object';
-import { assert } from '@ember/debug';
-import { attribute, classNames, tagName } from '@ember-decorators/component';
-
-/**
-  Base Transformicon component
-*/
-@tagName('button')
-@classNames('tcon')
-export default class BaseTransformiconComponent extends Component {
-  @attribute type = 'button';
-  @attribute('aria-label') label = null;
-
-  /**
-   * Stores the classname representing the `on` toggled state for the transformicon.
-   * This classname will apply the necessary CSS animations and transitions.
-   * @type {string}
-   */
-  transformClass = 'tcon-transform';
-
-  /**
-   * Stores the name of the component's public property indicating initial toggled state.
-   *
-   * Possible `initialState` names include:
-   *    `is-open`
-   *    `is-added`
-   *    `is-searching`
-   *    `is-removed`
-   *    `is-playing`
-   * @type {string}
-   */
-  initialState = 'is-open'
-
-  /**
-   * This click handler does two things after retrieving the transformicons initital state property name.
-   *
-   * - 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.
-   */
-  click() {
-    let initStateProp = this.initialState;
-    let onclick = this.onclick;
-
-    this.toggleProperty(initStateProp);
-
-    if (onclick) {
-      assert(`[ember-transformicons] ${this.toString()} \`onclick\` action handler must be a valid closure action`, typeof onclick === 'function');
-
-      let boolInitStateProp = get(this, initStateProp);
-      onclick(boolInitStateProp);
-    }
-  }
-}
diff --git a/addon/components/t-add.js b/addon/components/t-add.js
index 35fd8b27..5e44b6c8 100644
--- a/addon/components/t-add.js
+++ b/addon/components/t-add.js
@@ -1,7 +1,8 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-add';
 
 const DEFAULT_ANIMATION = 'minus';
@@ -12,27 +13,24 @@ const DEFAULT_ANIMATION = 'minus';
   PUBLIC
     * `animation` string - Set the add animation type (alias: `a`).
       * types - `minus` | `check`
-    * `is-added` boolean - Set initial open added state.
-    * `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.
+    * `isAdded` boolean - Set initial open added state.
+    * `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.
 
   ```hbs
   {{! These are functionally equivalent}}
   <TAdd />
   <TAdd @a='minus' />
   <TAdd @animation='minus' />
-  <TAdd @is-added={{false}} @animation='minus' />
+  <TAdd @isAdded={{false}} @animation='minus' />
   ```
 */
 @layout(template)
-@classNames('tcon-plus')
-export default class TAddComponent extends BaseTransformiconComponent {
-  label = 'add item';
-  initialState = 'is-added';
-
+@tagName('')
+export default class TAddComponent extends Component {
   /**
    * Animation CSS classname lookup table for the Add transformicon
    */
-  _animationTypeTable = {
+  animationTypeTable = {
     'minus': 'tcon-plus--minus',
     'check': 'tcon-plus--check'
   };
@@ -48,7 +46,7 @@ export default class TAddComponent extends BaseTransformiconComponent {
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-added' = false
+  isAdded = false;
 
   /**
    * Alias for {@link animation}
@@ -56,34 +54,14 @@ export default class TAddComponent extends BaseTransformiconComponent {
    */
   @alias('animation') a;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isAdded');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-added'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the CSS classname corresponding to the component's current {@link animation} type
-   * @type {string}
-   */
-  @className
-  @computed('animation')
-  get animationType() {
-    let anim = get(this, 'animation');
-    return get(this._animationTypeTable, anim);
-  }
-
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-added` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-added')
-  get isAdded() {
-    return get(this, 'is-added') ? get(this, 'transformClass') : false;
+      this.onClick(this.isAdded);
+    }
   }
 }
diff --git a/addon/components/t-form.js b/addon/components/t-form.js
index e91357bf..1afdf4b7 100644
--- a/addon/components/t-form.js
+++ b/addon/components/t-form.js
@@ -1,50 +1,39 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-form';
 
 /**
   Form Transformicon
 
   PUBLIC
-    * `is-searching` boolean - Set initial searching state.
-    * `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.
+    * `isSearching` boolean - Set initial searching state.
+    * `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.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TForm />
-    <TForm @is-searching={{false}} />
+    <TForm @isSearching={{false}} />
   ```
 */
 @layout(template)
-@classNames('tcon-search--xcross')
-export default class TFormComponent extends BaseTransformiconComponent {
-  label = 'toggle search';
-  initialState = 'is-searching';
-
+@tagName('')
+export default class TFormComponent extends Component {
   /**
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-searching' = false;
+  isSearching = false;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isSearching');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-searching'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-searching` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-searching')
-  get isSearching() {
-    return get(this, 'is-searching') ? get(this, 'transformClass') : false;
+      this.onClick(this.isSearching);
+    }
   }
 }
diff --git a/addon/components/t-grid.js b/addon/components/t-grid.js
index 14269ac1..006a5072 100644
--- a/addon/components/t-grid.js
+++ b/addon/components/t-grid.js
@@ -1,7 +1,8 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-grid';
 
 const DEFAULT_ANIMATION = 'rearrange';
@@ -12,26 +13,24 @@ const DEFAULT_ANIMATION = 'rearrange';
   PUBLIC - Optional parameters:
     * `animation` string - Set the grid animation type  (alias: `a`).
       * types - `rearrange` | `collapse`
-    * `is-open` boolean - Set initial open grid state.
-    * `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.
+    * `isOpen` boolean - Set initial open grid state.
+    * `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.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TGrid />
     <TGrid @a='rearrange' />
     <TGrid @animation='rearrange' />
-    <TGrid @is-open={{false}} @animation='rearrange' />
+    <TGrid @isOpen={{false}} @animation='rearrange' />
   ```
 */
 @layout(template)
-@classNames('tcon-grid')
-export default class TGridComponent extends BaseTransformiconComponent {
-  label = 'toggle grid';
-
+@tagName('')
+export default class TGridComponent extends Component {
   /**
    * Animation CSS classname lookup table for the Grid transformicon
    */
-  _animationTypeTable = {
+  animationTypeTable = {
     'rearrange': 'tcon-grid--rearrange',
     'collapse': 'tcon-grid--collapse'
   };
@@ -47,7 +46,7 @@ export default class TGridComponent extends BaseTransformiconComponent {
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-open' = false;
+  isOpen = false;
 
   /**
    * Alias for {@link animation}
@@ -55,34 +54,14 @@ export default class TGridComponent extends BaseTransformiconComponent {
    */
   @alias('animation') a;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isOpen');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-open'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the CSS classname corresponding to the component's current {@link animation} type
-   * @type {string}
-   */
-  @className
-  @computed('animation')
-  get animationType() {
-    let anim = get(this, 'animation');
-    return get(this._animationTypeTable, anim);
-  }
-
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-open` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-open')
-  get isOpen() {
-    return get(this, 'is-open') ? get(this, 'transformClass') : false;
+      this.onClick(this.isOpen);
+    }
   }
 }
diff --git a/addon/components/t-loader.js b/addon/components/t-loader.js
index fdec4f92..0fdb13a2 100644
--- a/addon/components/t-loader.js
+++ b/addon/components/t-loader.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { attribute, classNames, layout, tagName } from '@ember-decorators/component';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-loader';
 
 /**
@@ -10,8 +10,5 @@ import template from '../templates/components/t-loader';
   ```
 */
 @layout(template)
-@tagName('span')
-@classNames('tcon-loader--spinner360')
-export default class TLoaderComponent extends Component {
-  @attribute('aria-label') label = 'loading';
-}
+@tagName('')
+export default class TLoaderComponent extends Component {}
diff --git a/addon/components/t-mail.js b/addon/components/t-mail.js
index 8ca89414..a8b21a6c 100644
--- a/addon/components/t-mail.js
+++ b/addon/components/t-mail.js
@@ -1,52 +1,46 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
-import { reads } from '@ember/object/computed';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { not } from '@ember/object/computed';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-mail';
 
 /**
   Mail Transformicon
 
   PUBLIC
-    * `is-open` boolean - Set initial open mail state.
+    * `isOpen` boolean - Set initial open mail state.
     * `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.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TMail />
-    <TMail @is-open={{true}} />
+    <TMail @isOpen={{true}} />
   ```
 */
 @layout(template)
-@classNames('tcon-mail--envelope')
-export default class TMailComponent extends BaseTransformiconComponent {
-  label = 'open mailbox';
-
+@tagName('')
+export default class TMailComponent extends Component {
   /**
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-open' = true;
+  isOpen = true;
 
-  @reads('type') ariaRole;
+  /**
+   * Inverse of {@link isOpen}
+   * @type {boolean}
+   */
+  @not('isOpen') notOpen;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isOpen');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-open'] = true;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-open` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-open')
-  get isOpen() {
-    return get(this, 'is-open') ? false : get(this, 'transformClass');
+      this.onClick(this.isOpen);
+    }
   }
 }
diff --git a/addon/components/t-menu.js b/addon/components/t-menu.js
index 7609d1c6..a71251fd 100644
--- a/addon/components/t-menu.js
+++ b/addon/components/t-menu.js
@@ -1,7 +1,8 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-menu';
 
 const DEFAULT_ANIMATION = 'butterfly';
@@ -12,25 +13,24 @@ const DEFAULT_ANIMATION = 'butterfly';
   PUBLIC
     * `animation` string - Set the menu animation type  (alias: `a`).
       * types - `butterfly` | `minus` | `x-cross` | `arrow-up` | `arrow-360-left` | `arrow-left`
-    * `is-open` boolean - Set initial open menu state.
-    * `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.
+    * `isOpen` boolean - Set initial open menu state.
+    * `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.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TMenu />
     <TMenu @a='butterfly' />
     <TMenu @animation='butterfly' />
-    <TMenu @is-open={{false}} @animation='butterfly' />
+    <TMenu @isOpen={{false}} @animation='butterfly' />
   ```
 */
 @layout(template)
-export default class TMenuComponent extends BaseTransformiconComponent {
-  label = 'toggle menu';
-
+@tagName('')
+export default class TMenuComponent extends Component {
   /**
    * Animation CSS classname lookup table for the Menu transformicon
    */
-  _animationTypeTable = {
+  animationTypeTable = {
     'butterfly': 'tcon-menu--xbutterfly',
     'minus': 'tcon-menu--minus',
     'x-cross': 'tcon-menu--xcross',
@@ -50,7 +50,7 @@ export default class TMenuComponent extends BaseTransformiconComponent {
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-open' = false;
+  isOpen = false;
 
   /**
    * Alias for {@link animation}
@@ -58,34 +58,14 @@ export default class TMenuComponent extends BaseTransformiconComponent {
    */
   @alias('animation') a;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isOpen');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-open'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the CSS classname corresponding to the component's current {@link animation} type
-   * @type {string}
-   */
-  @className
-  @computed('animation')
-  get animationType() {
-    let anim = get(this, 'animation');
-    return get(this._animationTypeTable, anim);
-  }
-
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-open` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-open')
-  get isOpen() {
-    return get(this, 'is-open') ? get(this, 'transformClass') : false;
+      this.onClick(this.isOpen);
+    }
   }
 }
diff --git a/addon/components/t-remove.js b/addon/components/t-remove.js
index 0708bbe1..76d9e6c5 100644
--- a/addon/components/t-remove.js
+++ b/addon/components/t-remove.js
@@ -1,6 +1,7 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { layout, tagName } from '@ember-decorators/component';
 import { alias } from '@ember/object/computed';
 import template from '../templates/components/t-remove';
 
@@ -12,27 +13,24 @@ const DEFAULT_ANIMATION = 'check';
   PUBLIC
     * `animation` string - Set the menu animation type  (alias: `a`).
       * types - `check` | `chevron-left` | `chevron-right` | `chevron-down` | `chevron-up`
-    * `is-removed` boolean - Set initial open removed state.
-    * `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.
+    * `isRemoved` boolean - Set initial open removed state.
+    * `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.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TRemove />
     <TRemove @a='check' />
     <TRemove @animation='check' />
-    <TRemove @is-removed={{false}} @animation='check' />
+    <TRemove @isRemoved={{false}} @animation='check' />
   ```
 */
 @layout(template)
-@classNames('tcon-remove')
-export default class TRemoveComponent extends BaseTransformiconComponent {
-  label = 'remove item';
-  initialState = 'is-removed';
-
+@tagName('')
+export default class TRemoveComponent extends Component {
   /**
    * Animation CSS classname lookup table for the Remove transformicon
    */
-  _animationTypeTable = {
+  animationTypeTable = {
     'check': 'tcon-remove--check',
     'chevron-left': 'tcon-remove--chevron-left',
     'chevron-right': 'tcon-remove--chevron-right',
@@ -51,7 +49,7 @@ export default class TRemoveComponent extends BaseTransformiconComponent {
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-removed' = false;
+  isRemoved = false;
 
   /**
    * Alias for {@link animation}
@@ -59,34 +57,14 @@ export default class TRemoveComponent extends BaseTransformiconComponent {
    */
   @alias('animation') a;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isRemoved');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-removed'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the CSS classname corresponding to the component's current {@link animation} type
-   * @type {string}
-   */
-  @className
-  @computed('animation')
-  get animationType() {
-    let anim = get(this, 'animation');
-    return get(this._animationTypeTable, anim);
-  }
-
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-removed` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-removed')
-  get isRemoved() {
-    return get(this, 'is-removed') ? get(this, 'transformClass') : false;
+      this.onClick(this.isRemoved);
+    }
   }
 }
diff --git a/addon/components/t-scroll.js b/addon/components/t-scroll.js
index ff56b7c8..0b0db20e 100644
--- a/addon/components/t-scroll.js
+++ b/addon/components/t-scroll.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { attribute, classNames, layout, tagName } from '@ember-decorators/component';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-scroll';
 
 /**
@@ -10,9 +10,5 @@ import template from '../templates/components/t-scroll';
   ```
 */
 @layout(template)
-@tagName('span')
-@classNames('tcon-indicator')
-export default class TScrollComponent extends Component {
-  @attribute('aria-hidden') ariaHidden = 'true';
-  @attribute('aria-label') label = 'scroll';
-}
+@tagName('')
+export default class TScrollComponent extends Component {}
diff --git a/addon/components/t-video.js b/addon/components/t-video.js
index 2d6f99f7..65880c45 100644
--- a/addon/components/t-video.js
+++ b/addon/components/t-video.js
@@ -1,53 +1,39 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
-import { reads } from '@ember/object/computed';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-video';
 
 /**
   Video Transformicon
 
   PUBLIC
-    * `is-playing` boolean - Set initial playing state.
-    * `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.
+    * `isPlaying` boolean - Set initial playing state.
+    * `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.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TVideo />
-    <TVideo @is-playing={{false}} />
+    <TVideo @isPlaying={{false}} />
   ```
 */
 @layout(template)
-@classNames('tcon-vid--play')
-export default class TVideoComponent extends BaseTransformiconComponent {
-  label = 'play video';
-  initialState = 'is-playing';
-
+@tagName('')
+export default class TVideoComponent extends Component {
   /**
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-playing' = false;
-
-  @reads('type') ariaRole;
+  isPlaying = false;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isPlaying');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-playing'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-playing` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-playing')
-  get isPlaying() {
-    return get(this, 'is-playing') ? get(this, 'transformClass') : false;
+      this.onClick(this.isPlaying);
+    }
   }
 }
diff --git a/addon/templates/components/t-add.hbs b/addon/templates/components/t-add.hbs
index f082659b..f25e03eb 100644
--- a/addon/templates/components/t-add.hbs
+++ b/addon/templates/components/t-add.hbs
@@ -1 +1,3 @@
-<span class="tcon-visuallyhidden">add item</span>
+<button {{on "click" this.clickHandler}} aria-label="add item" type="button" class="tcon tcon-plus {{get this.animationTypeTable this.animation}} {{if this.isAdded "tcon-transform"}}" ...attributes>
+  <span class="tcon-visuallyhidden">add item</span>
+</button>
diff --git a/addon/templates/components/t-form.hbs b/addon/templates/components/t-form.hbs
index b12bec8e..5878aad4 100644
--- a/addon/templates/components/t-form.hbs
+++ b/addon/templates/components/t-form.hbs
@@ -1,2 +1,4 @@
-<span class="tcon-search__item" aria-hidden="true"></span>
-<span class="tcon-visuallyhidden">toggle search</span>
\ No newline at end of file
+<button {{on "click" this.clickHandler}} aria-label="toggle search" type="button" class="tcon tcon-search--xcross {{if this.isSearching "tcon-transform"}}" ...attributes>
+  <span class="tcon-search__item" aria-hidden="true"></span>
+  <span class="tcon-visuallyhidden">toggle search</span>
+</button>
\ No newline at end of file
diff --git a/addon/templates/components/t-grid.hbs b/addon/templates/components/t-grid.hbs
index c0bc8357..da410761 100644
--- a/addon/templates/components/t-grid.hbs
+++ b/addon/templates/components/t-grid.hbs
@@ -1,2 +1,4 @@
-<span class="tcon-grid__item" aria-hidden="true"></span>
-<span class="tcon-visuallyhidden">toggle grid</span>
+<button {{on "click" this.clickHandler}} aria-label="toggle grid" type="button" class="tcon tcon-grid {{get this.animationTypeTable this.animation}} {{if this.isOpen "tcon-transform"}}" ...attributes>
+  <span class="tcon-grid__item" aria-hidden="true"></span>
+  <span class="tcon-visuallyhidden">toggle grid</span>
+</button>
\ No newline at end of file
diff --git a/addon/templates/components/t-loader.hbs b/addon/templates/components/t-loader.hbs
index f629e9f6..5e06eaf7 100644
--- a/addon/templates/components/t-loader.hbs
+++ b/addon/templates/components/t-loader.hbs
@@ -1 +1,3 @@
-<span class="tcon-visuallyhidden">loading</span>
+<span aria-label="loading" class="tcon-loader--spinner360" ...attributes>
+  <span class="tcon-visuallyhidden">loading</span>
+</span>
\ No newline at end of file
diff --git a/addon/templates/components/t-mail.hbs b/addon/templates/components/t-mail.hbs
index 3b256f23..0996ea93 100644
--- a/addon/templates/components/t-mail.hbs
+++ b/addon/templates/components/t-mail.hbs
@@ -1,2 +1,5 @@
-<span class="tcon-mail--envelope__flap" aria-hidden="true"></span>
-<span class="tcon-visuallyhidden">open mailbox</span>
+<button {{on "click" this.clickHandler}} aria-label="open mailbox" role="button" type="button" class="tcon tcon-mail--envelope {{if this.notOpen "tcon-transform"}}" ...attributes>
+  <span class="tcon-mail--envelope__flap" aria-hidden="true"></span>
+  <span class="tcon-visuallyhidden">open mailbox</span>
+</button>
+
diff --git a/addon/templates/components/t-menu.hbs b/addon/templates/components/t-menu.hbs
index a7fcf898..e4079e14 100644
--- a/addon/templates/components/t-menu.hbs
+++ b/addon/templates/components/t-menu.hbs
@@ -1,2 +1,4 @@
-<span class="tcon-menu__lines" aria-hidden="true"></span>
-<span class="tcon-visuallyhidden">toggle menu</span>
+<button {{on "click" this.clickHandler}} aria-label="toggle menu" type="button" class="tcon {{get this.animationTypeTable this.animation}} {{if this.isOpen "tcon-transform"}}" ...attributes>
+  <span class="tcon-menu__lines" aria-hidden="true"></span>
+  <span class="tcon-visuallyhidden">toggle menu</span>
+</button>
\ No newline at end of file
diff --git a/addon/templates/components/t-remove.hbs b/addon/templates/components/t-remove.hbs
index 4a0009a7..55f28f2c 100644
--- a/addon/templates/components/t-remove.hbs
+++ b/addon/templates/components/t-remove.hbs
@@ -1 +1,3 @@
-<span class="tcon-visuallyhidden">remove item</span>
+<button {{on "click" this.clickHandler}} aria-label="remove item" type="button" class="tcon tcon-remove {{get this.animationTypeTable this.animation}} {{if this.isRemoved "tcon-transform"}}" ...attributes>
+  <span class="tcon-visuallyhidden">remove item</span>
+</button>
diff --git a/addon/templates/components/t-scroll.hbs b/addon/templates/components/t-scroll.hbs
index a3671670..c03af16d 100644
--- a/addon/templates/components/t-scroll.hbs
+++ b/addon/templates/components/t-scroll.hbs
@@ -1,5 +1,7 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="tcon-svgchevron" viewBox="0 0 30 36">
-  <path class="a3" d="M0,0l15,16L30,0"></path>
-  <path class="a2" d="M0,10l15,16l15-16"></path>
-  <path class="a1" d="M0,20l15,16l15-16"></path>
-</svg>
+<span aria-label="scroll" aria-hidden="true" class="tcon-indicator" ...attributes>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="tcon-svgchevron" viewBox="0 0 30 36">
+    <path class="a3" d="M0,0l15,16L30,0"></path>
+    <path class="a2" d="M0,10l15,16l15-16"></path>
+    <path class="a1" d="M0,20l15,16l15-16"></path>
+  </svg>
+</span>
\ No newline at end of file
diff --git a/addon/templates/components/t-video.hbs b/addon/templates/components/t-video.hbs
index ca9c2f63..8e15d397 100644
--- a/addon/templates/components/t-video.hbs
+++ b/addon/templates/components/t-video.hbs
@@ -1 +1,3 @@
-<span class="tcon-visuallyhidden">play video</span>
+<button {{on "click" this.clickHandler}} aria-label="play video" role="button"  type="button" class="tcon tcon-vid--play {{get this.animationTypeTable this.animation}} {{if this.isPlaying "tcon-transform"}}" ...attributes>
+  <span class="tcon-visuallyhidden">play video</span>
+</button>
\ No newline at end of file
diff --git a/tests/dummy/app/templates/docs/transformicons/add.md b/tests/dummy/app/templates/docs/transformicons/add.md
index 81463fbe..1f063201 100644
--- a/tests/dummy/app/templates/docs/transformicons/add.md
+++ b/tests/dummy/app/templates/docs/transformicons/add.md
@@ -1,8 +1,8 @@
 # Add Transformicon
 ---
 ## API
-  * `is-added` boolean - Set initial open add state.
-  * `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.
+  * `isAdded` boolean - Set initial open added state.
+  * `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
 {{#docs-snippet name='t-add-animation-snippet.hbs'}}
@@ -20,25 +20,25 @@
 
 <br />
 
-### is-added
+### isAdded
 {{#docs-snippet name='t-add-is-added-snippet.hbs'}}
-  <TAdd @is-added={{true}} />
+  <TAdd @isAdded={{true}} />
 {{/docs-snippet}}
 
-<TAdd @is-added={{true}} />
+<TAdd @isAdded={{true}} />
 
 <br />
 
-### onclick action
+### onClick action
 {{#docs-snippet name='t-add-onclick-snippet.hbs'}}
-  {{! Custom onclick handler after the addon toggles the value }}
+  {{! Custom onClick handler after the addon toggles the value }}
   <TAdd
-    @is-added={{isAdded}}
-    @onclick={{action this.updateAddAction}} />
+    @isAdded={{isAdded}}
+    @onClick={{action this.updateAddAction}} />
 {{/docs-snippet}}
 
 <TAdd
-  @is-added={{isAdded}}
-  @onclick={{action this.updateAddAction}} />
+  @isAdded={{isAdded}}
+  @onClick={{action this.updateAddAction}} />
   
 `isAdded` = {{isAdded}}
diff --git a/tests/dummy/app/templates/docs/transformicons/form.md b/tests/dummy/app/templates/docs/transformicons/form.md
index 49f24f8b..4e5021af 100644
--- a/tests/dummy/app/templates/docs/transformicons/form.md
+++ b/tests/dummy/app/templates/docs/transformicons/form.md
@@ -1,8 +1,8 @@
 # Form Transformicon
 ---
 ## API
-  * `is-searching` boolean - Set initial searching state.
-  * `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.
+  * `isSearching` boolean - Set initial searching state.
+  * `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.
 
 ### animation
 {{#docs-snippet name='t-form-animation-snippet.hbs'}}
@@ -13,24 +13,24 @@
 
 <br />
 
-### is-searching
-{{#docs-snippet name='t-form-is-searching-snippet.hbs'}}
-  <TForm @is-searching={{true}} />
+### isSearching
+{{#docs-snippet name='t-form-isSearching-snippet.hbs'}}
+  <TForm @isSearching={{true}} />
 {{/docs-snippet}}
 
-<TForm @is-searching={{true}} />
+<TForm @isSearching={{true}} />
 
 <br />
 
-### onclick action
+### onClick action
 {{#docs-snippet name='t-form-onclick-snippet.hbs'}}
   <TForm 
-    @is-searching={{isSearching}}
-    @onclick={{action this.updateFormAction}} />
+    @isSearching={{isSearching}}
+    @onClick={{action this.updateFormAction}} />
 {{/docs-snippet}}
 
 <TForm 
-  @is-searching={{isSearching}}
-  @onclick={{action this.updateFormAction}} />
+  @isSearching={{isSearching}}
+  @onClick={{action this.updateFormAction}} />
 
 `isSearching` = {{isSearching}}
diff --git a/tests/dummy/app/templates/docs/transformicons/grid.md b/tests/dummy/app/templates/docs/transformicons/grid.md
index 95e3b297..91152f5d 100644
--- a/tests/dummy/app/templates/docs/transformicons/grid.md
+++ b/tests/dummy/app/templates/docs/transformicons/grid.md
@@ -1,8 +1,8 @@
 # Grid Transformicon
 ---
 ## API
-  * `is-open` boolean - Set initial open grid state.
-  * `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.
+  * `isOpen` boolean - Set initial open grid state.
+  * `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
 {{#docs-snippet name='t-grid-animation-snippet.hbs'}}
@@ -20,25 +20,25 @@
 
 <br />
 
-### is-open
+### isOpen
 {{#docs-snippet name='t-grid-is-open-snippet.hbs'}}
-  <TGrid @is-open={{true}} />
+  <TGrid @isOpen={{true}} />
 {{/docs-snippet}}
 
-<TGrid @is-open={{true}} />
+<TGrid @isOpen={{true}} />
 
 <br />
 
-### onclick action
+### onClick action
 {{#docs-snippet name='t-grid-onclick-snippet.hbs'}}
   {{! Custom onclick handler after the addon toggles the value }}
   <TGrid
-    @is-open={{isGridOpen}}
-    @onclick={{action this.updateGridAction}} />
+    @isOpen={{isGridOpen}}
+    @onClick={{action this.updateGridAction}} />
 {{/docs-snippet}}
 
 <TGrid 
-  @is-open={{isGridOpen}}
-  @onclick={{action this.updateGridAction}} />
+  @isOpen={{isGridOpen}}
+  @onClick={{action this.updateGridAction}} />
 
 `isGridOpen` = {{isGridOpen}}
diff --git a/tests/dummy/app/templates/docs/transformicons/mail.md b/tests/dummy/app/templates/docs/transformicons/mail.md
index 2ed4d0e6..545fa98d 100644
--- a/tests/dummy/app/templates/docs/transformicons/mail.md
+++ b/tests/dummy/app/templates/docs/transformicons/mail.md
@@ -1,8 +1,8 @@
 # Mail Transformicon
 ---
 ## API
-  * `is-open` boolean - Set initial open mail state.
-  * `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.
+  * `isOpen` boolean - Set initial open mail state.
+  * `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
 {{#docs-snippet name='t-mail-animation-snippet.hbs'}}
@@ -13,26 +13,26 @@
 
 <br />
 
-### is-open
+### isOpen
 {{#docs-snippet name='t-mail-is-open-snippet.hbs'}}
-  <TMail @is-open={{false}} />
+  <TMail @isOpen={{false}} />
 {{/docs-snippet}}
 
-<TMail class="docs-mt-3" @is-open={{false}} />
+<TMail class="docs-mt-3" @isOpen={{false}} />
 
 <br />
 
-### onclick action
+### onClick action
 {{#docs-snippet name='t-mail-onclick-snippet.hbs'}}
   {{! Custom onclick handler after the addon toggles the value }}
   <TMail
-    @is-open={{hasUnreadMail}}
-    @onclick={{action this.updateMailAction}} />
+    @isOpen={{hasUnreadMail}}
+    @onClick={{action this.updateMailAction}} />
 {{/docs-snippet}}
 
 <TMail
   class="docs-mt-3" 
-  @is-open={{hasUnreadMail}}
-  @onclick={{action this.updateMailAction}} />
+  @isOpen={{hasUnreadMail}}
+  @onClick={{action this.updateMailAction}} />
 
 `hasUnreadMail` = {{hasUnreadMail}}
diff --git a/tests/dummy/app/templates/docs/transformicons/menu.md b/tests/dummy/app/templates/docs/transformicons/menu.md
index cdd7241e..893770d5 100644
--- a/tests/dummy/app/templates/docs/transformicons/menu.md
+++ b/tests/dummy/app/templates/docs/transformicons/menu.md
@@ -1,8 +1,8 @@
 # Menu Transformicon
 ---
 ## API
-  * `is-open` boolean - Set initial open menu state.
-  * `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.
+  * `isOpen` boolean - Set initial open menu state.
+  * `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
 {{#docs-snippet name='t-menu-animation-snippet.hbs'}}
@@ -31,25 +31,25 @@
 
 <br />
 
-### is-open
+### isOpen
 {{#docs-snippet name='t-menu-is-open-snippet.hbs'}}
-  <TMenu @is-open={{true}} />
+  <TMenu @isOpen={{true}} />
 {{/docs-snippet}}
 
-<TMenu @is-open={{true}} />
+<TMenu @isOpen={{true}} />
 
 <br />
 
-### onclick action
+### onClick action
 {{#docs-snippet name='t-menu-onclick-snippet.hbs'}}
   {{! Custom onclick handler after the addon toggles the value }}
   <TMenu
-    @is-open={{isMenuOpen}}
-    @onclick={{action this.updateMenuAction}} />
+    @isOpen={{isMenuOpen}}
+    @onClick={{action this.updateMenuAction}} />
 {{/docs-snippet}}
 
 <TMenu
-  @is-open={{isMenuOpen}}
-  @onclick={{action this.updateMenuAction}} />
+  @isOpen={{isMenuOpen}}
+  @onClick={{action this.updateMenuAction}} />
 
 `isMenuOpen` = {{isMenuOpen}}
diff --git a/tests/dummy/app/templates/docs/transformicons/remove.md b/tests/dummy/app/templates/docs/transformicons/remove.md
index 3ff2010a..bd924925 100644
--- a/tests/dummy/app/templates/docs/transformicons/remove.md
+++ b/tests/dummy/app/templates/docs/transformicons/remove.md
@@ -1,8 +1,8 @@
 # Remove Transformicon
 ---
 ## API
-  * `is-removed` boolean - Set initial open removed state.
-  * `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.
+  * `isRemoved` boolean - Set initial open removed state.
+  * `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
 {{#docs-snippet name='t-remove-animation-snippet.hbs'}}
@@ -29,25 +29,25 @@
 
 <br />
 
-### is-removed
+### isRemoved
 {{#docs-snippet name='t-remove-is-removed-snippet.hbs'}}
-  <TRemove @is-removed={{true}} />
+  <TRemove @isRemoved={{true}} />
 {{/docs-snippet}}
 
-<TRemove @is-removed={{true}} />
+<TRemove @isRemoved={{true}} />
 
 <br />
 
-### onclick action
+### onClick action
 {{#docs-snippet name='t-remove-onclick-snippet.hbs'}}
   {{! Custom onclick handler after the addon toggles the value }}
   <TRemove
-    @is-removed={{isRemoved}}
-    @onclick={{action this.updateRemoveAction}} />
+    @isRemoved={{isRemoved}}
+    @onClick={{action this.updateRemoveAction}} />
 {{/docs-snippet}}
 
 <TRemove
-  @is-removed={{isRemoved}}
-  @onclick={{action this.updateRemoveAction}} />
+  @isRemoved={{isRemoved}}
+  @onClick={{action this.updateRemoveAction}} />
 
 `isRemoved` = {{isRemoved}}
diff --git a/tests/dummy/app/templates/docs/transformicons/video.md b/tests/dummy/app/templates/docs/transformicons/video.md
index 2d607d64..bd9fefdb 100644
--- a/tests/dummy/app/templates/docs/transformicons/video.md
+++ b/tests/dummy/app/templates/docs/transformicons/video.md
@@ -1,8 +1,8 @@
 # Video Transformicon
 ---
 ## API
-  * `is-playing` boolean - Set initial playing state.
-  * `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.
+  * `isPlaying` boolean - Set initial playing state.
+  * `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.
 
 ### animation
 {{#docs-snippet name='t-video-animation-snippet.hbs'}}
@@ -13,26 +13,26 @@
 
 <br />
 
-### is-playing
-{{#docs-snippet name='t-menu-is-open-snippet.hbs'}}
-  <TVideo @is-playing={{true}} />
+### isPlaying
+{{#docs-snippet name='t-video-is-playing-snippet.hbs'}}
+  <TVideo @isPlaying={{true}} />
 {{/docs-snippet}}
 
-<TVideo class="docs-mt-2" @is-playing={{true}} />
+<TVideo class="docs-mt-2" @isPlaying={{true}} />
 
 <br />
 
-### onclick action
-{{#docs-snippet name='t-menu-onclick-snippet.hbs'}}
+### onClick action
+{{#docs-snippet name='t-video-onclick-snippet.hbs'}}
   {{! Custom onclick handler after the addon toggles the value }}
   <TVideo
-    @is-playing={{isVideoPlaying}}
-    @onclick={{action this.updateVideoAction}} />
+    @isPlaying={{isVideoPlaying}}
+    @onClick={{action this.updateVideoAction}} />
 {{/docs-snippet}}
 
 <TVideo
   class="docs-mt-2"
-  @is-playing={{isVideoPlaying}}
-  @onclick={{action this.updateVideoAction}} />
+  @isPlaying={{isVideoPlaying}}
+  @onClick={{action this.updateVideoAction}} />
 
 `isVideoPlaying` = {{isVideoPlaying}}
diff --git a/tests/dummy/config/optional-features.json b/tests/dummy/config/optional-features.json
index c56e71b4..7bec31ee 100644
--- a/tests/dummy/config/optional-features.json
+++ b/tests/dummy/config/optional-features.json
@@ -1,5 +1,5 @@
 {
   "application-template-wrapper": true,
   "jquery-integration": false,
-  "template-only-glimmer-components": false
+  "template-only-glimmer-components": true
 }
diff --git a/tests/integration/components/t-add-test.js b/tests/integration/components/t-add-test.js
index 29ca528b..7716ea86 100644
--- a/tests/integration/components/t-add-test.js
+++ b/tests/integration/components/t-add-test.js
@@ -42,11 +42,11 @@ module('Integration | Component | t add', function(hooks) {
     assert.dom('button').hasNoClass('tcon-transform');
   });
 
-  test('it creates an add transformicon with `is-added=true`', async function(assert) {
+  test('it creates an add transformicon with `isAdded=true`', async function(assert) {
     assert.expect(1);
 
     await render(hbs`
-      <TAdd @is-added={{true}} />
+      <TAdd @isAdded={{true}} />
     `);
     percySnapshot(assert);
 
@@ -66,10 +66,8 @@ module('Integration | Component | t add', function(hooks) {
   test('user can click on the transformicon', async function(assert) {
     assert.expect(2);
 
-    // FIXME: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/4#issue-328822657
-    // Currently necessary to use `<TAdd @id="t-add" />` syntax when specifying an `id` but the `aid` prefix shouldn't be necessary -- should be able to say `<TAdd @id="t-add" />`. Fix after this issue is closed.
     await render(hbs`
-      <TAdd @id="t-add" />
+      <TAdd id="t-add" />
     `);
 
     assert.dom('#t-add').hasNoClass('tcon-transform');
diff --git a/tests/integration/components/t-form-test.js b/tests/integration/components/t-form-test.js
index 46859785..46bccc3b 100644
--- a/tests/integration/components/t-form-test.js
+++ b/tests/integration/components/t-form-test.js
@@ -41,11 +41,11 @@ module('Integration | Component | t form', function(hooks) {
     assert.dom('button').hasNoClass('tcon-transform');
   });
 
-  test('it creates a form transformicon with `is-searching=true`', async function(assert) {
+  test('it creates a form transformicon with `isSearching=true`', async function(assert) {
     assert.expect(1);
 
     await render(hbs`
-      <TForm @is-searching={{true}} />
+      <TForm @isSearching={{true}} />
     `);
     percySnapshot(assert);
 
@@ -55,10 +55,8 @@ module('Integration | Component | t form', function(hooks) {
   test('user can click on the transformicon', async function(assert) {
     assert.expect(2);
 
-    // FIXME: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/4#issue-328822657
-    // Currently necessary to use `<TAdd @id="t-add" />` syntax when specifying an `id` but the `aid` prefix shouldn't be necessary -- should be able to say `<TAdd @id="t-add" />`. Fix after this issue is closed.
     await render(hbs`
-      <TForm @id="t-form" />
+      <TForm id="t-form" />
     `);
 
     assert.dom('#t-form').hasNoClass('tcon-transform');
diff --git a/tests/integration/components/t-grid-test.js b/tests/integration/components/t-grid-test.js
index 5f5136a2..b7590b53 100644
--- a/tests/integration/components/t-grid-test.js
+++ b/tests/integration/components/t-grid-test.js
@@ -42,11 +42,11 @@ module('Integration | Component | t grid', function(hooks) {
     assert.dom('button').hasNoClass('tcon-transform');
   });
 
-  test('it creates a grid transformicon with `is-open=true`', async function(assert) {
+  test('it creates a grid transformicon with `isOpen=true`', async function(assert) {
     assert.expect(1);
 
     await render(hbs`
-      <TGrid @is-open={{true}} />
+      <TGrid @isOpen={{true}} />
     `);
     percySnapshot(assert);
 
@@ -66,10 +66,8 @@ module('Integration | Component | t grid', function(hooks) {
   test('user can click on the transformicon', async function(assert) {
     assert.expect(2);
 
-    // FIXME: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/4#issue-328822657
-    // Currently necessary to use `<TAdd @id="t-add" />` syntax when specifying an `id` but the `aid` prefix shouldn't be necessary -- should be able to say `<TAdd @id="t-add" />`. Fix after this issue is closed.
     await render(hbs`
-      <TGrid @id="t-grid" />
+      <TGrid id="t-grid" />
     `);
 
     assert.dom('#t-grid').hasNoClass('tcon-transform');
diff --git a/tests/integration/components/t-mail-test.js b/tests/integration/components/t-mail-test.js
index 2d941ac4..45148b9f 100644
--- a/tests/integration/components/t-mail-test.js
+++ b/tests/integration/components/t-mail-test.js
@@ -42,11 +42,11 @@ module('Integration | Component | t mail', function(hooks) {
     assert.dom('button').hasNoClass('tcon-transform');
   });
 
-  test('it creates a mail transformicon with `is-open=false`', async function(assert) {
+  test('it creates a mail transformicon with `isOpen=false`', async function(assert) {
     assert.expect(1);
 
     await render(hbs`
-      <TMail @is-open={{false}} />
+      <TMail @isOpen={{false}} />
     `);
     percySnapshot(assert);
 
@@ -56,10 +56,8 @@ module('Integration | Component | t mail', function(hooks) {
   test('user can click on the transformicon', async function(assert) {
     assert.expect(2);
 
-    // FIXME: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/4#issue-328822657
-    // Currently necessary to use `<TAdd @id="t-add" />` syntax when specifying an `id` but the `aid` prefix shouldn't be necessary -- should be able to say `<TAdd @id="t-add" />`. Fix after this issue is closed.
     await render(hbs`
-      <TMail @id="t-mail" />
+      <TMail id="t-mail" />
     `);
 
     assert.dom('#t-mail').hasNoClass('tcon-transform');
diff --git a/tests/integration/components/t-menu-test.js b/tests/integration/components/t-menu-test.js
index bc34bbcd..7c522031 100644
--- a/tests/integration/components/t-menu-test.js
+++ b/tests/integration/components/t-menu-test.js
@@ -41,11 +41,11 @@ module('Integration | Component | t menu', function(hooks) {
     assert.dom('button').hasNoClass('tcon-transform');
   });
 
-  test('it creates a menu transformicon with `is-open=true`', async function(assert) {
+  test('it creates a menu transformicon with `isOpen=true`', async function(assert) {
     assert.expect(1);
 
     await render(hbs`
-      <TMenu @is-open={{true}} />
+      <TMenu @isOpen={{true}} />
     `);
     percySnapshot(assert);
 
@@ -66,10 +66,8 @@ module('Integration | Component | t menu', function(hooks) {
   test('user can click on the transformicon', async function(assert) {
     assert.expect(2);
 
-    // FIXME: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/4#issue-328822657
-    // Currently necessary to use `<TAdd @id="t-add" />` syntax when specifying an `id` but the `aid` prefix shouldn't be necessary -- should be able to say `<TAdd @id="t-add" />`. Fix after this issue is closed.
     await render(hbs`
-      <TMenu @id="t-menu" />
+      <TMenu id="t-menu" />
     `);
 
     assert.dom('#t-menu').hasNoClass('tcon-transform');
diff --git a/tests/integration/components/t-remove-test.js b/tests/integration/components/t-remove-test.js
index 0a247bba..90c200de 100644
--- a/tests/integration/components/t-remove-test.js
+++ b/tests/integration/components/t-remove-test.js
@@ -41,11 +41,11 @@ module('Integration | Component | t remove', function(hooks) {
     assert.dom('button').hasNoClass('tcon-transform');
   });
 
-  test('it creates a remove transformicon with `is-removed=true`', async function(assert) {
+  test('it creates a remove transformicon with `isRemoved=true`', async function(assert) {
     assert.expect(1);
 
     await render(hbs`
-      <TRemove @is-removed={{true}} />
+      <TRemove @isRemoved={{true}} />
     `);
     percySnapshot(assert);
 
@@ -65,10 +65,8 @@ module('Integration | Component | t remove', function(hooks) {
   test('user can click on the transformicon', async function(assert) {
     assert.expect(2);
 
-    // FIXME: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/4#issue-328822657
-    // Currently necessary to use `<TAdd @id="t-add" />` syntax when specifying an `id` but the `aid` prefix shouldn't be necessary -- should be able to say `<TAdd @id="t-add" />`. Fix after this issue is closed.
     await render(hbs`
-      <TRemove @id="t-remove" />
+      <TRemove id="t-remove" />
     `);
 
     assert.dom('#t-remove').hasNoClass('tcon-transform');
diff --git a/tests/integration/components/t-video-test.js b/tests/integration/components/t-video-test.js
index 9ad642f6..d9dec1db 100644
--- a/tests/integration/components/t-video-test.js
+++ b/tests/integration/components/t-video-test.js
@@ -42,11 +42,11 @@ module('Integration | Component | t video', function(hooks) {
     assert.dom('button').hasNoClass('tcon-transform');
   });
 
-  test('it creates a video transformicon with `is-playing=true`', async function(assert) {
+  test('it creates a video transformicon with `isPlaying=true`', async function(assert) {
     assert.expect(1);
 
     await render(hbs`
-      <TVideo @is-playing={{true}} />
+      <TVideo @isPlaying={{true}} />
     `);
     percySnapshot(assert);
 
@@ -56,10 +56,8 @@ module('Integration | Component | t video', function(hooks) {
   test('user can click on the transformicon', async function(assert) {
     assert.expect(2);
 
-    // FIXME: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/4#issue-328822657
-    // Currently necessary to use `<TAdd @id="t-add" />` syntax when specifying an `id` but the `aid` prefix shouldn't be necessary -- should be able to say `<TAdd @id="t-add" />`. Fix after this issue is closed.
     await render(hbs`
-      <TVideo @id="t-video" />
+      <TVideo id="t-video" />
     `);
 
     assert.dom('#t-video').hasNoClass('tcon-transform');