make toolbar reusable to use as secondary

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

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

platform/ui/src/components/Toolbar/Toolbar.jsx

@@ -4,9 +4,16 @@ import classnames from 'classnames';
 
 import { ToolbarButton, IconButton, Icon, Tooltip } from '@ohif/ui';
 
-const PrimaryToolbar = ({ activeTool, tools, moreTools }) => {
+const classes = {
+  type: {
+    primary: '',
+    secondary: 'w-full items-center bg-primary-dark px-3',
+  },
+};
+
+const Toolbar = ({ activeTool, tools, moreTools, type }) => {
   return (
-    <div className="flex">
+    <div className={classnames('flex', classes.type[type])}>
       {tools.map((tool) => {
         const { id, onClick, icon, label, dropdownContent } = tool;
         const isActive = activeTool === tool.id;
@@ -19,13 +26,14 @@ const PrimaryToolbar = ({ activeTool, tools, moreTools }) => {
               icon={icon}
               label={label}
               dropdownContent={dropdownContent}
+              type={type}
             />
           </div>
         );
       })}
       {!!moreTools.length && (
         <>
-          <span className="w-1 border-l py-4 mx-2 border-common-dark" />
+          <span className="w-1 border-l h-8 self-center mx-2 border-common-dark" />
           <Tooltip position="bottom" content="More tools">
             <IconButton
               className={classnames(
@@ -42,12 +50,14 @@ const PrimaryToolbar = ({ activeTool, tools, moreTools }) => {
   );
 };
 
-PrimaryToolbar.defaultProps = {
+Toolbar.defaultProps = {
   activeTool: '',
   moreTools: [],
+  type: 'primary',
 };
 
-PrimaryToolbar.propTypes = {
+Toolbar.propTypes = {
+  type: PropTypes.oneOf(['primary', 'secondary']),
   activeTool: PropTypes.string,
   tools: PropTypes.arrayOf(
     PropTypes.shape({
@@ -76,4 +86,4 @@ PrimaryToolbar.propTypes = {
   ),
 };
 
-export default PrimaryToolbar;
+export default Toolbar;

platform/ui/src/components/Toolbar/Toolbar.mdx

@@ -1,22 +1,22 @@
 ---
-name: Primary Toolbar
+name: Toolbar
 menu: Data Display
-route: components/primaryToolbar
+route: components/toolbar
 ---
 
 import { useState } from 'react';
-import { Playground } from 'docz';
+import { Playground, Props } from 'docz';
 import classnames from 'classnames';
-import { PrimaryToolbar } from '@ohif/ui';
+import { Toolbar } from '@ohif/ui';
 
-# Primary Toolbar
+# Toolbar
 
-Primary Toolbar is used to create a list of tools.
+A Toolbar is used to create a list of tools.
 
 ## Import
 
 ```javascript
-import { PrimaryToolbar } from '@ohif/ui';
+import { Toolbar } from '@ohif/ui';
 ```
 
 <Playground>
@@ -112,11 +112,7 @@ import { PrimaryToolbar } from '@ohif/ui';
     ];
     return (
       <div className="py-10 flex justify-center">
-        <PrimaryToolbar
-          moreTools={moreTools}
-          activeTool={activeTool}
-          tools={tools}
-        />
+        <Toolbar moreTools={moreTools} activeTool={activeTool} tools={tools} />
       </div>
     );
   }}
@@ -124,4 +120,4 @@ import { PrimaryToolbar } from '@ohif/ui';
 
 ## Properties
 
-<Props of={PrimaryToolbar} />
+<Props of={Toolbar} />

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

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

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import { IconButton, Icon, Tooltip } from '@ohif/ui';
 
 const ToolbarButton = ({
+  type,
   id,
   isActive,
   onClick,
@@ -12,6 +13,17 @@ const ToolbarButton = ({
   label,
   dropdownContent,
 }) => {
+  const classes = {
+    type: {
+      primary: isActive
+        ? 'text-black'
+        : 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
+      secondary: isActive
+        ? 'text-black'
+        : 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
+    },
+  };
+
   const shouldShowDropdown = !!isActive && !!dropdownContent;
   return (
     <div key={id}>
@@ -21,10 +33,7 @@ const ToolbarButton = ({
       >
         <IconButton
           variant={isActive ? 'contained' : 'text'}
-          className={classnames('mx-1', {
-            'text-black': isActive,
-            'text-common-bright hover:bg-primary-dark hover:text-primary-light': !isActive,
-          })}
+          className={classnames('mx-1', classes.type[type])}
           onClick={onClick}
           key={id}
         >
@@ -38,9 +47,11 @@ const ToolbarButton = ({
 ToolbarButton.defaultProps = {
   dropdownContent: null,
   isActive: false,
+  type: 'primary',
 };
 
 ToolbarButton.propTypes = {
+  type: PropTypes.oneOf(['primary', 'secondary']),
   id: PropTypes.string.isRequired,
   isActive: PropTypes.bool,
   onClick: PropTypes.func.isRequired,

platform/ui/src/components/index.js

@@ -15,7 +15,6 @@ import MeasurementTable from './MeasurementTable';
 import NavBar from './NavBar';
 import Notification from './Notification';
 import Select from './Select';
-import PrimaryToolbar from './PrimaryToolbar';
 import SegmentationTable from './SegmentationTable';
 import SidePanel from './SidePanel';
 import StudyBrowser from './StudyBrowser';
@@ -33,6 +32,7 @@ import ThemeWrapper from './ThemeWrapper/';
 import Thumbnail from './Thumbnail';
 import ThumbnailSR from './ThumbnailSR';
 import ThumbnailList from './ThumbnailList';
+import Toolbar from './Toolbar';
 import ToolbarButton from './ToolbarButton';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
@@ -56,7 +56,6 @@ export {
   MeasurementTable,
   NavBar,
   Notification,
-  PrimaryToolbar,
   Select,
   SegmentationTable,
   SidePanel,
@@ -75,6 +74,7 @@ export {
   Thumbnail,
   ThumbnailSR,
   ThumbnailList,
+  Toolbar,
   ToolbarButton,
   Tooltip,
   Typography,