init

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
+const ToolbarButton = ({
+  id,
+  icon,
+  label,
+  commands,
+  onInteraction,
+  dropdownContent = null,
+  //
+  className,
+  disabled,
+  disabledText,
+  size,
+  toolTipClassName,
+  disableToolTip = false,
+  ...rest
+  //
+}) => {
+  const shouldShowDropdown = !!dropdownContent;
+  const iconEl = icon ? <Icon name={icon} /> : <div>{label || 'Missing icon and label'}</div>;
+
+  const sizeToUse = size ?? 'toolbar';
+  const toolTipClassNameToUse =
+    toolTipClassName !== undefined
+      ? toolTipClassName
+      : sizeToUse === 'toolbar'
+        ? 'w-[40px] h-[40px]'
+        : 'w-[32px] h-[32px]';
+
+  return (
+    <div key={id}>
+      <Tooltip
+        isSticky={shouldShowDropdown}
+        content={shouldShowDropdown ? dropdownContent : label}
+        secondaryContent={disabled ? disabledText : null}
+        tight={shouldShowDropdown}
+        className={toolTipClassNameToUse}
+        isDisabled={disableToolTip}
+      >
+        <IconButton
+          size={sizeToUse}
+          className={classNames(className, disabled ? 'ohif-disabled' : '')}
+          onClick={() => {
+            onInteraction({
+              itemId: id,
+              commands,
+            });
+          }}
+          name={label}
+          key={id}
+          id={id}
+          {...rest}
+        >
+          {iconEl}
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+};
+
+ToolbarButton.propTypes = {
+  /* Influences background/hover styling */
+  id: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  commands: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+  onInteraction: PropTypes.func,
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  /** Tooltip content can be replaced for a customized content by passing a node to this value. */
+  dropdownContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  size: PropTypes.string,
+  toolTipClassName: PropTypes.string,
+  disableToolTip: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+export default ToolbarButton;

platform/ui/src/components/ToolbarButton/__stories__/toolbarButton.stories.mdx

@@ -0,0 +1,69 @@
+import ToolbarButton from '../ToolbarButton';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: ToolbarButton,
+  title: 'Components/ToolbarButton',
+};
+
+<Meta
+  title="Components/ToolbarButton"
+  component={ToolbarButton}
+/>
+
+export const ToolbarButtonTemplate = args => (
+  <div className="bg-primary-dark h-16">
+    <div class="w-8">
+      <ToolbarButton {...args} />
+    </div>
+  </div>
+);
+
+<Heading
+  title="ToolbarButton"
+  componentRelativePath="ToolbarButton/ToolbarButton.js"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+ToolbarButton is a component that renders the ToolbarButtons.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      type: 'tool',
+      id: 'Zoom',
+      icon: 'tool-zoom',
+      label: 'Zoom',
+      commandOptions: {
+        toolName: 'Zoom',
+      },
+      dropdownContent: null,
+      isActive: false,
+      bState: {
+        primaryToolId: 'WindowLevel',
+        toggles: {},
+        groups: {
+          primary: 'WindowLevel',
+        },
+      },
+    }}
+  >
+    {ToolbarButtonTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={ToolbarButton} />
+
+## Contribute
+
+<Footer componentRelativePath="ToolbarButton/__stories__/toolbarButton.stories.mdx" />

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

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