From eb653dfb6ed206945e0afd2870d92fc9af148a2f Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 18 Aug 2020 15:45:22 -0230
Subject: [PATCH] New info tooltip component (#9180)

* Add info-tooltip and associated storybook stories

* Allow tooltip-v2 to support react-tippy themes

* Update info-tooltip to use tooltip-v2
---
 ui/app/components/app/index.scss              |  1 +
 ui/app/components/ui/info-tooltip/index.js    |  1 +
 ui/app/components/ui/info-tooltip/index.scss  | 39 +++++++++++++++++++
 .../ui/info-tooltip/info-tooltip.js           | 36 +++++++++++++++++
 .../ui/info-tooltip/info-tooltip.stories.js   | 35 +++++++++++++++++
 ui/app/components/ui/tooltip/tooltip.js       |  4 ++
 6 files changed, 116 insertions(+)
 create mode 100644 ui/app/components/ui/info-tooltip/index.js
 create mode 100644 ui/app/components/ui/info-tooltip/index.scss
 create mode 100644 ui/app/components/ui/info-tooltip/info-tooltip.js
 create mode 100644 ui/app/components/ui/info-tooltip/info-tooltip.stories.js

diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
index d538aa21c..5102d1c98 100644
--- a/ui/app/components/app/index.scss
+++ b/ui/app/components/app/index.scss
@@ -64,3 +64,4 @@
 @import 'wallet-overview/index';
 @import '../ui/account-mismatch-warning/index';
 @import '../ui/icon-border/icon-border';
+@import '../ui/info-tooltip/index';
diff --git a/ui/app/components/ui/info-tooltip/index.js b/ui/app/components/ui/info-tooltip/index.js
new file mode 100644
index 000000000..2fe0f2786
--- /dev/null
+++ b/ui/app/components/ui/info-tooltip/index.js
@@ -0,0 +1 @@
+export { default } from './info-tooltip'
diff --git a/ui/app/components/ui/info-tooltip/index.scss b/ui/app/components/ui/info-tooltip/index.scss
new file mode 100644
index 000000000..a85f041ce
--- /dev/null
+++ b/ui/app/components/ui/info-tooltip/index.scss
@@ -0,0 +1,39 @@
+.info-tooltip {
+  img {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+.tippy-popper[x-placement^=top] .info-theme [x-arrow] {
+  border-top-color: $white;
+}
+
+.tippy-popper[x-placement^=right] .info-theme [x-arrow] {
+  border-right-color: $white;
+}
+
+.tippy-popper[x-placement^=left] .info-theme [x-arrow] {
+  border-left-color: $white;
+}
+
+.tippy-popper[x-placement^=bottom] .info-theme [x-arrow] {
+  border-bottom-color: $white;
+}
+
+.tippy-tooltip.info-theme {
+  background: white;
+  color: black;
+  box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
+  border-radius: 8px;
+  max-width: 203px;
+  padding: 16px;
+  padding-bottom: 15px;
+
+  .tippy-tooltip-content {
+    @include H8;
+
+    text-align: left;
+    color: $Grey-500;
+  }
+}
diff --git a/ui/app/components/ui/info-tooltip/info-tooltip.js b/ui/app/components/ui/info-tooltip/info-tooltip.js
new file mode 100644
index 000000000..aecba58ef
--- /dev/null
+++ b/ui/app/components/ui/info-tooltip/info-tooltip.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Tooltip from '../tooltip'
+
+const positionArrowClassMap = {
+  top: 'info-tooltip__top-tooltip-arrow',
+  bottom: 'info-tooltip__bottom-tooltip-arrow',
+  left: 'info-tooltip__left-tooltip-arrow',
+  right: 'info-tooltip__right-tooltip-arrow',
+}
+
+export default function InfoTooltip ({
+  contentText = '',
+  position = '',
+}) {
+  return (
+    <div className="info-tooltip">
+      <Tooltip
+        interactive
+        position={position}
+        containerClassName="info-tooltip__tooltip-container"
+        tooltipInnerClassName="info-tooltip__tooltip-content"
+        tooltipArrowClassName={positionArrowClassMap[position]}
+        html={contentText}
+        theme="info"
+      >
+        <img src="images/mm-info-icon.svg" />
+      </Tooltip>
+    </div>
+  )
+}
+
+InfoTooltip.propTypes = {
+  contentText: PropTypes.string,
+  position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
+}
diff --git a/ui/app/components/ui/info-tooltip/info-tooltip.stories.js b/ui/app/components/ui/info-tooltip/info-tooltip.stories.js
new file mode 100644
index 000000000..35c1b9fa4
--- /dev/null
+++ b/ui/app/components/ui/info-tooltip/info-tooltip.stories.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import InfoTooltip from './info-tooltip'
+import { text } from '@storybook/addon-knobs/react'
+
+export default {
+  title: 'InfoTooltip',
+}
+
+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 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 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 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.')}
+  />
+)
diff --git a/ui/app/components/ui/tooltip/tooltip.js b/ui/app/components/ui/tooltip/tooltip.js
index 8941aa1fd..e6b5726d4 100644
--- a/ui/app/components/ui/tooltip/tooltip.js
+++ b/ui/app/components/ui/tooltip/tooltip.js
@@ -16,6 +16,7 @@ export default class Tooltip extends PureComponent {
     title: null,
     trigger: 'mouseenter',
     wrapperClassName: undefined,
+    theme: '',
   }
 
   static propTypes = {
@@ -40,6 +41,7 @@ export default class Tooltip extends PureComponent {
     trigger: PropTypes.any,
     wrapperClassName: PropTypes.string,
     style: PropTypes.object,
+    theme: PropTypes.string,
   }
 
   render () {
@@ -58,6 +60,7 @@ export default class Tooltip extends PureComponent {
       offset,
       wrapperClassName,
       style,
+      theme,
     } = this.props
 
     if (!title && !html) {
@@ -84,6 +87,7 @@ export default class Tooltip extends PureComponent {
           style={style}
           title={title}
           trigger={trigger}
+          theme={theme}
         >
           {children}
         </ReactTippy>