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

@@ -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';

ui/app/components/ui/info-tooltip/index.js

@@ -0,0 +1 @@
+export { default } from './info-tooltip'

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;
+  }
+}

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']),
+}

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.')}
+  />
+)

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>