diff --git a/.changeset/dry-eggs-leave.md b/.changeset/dry-eggs-leave.md new file mode 100644 index 00000000000..9e9903360b6 --- /dev/null +++ b/.changeset/dry-eggs-leave.md @@ -0,0 +1,5 @@ +--- +"@hashicorp/design-system-components": patch +--- + +Fixed bug in `Link::Standalone` and `Link::Inline` components that added `target="_blank"` and `rel="noopener noreferrer”` attributes in any case/condition. diff --git a/packages/components/addon/components/hds/link/inline.hbs b/packages/components/addon/components/hds/link/inline.hbs index e641bbd62f0..d4f2fe18e16 100644 --- a/packages/components/addon/components/hds/link/inline.hbs +++ b/packages/components/addon/components/hds/link/inline.hbs @@ -9,8 +9,7 @@ @route={{@route}} @isRouteExternal={{@isRouteExternal}} @href={{@href}} - target="_blank" - rel="noopener noreferrer" + @isHrefExternal={{@isHrefExternal}} ...attributes >{{#if (and @icon (eq this.iconPosition "leading"))~}} diff --git a/packages/components/addon/components/hds/link/standalone.hbs b/packages/components/addon/components/hds/link/standalone.hbs index d051d617af0..050a8f49d5d 100644 --- a/packages/components/addon/components/hds/link/standalone.hbs +++ b/packages/components/addon/components/hds/link/standalone.hbs @@ -8,8 +8,6 @@ @isRouteExternal={{@isRouteExternal}} @href={{@href}} @isHrefExternal={{@isHrefExternal}} - target="_blank" - rel="noopener noreferrer" ...attributes > {{#if (eq this.iconPosition "leading")}} diff --git a/packages/components/tests/integration/components/hds/link/inline-test.js b/packages/components/tests/integration/components/hds/link/inline-test.js index 0097c7b1336..f733ca185a0 100644 --- a/packages/components/tests/integration/components/hds/link/inline-test.js +++ b/packages/components/tests/integration/components/hds/link/inline-test.js @@ -63,6 +63,31 @@ module('Integration | Component | hds/link/inline', function (hooks) { assert.dom('#test-link > span').hasText('test'); }); + // TARGET/REL ATTRIBUTES + + test('it should render a link with the right "target" and "rel" attributes if @href is passed', async function (assert) { + assert.expect(2); + await render(hbs``); + assert.dom('#test-link').hasAttribute('target', '_blank'); + assert.dom('#test-link').hasAttribute('rel', 'noopener noreferrer'); + }); + test('it should render a link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.dom('#test-link').hasAttribute('target', 'test-target'); + assert.dom('#test-link').hasAttribute('rel', 'test-rel'); + }); + test('it should render a link withhout "target" and "rel" attributes if @isHrefExternal is false', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.dom('#test-link').doesNotHaveAttribute('target'); + assert.dom('#test-link').doesNotHaveAttribute('rel'); + }); + // ASSERTIONS test('it should throw an assertion if both @href and @route are not defined', async function (assert) { @@ -79,13 +104,13 @@ module('Integration | Component | hds/link/inline', function (hooks) { }); test('it should throw an assertion if an incorrect value for @color is provided', async function (assert) { const errorMessage = - '@color for "Hds::Link::Standalone" must be one of the following: primary, secondary; received: foo'; + '@color for "Hds::Link::Inline" must be one of the following: primary, secondary; received: foo'; assert.expect(2); setupOnerror(function (error) { assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`); }); await render( - hbs`` + hbs`` ); assert.throws(function () { throw new Error(errorMessage); diff --git a/packages/components/tests/integration/components/hds/link/standalone-test.js b/packages/components/tests/integration/components/hds/link/standalone-test.js index 27d93447f6f..1e4108d3ebe 100644 --- a/packages/components/tests/integration/components/hds/link/standalone-test.js +++ b/packages/components/tests/integration/components/hds/link/standalone-test.js @@ -76,6 +76,33 @@ module('Integration | Component | hds/link/standalone', function (hooks) { assert.dom('#test-link').hasText('Copy to clipboard'); }); + // TARGET/REL ATTRIBUTES + + test('it should render a link with the right "target" and "rel" attributes if @href is passed', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.dom('#test-link').hasAttribute('target', '_blank'); + assert.dom('#test-link').hasAttribute('rel', 'noopener noreferrer'); + }); + test('it should render a link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.dom('#test-link').hasAttribute('target', 'test-target'); + assert.dom('#test-link').hasAttribute('rel', 'test-rel'); + }); + test('it should render a link without "target" and "rel" attributes if @isHrefExternal is false', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.dom('#test-link').doesNotHaveAttribute('target'); + assert.dom('#test-link').doesNotHaveAttribute('rel'); + }); + // ASSERTIONS test('it should throw an assertion if both @href and @route are not defined', async function (assert) {