From 62b097170c203692e575d99778ef08001ba29063 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Fri, 18 Jun 2021 12:29:39 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Changes=20from=20previou?=
 =?UTF-8?q?s=20PR=20suggestions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Refactor RevealComponent class to inherit from RoseDropdown, no logic
need it. Now there is no need to keep any logic or state. - Refactor
component, to toggle Summary text and set chevron icon with CSS. -
Removed old commented code. Please feel free to suggest a change to
bring it back if can be useful.
---
 .../rose/components/dropdown/_item.scss       |  5 ----
 ui/desktop/app/components/reveal/index.hbs    | 21 +++++++--------
 ui/desktop/app/components/reveal/index.js     | 15 +++--------
 ui/desktop/app/styles/app.scss                | 27 +++++++++++++++++++
 .../integration/components/reveal-test.js     | 13 ++++-----
 5 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index a0f4b0a67..b38dd5903 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -57,11 +57,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         ~ .rose-form-radio-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
-
-          // background-image: #{$checkmark};
-          // background-repeat: no-repeat;
-          // background-position: right sizing.rems(m) center;
-          // background-size: sizing.rems(m);
         }
       }
 
diff --git a/ui/desktop/app/components/reveal/index.hbs b/ui/desktop/app/components/reveal/index.hbs
index 3f8a551eb..3e1de8ee9 100644
--- a/ui/desktop/app/components/reveal/index.hbs
+++ b/ui/desktop/app/components/reveal/index.hbs
@@ -1,17 +1,14 @@
-<details class='reveal' {{on 'click' (fn this.toggle)}}>
+<details ...attributes class='reveal' {{on-click-outside this.close}}>
   <summary class='reveal-summary'>
-    <span>
-      {{if this.isOpen @textWhenOpen @textWhenClose}}
+    <span class='reveal-summary-text-close'>
+      {{@textWhenClose}}
+    </span>
+    <span class='reveal-summary-text-open'>
+      {{@textWhenOpen}}
     </span>
-    <Rose::Icon
-      @name={{if this.isOpen 'chevron-up' 'chevron-down'}}
-      @size='m'
-    />
-  </summary>
-</details>
 
-{{#if this.isOpen}}
-  <content class='reveal-content'>
+  </summary>
+  <content class='reveal-content' {{on-click-inside this.close}}>
     {{yield}}
   </content>
-{{/if}}
\ No newline at end of file
+</details>
\ No newline at end of file
diff --git a/ui/desktop/app/components/reveal/index.js b/ui/desktop/app/components/reveal/index.js
index f2833ba37..339596663 100644
--- a/ui/desktop/app/components/reveal/index.js
+++ b/ui/desktop/app/components/reveal/index.js
@@ -1,14 +1,7 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import RoseDropdownComponent from 'rose/components/rose/dropdown';
 
-export default class RevealComponent extends Component {
-  // =attributes
-  @tracked isOpen = false;
-
-  // =actions
-  @action
-  toggle() {
-    this.isOpen = !this.isOpen;
+export default class RevealComponent extends RoseDropdownComponent {
+  constructor() {
+    super(...arguments);
   }
 }
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 821c274d8..fc806580d 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -360,11 +360,38 @@
       width: 50%;
     }
   }
+}
+
+
+$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 {
   display: flex;
   margin-bottom: sizing.rems(m);
 
+  &:not([open]) .reveal-summary {
+    .reveal-summary-text-close {
+      background: url($chevron-down) no-repeat right center;
+      padding-right: sizing.rems(l);
+    }
+
+    .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);
diff --git a/ui/desktop/tests/integration/components/reveal-test.js b/ui/desktop/tests/integration/components/reveal-test.js
index 4c8f5497d..4acf7b69e 100644
--- a/ui/desktop/tests/integration/components/reveal-test.js
+++ b/ui/desktop/tests/integration/components/reveal-test.js
@@ -20,6 +20,7 @@ module('Integration | Component | reveal', function (hooks) {
   });
 
   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'
@@ -37,11 +38,11 @@ module('Integration | Component | reveal', function (hooks) {
         </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'));
+
+    assert.notOk(find('details').open);
+    await click('summary');
+    assert.ok(find('details').open);
+    await click('summary');
+    assert.notOk(find('details').open);
   });
 });