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

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;
+  }
+}

addon/components/paper-card-avatar.hbs

@@ -0,0 +1,3 @@
+<md-card-avatar ...attributes>
+  {{yield}}
+</md-card-avatar>

addon/components/paper-card-avatar.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,6 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardAvatar
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'md-card-avatar'
-});
+export default class PaperCardAvatar extends Component {
+  tagName = '';
+}

addon/components/paper-card-content.hbs

@@ -0,0 +1,3 @@
+<md-card-content ...attributes>
+  {{yield}}
+</md-card-content>

addon/components/paper-card-content.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,6 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardContent
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'md-card-content'
-});
+export default class PaperCardContent extends Component {
+  tagName = '';
+}

addon/components/paper-card-header-headline.hbs

@@ -0,0 +1,3 @@
+<span class="md-headline" ...attributes>
+  {{yield}}
+</span>

addon/components/paper-card-header-headline.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,7 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardHeaderHeadline
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'span',
-  classNames: ['md-headline']
-});
+export default class PaperCardHeaderHeadline extends Component {
+  tagName = '';
+}

addon/components/paper-card-header-subhead.hbs

@@ -0,0 +1,3 @@
+<span class="md-subhead" ...attributes>
+  {{yield}}
+</span>

addon/components/paper-card-header-subhead.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,7 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardHeaderSubhead
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'span',
-  classNames: ['md-subhead']
-});
+export default class PaperCardHeaderSubhead extends Component {
+  tagName = '';
+}

addon/components/paper-card-header-title.hbs

@@ -0,0 +1,3 @@
+<span class="md-title" ...attributes>
+  {{yield}}
+</span>

addon/components/paper-card-header-title.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,7 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardHeaderTitle
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'span',
-  classNames: ['md-title']
-});
+export default class PaperCardHeaderTitle extends Component {
+  tagName = '';
+}

addon/components/paper-card-icon-actions.hbs

@@ -0,0 +1,3 @@
+<md-card-icon-actions ...attributes>
+  {{yield}}
+</md-card-icon-actions>

addon/components/paper-card-icon-actions.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,6 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardIconActions
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'md-card-icon-actions'
-});
+export default class PaperCardIconActions extends Component {
+  tagName = '';
+}

addon/components/paper-card-image.hbs

@@ -0,0 +1 @@
+<img class="md-card-image" alt={{@alt}} src={{@src}} title={{@title}} ...attributes>

addon/components/paper-card-image.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,8 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardImage
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'img',
-  classNames: ['md-card-image'],
-  attributeBindings: ['src', 'title', 'alt']
-});
+export default class PaperCardImage extends Component {
+  tagName = '';
+}

addon/components/paper-card-title-media.hbs

@@ -1,7 +1,9 @@
-{{#if (has-block)}}
-  <div class="md-media-{{this.size}}">
-    {{yield}}
-  </div>
-{{else}}
-  <img class="md-media-{{this.size}}" src={{@src}} alt={{@alt}} title={{@title}}>
-{{/if}}
+<md-card-title-media ...attributes>
+  {{#if (has-block)}}
+    <div class="md-media-{{this.size}}">
+      {{yield}}
+    </div>
+  {{else}}
+    <img class="md-media-{{this.size}}" src={{@src}} alt={{@alt}} title={{@title}}>
+  {{/if}}
+</md-card-title-media>

addon/components/paper-card-title-media.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,7 +8,7 @@ import Component from '@ember/component';
  * @class PaperCardTitleMedia
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'md-card-title-media',
-  size: 'md',
-});
+export default class PaperCardTitleMedia extends Component {
+  tagName = '';
+  size = 'md';
+}

addon/components/paper-card-title-text.hbs

@@ -1,4 +1,6 @@
-{{yield (hash
-  headline=(component "paper-card-header-headline")
-  subhead=(component "paper-card-header-subhead")
-)}}
+<md-card-title-text ...attributes>
+  {{yield (hash
+    headline=(component "paper-card-header-headline")
+    subhead=(component "paper-card-header-subhead")
+  )}}
+</md-card-title-text>

addon/components/paper-card-title-text.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,6 +8,6 @@ import Component from '@ember/component';
  * @class PaperCardTitleText
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'md-card-title-text',
-});
+export default class PaperCardTitleText extends Component {
+  tagName = '';
+}

addon/components/paper-card.hbs

@@ -1,8 +1,10 @@
-{{yield (hash
-  title=(component "paper-card-title")
-  content=(component "paper-card-content")
-  actions=(component "paper-card-actions")
-  header=(component "paper-card-header")
-  image=(component "paper-card-image")
-  media=(component "paper-card-media")
-)}}
+<md-card ...attributes>
+  {{yield (hash
+    title=(component "paper-card-title")
+    content=(component "paper-card-content")
+    actions=(component "paper-card-actions")
+    header=(component "paper-card-header")
+    image=(component "paper-card-image")
+    media=(component "paper-card-media")
+  )}}
+</md-card>

addon/components/paper-card.js

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
 /**
  * @module ember-paper
  */
@@ -8,6 +8,6 @@ import Component from '@ember/component';
  * @class PaperCard
  * @extends Ember.Component
  */
-export default Component.extend({
-  tagName: 'md-card',
-});
+export default class PaperCard extends Component {
+  tagName = '';
+}

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');
+  });
 });