c-form-radio-1.0.0

c-form-radio-1-0-0.markdown

c-form-radio-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 FormRadio extends React.Component {
  static propTypes = {
    error: React.PropTypes.string,
    hint: React.PropTypes.string,
    name: React.PropTypes.string.isRequired,
    options: React.PropTypes.arrayOf(React.PropTypes.shape({
      icon: React.PropTypes.string,
      label: React.PropTypes.string.isRequired,
      value: React.PropTypes.string.isRequired
    })).isRequired,
    value: React.PropTypes.string.isRequired
  };

  constructor (props) {
    super(props);
    this.state = {
      value: props.value
    };
  }

  handleChange (value) {
    return () => {
      this.setState({value});
    };
  }

  render () {
    const {
      error,
      hint,
      icon,
      name,
      options
    } = this.props;
    const {value} = this.state;
    const message = error || hint;
    const className = classNames({
      'c-form-radio': true,
      'c-form-radio--error': !!error
    });
    return (
      <div {...{className}}>
        <div className="o-layout">
          {options.map((field, key) => (
            <div
                className={`c-form-radio__item o-layout__item u-1/${options.length}@tablet`}
                {...{key}}
            >
              <input
                  className="c-form-radio__field u-hidden-visually"
                  checked={value === field.value}
                  id={`${name}-${key}`}
                  onChange={this.handleChange(field.value)}
                  type="radio"
                  value={field.value}
                  {...{name}}
              />
              <label
                  className="c-form-radio__label"
                  htmlFor={`${name}-${key}`}
              >
                {field.icon && (<img src={field.icon} />)}
                {field.label}
              </label>
            </div>
          ))}
          <div className="o-layout__item u-1/1">
            <div className="c-form-radio__hint">{message}</div>
          </div>
        </div>
      </div>
    );
  }
}

style.scss

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

.c-form-radio__label {
  border-radius: $box-radius;
  border: solid 1px $border-color;
  color: $text-muted-color;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  padding: $inuit-global-spacing-unit-tiny;
  width: 100%;

  > img {
    height: 18px;
    margin-right: $inuit-global-spacing-unit-tiny;
    margin-top: round($inuit-global-spacing-unit-tiny * 0.5) * -1;
  }
}

.c-form-radio__item {
  text-align: center;
}

.c-form-radio__field:checked + label {
  border-color: $brand-primary;
  color: $brand-primary;
}

.c-form-radio--error {
  .c-form-radio__hint {
    color: $brand-danger;
  }
}

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

styles

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