chore: 🤖 Add card link component to rose addon

addons/rose/addon/components/rose/card/link.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/card/link';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/card/link.stories.mdx

@@ -0,0 +1,60 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { text } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Card|Link" component="Link" />
+
+# Card Link
+
+Card link component wraps content with `LinkTo` component. Supports title and description.
+
+```html
+<Rose::Card::Link @title='Card title' @description='Card description' @route='about'/>
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`
+      <Rose::Card::Link
+        @title={{title}}
+        @description={{description}}
+      />
+    `,
+    context: {
+      title: text('title', 'Card title'),
+      description: text('description', 'Card description'),
+    },
+  }}</Story>
+</Preview>
+
+`@route` defaults to 'index' when not supplied.
+
+`@title` and `@description` are optional. Card expands to fit content.
+
+```html
+<Rose::Card::Link @title='Card title'/>
+```
+<Preview>
+  <Story name="Title">{{
+    template: hbs`
+      <Rose::Card::Link @title={{title}} />
+    `,
+    context: {
+      title: text('title', 'Card title'),
+    },
+  }}</Story>
+</Preview>
+
+```html
+<Rose::Card::Link @description='Card description'/>
+```
+<Preview>
+  <Story name="Description">{{
+    template: hbs`
+      <Rose::Card::Link @description={{description}} />
+    `,
+    context: {
+      description: text('description', 'Card description'),
+    },
+  }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/_index.scss

@@ -3,3 +3,4 @@
 @import 'header';
 @import 'layout';
 @import 'notification';
+@import 'card';

addons/rose/addon/styles/rose/components/card/_index.scss

@@ -0,0 +1 @@
+@import 'link';

addons/rose/addon/styles/rose/components/card/_link.scss

@@ -0,0 +1,40 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-card-link {
+  @include type.type(s);
+  border: 1px solid var(--ui-gray-subtler-2);
+  border-radius: sizing.rems(xxxs);
+  color: var(--ui-gray);
+  padding: sizing.rems(s);
+  display: inline-grid;
+
+  a {
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &:hover {
+    border-color: var(--ui-gray);
+  }
+
+  &:focus-within {
+    border-color: var(--info);
+  }
+
+  .rose-card-link-title {
+    @include type.type(m, semibold);
+    color: var(--stark);
+    margin: 0;
+    padding-bottom: sizing.rems(xs);
+  }
+
+  .rose-card-link-description {
+    margin: 0;
+  }
+}

addons/rose/addon/templates/components/rose/card/link.hbs

@@ -0,0 +1,17 @@
+<article ...attributes class="rose-card-link">
+  <LinkTo
+    title={{@title}}
+    @route={{if @route @route "index"}}
+  >
+
+    {{#if @title}}
+      <h2 class="rose-card-link-title">{{@title}}</h2>
+    {{/if}}
+
+    {{#if @description}}
+      <p class="rose-card-link-description">{{@description}}</p>
+    {{/if}}
+  </LinkTo>
+
+  {{yield}}
+</article>

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

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

addons/rose/tests/dummy/app/templates/index.hbs

@@ -181,3 +181,6 @@ Dummy app index template
     @submitText="Save"
     @cancelText="Cancel" />
 </Rose::Form>
+
+<Rose::Card::Link @title="I'm a card" />
+<Rose::Card::Link @title="I'm a card" @description="I'm a description" />

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

@@ -0,0 +1,43 @@
+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/card/link', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Card::Link />`);
+    assert.ok(find('article'));
+    assert.ok(find('.rose-card-link'));
+  });
+
+  test('it renders with @title', async function (assert) {
+    await render(hbs`<Rose::Card::Link @title="card title" />`);
+    assert.equal(find('a').title, 'card title');
+    assert.equal(
+      find('.rose-card-link-title').textContent.trim(),
+      'card title'
+    );
+  });
+
+  test('it renders with @description', async function (assert) {
+    await render(hbs`<Rose::Card::Link @description="card description" />`);
+    assert.equal(
+      find('.rose-card-link-description').textContent.trim(),
+      'card description'
+    );
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Card::Link id="card" />`);
+    assert.ok(find('#card'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Card::Link>
+      <button/>
+    </Rose::Card::Link>`);
+    assert.ok(find('button'));
+  });
+});