Max - create info tooltip WIP [skip ci]

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;
+export default DemoPage;

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;

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