From f7ef3962fafe5c4d301d5e5aebe9f7ed9b72308e Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Nov 2024 18:42:50 +0100
Subject: [PATCH] Add a `@newTab` argument to the `AuLinkExternal` component

---
 addon/components/au-link-external.gts         |  9 +++-
 .../Links/AuLinkExternal.stories.js           |  6 +++
 .../components/au-link-external-test.gts      | 44 +++++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/addon/components/au-link-external.gts b/addon/components/au-link-external.gts
index 94cc4780a..1585ade1e 100644
--- a/addon/components/au-link-external.gts
+++ b/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
     >
diff --git a/stories/5-components/Links/AuLinkExternal.stories.js b/stories/5-components/Links/AuLinkExternal.stories.js
index 1e66b7605..c7abc494e 100644
--- a/stories/5-components/Links/AuLinkExternal.stories.js
+++ b/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}}
diff --git a/tests/integration/components/au-link-external-test.gts b/tests/integration/components/au-link-external-test.gts
index 8b493071f..6a794ed8c 100644
--- a/tests/integration/components/au-link-external-test.gts
+++ b/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;
+}