[Ivan Diaz] - Add secondary menu, $secondary-blue variable, refactor Icon component, update demo page [skip ci]

client/src/app/demo/components-demo-page.js

@@ -1,16 +1,23 @@
 'use strict';
 
-import React         from 'react';
-import {Link}        from 'react-router';
-import DocumentTitle from 'react-document-title';
+const React = require('react');
+const DocumentTitle = require('react-document-title');
 
-import Button           from 'core-components/button';
-import Input            from 'core-components/input';
-import Checkbox         from 'core-components/checkbox';
-import Widget           from 'core-components/widget';
-import DropDown         from 'core-components/drop-down';
+const Button = require('core-components/button');
+const Input = require('core-components/input');
+const Checkbox = require('core-components/checkbox');
+const Widget = require('core-components/widget');
+const DropDown = require('core-components/drop-down');
+const Menu = require('core-components/menu');
 
 let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
+let secondaryMenuItems = [
+    {content: 'My Tickets', icon: 'file-text'},
+    {content: 'New Ticket', icon: 'plus'},
+    {content: 'Articles', icon: 'book'},
+    {content: 'Edit Profile', icon: 'pencil'},
+    {content: 'Close Session', icon: 'lock'}
+];
 
 let DemoPage = React.createClass({
 
@@ -58,13 +65,25 @@ let DemoPage = React.createClass({
             render: (
                 <DropDown items={dropDownItems} onChange={function (index) { console.log('changed to ' + index); }} />
             )
+        },
+        {
+            title: 'Primary Menu',
+            render: (
+                <Menu items={dropDownItems} />
+            )
+        },
+        {
+            title: 'Secondary Menu',
+            render: (
+                <Menu items={secondaryMenuItems} type="secondary"/>
+            )
         }
 	],
 
 	render() {
 		return (
 			<DocumentTitle title="Demo Page">
-				<section className="home-page">
+				<section className="demo-page">
 					{this.renderElements()}
 				</section>
 			</DocumentTitle>
@@ -74,7 +93,7 @@ let DemoPage = React.createClass({
 	renderElements: function () {
 		return this.elements.map((element) => {
 			return (
-				<div className="demo-element">
+				<div className="demo-element col-md-3">
 					<h4>
 					{element.title}
 					</h4>

client/src/core-components/icon.js

@@ -1,17 +1,45 @@
-import React from 'react';
+const React = require('react');
+const classNames = require('classnames');
 
-let Icon = React.createClass({
+const Icon = React.createClass({
 
     propTypes: {
-        name: React.PropTypes.string.isRequired
+        name: React.PropTypes.string.isRequired,
+        size: React.PropTypes.number
+    },
+
+    getDefaultProps() {
+        return {
+            size: 0
+        };
     },
 
     render() {
-        return (
-            <img className={this.props.className} src={`../images/icons/${this.props.name}.png`} />
-        );
-    }
+        return (this.props.name.length > 2) ? this.renderFontIcon() : this.renderFlag();
+    },
 
+    renderFontIcon() {
+        return (
+            <span className={this.getFontIconClass()} aria-hidden="true" />
+        );
+    },
+
+    renderFlag() {
+        return (
+            <img className={this.props.className} src={`../images/icons/${this.props.name}.png`} aria-hidden="true" />
+        );
+    },
+
+    getFontIconClass() {
+        let classes = {
+            'fa': true,
+            ['fa-' + this.props.name]: true,
+            ['fa-' + this.props.size]: true,
+            [this.props.className]: true
+        };
+
+        return classNames(classes);
+    }
 });
 
 export default Icon;

client/src/core-components/menu.scss

@@ -6,6 +6,7 @@
     margin: 0;
     padding: 0;
     list-style-type: none;
+    cursor: pointer;
 
     &--list-item {
         padding: 8px;
@@ -20,4 +21,10 @@
         margin-right: 8px;
         margin-bottom: 2px;
     }
+
+    &_secondary {
+        .menu--list-item:hover {
+            background-color: $secondary-blue;
+        }
+    }
 }

client/src/main.scss

@@ -5,4 +5,4 @@
 @import 'scss/font_awesome/font-awesome';
 
 @import 'core-components/*';
-@import 'app/main/*';
+@import 'app/*';

client/src/scss/_vars.scss

@@ -3,6 +3,7 @@ $primary-red: #DD5555;
 $secondary-red: #FB6362;
 
 $primary-blue: #414A59;
+$secondary-blue: #20B8c5;
 
 $light-grey: #EEEEEE;
 $grey: #E7E7E7;