feat: Add key-value item to dropdown in rose addon

2021-06-22 13:38:47 -04:00
1 parent 2e2ff60c8f
commit 73fef6b907
@@ -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>

@@ -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>
@@ -3,3 +3,4 @@
@import 'link';
@import 'item';
@import 'section';
+@import 'key-value';
@@ -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;
+  }
+}
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/dropdown/key-value';
@@ -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"
@@ -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');
+  });
+});
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/dropdown/key-value';`