From d220dd24899868531643149eb7160873cd7a7117 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 26 Jun 2020 12:34:10 -0300
Subject: [PATCH] create dropdown documentation

---
 .../ui/src/components/Dropdown/Dropdown.mdx   | 52 +++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/platform/ui/src/components/Dropdown/Dropdown.mdx b/platform/ui/src/components/Dropdown/Dropdown.mdx
index 087877f56..dc4b02555 100644
--- a/platform/ui/src/components/Dropdown/Dropdown.mdx
+++ b/platform/ui/src/components/Dropdown/Dropdown.mdx
@@ -5,11 +5,13 @@ route: components/dropdown
 ---
 
 import { Playground, Props } from 'docz';
-import { Dropdown } from '@ohif/ui';
+import { Dropdown, IconButton, Icon } from '@ohif/ui';
 
 # Dropdown
 
-...
+This component is used when there are more than a few options to choose from. By
+hovering or clicking on the trigger, a dropdown menu will appear, which allows
+you to choose an option and execute the relevant action.
 
 ## Import
 
@@ -17,6 +19,50 @@ import { Dropdown } from '@ohif/ui';
 import { Dropdown } from '@ohif/ui';
 ```
 
+<Playground>
+  {() => {
+    const handleClick = () => {
+      alert("Clicked");
+    }
+    return (
+      <div className="py-4">
+        <Dropdown
+            showDropdownIcon={false}
+            list={[
+              {
+                title: 'Option 1',
+                icon: 'info',
+                onClick: handleClick,
+              },
+              {
+                title: 'Option 2',
+                icon: 'settings',
+                onClick: handleClick,
+              },
+            ]}
+          >
+            <IconButton
+              variant="text"
+              color="inherit"
+              size="initial"
+              className="text-primary-active"
+            >
+              <Icon name="settings" />
+            </IconButton>
+            <IconButton
+              variant="text"
+              color="inherit"
+              size="initial"
+              className="text-primary-active"
+            >
+              <Icon name="chevron-down" />
+            </IconButton>
+          </Dropdown>
+      </div>
+    );
+  }}
+</Playground>
+
 ## Properties
 
-<Props of={Button} />
+<Props of={Dropdown} />