wip

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

@@ -36,7 +36,7 @@ class CheckboxGroup extends React.Component {
     return React.Children.map(this.props.children, (child) =>
       React.cloneElement(child, {
         name: this.props.name,
-        checked: (this.state.value.indexOf(child.props.value) >= 0) ? "checked" : "",
+        checked: this.state.value.indexOf(child.props.value) >= 0,
         onChangeCallback: this.onChangeCallback,
       }));
   }

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

@@ -1,9 +0,0 @@
-.checkbox-group label {
-	line-height: 20px;
-}
-
-.checkbox-group input {
-	margin: 2px 5px 0 0;
-	line-height: 20px;
-	display: inline-block;
-}

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

@@ -1,21 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { expandDts } from 'lib/utils';
 
 import './styles.scss';
 
 class CheckboxSingle extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
+  constructor(props) {
+    super(props);
+    this.state = {
       checked: props.checked,
       disabled: props.disabled,
-      name: props.name,
-      value: props.value,
-      dts: props.dts,
-      label: props.label,
     };
     this.onChange = this.onChange.bind(this);
-    if(this.props.onChangeCallback) {
+    if(this.props.onChangeCallback)
+    {
       this.onChangeCallback = this.props.onChangeCallback.bind(this);
     }
 	}
@@ -33,6 +31,7 @@ class CheckboxSingle extends React.Component {
   }
 
 	render() {
+    const {name, value, label, dts} = this.props;
     const onChangeHandler = this.onChange;
     const booleanAttributes = { disabled: '', checked: '' };
     if(this.state.disabled) {
@@ -42,27 +41,42 @@ class CheckboxSingle extends React.Component {
       booleanAttributes.checked = 'checked';
     }
 
-		return(
-  <div className='checkbox-single'>
-    <label>
-      <input
-        type='checkbox'
-        name={this.state.name}
-        value={this.state.value}
-        onChange={onChangeHandler}
-        data-test-selector={this.state.dts}
-        {...booleanAttributes}
-      />
-      {this.state.label}
-    </label>
-  </div>
-		);
+    if(label)
+    {
+  		return(
+    <div className='checkbox-single'>
+      <label>
+        <input
+          type='checkbox'
+          name={name}
+          value={value}
+          onChange={onChangeHandler}
+          {...booleanAttributes}
+          {...expandDts(dts)}
+        />
+        <span>{label}</span>
+      </label>
+    </div>
+  		);
+    }
+    return(
+      <div className='checkbox-single'>
+        <input
+          type='checkbox'
+          name={name}
+          value={value}
+          onChange={onChangeHandler}
+          {...booleanAttributes}
+          {...expandDts(dts)}
+        />
+      </div>
+    );
 	}
 }
 
 CheckboxSingle.propTypes = {
   name: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.node,
   value: PropTypes.string.isRequired,
   dts: PropTypes.string,
   disabled: PropTypes.bool,
@@ -71,7 +85,6 @@ CheckboxSingle.propTypes = {
 };
 
 CheckboxSingle.defaultProps = {
-  label: '',
   dts: '',
   disabled: false,
   checked: false,

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

@@ -1,9 +1,13 @@
 .checkbox-single label {
-	line-height: 20px;
+	line-height: 16px;
+}
+
+.checkbox-single span {
+	margin: 0 0 0 5px;
 }
 
 .checkbox-single input {
-	margin: 2px 5px 0 0;
-	line-height: 20px;
+	margin: 0;
+	line-height: 16px;
 	display: inline-block;
 }