diff --git a/src/app/demo/components-demo-page.js b/src/app/demo/components-demo-page.js index e89885d5..3d6aa265 100644 --- a/src/app/demo/components-demo-page.js +++ b/src/app/demo/components-demo-page.js @@ -4,8 +4,9 @@ import React from 'react/addons'; import {Link} from 'react-router'; import DocumentTitle from 'react-document-title'; -import Button from 'core-components/button.js'; -import Widget from 'core-components/widget.js'; +import Button from 'core-components/button'; +import Input from 'core-components/input'; +import Widget from 'core-components/widget'; var DemoPage = React.createClass({ @@ -29,7 +30,13 @@ var DemoPage = React.createClass({ ) - } + }, + { + title: 'Input', + render: ( + + ) + } ], render() { diff --git a/src/core-components/input.js b/src/core-components/input.js index 25011a2b..caaf2a7f 100644 --- a/src/core-components/input.js +++ b/src/core-components/input.js @@ -1,4 +1,6 @@ -import React from 'react'; +import React from 'react'; +import classNames from 'classnames'; +import _ from 'lodash'; var Input = React.createClass({ @@ -8,12 +10,6 @@ var Input = React.createClass({ onChange: React.PropTypes.func }, - getDefaultProps() { - return { - value: '' - }; - }, - render() { return ( @@ -21,7 +17,22 @@ var Input = React.createClass({ }, getProps() { - return this.props; + var props = _.clone(this.props); + + props.className = this.getClass(); + props.type = 'text'; + + return props; + }, + + getClass() { + var classes = { + 'input': true + }; + + classes[this.props.className] = (this.props.className); + + return classNames(classes); } }); diff --git a/src/core-components/input.scss b/src/core-components/input.scss new file mode 100644 index 00000000..8a008948 --- /dev/null +++ b/src/core-components/input.scss @@ -0,0 +1,11 @@ +@import "../scss/vars"; + +.input { + border: 1px solid $grey; + border-radius: 3px; + padding: 8px; + + &:hover { + border-color: $dark-grey; + } +} \ No newline at end of file