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