From 939dd1640912ca0e3be4fcf8247aff19cb7d0445 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Tue, 8 Jun 2021 12:02:29 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Change=20component=20nam?=
 =?UTF-8?q?e=20and=20add=20attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change the component name to a more generic name (card). Add heading
attributes.

✅ Closes: ICU-1432
---
 ui/desktop/app/components/card/index.hbs      | 22 ++++++++++---------
 .../tests/integration/components/card-test.js | 18 +++++++++++++++
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs
index 1b571a872..d0d766aeb 100644
--- a/ui/desktop/app/components/card/index.hbs
+++ b/ui/desktop/app/components/card/index.hbs
@@ -1,15 +1,17 @@
 <section class='card'>
+  <header class='card-header'>
+    <div>
+      {{#if @icon}}
+        <Rose::Icon @name={{@icon}} @size='medium' />
+      {{/if}}
+      {{@heading}}
+    </div>
+    {{yield (hash header=(component 'rose/anonymous'))}}
+  </header>
   {{yield
     (hash
-      header=(component
-        'rose/anonymous' tagName='header' class='card-header'
-      )
-      body=(component
-        'rose/anonymous' tagName='div' class='card-body'
-      )
-      footer=(component
-        'rose/anonymous' tagName='footer' class='card-footer'
-      )
+      body=(component 'rose/anonymous' tagName='div' class='card-body')
+      footer=(component 'rose/anonymous' tagName='footer' class='card-footer')
     )
   }}
-</section>
+</section>
\ No newline at end of file
diff --git a/ui/desktop/tests/integration/components/card-test.js b/ui/desktop/tests/integration/components/card-test.js
index 03c63ab96..8df798416 100644
--- a/ui/desktop/tests/integration/components/card-test.js
+++ b/ui/desktop/tests/integration/components/card-test.js
@@ -25,4 +25,22 @@ module('Integration | Component | card', function (hooks) {
     assert.ok(find('.card-body'));
     assert.ok(find('.card-footer'));
   });
+
+  test('header renders an icon when defined', async function (assert) {
+    await render(hbs`
+      <Card
+        @heading='This is a heading test'
+        @icon='key'
+      as |card|>
+        <card.header></card.header>
+        <card.body></card.body>
+        <card.footer></card.footer>
+      </Card>
+    `);
+
+    assert.ok(find('.card'));
+    assert.ok(find('.card-header'));
+    assert.ok(find('.card-header .rose-icon'));
+    assert.equal(this.element.textContent.trim(), 'This is a heading test');
+  });
 });