Add InputField component

src/components/InputField/InputField.css

@@ -0,0 +1,38 @@
+@import '../../marketplace.css';
+
+.root {
+  margin-top: 20px;
+}
+
+.label {
+  margin-top: 0;
+}
+
+.input {
+  border-color: var(--attentionColor);
+
+  &:hover,
+  &:focus {
+    border-color: var(--matterColor);
+  }
+}
+
+.inputSuccess {
+  border-color: var(--successColor);
+}
+
+.inputError {
+  border-color: var(--failColor);
+}
+
+.validationError {
+  composes: h5Font from '../../marketplace.css';
+
+  margin-top: calc(2 * var(--spacingUnit));
+  color: var(--failColor);
+  overflow: hidden;
+
+  @media (--desktopViewport) {
+    margin-top: calc(2 * var(--spacingUnitDesktop));
+  }
+}

src/components/InputField/InputField.example.js

@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { Button } from '../../components';
+import * as validators from '../../util/validators';
+import InputField from './InputField';
+
+const FormComponent = props => {
+  const { handleSubmit, pristine, submitting } = props;
+  const required = validators.required('Example input error message');
+  const buttonStyles = { marginTop: 16 };
+  const submitDisabled = pristine || submitting;
+  return (
+    <form onSubmit={handleSubmit}>
+      <Field
+        name="exampleInput"
+        type="text"
+        label="Example input label"
+        placeholder="Example input placeholder..."
+        validate={required}
+        component={InputField}
+      />
+      <Button type="submit" disabled={submitDisabled} style={buttonStyles}>Submit form</Button>
+    </form>
+  );
+};
+
+FormComponent.propTypes = formPropTypes;
+
+const defaultFormName = 'Styleguide.InputField';
+
+const Form = reduxForm({
+  form: defaultFormName,
+})(FormComponent);
+
+export const RequiredValueWithLabel = {
+  component: Form,
+  props: {
+    onSubmit: values => {
+      console.log('Submit values:', values);
+    },
+  },
+  group: 'fields',
+};

src/components/InputField/InputField.js

@@ -0,0 +1,96 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+import css from './InputField.css';
+
+class InputField extends Component {
+  componentWillUnmount() {
+    if (this.props.clearOnUnmount) {
+      this.props.input.onChange('');
+    }
+  }
+  render() {
+    const {
+      rootClassName,
+      className,
+      labelRootClassName,
+      inputRootClassName,
+      errorRootClassName,
+      type,
+      label,
+      placeholder,
+      input,
+      meta,
+    } = this.props;
+    const inputProps = { ...input, type, placeholder };
+    const { pristine, valid, invalid, touched, error } = meta;
+
+    // Error message and input error styles are only shown if the
+    // field has been touched and the validation has failed.
+    const hasError = touched && invalid && error;
+
+    // Input is market as succesful if it has been changed and
+    // validation has not failed.
+    const isFilledInAndValid = !pristine && touched && valid;
+
+    const classes = classNames(rootClassName || css.root, className);
+    const labelClasses = labelRootClassName || css.label;
+    const inputClasses = classNames(inputRootClassName || css.input, {
+      [css.inputSuccess]: isFilledInAndValid,
+      [css.inputError]: hasError,
+    });
+    const errorClasses = errorRootClassName || css.validationError;
+
+    return (
+      <div className={classes}>
+        {label ? <label className={labelClasses} htmlFor={inputProps.name}>{label}</label> : null}
+        <input className={inputClasses} {...inputProps} />
+        {hasError ? <p className={errorClasses}>{error}</p> : null}
+      </div>
+    );
+  }
+}
+
+InputField.defaultProps = {
+  rootClassName: null,
+  className: null,
+  labelRootClassName: null,
+  inputRootClassName: null,
+  errorRootClassName: null,
+  clearOnUnmount: false,
+  label: null,
+  placeholder: null,
+};
+
+const { string, shape, bool, func } = PropTypes;
+
+InputField.propTypes = {
+  // Allow passing in classes to subcomponents
+  rootClassName: string,
+  className: string,
+  labelRootClassName: string,
+  inputRootClassName: string,
+  errorRootClassName: string,
+
+  clearOnUnmount: bool,
+
+  // Extra props passed to the underlying input component
+  type: string.isRequired,
+  label: string,
+  placeholder: string,
+
+  // Objects created by redux-form
+  input: shape({
+    name: string.isRequired,
+    onChange: func.isRequired,
+  }).isRequired,
+  meta: shape({
+    pristine: bool.isRequired,
+    valid: bool.isRequired,
+    invalid: bool.isRequired,
+    touched: bool.isRequired,
+    error: string,
+  }).isRequired,
+};
+
+export default InputField;

src/components/index.js

@@ -17,6 +17,7 @@ import ExternalLink from './ExternalLink/ExternalLink';
 import FilterPanel from './FilterPanel/FilterPanel';
 import HeroSection from './HeroSection/HeroSection';
 import Input from './Input/Input';
+import InputField from './InputField/InputField';
 import LabeledField from './LabeledField/LabeledField';
 import ListingCard from './ListingCard/ListingCard';
 import ListingCardSmall from './ListingCardSmall/ListingCardSmall';
@@ -69,6 +70,7 @@ export {
   HeroSection,
   InlineButton,
   Input,
+  InputField,
   LabeledField,
   ListingCard,
   ListingCardSmall,

src/examples.js

@@ -5,6 +5,7 @@ import * as BookingInfo from './components/BookingInfo/BookingInfo.example';
 import * as CurrencyInput from './components/CurrencyInput/CurrencyInput.example';
 import * as DateInput from './components/DateInput/DateInput.example';
 import * as EditListingWizard from './components/EditListingWizard/EditListingWizard.example';
+import * as InputField from './components/InputField/InputField.example';
 import * as ListingCard from './components/ListingCard/ListingCard.example';
 import * as Map from './components/Map/Map.example';
 import * as Menu from './components/Menu/Menu.example';
@@ -58,6 +59,7 @@ export {
   EditListingPhotosForm,
   EditListingPricingForm,
   EditListingWizard,
+  InputField,
   ListingCard,
   LocationAutocompleteInput,
   LoginForm,