diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 38a79775..0cf3aee0 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -41,7 +41,7 @@ let DemoPage = React.createClass({ { title: 'Input wrapped in a label', render: ( - + ) }, { diff --git a/client/src/core-components/input.js b/client/src/core-components/input.js index e74afede..ce652a31 100644 --- a/client/src/core-components/input.js +++ b/client/src/core-components/input.js @@ -2,6 +2,8 @@ const React = require('react'); const classNames = require('classnames'); const _ = require('lodash'); +const Icon = require('core-components/icon'); + const Input = React.createClass({ propTypes: { @@ -10,7 +12,8 @@ const Input = React.createClass({ onChange: React.PropTypes.func, inputType: React.PropTypes.string, password: React.PropTypes.bool, - required: React.PropTypes.bool + required: React.PropTypes.bool, + icon: React.PropTypes.string }, getDefaultProps() { @@ -22,12 +25,23 @@ const Input = React.createClass({ render() { return ( ); }, + renderIcon() { + let icon = null; + + if (this.props.icon) { + icon = + } + + return icon; + }, + getInputProps() { let props = _.clone(this.props); @@ -42,6 +56,7 @@ const Input = React.createClass({ getClass() { let classes = { 'input': true, + 'input_with-icon': (this.props.icon), ['input_' + this.props.inputType]: true, [this.props.className]: (this.props.className) diff --git a/client/src/core-components/input.scss b/client/src/core-components/input.scss index 24d5abe8..c952fd45 100644 --- a/client/src/core-components/input.scss +++ b/client/src/core-components/input.scss @@ -3,7 +3,7 @@ .input { display: block; - &--text { + &__text { border: 1px solid $grey; border-radius: 3px; padding: 8px; @@ -19,7 +19,7 @@ } } - &--label { + &__label { color: $primary-black; font-size: 15px; display: block; @@ -34,4 +34,21 @@ &_secondary { width: 250px; } + + &_with-icon { + position: relative; + + .input__icon { + position: absolute; + margin: 1px; + padding: 8px 12px; + background-color: #eee; + } + + .input__text { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + padding-left: 40px; + } + } } \ No newline at end of file