feat: 🎸 Changes from previous PR suggestions

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

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

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}}
+</details>

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

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

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