feat: 🎸 Change component name and add attributes

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

✅ Closes: ICU-1432

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>

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