feat: Toolbar Header

package.json

@@ -35,6 +35,7 @@
     "test:e2e:dist": "lerna run test:e2e:dist --stream",
     "test:e2e:serve": "lerna run test:e2e:serve --stream",
     "see-changed": "lerna changed",
+    "docs:preview": "lerna run docs:preview --stream",
     "docs:publish": "chmod +x ./build-and-publish-docs.sh && ./build-and-publish-docs.sh",
     "release": "yarn run lerna:version && yarn run lerna:publish",
     "lerna:version": "npx lerna version prerelease --force-publish",

platform/ui/src/assets/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="currentColor" fill-rule="evenodd" d="M10 13L5 7.737 5.7 7 10 11.526 14.3 7 15 7.737z" transform="rotate(90 10 10)"/>
+</svg>

platform/ui/src/assets/icons/tool-zoom.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" height="136pt" version="1.1" viewBox="-1 0 136 136.21852" width="136pt">
+
+<path fill="currentColor" d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031 " style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" />
+</svg>

platform/ui/src/components/Icon/getIcon.jsx

@@ -6,6 +6,7 @@ import seriesInactive from './../../assets/icons/series-inactive.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';
+import chevronLeft from './../../assets/icons/chevron-left.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
 import infoLink from './../../assets/icons/info-link.svg';
 import launchArrow from './../../assets/icons/launch-arrow.svg';
@@ -18,6 +19,9 @@ import sorting from './../../assets/icons/sorting.svg';
 import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
 import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
 
