From de4b54c230bdba31fa690b57567c2e0abdc479c8 Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 8 Dec 2021 01:37:39 +0800
Subject: [PATCH] info-tooltip (#12901)

---
 ui/components/ui/info-tooltip/README.mdx      | 37 +++++++++
 ui/components/ui/info-tooltip/info-tooltip.js | 18 +++++
 .../ui/info-tooltip/info-tooltip.stories.js   | 80 ++++++++++---------
 3 files changed, 98 insertions(+), 37 deletions(-)
 create mode 100644 ui/components/ui/info-tooltip/README.mdx

diff --git a/ui/components/ui/info-tooltip/README.mdx b/ui/components/ui/info-tooltip/README.mdx
new file mode 100644
index 000000000..06f49f746
--- /dev/null
+++ b/ui/components/ui/info-tooltip/README.mdx
@@ -0,0 +1,37 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import InfoTooltip from './info-tooltip';
+
+# Info Tooltip
+
+Text labels that appear when the user hovers over
+
+<Canvas>
+  <Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={InfoTooltip} />
+
+## Usage
+
+The following describes the props and example usage for this component.
+
+### Bottom
+
+<Canvas>
+  <Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--bottom" />
+</Canvas>
+
+### Left
+
+<Canvas>
+  <Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--left" />
+</Canvas>
+
+### Right
+
+<Canvas>
+  <Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--right" />
+</Canvas>
diff --git a/ui/components/ui/info-tooltip/info-tooltip.js b/ui/components/ui/info-tooltip/info-tooltip.js
index e590daebd..54d280085 100644
--- a/ui/components/ui/info-tooltip/info-tooltip.js
+++ b/ui/components/ui/info-tooltip/info-tooltip.js
@@ -41,10 +41,28 @@ export default function InfoTooltip({
 }
 
 InfoTooltip.propTypes = {
+  /**
+   * Text label that shows up after hover
+   */
   contentText: PropTypes.node,
+  /**
+   * Shows position of the tooltip
+   */
   position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
+  /**
+   * Set if the tooltip wide
+   */
   wide: PropTypes.bool,
+  /**
+   * Add custom CSS class for container
+   */
   containerClassName: PropTypes.string,
+  /**
+   * Add custom CSS class for the wrapper
+   */
   wrapperClassName: PropTypes.string,
+  /**
+   * Add color for the icon
+   */
   iconFillColor: PropTypes.string,
 };
diff --git a/ui/components/ui/info-tooltip/info-tooltip.stories.js b/ui/components/ui/info-tooltip/info-tooltip.stories.js
index d5e8dc2a2..c77580bf6 100644
--- a/ui/components/ui/info-tooltip/info-tooltip.stories.js
+++ b/ui/components/ui/info-tooltip/info-tooltip.stories.js
@@ -1,48 +1,54 @@
 import React from 'react';
-import { text } from '@storybook/addon-knobs';
+import README from './README.mdx';
 import InfoTooltip from './info-tooltip';
 
 export default {
   title: 'Components/UI/InfoTooltip',
   id: __filename,
+  component: InfoTooltip,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    contentText: { control: 'text' },
+    position: {
+      control: 'select',
+      options: ['top', 'left', 'bottom', 'right'],
+    },
+    wide: { control: 'boolean' },
+    containerClassName: { control: 'text' },
+    wrapperClassName: { control: 'text' },
+    iconFillColor: { control: 'text' },
+  },
 };
 
-export const Top = () => (
-  <InfoTooltip
-    position="top"
-    contentText={text(
-      'top',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
-    )}
-  />
-);
+export const DefaultStory = (args) => <InfoTooltip {...args} />;
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  position: 'top',
+  contentText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
+};
 
-export const Bottom = () => (
-  <InfoTooltip
-    position="bottom"
-    contentText={text(
-      'bottom',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
-    )}
-  />
-);
+export const Bottom = (args) => <InfoTooltip {...args} />;
+Bottom.args = {
+  position: 'bottom',
+  contentText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
+};
 
-export const Left = () => (
-  <InfoTooltip
-    position="left"
-    contentText={text(
-      'left',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
-    )}
-  />
-);
+export const Left = (args) => <InfoTooltip {...args} />;
+Left.args = {
+  position: 'left',
+  contentText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
+};
 
-export const Right = () => (
-  <InfoTooltip
-    position="right"
-    contentText={text(
-      'right',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
-    )}
-  />
-);
+export const Right = (args) => <InfoTooltip {...args} />;
+Right.args = {
+  position: 'right',
+  contentText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
+};