Merge pull request #945 from hashicorp/refactor-breadcrumbs-link

refactor: 💡 resolve legacy-attribute-arguments deprecations

addons/rose/addon/components/rose/nav/breadcrumbs/index.hbs

@@ -1,5 +1,5 @@
 <nav ...attributes class="rose-nav-breadcrumbs" aria-label="breadcrumbs">
   {{yield (hash
-    link=(component "link-to" class="rose-nav-breadcrumbs-link")
+    link=(component "rose/nav/link")
   )}}
 </nav>

addons/rose/addon/components/rose/nav/link/index.hbs

@@ -0,0 +1,9 @@
+{{#if @model}}
+  <LinkTo @route={{@route}} @model={{@model}} class="rose-nav-link">
+    {{yield}}
+  </LinkTo>
+{{else}}
+  <LinkTo @route={{@route}} class="rose-nav-link">
+    {{yield}}
+  </LinkTo>
+{{/if}}

addons/rose/addon/components/rose/nav/link/index.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Nav|Link" component="Nav/Link" />
+
+# Generic Navigation Link
+
+Proxies the built-in `LinkTo` component, applying a class `rose-nav-link`.
+
+```html
+<Rose::Nav::Link @route='index'>Text</nav.link>
+```
+
+<Preview>
+  <Story name="Basic Nav Link">{{
+    template: hbs`
+      <Rose::Nav::Link @route='index'>Text</nav.link>
+    `,
+    context: {},
+  }}</Story>
+</Preview>

addons/rose/addon/components/rose/nav/sidebar/index.hbs

@@ -12,7 +12,7 @@
   {{/if}}
 
   {{yield (hash
-    link=(component "link-to" class="rose-nav-link")
+    link=(component "rose/nav/link")
   )}}
 
 </nav>

addons/rose/addon/components/rose/nav/tabs/index.hbs

@@ -3,7 +3,7 @@
   class="rose-nav-tabs">
 
   {{yield (hash
-    link=(component "link-to" class="rose-nav-link")
+    link=(component "rose/nav/link")
   )}}
 
 </nav>

addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss

@@ -6,7 +6,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  .rose-nav-breadcrumbs-link {
+  .rose-nav-link {
     --color: var(--ui-gray);
     color: var(--color);
     text-decoration: none;

addons/rose/app/components/rose/nav/link.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/nav/link';

addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js

@@ -21,6 +21,6 @@ module('Integration | Component | rose/nav/breadcrumbs', function (hooks) {
       <breadcrumbs.link @route="index" />
       <breadcrumbs.link @route="index" />
     </Rose::Nav::Breadcrumbs>`);
-    assert.equal(findAll('.rose-nav-breadcrumbs-link').length, 2);
+    assert.equal(findAll('.rose-nav-link').length, 2);
   });
 });

addons/rose/tests/integration/components/rose/nav/link-test.js

@@ -0,0 +1,18 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/nav/link', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(1);
+    await render(hbs`
+      <Rose::Nav::Link @route="index">
+        Item Name
+      </Rose::Nav::Link>
+    `);
+    assert.equal(find('.rose-nav-link').textContent.trim(), 'Item Name');
+  });
+});