From 3022ea9b908cbe0b228fa417af8627ac196ce05a Mon Sep 17 00:00:00 2001
From: Matthew Hartstonge <matt@mykro.co.nz>
Date: Thu, 17 Oct 2024 17:08:32 +1300
Subject: [PATCH] feat(addon/components/paper-card-actions): migrates to
 tagless native class.

---
 addon/components/paper-card-actions.hbs       |  8 ++-
 addon/components/paper-card-actions.js        | 19 +++----
 .../integration/components/paper-card-test.js | 55 +++++++++++++++++--
 3 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/addon/components/paper-card-actions.hbs b/addon/components/paper-card-actions.hbs
index 5287b3645..748fa3e31 100644
--- a/addon/components/paper-card-actions.hbs
+++ b/addon/components/paper-card-actions.hbs
@@ -1,3 +1,5 @@
-{{yield (hash
-  icons=(component "paper-card-icon-actions")
-)}}
\ No newline at end of file
+<md-card-actions class={{this.classes}} ...attributes>
+  {{yield (hash
+    icons=(component "paper-card-icon-actions")
+  )}}
+</md-card-actions>
\ No newline at end of file
diff --git a/addon/components/paper-card-actions.js b/addon/components/paper-card-actions.js
index 5d0e52be0..24fbbee0a 100644
--- a/addon/components/paper-card-actions.js
+++ b/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;
+  }
+}
diff --git a/tests/integration/components/paper-card-test.js b/tests/integration/components/paper-card-test.js
index 6a43aaab3..a264ede28 100644
--- a/tests/integration/components/paper-card-test.js
+++ b/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');
+  });
 });