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