Merge pull request #44 from hashicorp/chore-cards

chore: 🤖 add cards component - icu 281

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: '',
+});

addons/rose/addon/components/rose/cards.stories.mdx

@@ -0,0 +1,61 @@
+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" height="20rem">{{
+    template: hbs`
+      <Rose::Cards as |cards|>
+        <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"
+        />
+        <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>
+```

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

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

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

@@ -4,6 +4,7 @@
 @import 'layout';
 @import 'notification';
 @import 'card';
+@import 'cards';
 @import 'page-header';
 @import 'separator';
 @import 'nav';

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;

addons/rose/addon/templates/components/rose/cards.hbs

@@ -0,0 +1,8 @@
+<div
+  ...attributes
+  class="rose-cards"
+>
+  {{yield (hash
+    link=(component "rose/card/link")
+  )}}
+</div>

addons/rose/app/components/rose/cards.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/cards';

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'));
+  });
+});