From 1143fb02cc1e1460688522a750d152056f8ce3e1 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 22 Jun 2021 16:43:02 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20polish=20up=20reveal=20?=
 =?UTF-8?q?component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/desktop/.stylelintrc.json                  |  3 +-
 ui/desktop/app/components/reveal/index.hbs    |  8 +--
 ui/desktop/app/styles/app.scss                | 68 +++++++++----------
 .../scopes/scope/projects/targets.hbs         |  2 +-
 .../integration/components/reveal-test.js     |  4 +-
 5 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/ui/desktop/.stylelintrc.json b/ui/desktop/.stylelintrc.json
index b20f46ce4..d28c485da 100644
--- a/ui/desktop/.stylelintrc.json
+++ b/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
   }
 }
diff --git a/ui/desktop/app/components/reveal/index.hbs b/ui/desktop/app/components/reveal/index.hbs
index 5674a8036..8e15785dd 100644
--- a/ui/desktop/app/components/reveal/index.hbs
+++ b/ui/desktop/app/components/reveal/index.hbs
@@ -1,9 +1,9 @@
-<details ...attributes class='reveal' {{on-click-outside this.close}}>
-  <summary class='reveal-summary'>
-    <span class='reveal-summary-text-close'>
+<details ...attributes class='reveal'>
+  <summary class='reveal-trigger'>
+    <span class='reveal-trigger-text-close'>
       {{@textWhenClose}}
     </span>
-    <span class='reveal-summary-text-open'>
+    <span class='reveal-trigger-text-open'>
       {{@textWhenOpen}}
     </span>
 
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 09e6ce142..00313f9ea 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -361,40 +361,22 @@
   }
 }
 
-$chevron-up: "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: "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 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 {
-  display: flex;
-  margin-bottom: sizing.rems(m);
+  --trigger-color: var(--action);
 
-  &:not([open]) .reveal-summary {
-    .reveal-summary-text-close {
-      background: url($chevron-down) no-repeat right center;
-      padding-right: sizing.rems(l);
-    }
+  .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;
 
-    .reveal-summary-text-open {
-      display: none;
-    }
-  }
-
-  &[open] .reveal-summary {
-    .reveal-summary-text-open {
-      background: url($chevron-up) no-repeat right center;
-      padding-right: sizing.rems(l);
-    }
-
-    .reveal-summary-text-close {
-      display: none;
-    }
-  }
-
-  .reveal-summary {
-    align-items: center;
-    color: var(--info);
-    display: flex;
-    flex-direction: row;
     // Hide default twistie triangle
     // Firefox
     list-style-type: none;
@@ -406,14 +388,30 @@ $chevron-down: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563F
     &::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;
+    }
   }
 }
 
-.reveal-content {
-  display: flex;
-}
-
-// Card component (app/componetns/card)
+// Card component (app/components/card)
 .card {
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
   display: flex;
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
index d9066001a..fb0d61f56 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
@@ -109,4 +109,4 @@
   {{/each}}
 {{/each}}
 
-{{outlet}}
+{{outlet}}
\ No newline at end of file
diff --git a/ui/desktop/tests/integration/components/reveal-test.js b/ui/desktop/tests/integration/components/reveal-test.js
index 4acf7b69e..4d63473f5 100644
--- a/ui/desktop/tests/integration/components/reveal-test.js
+++ b/ui/desktop/tests/integration/components/reveal-test.js
@@ -15,8 +15,8 @@ module('Integration | Component | reveal', function (hooks) {
       />
     `);
     assert.ok(find('.reveal'));
-    assert.ok(find('.reveal-summary'));
-    assert.ok(find('.reveal-summary').textContent.trim(), 'View content');
+    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) {