From 3bfb6fe5eea00219bfa8d1336472d81f39be83ff Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Thu, 3 Jun 2021 10:05:43 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20New=20Card=20component?=
 =?UTF-8?q?=20with=20header,=20body=20and=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add the new Card component with header, body and footer for the desktop
client. This card will be used within the connection dialog to show
credentials

✅ Closes: ICU-1432
---
 ui/desktop/app/components/card/index.hbs      | 15 ++++++++++
 .../tests/integration/components/card-test.js | 28 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 ui/desktop/app/components/card/index.hbs
 create mode 100644 ui/desktop/tests/integration/components/card-test.js

diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs
new file mode 100644
index 000000000..1000ab795
--- /dev/null
+++ b/ui/desktop/app/components/card/index.hbs
@@ -0,0 +1,15 @@
+<section class='credentials-card'>
+  {{yield
+    (hash
+      header=(component
+        'rose/anonymous' tagName='header' class='credentials-card-header'
+      )
+      body=(component
+        'rose/anonymous' tagName='div' class='credentials-card-body'
+      )
+      footer=(component
+        'rose/anonymous' tagName='footer' class='credentials-card-footer'
+      )
+    )
+  }}
+</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
new file mode 100644
index 000000000..a48efd669
--- /dev/null
+++ b/ui/desktop/tests/integration/components/card-test.js
@@ -0,0 +1,28 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Card />`);
+    assert.ok(find('.credentials-card'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`
+      <Card as |card|>
+        <card.header></card.header>
+        <card.body></card.body>
+        <card.footer></card.footer>
+      </Card>
+    `);
+
+    assert.ok(find('.credentials-card'));
+    assert.ok(find('.credentials-card-header'));
+    assert.ok(find('.credentials-card-body'));
+    assert.ok(find('.credentials-card-footer'));
+  });
+});