From 73fef6b907ec0603427701368f819fc291d542b7 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 22 Jun 2021 13:30:08 -0400
Subject: [PATCH 1/4] feat: Add key-value item to dropdown in rose addon

---
 .../addon/components/rose/dropdown/index.hbs  |  1 +
 .../rose/dropdown/key-value/index.hbs         |  9 +++++++
 .../rose/components/dropdown/_index.scss      |  1 +
 .../rose/components/dropdown/_key-value.scss  | 11 ++++++++
 .../app/components/rose/dropdown/key-value.js |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 27 +++++++++++++++++++
 .../rose/dropdown/key-value-test.js           | 20 ++++++++++++++
 7 files changed, 70 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/dropdown/key-value/index.hbs
 create mode 100644 addons/rose/addon/styles/rose/components/dropdown/_key-value.scss
 create mode 100644 addons/rose/app/components/rose/dropdown/key-value.js
 create mode 100644 addons/rose/tests/integration/components/rose/dropdown/key-value-test.js

diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index 90f899281..31497ea27 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/addons/rose/addon/components/rose/dropdown/index.hbs
@@ -29,6 +29,7 @@
       item=(component "rose/anonymous" class="rose-dropdown-item")
       separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
       section=(component "rose/dropdown/section" style=this.style)
+      key-value=(component "rose/dropdown/key-value" style=this.style)
     )}}
   </div>
 
diff --git a/addons/rose/addon/components/rose/dropdown/key-value/index.hbs b/addons/rose/addon/components/rose/dropdown/key-value/index.hbs
new file mode 100644
index 000000000..a160906c5
--- /dev/null
+++ b/addons/rose/addon/components/rose/dropdown/key-value/index.hbs
@@ -0,0 +1,9 @@
+<dl class='rose-dropdown-key-value rose-dropdown-item'>
+  <dt class='rose-dropdown-key'>
+    {{yield to='key'}}
+  </dt>
+
+  <dd class='rose-dropdown-value'>
+      {{yield to='value'}}
+  </dd>
+</dl>
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_index.scss b/addons/rose/addon/styles/rose/components/dropdown/_index.scss
index ad9bba47a..4f44734f8 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_index.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_index.scss
@@ -3,3 +3,4 @@
 @import 'link';
 @import 'item';
 @import 'section';
+@import 'key-value';
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_key-value.scss b/addons/rose/addon/styles/rose/components/dropdown/_key-value.scss
new file mode 100644
index 000000000..70b9b6510
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/dropdown/_key-value.scss
@@ -0,0 +1,11 @@
+@use '../../variables/sizing';
+
+.rose-dropdown-key-value {
+  .rose-dropdown-key {
+    text-transform: capitalize;
+  }
+  .rose-dropdown-value {
+    color: var(--ui-gray);
+    padding: sizing.rems(xxs) sizing.rems(s) 0 0;
+  }
+}
diff --git a/addons/rose/app/components/rose/dropdown/key-value.js b/addons/rose/app/components/rose/dropdown/key-value.js
new file mode 100644
index 000000000..51e6ae804
--- /dev/null
+++ b/addons/rose/app/components/rose/dropdown/key-value.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/dropdown/key-value';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index e3cd92620..e831f2e6a 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,3 +1,30 @@
+<h2>KeyValue Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+  <dropdown.key-value>
+    <:key>ID</:key>
+    <:value>cl_nbv9375hLHs</:value>
+  </dropdown.key-value>
+
+  <dropdown.separator />
+
+  <dropdown.key-value>
+    <:key>Name</:key>
+    <:value>Key/Value</:value>
+  </dropdown.key-value>
+
+  <dropdown.separator />
+
+  <dropdown.key-value>
+    <:key>Description</:key>
+    <:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus?</:value>
+  </dropdown.key-value>
+
+</Rose::Dropdown>
+
 <h2>Condensed dropdown</h2>
 <Rose::Dropdown
   @style="condensed"
diff --git a/addons/rose/tests/integration/components/rose/dropdown/key-value-test.js b/addons/rose/tests/integration/components/rose/dropdown/key-value-test.js
new file mode 100644
index 000000000..7381e9560
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/dropdown/key-value-test.js
@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/dropdown/key-value', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <Rose::Dropdown::KeyValue>
+        <:key>key</:key>
+        <:value>value</:value>
+      </Rose::Dropdown::KeyValue>
+    `);
+
+    assert.equal(find('.rose-dropdown-key').textContent.trim(), 'key');
+    assert.equal(find('.rose-dropdown-value').textContent.trim(), 'value');
+  });
+});

From 27afafa077547ff01a00e57b18eac283622bf357 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 22 Jun 2021 13:45:46 -0400
Subject: [PATCH 2/4] docs: Update dropdown storybook with key-value item

---
 .../components/rose/dropdown/index.stories.mdx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index a6b7a1b52..77cd40c4c 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -63,6 +63,24 @@ A simple dropdown component with support for links and buttons.
   }}</Story>
 </Preview>
 
+<Preview>
+  <Story name="Dropdown with Key Value Items" height="13rem">{{
+    template: hbs`
+      <Rose::Dropdown @text="View details" @showCaret={{showCaret}} as |dropdown|>
+        <dropdown.key-value>
+          <:key>Name</:key>
+          <:value>Key/Value</:value>
+        </dropdown.key-value>
+        <dropdown.separator />
+        <dropdown.key-value>
+          <:key>Description</:key>
+          <:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus?</:value>
+        </dropdown.key-value>
+      </Rose::Dropdown>
+    `,
+  }}</Story>
+</Preview>
+
 
 ```html
   <Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>

