From e549d739944dca1428785a0b1d328d25044d52ff Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 9 Jun 2020 16:32:53 -0400
Subject: [PATCH 1/2] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20cards=20compo?=
 =?UTF-8?q?nent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/cards.js    |  7 +++
 .../addon/components/rose/cards.stories.mdx   | 46 +++++++++++++++++++
 .../addon/styles/rose/components/_cards.scss  |  3 ++
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../styles/rose/components/card/_link.scss    |  1 +
 .../addon/templates/components/rose/cards.hbs |  5 ++
 addons/rose/app/components/rose/cards.js      |  1 +
 .../integration/components/rose/cards-test.js | 22 +++++++++
 8 files changed, 86 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/cards.js
 create mode 100644 addons/rose/addon/components/rose/cards.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/_cards.scss
 create mode 100644 addons/rose/addon/templates/components/rose/cards.hbs
 create mode 100644 addons/rose/app/components/rose/cards.js
 create mode 100644 addons/rose/tests/integration/components/rose/cards-test.js

diff --git a/addons/rose/addon/components/rose/cards.js b/addons/rose/addon/components/rose/cards.js
new file mode 100644
index 000000000..c54fb638d
--- /dev/null
+++ b/addons/rose/addon/components/rose/cards.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/cards';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/cards.stories.mdx b/addons/rose/addon/components/rose/cards.stories.mdx
new file mode 100644
index 000000000..f91f35961
--- /dev/null
+++ b/addons/rose/addon/components/rose/cards.stories.mdx
@@ -0,0 +1,46 @@
+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';
+
+<Meta title="Rose|Cards" component="Cards" />
+
+# Cards
+
+A set of cards arranged side-by-side.
+
+<Preview>
+  <Story name="Basic Cards">{{
+    template: hbs`
+      <Rose::Cards as |cards|>
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
+      </Rose::Cards>
+    `,
+    context: {}
+  }}</Story>
+</Preview>
+
+
+```htmlbars
+<Rose::Cards as |cards|>
+  <cards.link
+    @route="index"
+    @title="Card Title"
+    @description="Description"
+  />
+  <cards.link
+    @route="index"
+    @title="Card Title"
+    @description="Description"
+  />
+</Rose::Cards>
+```
diff --git a/addons/rose/addon/styles/rose/components/_cards.scss b/addons/rose/addon/styles/rose/components/_cards.scss
new file mode 100644
index 000000000..72f0c87b7
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/_cards.scss
@@ -0,0 +1,3 @@
+.rose-cards {
+  display: flex;
+}
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index 432c10562..7b97e46cb 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -4,6 +4,7 @@
 @import 'layout';
 @import 'notification';
 @import 'card';
+@import 'cards';
 @import 'page-header';
 @import 'nav';
 @import 'table';
diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index 26b3e3f8c..a62df13f8 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -8,6 +8,7 @@
   color: var(--ui-gray);
   display: inline-flex;
   flex-direction: column;
+  margin: 0 sizing.rems(m) sizing.rems(m) 0;
 
   a {
     text-decoration: none;
diff --git a/addons/rose/addon/templates/components/rose/cards.hbs b/addons/rose/addon/templates/components/rose/cards.hbs
new file mode 100644
index 000000000..33d116d2f
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/cards.hbs
@@ -0,0 +1,5 @@
+<div class="rose-cards">
+  {{yield (hash
+    link=(component "rose/card/link")
+  )}}
+</div>
diff --git a/addons/rose/app/components/rose/cards.js b/addons/rose/app/components/rose/cards.js
new file mode 100644
index 000000000..b1d33f82d
--- /dev/null
+++ b/addons/rose/app/components/rose/cards.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/cards';
diff --git a/addons/rose/tests/integration/components/rose/cards-test.js b/addons/rose/tests/integration/components/rose/cards-test.js
new file mode 100644
index 000000000..9c8b32743
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/cards-test.js
@@ -0,0 +1,22 @@
+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/cards', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <Rose::Cards as |cards|>
+        <cards.link
+          @title="Card Title"
+          @description="Description"
+        />
+      </Rose::Cards>
+    `);
+    assert.ok(find('.rose-cards'));
+    assert.ok(find('.rose-card-link'));
+  });
+});

From 4a71dbf358836eba55fe5e105c06f22e3216bde9 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 9 Jun 2020 17:55:30 -0400
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20flex=20wrap?=
 =?UTF-8?q?=20and=20attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/cards.stories.mdx     | 17 ++++++++++++++++-
 .../addon/styles/rose/components/_cards.scss    |  1 +
 .../addon/templates/components/rose/cards.hbs   |  5 ++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/components/rose/cards.stories.mdx b/addons/rose/addon/components/rose/cards.stories.mdx
index f91f35961..a032687e2 100644
--- a/addons/rose/addon/components/rose/cards.stories.mdx
+++ b/addons/rose/addon/components/rose/cards.stories.mdx
@@ -10,7 +10,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 A set of cards arranged side-by-side.
 
 <Preview>
-  <Story name="Basic Cards">{{
+  <Story name="Basic Cards" height="20rem">{{
     template: hbs`
       <Rose::Cards as |cards|>
         <cards.link
@@ -23,6 +23,21 @@ A set of cards arranged side-by-side.
           @title="Card Title"
           @description="Description"
         />
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
       </Rose::Cards>
     `,
     context: {}
diff --git a/addons/rose/addon/styles/rose/components/_cards.scss b/addons/rose/addon/styles/rose/components/_cards.scss
index 72f0c87b7..b3feb536f 100644
--- a/addons/rose/addon/styles/rose/components/_cards.scss
+++ b/addons/rose/addon/styles/rose/components/_cards.scss
@@ -1,3 +1,4 @@
 .rose-cards {
   display: flex;
+  flex-wrap: wrap;
 }
diff --git a/addons/rose/addon/templates/components/rose/cards.hbs b/addons/rose/addon/templates/components/rose/cards.hbs
index 33d116d2f..eafcba07d 100644
--- a/addons/rose/addon/templates/components/rose/cards.hbs
+++ b/addons/rose/addon/templates/components/rose/cards.hbs
@@ -1,4 +1,7 @@
-<div class="rose-cards">
+<div
+  ...attributes
+  class="rose-cards"
+>
   {{yield (hash
     link=(component "rose/card/link")
   )}}