chore: 🤖 Add flex wrap and attributes

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: {}

addons/rose/addon/styles/rose/components/_cards.scss

@@ -1,3 +1,4 @@
 .rose-cards {
   display: flex;
+  flex-wrap: wrap;
 }

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")
   )}}