feat: OHIF-v3 UI Component Library (#2653)

* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems * fix: storybook webpack config * feat: add more stories * feat: add more stories * feat: add more stories * feat: fix logo and babel runtime error * feat: move to mdx docs for ui * feat: enhanced mdx for header and styles * feat: Add button usecases * feat: Add buttonGroup docs * feat: Add docs and use case to cine and contex menu * feat: fix decorators * feat: add header and dropdown docs * feat: add Icon and input docs * feat: add more docs * feat: add more stories * fix: feedback section * feat: Add doc page * feat: Add typography and color stories * yarn lock * add analytics to v3-ui * new banner image * new viewport component * update review comments
2022-02-10 14:08:34 -05:00
1 parent eb77cb76b6
commit 5c8ee7f906
@@ -0,0 +1,79 @@
+import Tooltip from '../Tooltip';
+import Icon from '../../Icon';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: Tooltip,
+  title: 'Components/Tooltip',
+};
+
+<Meta title="Components/Tooltip" component={Tooltip} />
+
+export const TooltipTemplate = (args) => (
+  <div className="h-16 w-full">
+    <div class="w-8 h-8 mx-auto">
+      <Tooltip {...args}>
+        <Icon name="clipboard" />
+      </Tooltip>
+    </div>
+  </div>
+);
+
+<Heading title="Tooltip" componentRelativePath="Tooltip/Tooltip.js" />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Contribute](#contribute)
+
+## Overview
+
+Tooltip is a component that renders the Tooltips.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      content: 'Tooltip',
+    }}
+  >
+    {TooltipTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Tooltip} />
+
+## Usage
+
+### Position
+
+You can set the position of the tooltip by using the `position` prop.
+
+<Canvas>
+  <Story name="Position">
+    <div className="h-16 w-full m-8">
+      <div class="w-8 h-8 mx-auto">
+        <Tooltip position="right" content="right">
+          <Icon name="clipboard" />
+          <span>Right</span>
+        </Tooltip>
+      </div>
+    </div>
+    <div className="h-16 w-full m-8">
+      <div class="w-8 h-8 mx-auto">
+        <Tooltip position="left" content="left">
+          <Icon name="clipboard" />
+          <span>Left</span>
+        </Tooltip>
+      </div>
+    </div>
+  </Story>
+</Canvas>
+
+## Contribute
+
+<Footer componentRelativePath="Tooltip/__stories__/tooltip.stories.mdx" />