Merge pull request #605 from hashicorp/feat-desktop-reveal-component

feat: 🎸 Create reveal component for desktop client

ui/desktop/.stylelintrc.json

@@ -6,6 +6,7 @@
     "scss/at-extend-no-missing-placeholder": null,
     "function-parentheses-space-inside": null,
     "property-no-vendor-prefix": null,
-    "at-rule-no-vendor-prefix": null
+    "at-rule-no-vendor-prefix": null,
+    "order/properties-alphabetical-order": null
   }
 }

ui/desktop/app/components/reveal/index.hbs

@@ -0,0 +1,14 @@
+<details ...attributes class='reveal'>
+  <summary class='reveal-trigger'>
+    <span class='reveal-trigger-text-close'>
+      {{@textWhenClose}}
+    </span>
+    <span class='reveal-trigger-text-open'>
+      {{@textWhenOpen}}
+    </span>
+
+  </summary>
+  <content class='reveal-content'>
+    {{yield}}
+  </content>
+</details>

ui/desktop/app/components/reveal/index.js

@@ -0,0 +1,3 @@
+import RoseDropdownComponent from 'rose/components/rose/dropdown';
+
+export default class RevealComponent extends RoseDropdownComponent {}

ui/desktop/app/styles/app.scss

@@ -361,7 +361,57 @@
   }
 }
 
-// Card component (app/componetns/card)
+// Reveal component (app/components/reveal)
+$chevron-up: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563FF' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.41 16L12 11.42L16.59 16L18 14.59L12 8.59L6 14.59L7.41 16Z' /></svg>");
+$chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563FF' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z' /></svg>");
+
+.reveal {
+  --trigger-color: var(--action);
+
+  .reveal-trigger {
+    background: url($chevron-down) no-repeat right center;
+    color: var(--trigger-color);
+    cursor: default;
+    display: inline-block;
+    overflow: hidden;
+    padding-right: sizing.rems(l);
+    white-space: nowrap;
+
+    // Hide default twistie triangle
+    // Firefox
+    list-style-type: none;
+    // Webkit / Chromium
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      display: none;
+    }
+
+    &:hover {
+      --trigger-color: var(--action-starker-1);
+    }
+  }
+
+  &:not([open]) {
+    .reveal-trigger-text-open {
+      display: none;
+    }
+  }
+
+  &[open] {
+    .reveal-trigger {
+      background: url($chevron-up) no-repeat right center;
+    }
+
+    .reveal-trigger-text-close {
+      display: none;
+    }
+  }
+}
+
+// Card component (app/components/card)
 .card {
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
   display: flex;

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -30,11 +30,20 @@
               </Copyable>
             </p>
 
-            {{! <Rose::Separator />
+            {{!-- <Rose::Separator />
 
             <h3>Credentials</h3>
 
             <Card @heading="Credentials" @icon='app-icons/credentials'>
+              <:header>
+                <Rose::Dropdown
+                  @style="condensed"
+                  @text="Credential library details"
+                  @showCaret={{true}}
+                  as |dropdown|
+                >
+                </Rose::Dropdown>
+              </:header>
               <:body>
                 <Rose::Table @style='condensed' as |table|>
                   <table.header as |header|>
@@ -55,8 +64,25 @@
                   </table.body>
                 </Rose::Table>
               </:body>
-            </Card>
-            }}
+              <:footer>
+                <Reveal
+                  @textWhenOpen='Hide content'
+                  @textWhenClose='View content'
+                >
+                  <pre>
+                    <code>
+  {
+    "auth": null,
+    "lease_duration": 3600,
+    "lease_id": "",
+    "renewable": false
+  }
+                    </code>
+                  </pre>
+                </Reveal>
+              </:footer>
+            </Card> --}}
+
           </:body>
           <:footer>
             <div>

ui/desktop/tests/integration/components/reveal-test.js

@@ -0,0 +1,48 @@
+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-trigger'));
+    assert.ok(find('.reveal-trigger').textContent.trim(), 'View content');
+  });
+
+  test('it renders with content, opens, show the content, close and hide the content', async function (assert) {
+    assert.expect(3);
+    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('details').open);
+    await click('summary');
+    assert.ok(find('details').open);
+    await click('summary');
+    assert.notOk(find('details').open);
+  });
+});