feat(addon/components/paper-card-actions): migrates to tagless native class.

Author: matthewhartstonge

addon/components/paper-card-actions.hbs

@@ -1,3 +1,5 @@
-{{yield (hash
-  icons=(component "paper-card-icon-actions")
-)}}
+<md-card-actions class={{this.classes}} ...attributes>
+  {{yield (hash
+    icons=(component "paper-card-icon-actions")
+  )}}
+</md-card-actions>

addon/components/paper-card-actions.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,19 +8,18 @@ import Component from '@ember/component';
  * @class PaperCardActions
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'md-card-actions',
-  classNameBindings: ['defaultClasses'],
-
-  didReceiveAttrs() {
-    this._super(...arguments);
+export default class PaperCardActions extends Component {
+  tagName = '';
 
+  get classes() {
     // if the consumer didn't set layout classes, we should set them
     // to the default (layout = row, layout align = end center)
     let providedClasses = this['class'];
 
     if (!providedClasses || providedClasses.indexOf('layout-') === -1) {
-      this.set('defaultClasses', 'layout-row layout-align-end-center');
+      return `layout-row layout-align-end-center ${providedClasses}`.trimEnd();
     }
-  },
-});
+
+    return providedClasses;
+  }
+}

tests/integration/components/paper-card-test.js

@@ -1,13 +1,12 @@
-/* eslint-disable prettier/prettier */
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | paper-card', function(hooks) {
+module('Integration | Component | paper-card', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('blockless media renders image', async function(assert) {
+  test('blockless media renders image', async function (assert) {
     assert.expect(5);
 
     await render(hbs`
@@ -36,7 +35,7 @@ module('Integration | Component | paper-card', function(hooks) {
     assert.dom('img').hasClass('md-media-xl');
   });
 
-  test('block media renders div with correct class', async function(assert) {
+  test('block media renders div with correct class', async function (assert) {
     assert.expect(1);
 
     await render(hbs`
@@ -62,4 +61,52 @@ module('Integration | Component | paper-card', function(hooks) {
 
     assert.dom('div.md-media-xl').exists({ count: 1 });
   });
+
+  test('block actions renders tag with default layout classes', async function (assert) {
+    assert.expect(3);
+
+    await render(hbs`
+      {{#paper-card as |card|}}
+        {{#card.actions}}
+          {{#paper-button iconButton=true}}{{paper-icon "favorite"}}{{/paper-button}}
+        {{/card.actions}}
+      {{/paper-card}}
+    `);
+
+    assert.dom('md-card-actions').exists({ count: 1 });
+    assert.dom('md-card-actions').hasClass('layout-row');
+    assert.dom('md-card-actions').hasClass('layout-align-end-center');
+  });
+
+  test('block actions renders tag with passed through layout classes', async function (assert) {
+    assert.expect(2);
+
+    await render(hbs`
+      {{#paper-card as |card|}}
+        {{#card.actions class="layout-column"}}
+          {{#paper-button iconButton=true}}{{paper-icon "favorite"}}{{/paper-button}}
+        {{/card.actions}}
+      {{/paper-card}}
+    `);
+
+    assert.dom('md-card-actions').exists({ count: 1 });
+    assert.dom('md-card-actions').hasClass('layout-column');
+  });
+
+  test('block actions renders tag with passed through non-layout classes', async function (assert) {
+    assert.expect(4);
+
+    await render(hbs`
+      {{#paper-card as |card|}}
+        {{#card.actions class="call-to-action"}}
+          {{#paper-button iconButton=true}}{{paper-icon "favorite"}}{{/paper-button}}
+        {{/card.actions}}
+      {{/paper-card}}
+    `);
+
+    assert.dom('md-card-actions').exists({ count: 1 });
+    assert.dom('md-card-actions').hasClass('layout-row');
+    assert.dom('md-card-actions').hasClass('layout-align-end-center');
+    assert.dom('md-card-actions').hasClass('call-to-action');
+  });
 });