From af29c62d821fce38640debd6141f2bdaac3e4d60 Mon Sep 17 00:00:00 2001
From: Max Red <maxiredigonda@gmail.com>
Date: Fri, 28 Oct 2016 19:21:55 -0300
Subject: [PATCH] Max - create info tooltip WIP [skip ci]

---
 client/src/app/demo/components-demo-page.js  |  9 +++-
 client/src/core-components/info-tooltip.js   | 51 ++++++++++++++++++++
 client/src/core-components/info-tooltip.scss | 17 +++++++
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 client/src/core-components/info-tooltip.js
 create mode 100644 client/src/core-components/info-tooltip.scss

diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index 1d5da38f..70a2c2ba 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/client/src/app/demo/components-demo-page.js
@@ -15,6 +15,7 @@ const DropDown = require('core-components/drop-down');
 const Menu = require('core-components/menu');
 const Tooltip = require('core-components/tooltip');
 const Table = require('core-components/table');
+const InfoTooltip = require('core-components/info-tooltip');
 
 let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
 let secondaryMenuItems = [
@@ -168,6 +169,12 @@ let DemoPage = React.createClass({
                     return ans;
                 }}/>
             )
+        },
+        {
+            title: 'InfoTooltip',
+            render: (
+                <InfoTooltip type="warning" text="Some helping text" />
+            )
         }
 	],
 
@@ -197,4 +204,4 @@ let DemoPage = React.createClass({
 	}
 });
 
-export default DemoPage;
\ No newline at end of file
+export default DemoPage;
diff --git a/client/src/core-components/info-tooltip.js b/client/src/core-components/info-tooltip.js
new file mode 100644
index 00000000..a634ab44
--- /dev/null
+++ b/client/src/core-components/info-tooltip.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import Icon from 'core-components/icon';
+import Tooltip from 'core-components/tooltip';
+
+class InfoTooltip extends React.Component {
+    static propTypes = {
+        type: React.PropTypes.oneOf(['default', 'warning']),
+        text: React.PropTypes.string.isRequired
+    };
+
+    static defaultProps = {
+        type: 'default'
+    };
+
+    render() {
+        // exclamation-triangle
+        // question-circle
+        let name = (this.props.type === 'default') ? 'question-circle' : 'exclamation-triangle';
+
+        return (
+            <div className={this.getClass()}>
+                <Tooltip content={this.renderText()} openOnHover>
+                    <span className="info-tooltip__icon">
+                        <Icon name={name}/>
+                    </span>
+                </Tooltip>
+            </div>
+        );
+    }
+
+    renderText() {
+        return (
+            <div className="info-tooltip__text">
+                {this.props.text}
+            </div>
+        );
+    }
+
+    getClass() {
+        let classes = {
+            'info-tooltip': true,
+            'info-tooltip_warning': (this.props.type === 'warning')
+        };
+
+        return classNames(classes);
+    }
+}
+
+export default InfoTooltip;
diff --git a/client/src/core-components/info-tooltip.scss b/client/src/core-components/info-tooltip.scss
new file mode 100644
index 00000000..432b932c
--- /dev/null
+++ b/client/src/core-components/info-tooltip.scss
@@ -0,0 +1,17 @@
+@import "../scss/vars";
+
+.info-tooltip {
+    &__text {
+
+    }
+
+    &__icon {
+        color: $secondary-blue;
+    }
+
+    &_warning {
+        .info-tooltip__icon {
+            color: $primary-red;
+        }
+    }
+}