From 6192e542a57c953d44249c706b97086e2594379f Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Tue, 28 Aug 2018 14:31:33 +0800
Subject: [PATCH 1/2] Implemented ability to add help tooltip to the TextInput
 next to label and next to read-only value.

---
 components/Formsy/TextInput.jsx   | 46 +++++++++++++++++++++++++++----
 components/Formsy/TextInput.scss  | 17 ++++++++++++
 components/HelpIcon/HelpIcon.jsx  | 40 +++++++++++++++++++++++++++
 components/HelpIcon/HelpIcon.scss | 16 +++++++++++
 components/Icons/round-e-help.svg |  1 +
 5 files changed, 114 insertions(+), 6 deletions(-)
 create mode 100644 components/Formsy/TextInput.scss
 create mode 100644 components/HelpIcon/HelpIcon.jsx
 create mode 100644 components/HelpIcon/HelpIcon.scss
 create mode 100644 components/Icons/round-e-help.svg

diff --git a/components/Formsy/TextInput.jsx b/components/Formsy/TextInput.jsx
index 64ed864a5..775a7749c 100644
--- a/components/Formsy/TextInput.jsx
+++ b/components/Formsy/TextInput.jsx
@@ -1,7 +1,12 @@
 import React, { Component } from 'react'
+import PT from 'prop-types'
 import { HOC as hoc } from 'formsy-react'
 import classNames from 'classnames'
 
