From a6a33f6b56c0eac0a9d40fe4e78cce3026e58091 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Fri, 11 Jun 2021 14:48:41 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Create=20reveal=20compon?=
 =?UTF-8?q?ent=20for=20desktop=20client?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create reveal component for desktop client.

✅ Closes: ICU-1432
---
 ui/desktop/app/components/reveal/index.hbs    | 17 ++++++
 ui/desktop/app/components/reveal/index.js     | 14 +++++
 ui/desktop/app/styles/app.scss                | 52 ++++++++-----------
 .../integration/components/reveal-test.js     | 47 +++++++++++++++++
 4 files changed, 101 insertions(+), 29 deletions(-)
 create mode 100644 ui/desktop/app/components/reveal/index.hbs
 create mode 100644 ui/desktop/app/components/reveal/index.js
 create mode 100644 ui/desktop/tests/integration/components/reveal-test.js

diff --git a/ui/desktop/app/components/reveal/index.hbs b/ui/desktop/app/components/reveal/index.hbs
new file mode 100644
index 000000000..3f8a551eb
--- /dev/null
+++ b/ui/desktop/app/components/reveal/index.hbs
@@ -0,0 +1,17 @@
+<details class='reveal' {{on 'click' (fn this.toggle)}}>
+  <summary class='reveal-summary'>
+    <span>
+      {{if this.isOpen @textWhenOpen @textWhenClose}}
+    </span>
+    <Rose::Icon
+      @name={{if this.isOpen 'chevron-up' 'chevron-down'}}
+      @size='m'
+    />
+  </summary>
+</details>
+
+{{#if this.isOpen}}
+  <content class='reveal-content'>
+    {{yield}}
+  </content>
+{{/if}}
\ No newline at end of file
diff --git a/ui/desktop/app/components/reveal/index.js b/ui/desktop/app/components/reveal/index.js
new file mode 100644
index 000000000..f2833ba37
--- /dev/null
+++ b/ui/desktop/app/components/reveal/index.js
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class RevealComponent extends Component {
+  // =attributes
+  @tracked isOpen = false;
+
+  // =actions
+  @action
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+}
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index cc21ec36f..64acd993f 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -319,7 +319,6 @@
 }
 
 .change-origin {
-  @include type.type(s);
   color: var(--ui-border-starker-1);
   margin: sizing.rems(l) 0 0 0;
   text-align: center;
@@ -361,34 +360,29 @@
     }
   }
 
-  // .credentials-card {
-  //   display: flex;
-  //   flex-direction: column;
-  //   margin-bottom: 12px;
+.reveal {
+  display: flex;
+  margin-bottom: sizing.rems(m);
 
-  //   &:last-child { margin-bottom: 0; }
+  .reveal-summary {
+    align-items: center;
+    color: var(--info);
+    display: flex;
+    flex-direction: row;
+    // Hide default twistie triangle
+    // Firefox
+    list-style-type: none;
+    // Webkit / Chromium
+    &::-webkit-details-marker {
+      display: none;
+    }
 
-  //   .credentials-card-header {
-  //     display: flex;
-  //     flex-direction: row;
-
-  //     div {
-  //       display: flex;
-  //       width: 50%;
-
-  //       &:last-child {
-  //         justify-content: flex-end;
-  //       }
-  //     }
-  //     // border-bottom: 1px solid grey;
-  //   }
-
-  //   .credentials-card-body {
-  //     // background: yellow;
-  //   }
-
-  //   .credentials-card-footer {
-  //     // background: pink;
-  //   }
-  // }
+    &::marker {
+      display: none;
+    }
+  }
+}
+
+.reveal-content {
+  display: flex;
 }
diff --git a/ui/desktop/tests/integration/components/reveal-test.js b/ui/desktop/tests/integration/components/reveal-test.js
new file mode 100644
index 000000000..4c8f5497d
--- /dev/null
+++ b/ui/desktop/tests/integration/components/reveal-test.js
@@ -0,0 +1,47 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | reveal', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Reveal
+        @textWhenOpen='Hide content'
+        @textWhenClose='View content'
+      />
+    `);
+    assert.ok(find('.reveal'));
+    assert.ok(find('.reveal-summary'));
+    assert.ok(find('.reveal-summary').textContent.trim(), 'View content');
+  });
+
+  test('it renders with content, opens, show the content, close and hide the content', async function (assert) {
+    await render(hbs`
+      <Reveal
+        @textWhenOpen='Hide content'
+        @textWhenClose='View content'
+      >
+        <pre>
+          <code>
+            {
+              "auth": null,
+              "lease_duration": 3600,
+              "lease_id": "",
+              "renewable": false
+            }
+          </code>
+        </pre>
+      </Reveal>
+    `);
+    assert.notOk(find('.reveal-content'));
+    await click('details');
+    assert.ok(find('.reveal-content'));
+    assert.ok(find('.reveal-content pre code'));
+    await click('details');
+    assert.notOk(find('.reveal-content'));
+  });
+});