feat: 🎸 Create reveal component for desktop client

Create reveal component for desktop client.

✅ Closes: ICU-1432

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}}

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

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;
 }

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