change to a single function call instead of static property

Author: meirish

packages/components/src/components/hds/breadcrumb/item.ts

@@ -10,6 +10,7 @@ import { assert } from '@ember/debug';
 import type { LinkTo } from '@ember/routing';
 import type { SafeString } from '@ember/template';
 import type { HdsIconSignature } from '../icon/index';
+import { getLinkToExternal } from '../../../utils/hds-link-to-external.ts';
 
 export interface HdsBreadcrumbItemSignature {
   Args: {
@@ -29,22 +30,20 @@ export interface HdsBreadcrumbItemSignature {
 }
 
 export default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignature> {
-  static linkToExternal: LinkTo | null = null;
-
   /**
    *
    * @param linkToExternal
    * @type LinkTo | null
    * @default null
    */
   get linkToExternal(): LinkTo | null {
-    const component = HdsBreadcrumbItem.linkToExternal;
+    const component = getLinkToExternal();
     if (component === null) {
       assert(
         `HdsBreadcrumbItem: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:
 
-import { HdsBreadcrumbItem } from @hashicorp/design-system-components/components;'
-HdsBreadcrumbItem.linkToExternal = LinkToExternalComponent;`
+import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
+setLinkToExternal(LinkToExternalComponent);`
       );
     }
     return component;

packages/components/src/components/hds/interactive/index.ts

@@ -8,6 +8,7 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 
 import type { LinkTo } from '@ember/routing';
+import { getLinkToExternal } from '../../../utils/hds-link-to-external.ts';
 
 export interface HdsInteractiveSignature {
   Args: {
@@ -30,8 +31,6 @@ export interface HdsInteractiveSignature {
 }
 
 export default class HdsInteractive extends Component<HdsInteractiveSignature> {
-  static linkToExternal: LinkTo | null = null;
-
   /**
    * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
    *
@@ -40,13 +39,13 @@ export default class HdsInteractive extends Component<HdsInteractiveSignature> {
    * @default null
    */
   get linkToExternal(): LinkTo | null {
-    const component = HdsInteractive.linkToExternal;
+    const component = getLinkToExternal();
     if (component === null) {
       assert(
         `HdsInteractive: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:
 
-import { HdsInteractive } from '@hashicorp/design-system-components/components';
-HdsInteractive.linkToExternal = LinkToExternalComponent;`
+import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
+setLinkToExternal(LinkToExternalComponent);`
       );
     }
     return component;

packages/components/src/utils/hds-link-to-external.ts

@@ -0,0 +1,11 @@
+import type { LinkTo } from '@ember/routing';
+
+let LINK_TO_EXTERNAL_COMPONENT: LinkTo | null = null;
+
+export function getLinkToExternal(): LinkTo | null {
+  return LINK_TO_EXTERNAL_COMPONENT;
+}
+
+export function setLinkToExternal(component: LinkTo | null): void {
+  LINK_TO_EXTERNAL_COMPONENT = component;
+}

showcase/tests/integration/components/hds/breadcrumb/item-test.gts

@@ -8,6 +8,7 @@ import { render, setupOnerror } from '@ember/test-helpers';
 
 import { HdsBreadcrumbItem } from '@hashicorp/design-system-components/components';
 import { LinkTo } from '@ember/routing';
+import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
 
 import { setupRenderingTest } from 'showcase/tests/helpers';
 
@@ -97,8 +98,8 @@ module('Integration | Component | hds/breadcrumb/item', function (hooks) {
   test('it should error if @isRouteExternal is true and no component has been configured on the HdsBreadcrumbItem class', async function (assert) {
     const errorMessage = `HdsBreadcrumbItem: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:
 
-import { HdsBreadcrumbItem } from @hashicorp/design-system-components/components;'
-HdsBreadcrumbItem.linkToExternal = LinkToExternalComponent;`;
+import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
+setLinkToExternal(LinkToExternalComponent);`;
 
     assert.expect(1);
     setupOnerror(function (error) {
@@ -118,8 +119,7 @@ HdsBreadcrumbItem.linkToExternal = LinkToExternalComponent;`;
   });
 
   test('it should render configured link component when @isRouteExternal is true', async function (assert) {
-    HdsBreadcrumbItem.linkToExternal = LinkTo;
-
+    setLinkToExternal(LinkTo);
     assert.expect(1);
 
     await render(
@@ -133,6 +133,6 @@ HdsBreadcrumbItem.linkToExternal = LinkToExternalComponent;`;
       </template>,
     );
     assert.dom('#test-breadcrumb-item > a').doesNotExist();
-    HdsBreadcrumbItem.linkToExternal = null;
+    setLinkToExternal(null);
   });
 });

showcase/tests/integration/components/hds/interactive/index-test.gts

@@ -10,6 +10,7 @@ import { tracked } from 'tracked-built-ins';
 
 import { HdsInteractive } from '@hashicorp/design-system-components/components';
 import { LinkTo } from '@ember/routing';
+import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
 
 import { setupRenderingTest } from 'showcase/tests/helpers';
 
@@ -160,8 +161,8 @@ module('Integration | Component | hds/interactive/index', function (hooks) {
   test('it should error if @isRouteExternal is true and no component has been configured on the HdsInteractive class', async function (assert) {
     const errorMessage = `HdsInteractive: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:
 
-import { HdsInteractive } from '@hashicorp/design-system-components/components';
-HdsInteractive.linkToExternal = LinkToExternalComponent;`;
+import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
+setLinkToExternal(LinkToExternalComponent);`;
 
     assert.expect(1);
     setupOnerror(function (error) {
@@ -180,8 +181,7 @@ HdsInteractive.linkToExternal = LinkToExternalComponent;`;
   });
 
   test('it should render configured link component when @isRouteExternal is true', async function (assert) {
-    HdsInteractive.linkToExternal = LinkTo;
-
+    setLinkToExternal(LinkTo);
     assert.expect(1);
 
     await render(
@@ -194,6 +194,6 @@ HdsInteractive.linkToExternal = LinkToExternalComponent;`;
       </template>,
     );
     assert.dom('a#test-interactive').exists();
-    HdsInteractive.linkToExternal = null;
+    setLinkToExternal(null);
   });
 });