[React] radio group (text or input in label tag)

RadioGroup.js

import React from 'react'
import styled from 'styled-components'
import { mixin } from 'styles'

const Wrap = styled.div`
  ${mixin.clearFix()};
  font-size: 14px;

  &:not(:last-child) {
    margin-right: 27px;
  }

  & > input {
    display: none;
    float: left;
  }

  & > input + label {
    float: left;
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-right: 20px;
    min-width: 90px;

    &:before {
      ${mixin.centeredY()};
      left: 0;
      display: block;
      width: 20px;
      height: 20px;
      content: ' ';
      background: url('${
        process.env.REACT_APP_CDN_URL
      }/admin/btn-radio-off.svg') no-repeat center;
      background-size: contain;
    }

    &:hover {
      cursor: pointer;
    }
  }

  & > input:checked + label {
    &:before {
      background-image: url('${
        process.env.REACT_APP_CDN_URL
      }/admin/btn-radio-on.svg');
    }
  }
`

export default function RadioGroup({ children }) {
  return <Wrap>{children}</Wrap>
}

RadioGroup.stories.js

stories.add('RadioGroup', () => {
  return (
    <div>
      <h2>text</h2>
      <RadioGroup>
        <input id="1" type="radio" name="unique" value="1" />
        <label htmlFor="1">라벨1</label>
        <input id="2" type="radio" name="unique" value="1" />
        <label htmlFor="2">라벨2</label>
      </RadioGroup>

      <h2>input</h2>
      <RadioGroup>
        <input id="input1" type="radio" name="radioInput" value="input1" />
        <label htmlFor="input1">
          <input type="text" />
        </label>
        <input id="input2" type="radio" name="radioInput" value="input2" />
        <label htmlFor="input2" style={{ clear: 'left', marginTop: '10px' }}>
          <input type="text" />
        </label>
      </RadioGroup>
    </div>
  )
})