Toggle improvements (#17)

* Toggle improvements

* Fix tests

src/components/rounded_toggle.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import PureRenderMixin from 'react-pure-render/mixin';
 
+var roundedToggleOptionType = React.PropTypes.shape({
+  title: React.PropTypes.string,
+  value: React.PropTypes.string
+});
+
 var RoundedToggle = React.createClass({
   mixins: [PureRenderMixin],
   propTypes: {
-    options: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-    active: React.PropTypes.string.isRequired,
+    options: React.PropTypes.arrayOf(roundedToggleOptionType).isRequired,
+    active: roundedToggleOptionType,
+    short: React.PropTypes.bool,
     onChange: React.PropTypes.func.isRequired
   },
   render() {
@@ -13,10 +19,11 @@ var RoundedToggle = React.createClass({
     return (<div className='rounded-toggle inline short'>
       {options.map(option =>
         <RoundedToggleOption
-          key={option}
+          key={option.value}
           option={option}
+          short={this.props.short}
           onClick={this.props.onChange}
-          className={`strong ${option === active ? 'active': ''}`} />)}
+          className={`strong ${option.value === active.value ? 'active': ''}`} />)}
     </div>);
   }
 });
@@ -24,8 +31,9 @@ var RoundedToggle = React.createClass({
 var RoundedToggleOption = React.createClass({
   mixins: [PureRenderMixin],
   propTypes: {
-    option: React.PropTypes.string.isRequired,
+    option: roundedToggleOptionType,
     className: React.PropTypes.string.isRequired,
+    short: React.PropTypes.bool,
     onClick: React.PropTypes.func.isRequired
   },
   onClick() {
@@ -35,7 +43,7 @@ var RoundedToggleOption = React.createClass({
     let { className, option } = this.props;
     return (<a
       onClick={this.onClick}
-      className={className}>{option}</a>);
+      className={className}>{this.props.short ? option.short : option.title}</a>);
   }
 });