fixup! New: Radio and RadioGroup components

docs/components/Layout/index.jsx

@@ -78,6 +78,7 @@ const componentsBySection = {
     'checkbox',
     'checkbox-group',
     'radio',
+    'radio-group',
     'select',
     'date-picker',
   ],

src/components/adslot-ui/Radio/index.jsx

@@ -38,8 +38,13 @@ class RadioButton extends React.Component {
 
     return (
       <div className="radio-component" {...expandDts(dts)}>
-        <input {...radioInputProps} />
-        {label ? <span className="radio-label">{label}</span> : null}
+        <span className={`selection-component-icon iradio${this.state.checked ? ' checked' : ''}`} />
+        <label>
+          <div className="radio-component-input-container">
+            <input {...radioInputProps} />
+          </div>
+          {label ? <span>{label}</span> : null}
+        </label>
       </div>
     );
   }

src/components/adslot-ui/Radio/styles.scss

@@ -1,14 +1,36 @@
+@import '~styles/variable';
+
 .radio-component {
+  label {
+    line-height: 18px;
+    margin-left: -16px;
+    font-weight: $font-weight-light;
+    cursor: pointer;
+
+    span {
+      margin-left: 5px;
+      vertical-align: bottom;
+    }
+  }
+
   input {
-    vertical-align: middle;
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: $color-background;
+    border: 0;
+    opacity: 0;
     cursor: pointer;
   }
 
-  .radio-label {
+  .radio-component-input-container {
+    width: 16px;
+    height: 18px;
+    display: inline-block;
+    position: relative;
     vertical-align: middle;
-    padding-left: 5px;
   }
-
-  padding-top: 10px;
-  padding-bottom: 10px;
 }