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,101 @@
+import ButtonGroup from '../ButtonGroup';
+import Button from '../../Button';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import {
+  createComponentTemplate,
+  createStoryMetaSettings,
+} from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: ButtonGroup,
+  title: 'Components/ButtonGroup',
+};
+
+<Meta title="Components/ButtonGroup" component={ButtonGroup} />
+
+export const buttonGroupTemplate = args => (
+  <ButtonGroup {...args}>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </ButtonGroup>
+);
+
+<Heading
+  title="ButtonGroup"
+  componentRelativePath="ButtonGroup/ButtonGroup.jsx"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Contribute](#contribute)
+
+## Overview
+
+ButtonGroup is a container for a group of buttons.
+
+<Canvas>
+  <Story name="Overview">{buttonGroupTemplate.bind({})}</Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={ButtonGroup} />
+
+## Usage
+
+### Variants
+
+There are three different variants of ButtonGroup:
+
+<Canvas>
+  <Story name="Variants">
+    <div className="flex flex-col space-y-2">
+      <ButtonGroup variant="text">
+        <Button>Text</Button>
+        <Button>Text</Button>
+        <Button>Text</Button>
+      </ButtonGroup>
+      <ButtonGroup variant="outlined">
+        <Button>Outlined</Button>
+        <Button>Outlined</Button>
+        <Button>Outlined</Button>
+      </ButtonGroup>
+      <ButtonGroup variant="contained">
+        <Button>Contained</Button>
+        <Button>Contained</Button>
+        <Button>Contained</Button>
+      </ButtonGroup>
+    </div>
+  </Story>
+</Canvas>
+
+### Orientation
+
+You can change the orientation of the buttons in the group by setting the
+`orientation` prop.
+
+<Canvas>
+  <Story name="Orientation Horizontal">
+    <ButtonGroup orientation="horizontal">
+      <Button>Horizontal-1</Button>
+      <Button>Horizontal-2</Button>
+    </ButtonGroup>
+  </Story>
+</Canvas>
+
+Or vertical
+
+<Canvas>
+  <Story name="Orientation Vertical">
+    <ButtonGroup orientation="vertical">
+      <Button>Vertical-1</Button>
+      <Button>Vertical-2</Button>
+    </ButtonGroup>
+  </Story>
+</Canvas>
+
+## Contribute
+
+<Footer componentRelativePath="ButtonGroup/__stories__/buttonGroup.stories.mdx" />