Merge pull request #260 from hashicorp/chore-card-style

Chore card style

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

@@ -4,17 +4,30 @@
     @route={{if @route @route "index"}}
     @model={{@model}}
   >
-    {{#if @title}}
-      <h2 class="rose-card-link-title">{{@title}}</h2>
-    {{/if}}
+    <div class="rose-card-link-header">
+      {{#if @title}}
+        <h2 class="rose-card-link-title">
+          {{#if @icon}}
+            <Rose::Icon
+              @name={{@icon}}
+              @size="medium" />
+          {{/if}}
+          <span class="rose-card-link-title-text">{{@title}}</span>
+        </h2>
+      {{/if}}
+    </div>
 
-    {{#if @subtitle}}
-      <p class="rose-card-link-subtitle">{{@subtitle}}</p>
-    {{/if}}
+    <div class="rose-card-link-body">
+      {{#if @description}}
+        <p class="rose-card-link-description">{{@description}}</p>
+      {{/if}}
+    </div>
 
-    {{#if @description}}
-      <p class="rose-card-link-description">{{@description}}</p>
-    {{/if}}
+    <div class="rose-card-link-footer">
+      {{#if @id}}
+        <p class="rose-card-link-footer-id">{{@id}}</p>
+      {{/if}}
+    </div>
   </LinkTo>
 
   {{yield}}

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

@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use '../../variables/sizing';
+@use '../../variables/typography';
 @use '../../utilities/type';
 
 $xxxs: sizing.rems(xxxs); // 2
@@ -14,18 +16,18 @@ $xxxs: sizing.rems(xxxs); // 2
   box-shadow: 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)),
     0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4));
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--ui-gray-subtler-6);
+  }
+
   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
-    width: sizing.rems(m) * 12; //12 rems
+    min-height: sizing.rems(m) * 8; //6 rems
+    width: sizing.rems(m) * 16; //12 rems
   }
 
   &:hover {
@@ -46,27 +48,78 @@ $xxxs: sizing.rems(xxxs); // 2
     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-header,
+  .rose-card-link-body,
+  .rose-card-link-footer {
+    padding-left: sizing.rems(m);
+    padding-right: sizing.rems(m);
   }
 
-  .rose-card-link-subtitle {
-    color: var(--ui-gray);
+  .rose-card-link-header {
+    padding-top: sizing.rems(m);
+  }
+  .rose-card-link-footer {
+    margin-top: sizing.rems(xs) + sizing.rems(xxs);
+    padding-top: sizing.rems(xs) * 2;
+    padding-bottom: sizing.rems(xs) * 2;
+  }
+
+  .rose-card-link-footer {
+    border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+  }
+
+  .rose-card-link-title {
+    @include type.type(m, semibold);
+    display: flex;
+    color: var(--stark);
     margin: 0;
+    margin-bottom: sizing.rems(xs);
+
+    .rose-icon {
+      margin-right: sizing.rems(xs);
+
+      svg {
+        vertical-align: text-bottom;
+      }
+    }
+
+    .rose-card-link-title-text {
+      flex-grow: 1;
+      height: typography.line-height(m) * 2rem;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
   }
 
   .rose-card-link-description {
-    margin: auto 0 0;
     color: var(--ui-gray);
-    white-space: nowrap;
+    margin: 0;
+    height: typography.line-height(m) * 2rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
+
+  .rose-card-link-footer-id {
+    @include type.type(xs);
+    color: var(--ui-gray);
+    margin: 0;
+
+    &::before {
+      content: "ID";
+      color: var(--stark);
+      padding-right: sizing.rems(xs);
+    }
+  }
+
+  // .rose-card-link-description {
+  //   margin: auto 0 0;
+  //   color: var(--ui-gray);
+  //   white-space: nowrap;
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  // }
 }

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

@@ -10,9 +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'));
+    assert.ok(find('.rose-card-link-header'));
+    assert.ok(find('.rose-card-link-body'));
+    assert.ok(find('.rose-card-link-footer'));
   });
 
   test('it renders with @title', async function (assert) {
@@ -24,22 +24,27 @@ 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(
-      find('.rose-card-link-description').textContent.trim(),
+      find('.rose-card-link-body').textContent.trim(),
       'card description'
     );
   });
 
+  test('it renders with @id', async function (assert) {
+    await render(hbs`<Rose::Card::Link @id="card_id" />`);
+    assert.equal(
+      find('.rose-card-link-footer-id').textContent.trim(),
+      'card_id'
+    );
+  });
+
+  test('it renders with @icon', async function (assert) {
+    await render(hbs`<Rose::Card::Link @title="foo" @icon="alert-circle-outline" />`);
+    assert.ok(find('.rose-icon'));
+  });
+
   test('it renders with attributes', async function (assert) {
     await render(hbs`<Rose::Card::Link id="card" />`);
     assert.ok(find('#card'));

ui/core/app/templates/scopes/scope/orgs/index.hbs

@@ -30,8 +30,9 @@
         {{#each @model as |org|}}
           <cards.link
             @title={{org.name}}
-            @subtitle={{org.description}}
-            @description={{org.id}}
+            @description={{org.description}}
+            @id={{org.id}}
+            @icon="boundary-icons/org"
             @route="scopes.scope"
             @model={{org.id}}
           />

ui/core/app/templates/scopes/scope/projects/index.hbs

@@ -30,8 +30,9 @@
         {{#each @model as |project|}}
           <cards.link
             @title={{project.name}}
-            @subtitle={{project.description}}
-            @description={{project.id}}
+            @description={{project.description}}
+            @id={{project.id}}
+            @icon="boundary-icons/project"
             @route="scopes.scope.projects.project"
             @model={{project.id}}
           />