From a9a0ca6d6cd3d818ab6f90bb99cd3656580e5532 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 17 Jun 2020 17:08:30 -0400 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Update=20linkbutton?= =?UTF-8?q?=20to=20a=20link-to=20ember=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Linkbutton provides template for link-to content. --- .../rose/addon/components/rose/link-button.js | 25 ++++++++-- .../components/rose/link-button.stories.mdx | 7 +-- .../addon/components/rose/link-button/body.js | 7 --- .../templates/components/rose/link-button.hbs | 48 ++++++++++--------- .../components/rose/link-button/body.hbs | 26 ---------- .../app/components/rose/link-button/body.js | 1 - .../rose/tests/dummy/app/templates/index.hbs | 14 +++--- .../components/rose/link-button-test.js | 18 +++---- .../components/rose/link-button/body-test.js | 40 ---------------- 9 files changed, 64 insertions(+), 122 deletions(-) delete mode 100644 addons/rose/addon/components/rose/link-button/body.js delete mode 100644 addons/rose/addon/templates/components/rose/link-button/body.hbs delete mode 100644 addons/rose/app/components/rose/link-button/body.js delete mode 100644 addons/rose/tests/integration/components/rose/link-button/body-test.js diff --git a/addons/rose/addon/components/rose/link-button.js b/addons/rose/addon/components/rose/link-button.js index 3219bcbff..d5c12ed37 100644 --- a/addons/rose/addon/components/rose/link-button.js +++ b/addons/rose/addon/components/rose/link-button.js @@ -1,17 +1,32 @@ -import Component from '@ember/component'; +import LinkComponent from '@ember/routing/link-component'; import layout from '../../templates/components/rose/link-button'; +import { computed } from '@ember/object'; /** * An achor element based on `rose-button` component styles * An empty model cannot be passed in to `link-to` component when a route - * is defined. Thus, `link-button` body content is separated to avoid - * duplication when checked for model existence. + * is defined. Thus, `link-to` component is used to generate this component. * * @example * Save * Disabled */ -export default Component.extend({ +export default LinkComponent.extend({ layout, - tagName: '', + tagName: 'a', + classNames: ['rose-link-button'], + classNameBindings: [ + 'linkButtonStyle', + 'iconOnly:has-icon-only', + 'iconLeft:has-icon-left', + 'iconRight:has-icon-right', + ], + linkButtonStyle: computed(function () { + let styleClassName = ''; + if (this.style) { + styleClassName = `rose-button-${this.style}`; + } + + return styleClassName; + }), }); diff --git a/addons/rose/addon/components/rose/link-button.stories.mdx b/addons/rose/addon/components/rose/link-button.stories.mdx index cb6b13001..0ca00a2ee 100644 --- a/addons/rose/addon/components/rose/link-button.stories.mdx +++ b/addons/rose/addon/components/rose/link-button.stories.mdx @@ -12,7 +12,7 @@ Styles supported: primary, secondary, warning, and ghost. Disabling link button is not supported as it is an action on form components only. ```html - + Content ``` @@ -21,6 +21,7 @@ Disabling link button is not supported as it is an action on form components onl {{ template: hbs` + ``` {{ template: hbs` - + `, context: { style: select( diff --git a/addons/rose/addon/components/rose/link-button/body.js b/addons/rose/addon/components/rose/link-button/body.js deleted file mode 100644 index 7934097df..000000000 --- a/addons/rose/addon/components/rose/link-button/body.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/link-button/body'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/templates/components/rose/link-button.hbs b/addons/rose/addon/templates/components/rose/link-button.hbs index f7d7e94c3..20ea6c6a5 100644 --- a/addons/rose/addon/templates/components/rose/link-button.hbs +++ b/addons/rose/addon/templates/components/rose/link-button.hbs @@ -1,22 +1,26 @@ -{{#if @model}} - - - {{yield}} - - -{{else}} - - - {{yield}} - - -{{/if}} + + {{#if @iconLeft}} + + {{/if}} + + + {{yield}} + + + {{#if @iconOnly}} + + {{/if}} + + {{#if @iconRight}} + + {{/if}} + diff --git a/addons/rose/addon/templates/components/rose/link-button/body.hbs b/addons/rose/addon/templates/components/rose/link-button/body.hbs deleted file mode 100644 index 20ea6c6a5..000000000 --- a/addons/rose/addon/templates/components/rose/link-button/body.hbs +++ /dev/null @@ -1,26 +0,0 @@ - - {{#if @iconLeft}} - - {{/if}} - - - {{yield}} - - - {{#if @iconOnly}} - - {{/if}} - - {{#if @iconRight}} - - {{/if}} - diff --git a/addons/rose/app/components/rose/link-button/body.js b/addons/rose/app/components/rose/link-button/body.js deleted file mode 100644 index b3c9ee39f..000000000 --- a/addons/rose/app/components/rose/link-button/body.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/link-button/body'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 8df466fc3..2422caa03 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,9 +1,9 @@ -Primary -Secondary -Warning -Ghost +Primary +Secondary +Warning +Ghost
-Left Icon -Right Icon - +Left Icon +Right Icon + diff --git a/addons/rose/tests/integration/components/rose/link-button-test.js b/addons/rose/tests/integration/components/rose/link-button-test.js index d7d3c8497..617f76ed0 100644 --- a/addons/rose/tests/integration/components/rose/link-button-test.js +++ b/addons/rose/tests/integration/components/rose/link-button-test.js @@ -7,19 +7,19 @@ module('Integration | Component | rose/link-button', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - await render(hbs``); + await render(hbs``); assert.ok(find('a')); assert.notOk(find('.rose-button')); assert.ok(find('.rose-link-button')); }); test('it renders with attributes', async function (assert) { - await render(hbs``); + await render(hbs``); assert.ok(find('#link-button')); }); test('it renders with content', async function (assert) { - await render(hbs`Link button content`); + await render(hbs`Link button content`); assert.ok( find('.rose-link-button').textContent.trim(), 'Link button content' @@ -27,28 +27,24 @@ module('Integration | Component | rose/link-button', function (hooks) { }); test('it renders with rose button styles', async function (assert) { - this.set('style', 'primary'); - await render(hbs``); - assert.ok(find(`.rose-button-primary`)); - - this.set('style', 'sample'); + await render(hbs``); assert.ok(find(`.rose-button-sample`)); }); test('it supports left icon with @iconLeft', async function (assert) { - await render(hbs``); + await render(hbs``); assert.ok(find('.rose-icon')); assert.ok(find('.has-icon-left')); }); test('it supports left icon with @iconRight', async function (assert) { - await render(hbs``); + await render(hbs``); assert.ok(find('.rose-icon')); assert.ok(find('.has-icon-right')); }); test('it supports only icon with @iconOnly', async function (assert) { - await render(hbs``); + await render(hbs``); assert.ok(find('.rose-icon')); assert.ok(find('.has-icon-only')); }); diff --git a/addons/rose/tests/integration/components/rose/link-button/body-test.js b/addons/rose/tests/integration/components/rose/link-button/body-test.js deleted file mode 100644 index 2ff8aecaa..000000000 --- a/addons/rose/tests/integration/components/rose/link-button/body-test.js +++ /dev/null @@ -1,40 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | rose/link-button/body', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-button-wrapper')); - }); - - test('it renders with content', async function (assert) { - await render(hbs` - Body content - `); - assert.equal( - find('.rose-button-wrapper').textContent.trim(), - 'Body content' - ); - }); - - test('it supports @iconLeft', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-icon')); - }); - - test('it supports @iconRight', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-icon')); - }); - - test('it supports @iconOnly', async function (assert) { - await render( - hbs`` - ); - assert.ok(find('.rose-icon')); - }); -});