Merge pull request #524 from appuniversum/new-tab-argument

Add a `@newTab` argument to the `AuLinkExternal` component

Author: Windvis

addon/components/au-link-external.gts

@@ -14,6 +14,7 @@ export interface AuLinkExternalSignature {
     hideText?: boolean;
     icon?: AuIconSignature['Args']['icon'];
     iconAlignment?: 'left' | 'right';
+    newTab?: boolean;
     skin?:
       | 'primary'
       | 'secondary'
@@ -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
     >

stories/5-components/Links/AuLinkExternal.stories.js

@@ -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'],
@@ -47,6 +52,7 @@ const Template = (args) => ({
       @icon={{this.icon}}
       @iconAlignment={{this.iconAlignment}}
       @hideText={{this.hideText}}
+      @newTab={{this.newTab}}
       @width={{this.width}}
     >
       {{this.text}}

tests/integration/components/au-link-external-test.gts

@@ -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);
@@ -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;
+}