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] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20flex=20wrap=20and?=
 =?UTF-8?q?=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")
   )}}