c-form-field-1.0.0

c-form-field-1-0-0.markdown

c-form-field-1.0.0

A Pen by not important on CodePen.

License.

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://fb.me/react-dom-15.0.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>

script.babel

class FormField extends React.Component {
  static propTypes = {
    error: React.PropTypes.string,
    fields: React.PropTypes.arrayOf(React.PropTypes.shape({
      className: React.PropTypes.string,
      name: React.PropTypes.string.isRequired,
      onChange: React.PropTypes.func,
      placeholder: React.PropTypes.string.isRequired,
      type: React.PropTypes.string.isRequired,
      value: React.PropTypes.string
    })).isRequired,
    hint: React.PropTypes.string,
    icon: React.PropTypes.string
  };

  render () {
    const {
      error,
      fields,
      hint,
      icon
    } = this.props;
    const message = error || hint;
    const className = classNames({
      'c-form-field': true,
      'c-form-field--error': !!error
    });
    return (
      <div {...{className}}>
        <div className="o-media">
          <div className="o-media__img c-form-field__img">
            {icon && (<img src={icon} />)}
          </div>
          <div className="o-media__body">
            <div className="c-form-field__control">
              {fields.map((field, index) => (
                <FormFieldInput
                    key={index}
                    width={fields.length}
                    {...field}
                />
              ))}
            </div>
            <div className="c-form-field__hint">{message}</div>
          </div>
        </div>
      </div>
    );
  }
}

class FormFieldInput extends React.Component {
  static propTypes = {
    className: React.PropTypes.string,
    name: React.PropTypes.string.isRequired,
    placeholder: React.PropTypes.string,
    type: React.PropTypes.string.isRequired,
    value: React.PropTypes.string.isRequired,
    width: React.PropTypes.number.isRequired
  };

  render () {
    const {
      name,
      placeholder,
      type,
      value,
      width
    } = this.props;
    const className = classNames({
      'c-form-field__input': true,
      [this.props.className]: true
    });
    return (
      <input
        defaultValue={value}
        {...{className, name, placeholder, type}}
      />
    );
  }
}

style.scss

// begin form field
.c-form-field {
  margin-bottom: 1em;
}

.c-form-field--error {
  .c-form-field__control {
    border-bottom: solid 1px $brand-danger;
  }

  .c-form-field__hint {
    color: $brand-danger;
  }
}

.c-form-field__hint {
  font-weight: 300;
}

.c-form-field__img {
  height: 1.375em; // 22px
  margin-right: 0;
  width: 2.125em; // 34px

  > img {
    margin: 0 auto;
    height: 22px;
  }
}

.c-form-field__control {
  border-bottom: solid 1px $border-color;
}

.c-form-field__input {
  -webkit-backface-visibility: hidden;
  @include inuit-font-size(17px); // refactor, not crazy about this
  border: none;
  color: $text-base-color;
  font-weight: 300;
  padding: 0;
  width: 100%;
}

.c-form-field__hint {
  @include inuit-font-size(12px); // refactor, not crazy about this
  color: $text-muted-color;
  min-height: 2em; // refactor, is this right?
}
// end form field

styles

<link href="http://codepen.io/clindsey/pen/jVMoKL" rel="stylesheet" />
<link href="http://codepen.io/clindsey/pen/XNKwXY" rel="stylesheet" />