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 + + {{yield (hash + icons=(component "paper-card-icon-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'); + }); });