OHIF-333: Split Button (#1988)

* ohif-333: add component foundation

* ohif-333: add expandable content and mocked data

* ohif-333: improve ListMenu component for the new toolbar button and add radio behavior

* ohif-333: add click outside behavior and update primary and secondary props

* ohif-333: separate classes from markup

* ohif-333: fix layout issues

* ohif-333: extract window level component

* ohif-333: update component returns

* ohif-333: update chevron thickness

* ohif-333: remove is active prop

* Delete lerna-debug.log

* ohif-333: clean toolbar and use example in ui package

* ohif-333: update styles to avoid word break

* ohif-333: fix ui package build

Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>
Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const WindowLevelMenuItem = ({ title, subtitle, isSelected, index }) => (
+  <>
+    <div className={classNames(
+      'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
+      isSelected && 'bg-primary-dark'
+    )}
+    >
+      <span className='text-common-bright mr-2 text-base whitespace-no-wrap'>
+        {title}
+      </span>
+      <span className='flex-1 text-aqua-pale font-thin text-sm whitespace-no-wrap'>
+        {subtitle}
+      </span>
+      <span className='text-primary-active ml-5 text-sm whitespace-no-wrap'>{index + 1}</span>
+    </div>
+  </>
+);
+
+WindowLevelMenuItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+export default WindowLevelMenuItem;

platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.mdx

@@ -0,0 +1,33 @@
+---
+name: Window Level Menu Item
+menu: General
+route: components/windowLevelMenuItem
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { ListMenu, WindowLevelMenuItem } from '@ohif/ui';
+
+# Window Level Menu Item
+
+Window Level Menu Item are used as renderer of the ListMenu.
+
+## Import
+
+```javascript
+import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
+```
+
+<Playground>
+  {() => {
+    return (
+      <div className="py-10 flex justify-center">
+        <ListMenu renderer={WindowLevelMenuItem} items={[]} />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={WindowLevelMenuItem} />

platform/ui/src/components/WindowLevelMenuItem/index.js

@@ -0,0 +1,2 @@
+import WindowLevelMenuItem from './WindowLevelMenuItem';
+export default WindowLevelMenuItem;