From c8bca555dd8cfcf24d8f54f1bc4e9b3f31a16780 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 28 May 2020 12:02:04 -0400
Subject: [PATCH 1/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20card=20link?=
 =?UTF-8?q?=20component=20to=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/card/link.js   |  7 +++
 .../components/rose/card/link.stories.mdx     | 60 +++++++++++++++++++
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../styles/rose/components/card/_index.scss   |  1 +
 .../styles/rose/components/card/_link.scss    | 40 +++++++++++++
 .../templates/components/rose/card/link.hbs   | 17 ++++++
 addons/rose/app/components/rose/card/link.js  |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  |  3 +
 .../components/rose/card/link-test.js         | 43 +++++++++++++
 9 files changed, 173 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/card/link.js
 create mode 100644 addons/rose/addon/components/rose/card/link.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/card/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/card/_link.scss
 create mode 100644 addons/rose/addon/templates/components/rose/card/link.hbs
 create mode 100644 addons/rose/app/components/rose/card/link.js
 create mode 100644 addons/rose/tests/integration/components/rose/card/link-test.js

diff --git a/addons/rose/addon/components/rose/card/link.js b/addons/rose/addon/components/rose/card/link.js
new file mode 100644
index 000000000..162a08a0e
--- /dev/null
+++ b/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: '',
+});
diff --git a/addons/rose/addon/components/rose/card/link.stories.mdx b/addons/rose/addon/components/rose/card/link.stories.mdx
new file mode 100644
index 000000000..571bfb28a
--- /dev/null
+++ b/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>
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index e6d3eefd1..bbd2ebcda 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -3,3 +3,4 @@
 @import 'header';
 @import 'layout';
 @import 'notification';
+@import 'card';
diff --git a/addons/rose/addon/styles/rose/components/card/_index.scss b/addons/rose/addon/styles/rose/components/card/_index.scss
new file mode 100644
index 000000000..f641f2e2d
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/card/_index.scss
@@ -0,0 +1 @@
+@import 'link';
diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
new file mode 100644
index 000000000..df88cd300
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/card/link.hbs b/addons/rose/addon/templates/components/rose/card/link.hbs
new file mode 100644
index 000000000..57aa2065d
--- /dev/null
+++ b/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>
diff --git a/addons/rose/app/components/rose/card/link.js b/addons/rose/app/components/rose/card/link.js
new file mode 100644
index 000000000..350404c2b
--- /dev/null
+++ b/addons/rose/app/components/rose/card/link.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/card/link';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 12fac556c..b271fb748 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/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" />
diff --git a/addons/rose/tests/integration/components/rose/card/link-test.js b/addons/rose/tests/integration/components/rose/card/link-test.js
new file mode 100644
index 000000000..6b286fccf
--- /dev/null
+++ b/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'));
+  });
+});