From 1b5e1a7736312fc592ca7c277eb843b35cda228f Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 22 Jun 2021 13:53:34 -0400
Subject: [PATCH 3/4] style: Remove unused style param

---
 addons/rose/addon/components/rose/dropdown/index.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index 31497ea27..c4f8dec52 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/addons/rose/addon/components/rose/dropdown/index.hbs
@@ -29,7 +29,7 @@
       item=(component "rose/anonymous" class="rose-dropdown-item")
       separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
       section=(component "rose/dropdown/section" style=this.style)
-      key-value=(component "rose/dropdown/key-value" style=this.style)
+      key-value=(component "rose/dropdown/key-value")
     )}}
   </div>
 

From c7ee9cde175e1ea517d9fe1f82fa966866199711 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 23 Jun 2021 09:04:08 -0400
Subject: [PATCH 4/4] feat: Allow dropdown items to be selectable without
 closing

---
 .../addon/components/rose/dropdown/index.hbs  | 33 +++++++++++++------
 .../rose/dropdown/index.stories.mdx           | 13 +++++++-
 .../rose/tests/dummy/app/templates/index.hbs  |  1 +
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index c4f8dec52..5d02e87e8 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/addons/rose/addon/components/rose/dropdown/index.hbs
@@ -22,15 +22,28 @@
 
   </summary>
 
-  <div class="rose-dropdown-content" {{on-click-inside this.close}}>
-    {{yield (hash
-      link=(component "rose/dropdown/link" style=this.style)
-      button=(component "rose/dropdown/button" style=this.style)
-      item=(component "rose/anonymous" class="rose-dropdown-item")
-      separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
-      section=(component "rose/dropdown/section" style=this.style)
-      key-value=(component "rose/dropdown/key-value")
-    )}}
-  </div>
+  {{#if @ignoreClickInside}}
+    <div class="rose-dropdown-content">
+      {{yield (hash
+        link=(component "rose/dropdown/link" style=this.style)
+        button=(component "rose/dropdown/button" style=this.style)
+        item=(component "rose/anonymous" class="rose-dropdown-item")
+        separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
+        section=(component "rose/dropdown/section" style=this.style)
+        key-value=(component "rose/dropdown/key-value")
+      )}}
+    </div>
+  {{else}}
+    <div class="rose-dropdown-content" {{on-click-inside this.close}}>
+      {{yield (hash
+        link=(component "rose/dropdown/link" style=this.style)
+        button=(component "rose/dropdown/button" style=this.style)
+        item=(component "rose/anonymous" class="rose-dropdown-item")
+        separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
+        section=(component "rose/dropdown/section" style=this.style)
+        key-value=(component "rose/dropdown/key-value")
+      )}}
+    </div>
+  {{/if}}
 
 </details>
diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 77cd40c4c..58a0575bf 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -66,7 +66,7 @@ A simple dropdown component with support for links and buttons.
 <Preview>
   <Story name="Dropdown with Key Value Items" height="13rem">{{
     template: hbs`
-      <Rose::Dropdown @text="View details" @showCaret={{showCaret}} as |dropdown|>
+      <Rose::Dropdown @text="View details" @showCaret={{showCaret}} @ignoreClickInside={{true}} as |dropdown|>
         <dropdown.key-value>
           <:key>Name</:key>
           <:value>Key/Value</:value>
@@ -143,3 +143,14 @@ form field.
   </form.radioGroup>
 </Rose::Form>
 ```
+
+Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
+
+```html
+<Rose::Dropdown @text="View details" @showCaret={{true}} @ignoreClickInside={{true}} as |dropdown|>
+  <dropdown.key-value>
+    <:key>ID</:key>
+    <:value>cl_nbv9375hLHs</:value>
+  </dropdown.key-value>
+</Rose::Dropdown>
+```
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index e831f2e6a..ed8345c31 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -2,6 +2,7 @@
 <Rose::Dropdown
   @text="Credential library details"
   @showCaret={{true}}
+  @ignoreClickInside={{true}}
   as |dropdown|
 >
   <dropdown.key-value>