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
@@ -2,12 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import getIcon from './getIcon';

-const Icon = ({ name, ...otherProps }) => {
+const Icon = ({ name, className, ...otherProps }) => {
+  if (className) {
+    return (
+      <div className={className}>
+        {getIcon(name, className, { ...otherProps })}
+      </div>
+    );
+  }
+
  return <React.Fragment>{getIcon(name, { ...otherProps })}</React.Fragment>;
 };

 Icon.propTypes = {
  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
 };

 export default Icon;
@@ -0,0 +1,92 @@
+import Icon from '../Icon';
+import { ICONS } from '../getIcon';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: Icon,
+  title: 'Components/Icon',
+};
+
+<Meta title="Components/Icon" component={Icon} />
+
+export const IconTemplate = (args) => (
+  // Todo: Icon colors
+  <div className="w-8 h-8">
+    <Icon {...args} />
+  </div>
+);
+
+<Heading title="Icon" componentRelativePath="Icon/Icon.jsx" />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Contribute](#contribute)
+
+## Overview
+
+Icon is a component that renders the Icons.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      name: 'clipboard',
+    }}
+  >
+    {IconTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Icon} />
+
+## Usage
+
+You can choose the icon from the list of icons. Here we have render all the
+icons.
+
+<Canvas>
+  <Story name="All Icons">
+    {() => {
+      const icons = Object.keys(ICONS);
+      return (
+        <div className="flex flex-wrap">
+          {icons
+            .filter((ic) => ic !== 'magnifier')
+            .map((icon) => (
+              <div className="m-4 flex flex-col justify-center items-center">
+                <div class="w-8 h-8">
+                  <Icon name={icon} />
+                </div>
+                <div className="text-gray-600">{icon}</div>
+              </div>
+            ))}
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Color
+
+Icon colors can be changed by wrapping the icon in a div with the class name
+
+<Canvas>
+  <Story
+    name="Colors"
+    args={{
+      name: 'clipboard',
+      className: 'text-red-700',
+    }}
+  >
+    {IconTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Contribute
+
+<Footer componentRelativePath="Icon/__stories__/icon.stories.mdx" />