feat: OHIF-v3 UI Component Library (#2653)

* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems

* fix: storybook webpack config

* feat: add more stories

* feat: add more stories

* feat: add more stories

* feat: fix logo and babel runtime error

* feat: move to mdx docs for ui

* feat: enhanced mdx for header and styles

* feat: Add button usecases

* feat: Add buttonGroup docs

* feat: Add docs and use case to cine and contex menu

* feat: fix decorators

* feat: add header and dropdown docs

* feat: add Icon and input docs

* feat: add more docs

* feat: add more stories

* fix: feedback section

* feat: Add doc page

* feat: Add typography and color stories

* yarn lock

* add analytics to v3-ui

* new banner image

* new viewport component

* update review comments

platform/ui/src/components/Dropdown/Dropdown.jsx

@@ -21,7 +21,7 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => {
         }}
         data-cy={id}
       >
-        {!!icon && <Icon name={icon} className="text-white w-4 mr-2" />}
+        {!!icon && <Icon name={icon} className="w-4 mr-2 text-white" />}
         <Typography>{title}</Typography>
       </div>
     );
@@ -40,11 +40,9 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => {
 
   const renderTitleElement = () => {
     return (
-      <div className="flex text-white items-center">
+      <div className="flex items-center">
         {children}
-        {showDropdownIcon && (
-          <Icon name="chevron-down" className="text-white ml-1" />
-        )}
+        {showDropdownIcon && <Icon name="chevron-down" className="ml-1" />}
       </div>
     );
   };
@@ -94,7 +92,7 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => {
 
   return (
     <div data-cy="dropdown" ref={element} className="relative">
-      <div className="cursor-pointer flex items-center" onClick={toggleList}>
+      <div className="flex items-center cursor-pointer" onClick={toggleList}>
         {renderTitleElement()}
       </div>
 

platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx

@@ -0,0 +1,75 @@
+import Dropdown from '../Dropdown';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: Dropdown,
+  title: 'Components/Dropdown',
+};
+
+<Meta title="Components/Dropdown" component={Dropdown} />
+
+export const DropdownTemplate = (args) => (
+  // Todo: this should not set a background
+  <div className="flex h-32">
+    <Dropdown {...args} />
+  </div>
+);
+
+<Heading title="Dropdown" componentRelativePath="Dropdown/Dropdown.jsx" />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Contribute](#contribute)
+
+## Overview
+
+Dropdown is a modal Dropdown component which enabled to show a modal Dropdown.
+
+<Canvas>
+  <Story name="Overview" args={{ id: 'dropdown-d', list: [] }}>
+    {DropdownTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Dropdown} />
+
+## Usage
+
+You can list the items in the dropdown.
+
+<Canvas>
+  <Story
+    name="List"
+    args={{
+      id: 'dropdown-1',
+      children: <div className="text-black">Drop Down</div>,
+      showDropdownIcon: true,
+      list: [
+        {
+          title: 'Item 1',
+          icon: 'clipboard',
+          onClick: () => {
+            alert('Item 1 clicked');
+          },
+        },
+        {
+          title: 'Item 2',
+          icon: 'tracked',
+          onClick: () => {
+            alert('Item 2 clicked');
+          },
+        },
+      ],
+    }}
+  >
+    {DropdownTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Contribute
+
+<Footer componentRelativePath="Dropdown/__stories__/dropdown.stories.mdx" />