CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 💡 Update linkbutton to a link-to ember component

Browse Source 
Linkbutton provides template for link-to content.
This commit is contained in:
Susmitha Girumala committed 2020-06-17 17:08:30 -04:00
1 parent d614f0e630
commit a9a0ca6d6c
9 files changed
+64 -122
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/link-button.js
+20 -5
View File
@@ -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
* <Rose::LinkButton @submit={{true}} @style="primary">Save</Rose::LinkButton>
* <Rose::LinkButton @disabled={{true}} @style="secondary">Disabled</Rose::LinkButton>
*/
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;
}),
});
addons/rose/addon/components/rose/link-button.stories.mdx
+4 -3
View File
@@ -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
<Rose::LinkButton @style="primary" @iconRight="chevron-right">
<Rose::LinkButton @route="index" @style="primary" @iconRight="chevron-right">
Content
</Rose::LinkButton>
```
@@ -21,6 +21,7 @@ Disabling link button is not supported as it is an action on form components onl
<Story name="Advanced">{{
template: hbs`
<Rose::LinkButton
@route="index"
@style={{style}}
@iconLeft={{iconLeft}}
@iconRight={{iconRight}}
@@ -67,13 +68,13 @@ Disabling link button is not supported as it is an action on form components onl
Similar to `Rose::Button`, icon only link button is supported.
```html
<Rose::LinkButton @style="primary" @iconOnly="help-circle-outline" />
<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
```
<Preview>
<Story name="Icon Only">{{
template: hbs`
<Rose::LinkButton @style={{style}} @iconOnly={{iconOnly}} />
<Rose::LinkButton @route="" @style={{style}} @iconOnly={{iconOnly}} />
`,
context: {
style: select(
addons/rose/addon/components/rose/link-button/body.js
-7
View File
@@ -1,7 +0,0 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/link-button/body';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/templates/components/rose/link-button.hbs
+26 -22
View File
@@ -1,22 +1,26 @@
{{#if @model}}
<LinkTo
...attributes
@route={{if @route @route "index"}}
@model={{@model}}
class="rose-link-button {{if @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
>
<Rose::LinkButton::Body @iconOnly={{@iconOnly}} @iconLeft={{@iconLeft}} @iconRight={{@iconRight}}>
{{yield}}
</Rose::LinkButton::Body>
</LinkTo>
{{else}}
<LinkTo
...attributes
@route={{if @route @route "index"}}
class="rose-link-button {{if @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
>
<Rose::LinkButton::Body @iconOnly={{@iconOnly}} @iconLeft={{@iconLeft}} @iconRight={{@iconRight}}>
{{yield}}
</Rose::LinkButton::Body>
</LinkTo>
{{/if}}
<span class="rose-button-wrapper">
{{#if @iconLeft}}
<Rose::Icon
@name={{@iconLeft}}
@size="medium"
/>
{{/if}}
<span class="rose-button-body">
{{yield}}
</span>
{{#if @iconOnly}}
<Rose::Icon
@name={{@iconOnly}}
@size="medium"
/>
{{/if}}
{{#if @iconRight}}
<Rose::Icon
@name={{@iconRight}}
@size="medium"
/>
{{/if}}
</span>
addons/rose/addon/templates/components/rose/link-button/body.hbs
-26
View File
@@ -1,26 +0,0 @@
<span class="rose-button-wrapper">
{{#if @iconLeft}}
<Rose::Icon
@name={{@iconLeft}}
@size="medium"
/>
{{/if}}
<span class="rose-button-body">
{{yield}}
</span>
{{#if @iconOnly}}
<Rose::Icon
@name={{@iconOnly}}
@size="medium"
/>
{{/if}}
{{#if @iconRight}}
<Rose::Icon
@name={{@iconRight}}
@size="medium"
/>
{{/if}}
</span>
addons/rose/app/components/rose/link-button/body.js
-1
View File
@@ -1 +0,0 @@
export { default } from 'rose/components/rose/link-button/body';
addons/rose/tests/dummy/app/templates/index.hbs
+7 -7
View File
@@ -1,9 +1,9 @@
<Rose::LinkButton @style="primary">Primary</Rose::LinkButton>
<Rose::LinkButton @style="secondary">Secondary</Rose::LinkButton>
<Rose::LinkButton @style="warning">Warning</Rose::LinkButton>
<Rose::LinkButton @style="ghost">Ghost</Rose::LinkButton>
<Rose::LinkButton @route="index" @style="primary">Primary</Rose::LinkButton>
<Rose::LinkButton @route="index" @style="secondary">Secondary</Rose::LinkButton>
<Rose::LinkButton @route="index" @style="warning">Warning</Rose::LinkButton>
<Rose::LinkButton @route="index" @style="ghost">Ghost</Rose::LinkButton>
<br />
<Rose::LinkButton @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
<Rose::LinkButton @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
<Rose::LinkButton @style="primary" @iconOnly="help-circle-outline" />
<Rose::LinkButton @route="index" @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
<Rose::LinkButton @route="index" @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
addons/rose/tests/integration/components/rose/link-button-test.js
+7 -11
View File
@@ -7,19 +7,19 @@ module('Integration | Component | rose/link-button', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::LinkButton />`);
await render(hbs`<Rose::LinkButton @route="index" />`);
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`<Rose::LinkButton id="link-button"/>`);
await render(hbs`<Rose::LinkButton @route="index" id="link-button"/>`);
assert.ok(find('#link-button'));
});
test('it renders with content', async function (assert) {
await render(hbs`<Rose::LinkButton>Link button content</Rose::LinkButton>`);
await render(hbs`<Rose::LinkButton @route="index">Link button content</Rose::LinkButton>`);
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`<Rose::LinkButton @style={{this.style}}/>`);
assert.ok(find(`.rose-button-primary`));
this.set('style', 'sample');
await render(hbs`<Rose::LinkButton @route="index" @style="sample"/>`);
assert.ok(find(`.rose-button-sample`));
});
test('it supports left icon with @iconLeft', async function (assert) {
await render(hbs`<Rose::LinkButton @iconLeft="chevron-left" />`);
await render(hbs`<Rose::LinkButton @route="index" @iconLeft="chevron-left" />`);
assert.ok(find('.rose-icon'));
assert.ok(find('.has-icon-left'));
});
test('it supports left icon with @iconRight', async function (assert) {
await render(hbs`<Rose::LinkButton @iconRight="chevron-right" />`);
await render(hbs`<Rose::LinkButton @route="index" @iconRight="chevron-right" />`);
assert.ok(find('.rose-icon'));
assert.ok(find('.has-icon-right'));
});
test('it supports only icon with @iconOnly', async function (assert) {
await render(hbs`<Rose::LinkButton @iconOnly="help-circle-outline" />`);
await render(hbs`<Rose::LinkButton @route="index" @iconOnly="help-circle-outline" />`);
assert.ok(find('.rose-icon'));
assert.ok(find('.has-icon-only'));
});
addons/rose/tests/integration/components/rose/link-button/body-test.js
-40
View File
@@ -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`<Rose::LinkButton::Body />`);
assert.ok(find('.rose-button-wrapper'));
});
test('it renders with content', async function (assert) {
await render(hbs`<Rose::LinkButton::Body>
Body content
</Rose::LinkButton::Body>`);
assert.equal(
find('.rose-button-wrapper').textContent.trim(),
'Body content'
);
});
test('it supports @iconLeft', async function (assert) {
await render(hbs`<Rose::LinkButton::Body @iconLeft="chevron-left"/>`);
assert.ok(find('.rose-icon'));
});
test('it supports @iconRight', async function (assert) {
await render(hbs`<Rose::LinkButton::Body @iconRight="chevron-right" />`);
assert.ok(find('.rose-icon'));
});
test('it supports @iconOnly', async function (assert) {
await render(
hbs`<Rose::LinkButton::Body @iconOnly="help-circle-outline" />`
);
assert.ok(find('.rose-icon'));
});
});