+/** Tools */
+import toolZoom from './../../assets/icons/tool-zoom.svg';
+
 const ICONS = {
   'arrow-down': arrowDown,
   'series-active': seriesActive,
@@ -25,6 +29,7 @@ const ICONS = {
   calendar: calendar,
   cancel: cancel,
   'chevron-down': chevronDown,
+  'chevron-left': chevronLeft,
   'chevron-right': chevronRight,
   'info-link': infoLink,
   'launch-arrow': launchArrow,
@@ -36,6 +41,9 @@ const ICONS = {
   'sorting-active-down': sortingActiveDown,
   'sorting-active-up': sortingActiveUp,
   sorting: sorting,
+
+  /** Tools */
+  'tool-zoom': toolZoom,
 };
 
 /**

platform/ui/src/components/IconButton/IconButton.jsx

@@ -87,6 +87,7 @@ const IconButton = ({
   disabled = defaults.disabled,
   type = defaults.type,
   fullWidth = defaults.fullWidth,
+  onClick,
   className,
   ...rest
 }) => {
@@ -94,8 +95,8 @@ const IconButton = ({
 
   const handleOnClick = (e) => {
     buttonElement.current.blur();
-    if (rest.onClick) {
-      rest.onClick(e);
+    if (onClick) {
+      onClick(e);
     }
   };
 
@@ -138,6 +139,7 @@ IconButton.propTypes = {
   disabled: PropTypes.bool,
   type: PropTypes.string,
   className: PropTypes.node,
+  onClick: PropTypes.func,
 };
 
 export default IconButton;

platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js

@@ -39,7 +39,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
       'Data Display',
       'Other',
     ],
-    Examples: ['Views'],
+    Examples: ['Study List', 'Toolbar Header'],
     System: ['Colors'],
   };
 

platform/ui/src/pages/Colors/BackgroundColor.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import tailwindConfig from '../../../tailwind.config';
 
@@ -8,7 +9,6 @@ const BackgroundColor = ({ color }) => {
     const { colors } = tailwindConfig.theme;
     return colors[currentColor[0]][currentColor[1]];
   };
-  console.log(tailwindConfig);
   return (
     <div
       className={classnames(
@@ -21,4 +21,8 @@ const BackgroundColor = ({ color }) => {
   );
 };
 
+BackgroundColor.propTypes = {
+  color: PropTypes.string,
+};
+
 export default BackgroundColor;

platform/ui/src/views/StudyList/StudyList.mdx

@@ -1,11 +1,10 @@
 ---
 name: Study List
-menu: Views
-route: views/studyList
+route: examples/studyList
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+import { Playground } from 'docz';
 import {
   StudyList,
   utils,
@@ -27,17 +26,10 @@ import { getMockedStudies } from '../../utils/';
 import classnames from 'classnames';
 import moment from 'moment';
 
-# StudyList
+# Study List
 
-Description...
-
-## Import
-
-```javascript
-import { StudyList } from '@ohif/ui';
-```
-
-## StudyList
+This example shows you how you can build a Study List page using the available
+components.
 
 <Playground>
   {() => {

platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx

@@ -0,0 +1,174 @@
+---
+name: Toolbar Header
+route: examples/toolbarHeader
+---
+
+import { useState } from 'react';
+import { Playground } from 'docz';
+import classnames from 'classnames';
+import { NavBar, Typography, Svg, Icon, IconButton } from '@ohif/ui';
+
+# Toolbar Header
+
+This example shows you how you can build a Study List page using the available
+components.
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [activeTool, setActiveTool] = useState('Zoom');
+    const [showTooltip, setShowTooltip] = useState('Zoom');
+    const tools = [
+      {
+        id: 'Zoom',
+        label: 'Zoom',
+        icon: 'tool-zoom',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Zoom' },
+      },
+      {
+        id: 'Wwwc',
+        label: 'Levels',
+        icon: 'tool-zoom',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Wwwc' },
+      },
+      {
+        id: 'Pan',
+        label: 'Pan',
+        icon: 'tool-zoom',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Pan' },
+      },
+      {
+        id: 'Wwwc',
+        label: 'Levels',
+        icon: 'tool-zoom',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Wwwc' },
+      },
+      {
+        id: 'Wwwc',
+        label: 'Levels',
+        icon: 'tool-zoom',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Wwwc' },
+      },
+    ];
+    const collapsedTools = [
+      {
+        id: 'Zoom',
+        label: 'Zoom',
+        icon: 'tool-zoom',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Zoom' },
+      },
+    ];
+    const renderToolbar = () => {
+      return tools.map((tool, i) => {
+        const isActive = activeTool === tool.id;
+        const shouldShowTooltip = showTooltip === tool.id;
+        return (
+          <div className="relative flex justify-center">
+            <IconButton
+              variant={isActive ? 'contained' : 'text'}
+              className={classnames('mx-1', {
+                'text-black': isActive,
+                'text-common-bright hover:bg-primary-dark hover:text-primary-light': !isActive,
+              })}
+              onClick={(e) => {
+                setActiveTool(tool.id);
+              }}
+              onMouseOver={() => setShowTooltip(tool.id)}
+              onMouseOut={() => setShowTooltip(null)}
+              key={tool.id}
+            >
+              <Icon name="tool-zoom" />
+            </IconButton>
+            <div
+              class={classnames(
+                'absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 transition duration-300',
+                {
+                  'visible opacity-1': shouldShowTooltip,
+                  'invisible opacity-0': !shouldShowTooltip,
+                }
+              )}
+            >
+              {tool.label}
+              <svg
+                class="absolute text-primary-dark h-2 w-full left-0 top-full transform scale-150"
+                style={{ top: -8 }}
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M24 22h-24l12-20z"
+                  style={{ stroke: '#373D9A', strokeWidth: 1 }}
+                />
+              </svg>
+            </div>
+          </div>
+        );
+      });
+    };
+    return (
+      <div className="pb-10">
+        <NavBar className="justify-between border-b-4 border-black">
+          <div className="flex flex-1 justify-between">
+            <div className="flex items-center">
+              <div className="mx-3 inline-flex items-center">
+                <Icon
+                  name="chevron-left"
+                  className="text-primary-main w-10 h-10 cursor-pointer transition duration-300 transform hover:scale-125"
+                  onClick={() => alert('Navigate to previous page')}
+                />
+                <a href="#" className="ml-4">
+                  <Svg name="logo-ohif" />
+                </a>
+              </div>
+            </div>
+            <div className="flex items-center">
+              <div className="flex items-center">
+                {renderToolbar()}
+                <span
+                  className="w-1 border-l py-4 mx-2"
+                  style={{ borderColor: '#354A6D' }}
+                />
+                <button>BUTTON</button>
+              </div>
+            </div>
+            <div className="flex items-center">
+              <span className="mr-3 text-common-light text-lg">
+                FOR INVESTIGATIONAL USE ONLY
+              </span>
+              <IconButton
+                variant="text"
+                color="inherit"
+                className="text-primary-active"
+                onClick={() => {}}
+              >
+                <React.Fragment>
+                  <Icon name="settings" /> <Icon name="chevron-down" />
+                </React.Fragment>
+              </IconButton>
+            </div>
+          </div>
+        </NavBar>
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={NavBar} />

platform/ui/tailwind.config.js

@@ -313,6 +313,7 @@ module.exports = {
     inset: {
       '0': '0',
       auto: 'auto',
+      full: '100%',
     },
     letterSpacing: {
       tighter: '-0.05em',