Merge pull request #227 from hashicorp/spike-unify-link-standalone

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

Author: didoo

packages/components/addon/components/hds/link-to/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-to/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/addon/components/hds/link/standalone.hbs

@@ -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/addon/components/hds/link/standalone.js

@@ -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/app/components/hds/link-to/standalone.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/acceptance/percy-test.js

@@ -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";