chore: 🤖 polish up reveal component

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

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

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;

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

@@ -109,4 +109,4 @@
   {{/each}}
 {{/each}}
 
-{{outlet}}
+{{outlet}}

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) {