Merge pull request #292 from maxceem/feature/text-input-help-tooltip

Implemented ability to add help tooltip to the TextInput next to label and next to read-only value.

Author: vikasrohit

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,7 +47,13 @@ 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>
     )
   }
@@ -48,4 +63,23 @@ TextInput.defaultProps = {
   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)

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

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

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