diff --git a/addons/rose/addon/components/rose/nav/breadcrumbs/index.hbs b/addons/rose/addon/components/rose/nav/breadcrumbs/index.hbs index 287e2cba3..2e67e42df 100644 --- a/addons/rose/addon/components/rose/nav/breadcrumbs/index.hbs +++ b/addons/rose/addon/components/rose/nav/breadcrumbs/index.hbs @@ -1,5 +1,5 @@ diff --git a/addons/rose/addon/components/rose/nav/link/index.hbs b/addons/rose/addon/components/rose/nav/link/index.hbs new file mode 100644 index 000000000..37df6a85b --- /dev/null +++ b/addons/rose/addon/components/rose/nav/link/index.hbs @@ -0,0 +1,9 @@ +{{#if @model}} + + {{yield}} + +{{else}} + + {{yield}} + +{{/if}} diff --git a/addons/rose/addon/components/rose/nav/link/index.stories.mdx b/addons/rose/addon/components/rose/nav/link/index.stories.mdx new file mode 100644 index 000000000..381997582 --- /dev/null +++ b/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'; + + + +# Generic Navigation Link + +Proxies the built-in `LinkTo` component, applying a class `rose-nav-link`. + +```html +Text +``` + + + {{ + template: hbs` + Text + `, + context: {}, + }} + diff --git a/addons/rose/addon/components/rose/nav/sidebar/index.hbs b/addons/rose/addon/components/rose/nav/sidebar/index.hbs index 28250c8d6..8d5dd5f9b 100644 --- a/addons/rose/addon/components/rose/nav/sidebar/index.hbs +++ b/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") )}} diff --git a/addons/rose/addon/components/rose/nav/tabs/index.hbs b/addons/rose/addon/components/rose/nav/tabs/index.hbs index 18470f7d5..bef7428e2 100644 --- a/addons/rose/addon/components/rose/nav/tabs/index.hbs +++ b/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") )}} diff --git a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss index e7ac5572e..f87fb9ae7 100644 --- a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss +++ b/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; diff --git a/addons/rose/app/components/rose/nav/link.js b/addons/rose/app/components/rose/nav/link.js new file mode 100644 index 000000000..b4f6d844f --- /dev/null +++ b/addons/rose/app/components/rose/nav/link.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/nav/link'; diff --git a/addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js b/addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js index 1d8204eb4..bd935bae3 100644 --- a/addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js +++ b/addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js @@ -21,6 +21,6 @@ module('Integration | Component | rose/nav/breadcrumbs', function (hooks) { `); - assert.equal(findAll('.rose-nav-breadcrumbs-link').length, 2); + assert.equal(findAll('.rose-nav-link').length, 2); }); }); diff --git a/addons/rose/tests/integration/components/rose/nav/link-test.js b/addons/rose/tests/integration/components/rose/nav/link-test.js new file mode 100644 index 000000000..2887900bc --- /dev/null +++ b/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` + + Item Name + + `); + assert.equal(find('.rose-nav-link').textContent.trim(), 'Item Name'); + }); +});