Unify "Link/LinkTo::Standalone" component (04)

packages/components/addon/components/hds/link/standalone.hbs

@@ -1,6 +1,17 @@
-{{! template-lint-disable link-href-attributes }}
-{{! we can disable this linting rule because the developer will add the html attribute themselves }}
-<a class={{this.classNames}} target="_blank" rel="noopener noreferrer" ...attributes>
+<Hds::Interactive
+  class={{this.classNames}}
+  @current-when={{@current-when}}
+  @models={{hds-link-to-models @model @models}}
+  @query={{hds-link-to-query @query}}
+  @replace={{@replace}}
+  @route={{@route}}
+  @isRouteExternal={{@isRouteExternal}}
+  @href={{@href}}
+  @isHrefExternal={{@isHrefExternal}}
+  target="_blank"
+  rel="noopener noreferrer"
+  ...attributes
+>
   {{#if (eq this.iconPosition "leading")}}
     <div class="hds-link-standalone__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
@@ -16,5 +27,4 @@
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
     </div>
   {{/if}}
-</a>
-{{! template-lint-enable link-href-attributes }}
+</Hds::Interactive>

packages/components/addon/components/hds/link/standalone.js

@@ -9,6 +9,13 @@ export const COLORS = ['primary', 'secondary'];
 export const SIZES = ['small', 'medium', 'large'];
 
 export default class HdsLinkStandaloneComponent extends Component {
+  constructor() {
+    super(...arguments);
+    if (!(this.args.href || this.args.route)) {
+      assert('@href or @route must be defined for <Hds::Link::Standalone>');
+    }
+  }
+
   /**
    * @param text
    * @type {string}

packages/components/tests/acceptance/percy-test.js

@@ -50,9 +50,6 @@ module('Acceptance | Percy test', function (hooks) {
     await visit('/components/link/standalone');
     await percySnapshot('Link Standalone');
 
-    await visit('/components/link-to/standalone');
-    await percySnapshot('LinkTo Standalone');
-
     assert.ok(true);
   });
 });

packages/components/tests/dummy/app/components/dummy-link-cta-button-banner/index.hbs

@@ -5,8 +5,6 @@
     <code>Link::Inline</code>
     [soon available] within a body of text and
     <LinkTo @route="components.link.standalone"><code>Link::Standalone</code></LinkTo>
-    or
-    <LinkTo @route="components.link-to.standalone"><code>LinkTo::Standalone</code></LinkTo>
     outside of a body of text, ie. on its own or in a list.</p>
   <h4>When to use a CTA</h4>
   <p>A CTA is a link that looks like a button. It navigates the user to a new destination via a URL or route, but has

packages/components/tests/dummy/app/router.js

@@ -25,7 +25,6 @@ Router.map(function () {
       this.route('cta');
     });
     this.route('link-to', function () {
-      this.route('standalone');
       this.route('cta');
     });
     this.route('dropdown');

packages/components/tests/dummy/app/styles/app.scss

@@ -14,7 +14,7 @@
 @import "./pages/db-focus-ring";
 @import "./pages/db-icon-tile";
 @import "./pages/db-interactive";
-@import "./pages/db-link";
+@import "./pages/db-link-standalone";
 @import "./pages/db-tokens";
 @import "./pages/db-typography";
 

packages/components/tests/dummy/app/styles/pages/db-link.scss → packages/components/tests/dummy/app/styles/pages/db-link-standalone.scss

@@ -1,6 +1,6 @@
 // LINK > STANDALONE
 
-.dummy-link-base-sample {
+.dummy-link-standalone-base-sample {
     align-items: flex-start;
     display: flex;
     gap: 0.5rem;
@@ -11,19 +11,25 @@
 
 }
 
-.dummy-link-max-width-container {
+.dummy-link-standalone-max-width-container {
     width: 200px;
 }
 
-.dummy-link-states-grid {
+.dummy-link-standalone-generated-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.dummy-link-standalone-states-grid {
     display: grid;
     grid-gap: 0.5rem;
     grid-template-columns: repeat(4, 1fr);;
     margin: 0;
     padding: 0;
     width: fit-content;
 
-    .dummy-link-states-grid__title {
+    .dummy-link-standalone-states-grid__title {
         grid-column: 1 / 5;
     }
 }