From 8f566c7ef425ef1ecb92cbcef5bcabf9b63f0df6 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 17 Apr 2020 17:31:12 -0300
Subject: [PATCH] update toolbar documentation page

---
 .../ui/src/components/Toolbar/Toolbar.mdx     |  55 ++++++++-
 .../ToolbarSecondary/ToolbarSecondary.mdx     | 112 ------------------
 2 files changed, 52 insertions(+), 115 deletions(-)
 delete mode 100644 platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx

diff --git a/platform/ui/src/components/Toolbar/Toolbar.mdx b/platform/ui/src/components/Toolbar/Toolbar.mdx
index 27c1aa54c..f6837e83c 100644
--- a/platform/ui/src/components/Toolbar/Toolbar.mdx
+++ b/platform/ui/src/components/Toolbar/Toolbar.mdx
@@ -7,7 +7,7 @@ route: components/toolbar
 import { useState } from 'react';
 import { Playground, Props } from 'docz';
 import classnames from 'classnames';
-import { Toolbar } from '@ohif/ui';
+import { Toolbar, Typography } from '@ohif/ui';
 
 # Toolbar
 
@@ -110,9 +110,58 @@ import { Toolbar } from '@ohif/ui';
         onClick: () => setActiveTool('Layout 2'),
       },
     ];
+    const secondaryTools = [
+      {
+        id: 'Annotate',
+        label: 'Annotate',
+        icon: 'tool-annotate',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Annotate' },
+        onClick: () => console.log('Activate Annotate'),
+      },
+      {
+        id: 'Bidirectional',
+        label: 'Bidirectional',
+        icon: 'tool-bidirectional',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Bidirectional' },
+        onClick: () => console.log('Activate Bidirectional'),
+      },
+      {
+        id: 'Elipse',
+        label: 'Elipse',
+        icon: 'tool-elipse',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Elipse' },
+        onClick: () => console.log('Activate Elipse'),
+      },
+      {
+        id: 'Length',
+        label: 'Length',
+        icon: 'tool-length',
+        type: null,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Length' },
+        onClick: () => console.log('Activate Length'),
+      },
+    ];
     return (
-      <div className="py-10 flex justify-center">
-        <Toolbar moreTools={moreTools} activeTool={activeTool} tools={tools} />
+      <div className="py-10 px-4 flex flex-col justify-center">
+        <div className="mb-4">
+          <Typography className="mb-2">Primary Toolbar</Typography>
+          <Toolbar
+            moreTools={moreTools}
+            activeTool={activeTool}
+            tools={tools}
+          />
+        </div>
+        <div>
+          <Typography className="mb-2">Secondary Toolbar</Typography>
+          <Toolbar tools={secondaryTools} type="secondary" />
+        </div>
       </div>
     );
   }}
diff --git a/platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx b/platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx
deleted file mode 100644
index 3f99d593a..000000000
--- a/platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-name: Toolbar Secondary
-menu: Views
-route: examples/toolbarSecondary
----
-
-import { useState } from 'react';
-import { Playground } from 'docz';
-import classnames from 'classnames';
-import { Icon, IconButton } from '@ohif/ui';
-
-# Toolbar Secondary
-
-This example shows you how you can build a Toolbar using the available
-components.
-
-## Basic usage
-
-<Playground>
-  {() => {
-    const [activeTool, setActiveTool] = useState(null);
-    const [showTooltip, setShowTooltip] = useState(null);
-    const tools = [
-      {
-        id: 'Annotate',
-        label: 'Annotate',
-        icon: 'tool-annotate',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Annotate' },
-      },
-      {
-        id: 'Bidirectional',
-        label: 'Bidirectional',
-        icon: 'tool-bidirectional',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Bidirectional' },
-      },
-      {
-        id: 'Elipse',
-        label: 'Elipse',
-        icon: 'tool-elipse',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Elipse' },
-      },
-      {
-        id: 'Length',
-        label: 'Length',
-        icon: 'tool-length',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Length' },
-      },
-    ];
-    const renderToolbar = () => {
-      return tools.map((tool, i) => {
-        const isActive = activeTool === tool.id;
-        const shouldShowTooltip = showTooltip === tool.id;
-        return (
-          <div className="relative flex justify-center" key={tool.id}>
-            <IconButton
-              variant={isActive ? 'contained' : 'text'}
-              className={classnames('mx-1', {
-                'text-black': isActive,
-                'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white': !isActive,
-              })}
-              onClick={(e) => {
-                setActiveTool(tool.id);
-              }}
-              onMouseOver={() => setShowTooltip(tool.id)}
-              onMouseOut={() => setShowTooltip(null)}
-            >
-              <Icon name={tool.icon} />
-            </IconButton>
-            {shouldShowTooltip && (
-              <div
-                className={classnames(
-                  'tooltip absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
-                )}
-              >
-                {tool.label}
-                <svg
-                  className="absolute text-primary-dark w-full h-4 left-0 stroke-secondary-main"
-                  style={{ top: -15 }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                >
-                  <path fill="currentColor" d="M24 22h-24l12-20z" />
-                </svg>
-              </div>
-            )}
-          </div>
-        );
-      });
-    };
-    return (
-      <div className="p-10">
-        <div
-          className={classnames(
-            'flex w-full items-center bg-primary-dark px-3 py-2'
-          )}
-        >
-          <div className="flex items-center">{renderToolbar()}</div>
-        </div>
-      </div>
-    );
-  }}
-</Playground>