Skip to content

Commit

Permalink
Add a @newTab argument to the AuLinkExternal component
Browse files Browse the repository at this point in the history
  • Loading branch information
Windvis committed Nov 7, 2024
1 parent f59b7db commit f7ef396
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 2 deletions.
9 changes: 7 additions & 2 deletions addon/components/au-link-external.gts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface AuLinkExternalSignature {
hideText?: boolean;
icon?: AuIconSignature['Args']['icon'];
iconAlignment?: 'left' | 'right';
newTab?: boolean;
skin?:
| 'primary'
| 'secondary'
Expand Down Expand Up @@ -61,12 +62,16 @@ export default class AuLinkExternal extends Component<AuLinkExternalSignature> {
return '';
}

get newTab() {
return typeof this.args.newTab === 'boolean' ? this.args.newTab : true;
}

// We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
// prettier-ignore
<template><a
class="{{this.skinClass}} {{this.widthClass}} {{this.iconOnlyClass}}"
target="_blank"
rel="noopener noreferrer"
target={{if this.newTab "_blank"}}
rel={{if this.newTab "noopener noreferrer"}}
href=""
...attributes
>
Expand Down
6 changes: 6 additions & 0 deletions stories/5-components/Links/AuLinkExternal.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ export default {
control: 'boolean',
description: 'Hides the link text visually',
},
newTab: {
control: 'boolean',
description:
'Should clicking the link open a new tab. Defaults to `true`.',
},
width: {
control: 'select',
options: ['', 'block'],
Expand All @@ -47,6 +52,7 @@ const Template = (args) => ({
@icon={{this.icon}}
@iconAlignment={{this.iconAlignment}}
@hideText={{this.hideText}}
@newTab={{this.newTab}}
@width={{this.width}}
>
{{this.text}}
Expand Down
44 changes: 44 additions & 0 deletions tests/integration/components/au-link-external-test.gts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
import { tracked } from '@glimmer/tracking';
import { settled } from '@ember/test-helpers';

module('Integration | Component | au-link-external', function (hooks) {
setupRenderingTest(hooks);
Expand All @@ -17,4 +19,46 @@ module('Integration | Component | au-link-external', function (hooks) {

assert.dom('[data-test-link-external]').hasText('template block text');
});

test('it accepts a `@newTab` argument', async function (assert) {
await render(
<template>
<AuLinkExternal data-test-link-external>
template block text
</AuLinkExternal>
</template>,
);

assert
.dom('[data-test-link-external]')
.hasAttribute('target')
.hasAttribute('rel');

const state = new TestState();

await render(
<template>
<AuLinkExternal @newTab={{state.newTab}} data-test-link-external>
template block text
</AuLinkExternal>
</template>,
);

assert
.dom('[data-test-link-external]')
.hasNoAttribute('target')
.hasNoAttribute('rel');

state.newTab = true;
await settled();

assert
.dom('[data-test-link-external]')
.hasAttribute('target')
.hasAttribute('rel');
});
});

class TestState {
@tracked newTab = false;
}

0 comments on commit f7ef396

Please sign in to comment.