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