gistfile1.txt

/*
RADIO
*/

.radio p {
  user-select: none;
}

.radio p:first-child {
  font-weight: 600;
  /* line-height: 4rem; */
  margin-bottom: 2rem;
}

.radio p:nth-child(2) {
  font-weight: 400;
  color: #b3b3b3;
}

.radio div {
  display: flex;
  flex-direction: column;
  margin-left: 6rem;
  flex: 1;
}

.radio input[type='radio'] {
  display: none;
}

.radio label:before {
  content: '';
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
}

.radio.isNotChecked label:before {
  border: 2px solid white;
  background-color: transparent;
}

.radio.isChecked label:before {
  background-color: #4330FC;
  border: 2px solid #4330FC;
}

.radio label {
  width: 6rem;
  height: 6rem;
  margin:0;
  border-radius: 999px;
  position: relative;
}

.radio label:hover {
  cursor: pointer;
}

.radio label input[type='radio']+span {
  border-radius: 999px;
  width: 8px;
  height: 8px;
  display: block;
  transform: translate(2.5rem, 2.5rem);
  background-color: none;
}

.radio label input[type='radio']:checked+span {
  background-color: #fff;
}




import React, { Component } from 'react'
import PropTypes from 'prop-types'


class RadioGroup extends Component {
  getChildContext() {
    const { name, selectedValue, onChange } = this.props
    return {
      radioGroup: {
        name, selectedValue, onChange
      }
    }
  }

  render() {
    const {OuterTag, name, selectedValue, onChange, children, ...rest} = this.props
    return <OuterTag role='radiogroup' {...rest}>{children}</OuterTag>
  }
}

RadioGroup.childContextTypes = {
  radioGroup: PropTypes.object
}

RadioGroup.defaultProps = {
  OuterTag: 'div'
}

RadioGroup.propTypes = {
  name: PropTypes.string,
  selectedValue: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool,
  ]),
  onChange: PropTypes.func,
  children: PropTypes.node.isRequired,
  OuterTag: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
    PropTypes.object,
  ])
}

RadioGroup.childContextTypes = {
  radioGroup: PropTypes.object
}

class Radio extends Component {
  render() {
    const { value, subtitle, title } = this.props
    const {name, selectedValue, onChange} = this.context.radioGroup
    const optional = {}

    if (selectedValue !== undefined) {
      optional.checked = (value === selectedValue)
    }

    if (typeof onChange === 'function') {
      optional.onChange = onChange.bind(null, value)
    }

    const classes = optional.checked ? 'isChecked' : 'isNotChecked'

    return (
      <div className={`radio flex mt-8 ${classes}`}>
        <label>
          <input
            { ...this.props }
            role='radio'
            aria-checked={ optional.checked }
            type='radio'
            name={name}
            {...optional} />
          <span/>
        </label>
        <div>
          <p>{title}</p>
          <p>{subtitle}</p>
        </div>
      </div>


    )
  }
}

Radio.contextTypes = {
  radioGroup: PropTypes.object
}



export {
  Radio,
  RadioGroup,
}