From 6007198ad7c0249612859854b3c36d283205074f Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 28 May 2020 13:01:29 -0400
Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Use=20rose/card/lin?=
 =?UTF-8?q?k=20component=20in=20projects=20overview=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/styles/rose/components/card/_link.scss     |  1 +
 .../addon/templates/components/rose/card/link.hbs    |  1 +
 ui/core/app/styles/app.scss                          | 12 +-----------
 ui/core/app/templates/orgs/org/projects/index.hbs    |  8 +++++---
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index df88cd300..435b393c5 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -36,5 +36,6 @@
 
   .rose-card-link-description {
     margin: 0;
+    color: var(--ui-gray);
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/card/link.hbs b/addons/rose/addon/templates/components/rose/card/link.hbs
index 57aa2065d..e0fcd0ffb 100644
--- a/addons/rose/addon/templates/components/rose/card/link.hbs
+++ b/addons/rose/addon/templates/components/rose/card/link.hbs
@@ -2,6 +2,7 @@
   <LinkTo
     title={{@title}}
     @route={{if @route @route "index"}}
+    @model={{@model}}
   >
 
     {{#if @title}}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 8604fb63b..5e8a9197d 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -12,17 +12,7 @@
     .project {
       display: flex;
       flex-direction: row;
-      margin-bottom: 10px;
-
-      a {
-        text-decoration: none;
-        text-transform: capitalize;
-        color: #000;
-        cursor: pointer;
-        padding: 20px 30px 20px 20px;
-        border: 1px solid #bac1cc;
-        margin-right: 10px;
-      }
+      padding: 10px;
     }
   }
 }
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index c873611a3..27cef9ee1 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -12,9 +12,11 @@
   <ul class="projects">
     {{#each @model as |project|}}
       <li class="project">
-        <LinkTo @route="orgs.org.projects.project" @model={{project}}>
-          {{project.name}}
-        </LinkTo>
+        <Rose::Card::Link @title={{project.name}}
+          @description={{project.description}}
+          @route="orgs.org.projects.project"
+          @model={{project}}
+        />
       </li>
     {{/each}}
   </ul>

From cfe11903c4fb74273d0fb4043a43827a947bcb7f Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 28 May 2020 13:20:11 -0400
Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20subtitle=20to?=
 =?UTF-8?q?=20rose/card/link=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/styles/rose/components/card/_link.scss |  5 ++++-
 .../addon/templates/components/rose/card/link.hbs     |  4 ++++
 addons/rose/tests/dummy/app/templates/index.hbs       |  1 +
 .../integration/components/rose/card/link-test.js     | 11 +++++++++++
 ui/core/app/templates/orgs/org/projects/index.hbs     |  1 +
 5 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index 435b393c5..7aca920b9 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -31,7 +31,10 @@
     @include type.type(m, semibold);
     color: var(--stark);
     margin: 0;
-    padding-bottom: sizing.rems(xs);
+  }
+
+  .rose-card-link-subtitle {
+    color: var(--ui-gray);
   }
 
   .rose-card-link-description {
diff --git a/addons/rose/addon/templates/components/rose/card/link.hbs b/addons/rose/addon/templates/components/rose/card/link.hbs
index e0fcd0ffb..9749f4e9a 100644
--- a/addons/rose/addon/templates/components/rose/card/link.hbs
+++ b/addons/rose/addon/templates/components/rose/card/link.hbs
@@ -9,6 +9,10 @@
       <h2 class="rose-card-link-title">{{@title}}</h2>
     {{/if}}
 
+    {{#if @subtitle}}
+      <p class="rose-card-link-subtitle">{{@subtitle}}</p>
+    {{/if}}
+
     {{#if @description}}
       <p class="rose-card-link-description">{{@description}}</p>
     {{/if}}
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index b271fb748..3b791ba07 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -184,3 +184,4 @@ Dummy app index template
 
 <Rose::Card::Link @title="I'm a card" />
 <Rose::Card::Link @title="I'm a card" @description="I'm a description" />
+<Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
diff --git a/addons/rose/tests/integration/components/rose/card/link-test.js b/addons/rose/tests/integration/components/rose/card/link-test.js
index 6b286fccf..78a02af4b 100644
--- a/addons/rose/tests/integration/components/rose/card/link-test.js
+++ b/addons/rose/tests/integration/components/rose/card/link-test.js
@@ -10,6 +10,9 @@ module('Integration | Component | rose/card/link', function (hooks) {
     await render(hbs`<Rose::Card::Link />`);
     assert.ok(find('article'));
     assert.ok(find('.rose-card-link'));
+    assert.notOk(find('.rose-card-link-title'));
+    assert.notOk(find('.rose-card-link-subtitle'));
+    assert.notOk(find('.rose-card-link-description'));
   });
 
   test('it renders with @title', async function (assert) {
@@ -21,6 +24,14 @@ module('Integration | Component | rose/card/link', function (hooks) {
     );
   });
 
+  test('it renders with @subtitle', async function (assert) {
+    await render(hbs`<Rose::Card::Link @subtitle="card subtitle" />`);
+    assert.equal(
+      find('.rose-card-link-subtitle').textContent.trim(),
+      'card subtitle'
+    );
+  });
+
   test('it renders with @description', async function (assert) {
     await render(hbs`<Rose::Card::Link @description="card description" />`);
     assert.equal(
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index 27cef9ee1..312844b0d 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -13,6 +13,7 @@
     {{#each @model as |project|}}
       <li class="project">
         <Rose::Card::Link @title={{project.name}}
+          @subtitle={{project.id}}
           @description={{project.description}}
           @route="orgs.org.projects.project"
           @model={{project}}

From 7852d3ea5c86a6e8efea2e2cebb0db54f6cf8cdd Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 28 May 2020 19:48:03 -0400
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Update=20dimensi?=
 =?UTF-8?q?ons=20for=20card=20link=20rose=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/rose/components/card/_link.scss    | 22 ++++++++++++++++---
 .../templates/components/rose/card/link.hbs   |  1 -
 ui/core/app/styles/app.scss                   |  2 +-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index 7aca920b9..807bdb587 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -6,13 +6,21 @@
   border: 1px solid var(--ui-gray-subtler-2);
   border-radius: sizing.rems(xxxs);
   color: var(--ui-gray);
-  padding: sizing.rems(s);
-  display: inline-grid;
+  display: inline-flex;
+  flex-direction: column;
 
   a {
     text-decoration: none;
     margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    padding: sizing.rems(s);
+    // TODO: Figure out better method of defining card dimensions
+    min-height: sizing.rems(m) * 6; //6 rems
+    max-width: sizing.rems(m) * 12; //12 rems
 
     &:focus {
       outline: none;
@@ -21,8 +29,12 @@
 
   &:hover {
     border-color: var(--ui-gray);
+    background-color: var(--ui-gray-subtler-5);
   }
 
+  &:active {
+    background-color: var(--ui-gray-subtler-4);
+  }
   &:focus-within {
     border-color: var(--info);
   }
@@ -35,10 +47,14 @@
 
   .rose-card-link-subtitle {
     color: var(--ui-gray);
+    margin: 0;
   }
 
   .rose-card-link-description {
-    margin: 0;
+    margin: auto 0 0;
     color: var(--ui-gray);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/card/link.hbs b/addons/rose/addon/templates/components/rose/card/link.hbs
index 9749f4e9a..7f003a4a6 100644
--- a/addons/rose/addon/templates/components/rose/card/link.hbs
+++ b/addons/rose/addon/templates/components/rose/card/link.hbs
@@ -4,7 +4,6 @@
     @route={{if @route @route "index"}}
     @model={{@model}}
   >
-
     {{#if @title}}
       <h2 class="rose-card-link-title">{{@title}}</h2>
     {{/if}}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 5e8a9197d..4b6c7f9a3 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -12,7 +12,7 @@
     .project {
       display: flex;
       flex-direction: row;
-      padding: 10px;
+      padding: 10px 10px 10px 0;
     }
   }
 }

From 04cbacd00003865b146eececc90641b0e747c81a Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 29 May 2020 09:46:07 -0400
Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Undo=20removal=20of?=
 =?UTF-8?q?=20focus=20outline=20for=20rose=20cardlink?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Do not set outline:none on card link element to avoid a11y issues
---
 .../addon/styles/rose/components/card/_link.scss     | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index 807bdb587..949734531 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -20,11 +20,7 @@
     padding: sizing.rems(s);
     // TODO: Figure out better method of defining card dimensions
     min-height: sizing.rems(m) * 6; //6 rems
-    max-width: sizing.rems(m) * 12; //12 rems
-
-    &:focus {
-      outline: none;
-    }
+    width: sizing.rems(m) * 12; //12 rems
   }
 
   &:hover {
@@ -35,14 +31,20 @@
   &:active {
     background-color: var(--ui-gray-subtler-4);
   }
+
   &:focus-within {
     border-color: var(--info);
   }
 
   .rose-card-link-title {
+    $truncate-line-count: 3;
     @include type.type(m, semibold);
     color: var(--stark);
     margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $truncate-line-count;
+    overflow: hidden;
   }
 
   .rose-card-link-subtitle {