From f1c0e269908b1ea20474f09a5ef24b06e81f078a Mon Sep 17 00:00:00 2001
From: Tuan Nguyen <lightbringer1991@yahoo.com>
Date: Tue, 5 Jun 2018 15:32:26 +1000
Subject: [PATCH] fixup! New: Radio and RadioGroup components

---
 docs/components/Layout/index.jsx           |  1 +
 src/components/adslot-ui/Radio/index.jsx   |  9 ++++--
 src/components/adslot-ui/Radio/styles.scss | 34 ++++++++++++++++++----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/docs/components/Layout/index.jsx b/docs/components/Layout/index.jsx
index 6d6767629..3407ba139 100644
--- a/docs/components/Layout/index.jsx
+++ b/docs/components/Layout/index.jsx
@@ -78,6 +78,7 @@ const componentsBySection = {
     'checkbox',
     'checkbox-group',
     'radio',
+    'radio-group',
     'select',
     'date-picker',
   ],
diff --git a/src/components/adslot-ui/Radio/index.jsx b/src/components/adslot-ui/Radio/index.jsx
index 72ce88c81..59ad60939 100644
--- a/src/components/adslot-ui/Radio/index.jsx
+++ b/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>
     );
   }
diff --git a/src/components/adslot-ui/Radio/styles.scss b/src/components/adslot-ui/Radio/styles.scss
index df35dd595..b8063f8e9 100644
--- a/src/components/adslot-ui/Radio/styles.scss
+++ b/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;
 }