[Ivan Diaz] - Add Checkbox component and update form component

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

@@ -6,6 +6,7 @@ import DocumentTitle from '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';
 
 var DemoPage = React.createClass({
@@ -33,6 +34,12 @@ var DemoPage = React.createClass({
                 <Input placeholder="placeholder" label="This is a label" />
             )
         },
+        {
+            title: 'Checkbox',
+            render: (
+                <Checkbox label="Remember me" />
+            )
+        },
         {
             title: 'Widget',
             render: (

src/app/main/main-home/main-home-page-login-widget.js

@@ -7,6 +7,7 @@ import UserStore          from 'stores/user-store';
 import Button             from 'core-components/button';
 import Form               from 'core-components/form';
 import Input              from 'core-components/input';
+import Checkbox           from 'core-components/checkbox';
 import Widget             from 'core-components/widget';
 import WidgetTransition   from 'core-components/widget-transition';
 
@@ -34,6 +35,7 @@ var MainHomePageLoginWidget = React.createClass({
                     <div className="login-widget--inputs">
                         <Input placeholder="email" name="email" className="login-widget--input"/>
                         <Input placeholder="password" name="password" className="login-widget--input" password/>
+                        <Checkbox name="remember" label="Remember Me" className="login-widget--input"/>
                     </div>
                     <Button type="primary">LOG IN</Button>
                 </Form>
@@ -61,7 +63,8 @@ var MainHomePageLoginWidget = React.createClass({
     },
 
     handleLoginFormSubmit(formState) {
-        UserActions.login(formState.email, formState.password);
+        console.log(formState);
+        UserActions.login(formState);
     },
 
     handleForgetPasswordClick() {

src/app/main/main-home/main-home-page-login-widget.scss

@@ -12,6 +12,7 @@
     &--inputs {
         display: inline-block;
         margin: 0 auto 20px;
+        text-align: left;
     }
 
     &--forgot-password {

src/core-components/checkbox.js

@@ -0,0 +1,98 @@
+import React              from 'react';
+import classNames         from 'classnames';
+import _                  from 'lodash';
+
+import callback           from 'lib/callback';
+import getIcon            from 'lib/get-icon';
+
+var CheckBox = React.createClass({
+
+    propTypes: {
+        alignment: React.PropTypes.string,
+        label: React.PropTypes.string,
+        value: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            alignment: 'right'
+        };
+    },
+
+    getInitialState() {
+        return {
+            checked: false
+        };
+    },
+
+    render() {
+        return (
+            <label className={this.getClass()}>
+                <span {...this.getIconProps()}>
+                    {getIcon((this.getValue()) ? 'check-square' : 'square', 'lg') }
+                </span>
+                <span className="checkbox--label">{this.props.label}</span>
+                <input {...this.getProps()}/>
+            </label>
+        );
+    },
+
+    getProps() {
+        var props = _.clone(this.props);
+
+        props.type = 'checkbox';
+
+        props['aria-hidden'] = true;
+        props.className = 'checkbox--box';
+        props.checked = this.getValue();
+        props.onChange = callback(this.handleChange, this.props.onChange);
+        props.value = null;
+
+        return props;
+    },
+
+    getClass() {
+        var classes = {
+            'checkbox': true,
+            'checkbox_checked': this.state.checked,
+
+            [this.props.className]: (this.props.className)
+        };
+
+        return classNames(classes);
+    },
+
+    getIconProps() {
+        return {
+            'aria-checked': this.getValue(),
+            className: 'checkbox--icon',
+            onKeyDown: callback(this.handleIconKeyDown, this.props.onKeyDown),
+            role: "checkbox",
+            tabIndex: 0
+        };
+    },
+
+    getValue() {
+        return (this.props.value === undefined) ? this.state.checked : this.props.value;
+    },
+
+    handleChange: function (event) {
+        this.setState({
+            checked: event.target.checked
+        });
+    },
+
+    handleIconKeyDown: function (event) {
+        if (event.keyCode == 32) {
+            event.preventDefault();
+
+            callback(this.handleChange, this.props.onChange)({
+                target: {
+                    checked: !this.state.checked
+                }
+            });
+        }
+    }
+});
+
+export default CheckBox;

src/core-components/checkbox.scss

@@ -0,0 +1,32 @@
+@import "../scss/vars";
+
+.checkbox {
+    color: $primary-black;
+    border-radius: 5px;
+    display: inline-block;
+
+    &--box {
+        display: none;
+    }
+
+    &--icon {
+        color: $light-grey;
+        outline: none;
+
+        &:focus {
+            color: $grey;
+        }
+    }
+
+    &--label {
+        margin-left: 10px;
+        font-size: 14px;
+        user-select: none;
+    }
+
+    &_checked {
+        .checkbox--icon {
+            color: $primary-red;
+        }
+    }
+}

src/core-components/form.js

@@ -1,9 +1,11 @@
 import React              from 'react/addons';
 import _                  from 'lodash';
 
-import Input              from 'core-components/input';
 import {reactDFS, renderChildrenWithProps}  from 'lib/react-dfs';
 
+import Input              from 'core-components/input';
+import Checkbox           from 'core-components/checkbox';
+
 var Form = React.createClass({
 
     validations: {},
@@ -19,7 +21,10 @@ var Form = React.createClass({
 
         reactDFS(this.props.children, (child) => {
             if (child.type === Input) {
-                formState[child.props.name] = child.props.value;
+                formState[child.props.name] = child.props.value || '';
+            }
+            else if (child.type === Checkbox) {
+                formState[child.props.name] = child.props.checked || false;
             }
         });
 
@@ -47,13 +52,13 @@ var Form = React.createClass({
     getInputProps({props, type}) {
         var additionalProps = {};
 
-        if(type === Input) {
+        if (type === Input || type === Checkbox) {
             let inputName = props.name;
 
             this.validations[inputName] = props.validation;
 
             additionalProps = {
-                onChange: this.handleInputChange.bind(this, inputName),
+                onChange: this.handleInputChange.bind(this, inputName, type),
                 value: this.state.form[inputName] || props.value
             }
         }
@@ -69,11 +74,15 @@ var Form = React.createClass({
         }
     },
 
-    handleInputChange(inputName, event) {
+    handleInputChange(inputName, type, event) {
         var form = _.clone(this.state.form);
 
         form[inputName] = event.target.value;
 
+        if (type === Checkbox) {
+            form[inputName] = event.target.checked || false;
+        }
+
         this.setState({
             form: form
         });

src/lib/get-icon.js

@@ -0,0 +1,14 @@
+import React   from 'react';
+import _       from 'lodash';
+
+export default function () {
+    var className = 'fa';
+
+    _.each(arguments, (arg) => {
+        className += ' fa-' + arg;
+    });
+
+    return (
+        <i className={className} />
+    );
+};

src/stores/user-store.js

@@ -13,8 +13,8 @@ var UserStore = Reflux.createStore({
 		this.listenTo(UserActions.logout, this.logoutUser);
 	},
 
-    loginUser(email, password) {
+    loginUser({email, password, remember}) {
-        console.log(email + ':' + password);
+        console.log(`${email}:${password} (${remember})`);
 	}
 });