+import HelpIcon from '../HelpIcon/HelpIcon'
+
+import styles from './TextInput.scss'
+
 class TextInput extends Component {
 
   constructor(props) {
@@ -16,16 +21,20 @@ class TextInput extends Component {
   }
 
   render() {
-    const { label, name, type, minValue, maxValue, placeholder, wrapperClass, maxLength, theme } = this.props
+    const { label, name, type, minValue, maxValue, placeholder, wrapperClass, maxLength, theme,
+      labelHelpTooltip, readonly, readonlyValueTooltip } = this.props
     const hasError = !this.props.isPristine() && !this.props.isValid()
-    const wrapperClasses = classNames(wrapperClass, theme)
-    const classes = classNames('tc-file-field__inputs', {error: hasError}, {empty: this.props.getValue() === ''})
     const disabled = this.props.isFormDisabled() || this.props.disabled
+    const wrapperClasses = classNames(wrapperClass, theme, { [styles['readonly-wrapper']]: readonly })
+    const classes = classNames('tc-file-field__inputs', {error: hasError}, {empty: this.props.getValue() === ''})
     const errorMessage = this.props.getErrorMessage() || this.props.validationError
 
     return (
       <div className={wrapperClasses}>
-        <label className="tc-label">{label}</label>
+        <label className="tc-label">
+          {label}
+          {labelHelpTooltip && <HelpIcon tooltip={labelHelpTooltip} />}
+        </label>
         <input
           name={name}
           className={classes}
@@ -38,14 +47,39 @@ class TextInput extends Component {
           min={minValue}
           max={maxValue}
         />
-      { hasError ? (<p className="error-message">{errorMessage}</p>) : null}
+        {readonly && (
+          <div styleName="readonly-value">
+            {this.props.getValue()}
+            {readonlyValueTooltip && <HelpIcon tooltip={readonlyValueTooltip} />}
+          </div>
+        )}
+        { hasError ? (<p className="error-message">{errorMessage}</p>) : null}
       </div>
     )
   }
 }
 
 TextInput.defaultProps = {
-  onChange: () => {}
+  onChange: () => {},
+}
+
+TextInput.propTypes = {
+  /**
+   * The difference from `disabled` is that instead of showing disabled input
+   * we show value using <div> which let us position something immediately after the value
+   */
+  readonly: PT.bool,
+
+  /**
+   * Show help icon next to the label with the tooltip defined by this prop
+   */
+  labelHelpTooltip: PT.node,
+
+  /**
+   * Show help icon next to the value with the tooltip defined by this prop
+   * This only has any effect if `readonly` is set to `true`
+   */
+  readonlyValueTooltip: PT.node,
 }
 
 export default hoc(TextInput)
diff --git a/components/Formsy/TextInput.scss b/components/Formsy/TextInput.scss
new file mode 100644
index 000000000..4e21c403e
--- /dev/null
+++ b/components/Formsy/TextInput.scss
@@ -0,0 +1,17 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.readonly-wrapper {
+  :global(input.tc-file-field__inputs) {
+    display: none;
+  }
+}
+
+.readonly-value {
+  color: $tc-gray-60;
+  display: block;
+  height: 40px;
+  line-height: 40px;
+  margin-bottom: 2 * $base-unit;
+  padding: 0 2 * $base-unit;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/components/HelpIcon/HelpIcon.jsx b/components/HelpIcon/HelpIcon.jsx
new file mode 100644
index 000000000..5d5394f78
--- /dev/null
+++ b/components/HelpIcon/HelpIcon.jsx
@@ -0,0 +1,40 @@
+/**
+ * Help icon with tooltip
+ */
+import React from 'react'
+import _ from 'lodash'
+import PT from 'prop-types'
+import cn from 'classnames'
+
+import HelpIconSvg from '../icons/round-e-help.svg'
+import Tooltip from '../Tooltip/Tooltip'
+
+import styles from './HelpIcon.scss'
+
+const HELP_TOOLTIP_SHOW_DELAY = 300
+
+const HelpIcon = ({
+  className,
+  showTooltipDelay,
+  tooltip,
+}) => {
+  const delay = !_.isNumber(showTooltipDelay) ? showTooltipDelay : HELP_TOOLTIP_SHOW_DELAY
+
+  return (
+    <Tooltip
+      theme={cn('light', styles['label-help-icon'], className)}
+      tooltipDelay={delay}
+    >
+      <div className="tooltip-target"><HelpIconSvg /></div>
+      <div className="tooltip-body">{tooltip}</div>
+    </Tooltip>
+  )
+}
+
+HelpIcon.propTypes = {
+  className: PT.string,
+  showTooltipDelay: PT.number,
+  tooltip: PT.node,
+}
+
+export default HelpIcon
\ No newline at end of file
diff --git a/components/HelpIcon/HelpIcon.scss b/components/HelpIcon/HelpIcon.scss
new file mode 100644
index 000000000..0eb45a69b
--- /dev/null
+++ b/components/HelpIcon/HelpIcon.scss
@@ -0,0 +1,16 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.label-help-icon {
+  display: inline-block;
+  line-height: normal;
+  margin-left: $base-unit;
+  position: relative;
+  top: 3px;
+  text-transform: none;
+
+  svg {
+    g {
+      fill: $tc-gray-50;
+    }
+  }
+}
\ No newline at end of file
diff --git a/components/Icons/round-e-help.svg b/components/Icons/round-e-help.svg
new file mode 100644
index 000000000..27c35df4c
--- /dev/null
+++ b/components/Icons/round-e-help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g class="nc-icon-wrapper" fill="#111111"><path fill="#111111" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6 S11.3,14,8,14z"></path> <circle data-color="color-2" cx="8" cy="12" r="1"></circle> <path data-color="color-2" d="M7.1,5.5C7.3,5.2,7.6,5,8,5c0.6,0,1,0.4,1,1c0,0.3-0.1,0.4-0.6,0.7C7.8,7.1,7,7.7,7,9v1h2V9 c0-0.2,0-0.3,0.5-0.6C10.1,8,11,7.4,11,6c0-1.7-1.3-3-3-3C6.9,3,5.9,3.6,5.4,4.5L4.9,5.4l1.7,1L7.1,5.5z"></path></g></svg>
\ No newline at end of file

From 799f68eed76efb1034444af8957a116c214d5a25 Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Tue, 28 Aug 2018 14:40:22 +0800
Subject: [PATCH 2/2] fix lint

---
 components/Formsy/TextInput.jsx  | 4 ++--
 components/HelpIcon/HelpIcon.jsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Formsy/TextInput.jsx b/components/Formsy/TextInput.jsx
index 775a7749c..3abc198b3 100644
--- a/components/Formsy/TextInput.jsx
+++ b/components/Formsy/TextInput.jsx
@@ -60,7 +60,7 @@ class TextInput extends Component {
 }
 
 TextInput.defaultProps = {
-  onChange: () => {},
+  onChange: () => {}
 }
 
 TextInput.propTypes = {
@@ -79,7 +79,7 @@ TextInput.propTypes = {
    * Show help icon next to the value with the tooltip defined by this prop
    * This only has any effect if `readonly` is set to `true`
    */
-  readonlyValueTooltip: PT.node,
+  readonlyValueTooltip: PT.node
 }
 
 export default hoc(TextInput)
diff --git a/components/HelpIcon/HelpIcon.jsx b/components/HelpIcon/HelpIcon.jsx
index 5d5394f78..633e0cbc4 100644
--- a/components/HelpIcon/HelpIcon.jsx
+++ b/components/HelpIcon/HelpIcon.jsx
@@ -16,7 +16,7 @@ const HELP_TOOLTIP_SHOW_DELAY = 300
 const HelpIcon = ({
   className,
   showTooltipDelay,
-  tooltip,
+  tooltip
 }) => {
   const delay = !_.isNumber(showTooltipDelay) ? showTooltipDelay : HELP_TOOLTIP_SHOW_DELAY
 
@@ -34,7 +34,7 @@ const HelpIcon = ({
 HelpIcon.propTypes = {
   className: PT.string,
   showTooltipDelay: PT.number,
-  tooltip: PT.node,
+  tooltip: PT.node
 }
 
 export default HelpIcon
\ No newline at end of file