Merge branch 'develop' into chore-projects-ux

2020-05-29 16:13:07 -04:00
commit d6b0a8c916
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/card/link';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
@@ -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>
@@ -3,3 +3,4 @@
@import 'header';
@import 'layout';
@import 'notification';
+@import 'card';
@@ -0,0 +1 @@
+@import 'link';
@@ -0,0 +1,62 @@
+@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);
+  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
+    width: sizing.rems(m) * 12; //12 rems
+  }
+
+  &: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);
+  }
+
+  .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 {
+    color: var(--ui-gray);
+    margin: 0;
+  }
+
+  .rose-card-link-description {
+    margin: auto 0 0;
+    color: var(--ui-gray);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
@@ -0,0 +1,21 @@
+<article ...attributes class="rose-card-link">
+  <LinkTo
+    title={{@title}}
+    @route={{if @route @route "index"}}
+    @model={{@model}}
+  >
+    {{#if @title}}
+      <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}}
+  </LinkTo>
+
+  {{yield}}
+</article>
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/card/link';
@@ -181,3 +181,7 @@ 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" />
+<Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
@@ -0,0 +1,54 @@
+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'));
+    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) {
+    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 @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(),
+      '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'));
+  });
+});
@@ -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 10px 10px 0;
    }
  }
 }
@@ -12,9 +12,12 @@
  <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}}
+          @subtitle={{project.id}}
+          @description={{project.description}}
+          @route="orgs.org.projects.project"
+          @model={{project}}
+        />
      </li>
    {{/each}}
  </ul>
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/card/link';`