DIG-23586 Adding transitions when toggling the show-tooltip-icon

Also refactored code for readability
SpareBank1 · May 18, 2017 · bfc3fcb · bfc3fcb
1 parent b4f3160
commit bfc3fcb
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ import RadioButton from 'ffe-radio-button-react';
              name={ string }
              inline={ boolean }
              checked={ boolean }
+             tooltip={ string }
              onChange={ function }
 />
 ```
@@ -37,6 +38,14 @@ If you want to have a more complex label, you can use `children`:
 </RadioButton>
 ```
 
+You can also add a helping text by using the tooltip property:
+```javascript
+<RadioButton label="This is not the complete truth"
+             tooltip="The complete truth is..."
+/>
+```
+When the `tooltip` is truthy the `inline` capabilities will be ignored as the tooltip icon will be added to the end of the line.
+
 ### `<RadioButtonGroup />`
 
 However, the `RadioButton` becomes a bit more useful when combined with the

diff --git a/package.json b/package.json
@@ -30,9 +30,7 @@
     "mocha": "^2.4.5",
     "mocha-tap13": "0.0.3",
     "nsp": "^2.2.0",
-    "react": "^15.0.1",
     "react-addons-test-utils": "^15.0.1",
-    "react-dom": "^15.0.1",
     "sinon": "^1.17.3"
   },
   "publishConfig": {
@@ -48,10 +46,13 @@
       "es2015"
     ],
     "plugins": [
-        "transform-object-rest-spread"
+      "transform-object-rest-spread"
     ]
   },
   "dependencies": {
-    "nfe-hash": "^1.1.0"
+    "classnames": "^2.2.5",
+    "nfe-hash": "^1.1.0",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1"
   }
 }
diff --git a/src/radio-base.jsx b/src/radio-base.jsx
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import hash from 'nfe-hash';
+import classnames from 'classnames';
 
 const inlineStyles = {
     display: 'inline-block'
@@ -34,55 +35,57 @@ class RadioBase extends Component {
             ...rest
         } = this.props;
 
-        let styles = style;
-        if (inline) {
-            styles = Object.assign({}, inlineStyles, style);
-        }
-        let labelClassNames = labelClasses;
-        if (tooltip) {
-            labelClassNames = `${labelClasses} ffe-radio-button--with-tooltip`;
-        }
-
         const domId = id || createId({ name, value, label, inline });
 
-        const radioButton = (
-            <div style={ styles }>
-                <input
-                    type="radio"
-                    className="ffe-radio-input"
-                    name={ name }
-                    value={ value }
-                    id={ domId }
-                    {...rest}
-                />
-                <label className={ labelClassNames } htmlFor={ domId }>
-                    { label || children }
-                </label>
-                { tooltip &&
-                <div className="ffe-radio-button__tooltip-icon">
-                    <button
-                        className="ffe-tooltip__icon"
-                        onClick={ this.onClick }
+        return (
+            <div style={ inline ? { ...inlineStyles, ...style } : style }>
+                <div>
+                    <input
+                        type="radio"
+                        className="ffe-radio-input"
+                        name={ name }
+                        value={ value }
+                        id={ domId }
+                        {...rest}
+                    />
+                    <label
+                        className={ classnames(
+                            labelClasses,
+                            { 'ffe-radio-button--with-tooltip': tooltip }) }
+                        htmlFor={ domId }
                     >
-                        ?
-                    </button>
+                        { label || children }
+                    </label>
+                    { tooltip &&
+                        <div className="ffe-radio-button__tooltip-icon">
+                            <button
+                                className={ classnames(
+                                    'ffe-tooltip__icon',
+                                    { 'ffe-tooltip__icon--active': !this.state.closed }
+                                ) }
+                                onClick={ this.onClick }
+                            >
+                                ?
+                            </button>
+                        </div>
+                    }
                 </div>
+                { tooltip &&
+                    <p
+                        ref={ input => {
+                            this.tooltipText = input;
+                        }}
+                        style={{maxHeight: this.state.closed ? '0' : this.tooltipText.scrollHeight}}
+                        className={ classnames(
+                            'ffe-tooltip__text',
+                            'ffe-radio-button__tooltip-text',
+                            {'ffe-tooltip__text--active': !this.state.closed }) }
+                    >
+                        {tooltip}
+                    </p>
                 }
             </div>
         );
-
-        if (tooltip) {
-            return (
-                <div>
-                    { radioButton }
-                    { !this.state.closed &&
-                    <p className="ffe-radio-button__tooltip-text">{tooltip}</p>
-                    }
-                </div>
-            );
-        }
-        return radioButton;
-
     }
 }