Merged in os-75-info-tooltip (pull request #73)

os-75 InfoTooltip

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="No staff member is assigned to this department." />
+            )
         }
 	],
 

client/src/core-components/info-tooltip.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import i18n from 'lib-app/i18n';
+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() {
+        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() {
+        let message = (this.props.type === 'default') ? i18n('INFO') : i18n('WARNING');
+        return (
+            <div className="info-tooltip__text">
+                <div className="info-tooltip__text-title">
+                    {message}
+                </div>
+                {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,26 @@
+@import "../scss/vars";
+
+.info-tooltip {
+    &__text {
+        &-title {
+            color: $secondary-blue;
+            font-size: $font-size--md;
+        }
+    }
+
+    &__icon {
+        color: $secondary-blue;
+    }
+
+    &_warning {
+        .info-tooltip__icon {
+            color: $primary-red;
+        }
+
+        .info-tooltip__text {
+            &-title {
+                color: $primary-red;
+            }
+        }
+    }
+}

client/src/data/languages/en.js

@@ -72,6 +72,8 @@ export default {
     'UN_ASSIGN': 'Unassign',
     'VIEW_TICKET': 'View Ticket',
     'SELECT_CUSTOM_RESPONSE': 'Select a custom response...',
+    'WARNING': 'Warning',
+    'INFO': 'Information',
 
     //VIEW DESCRIPTIONS
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',