Widget

Fixing HTML attributes for single select and multi select, and
adding disabled option

ui/src/components/widget/index.js

@@ -3,11 +3,14 @@ const React = require('react');
 const styles = require('./style.css');
 
 const Widget = ({
+  checked = false,
   children,
-  selectable = 'single',
-  name,
   className,
-  style
+  disabled = false,
+  name,
+  selectable = 'single',
+  style,
+  value = name
 }) => {
 
   const cn = classNames(
@@ -18,11 +21,15 @@ const Widget = ({
   const type = selectable === 'single' ? 'radio' : 'checkbox';
 
   return (
-    <label className={cn} htmlFor={name}>
+    <label className={cn} htmlFor={value}>
       <input
+        checked={checked}
         className={styles.input}
+        disabled={disabled}
+        id={value}
         name={name}
         type={type}
+        value={value}
       />
       <div className={styles.content}>
         {children}
@@ -32,11 +39,14 @@ const Widget = ({
 };
 
 Widget.propTypes = {
+  checked: React.PropTypes.bool,
   children: React.PropTypes.object,
   className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
   name: React.PropTypes.string,
   selectable: React.PropTypes.string,
-  style: React.PropTypes.object
+  style: React.PropTypes.object,
+  value: React.PropTypes.string
 };
 
 module.exports = Widget;

ui/src/components/widget/readme.md

@@ -17,14 +17,14 @@ nmodule.exports = ReactDOM.renderToString(
     <h2>Single Option Select</h2>
     <Row>
       <Column xs={2}>
-        <Widget selectable="single" name='flag1'>
+        <Widget checked selectable="single" name='flag' value='flag_1'>
           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
           <p>Some text</p>
         </Widget>
       </Column>
 
       <Column xs={2}>
-        <Widget selectable="single" name='flag2'>
+        <Widget selectable="single" name='flag' value='flag_2'>
           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
           <p>Some text</p>
         </Widget>
@@ -34,14 +34,31 @@ nmodule.exports = ReactDOM.renderToString(
     <h2>Multi Option Select</h2>
     <Row>
       <Column xs={2}>
-        <Widget selectable="multiple" name='flag1'>
+        <Widget checked selectable="multiple" name='flag_3'>
           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
           <p>Some text</p>
         </Widget>
       </Column>
 
       <Column xs={2}>
-        <Widget selectable="multiple" name='flag2'>
+        <Widget checked selectable="multiple" name='flag_4'>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
+          <p>Some text</p>
+        </Widget>
+      </Column>
+
+      <Column xs={2}>
+        <Widget selectable="multiple" name='flag_5'>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
+          <p>Some text</p>
+        </Widget>
+      </Column>
+    </Row>
+
+    <h2>Disabled</h2>
+    <Row>
+      <Column xs={2}>
+        <Widget selectable="multiple" name='flag_5' disabled>
           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
           <p>Some text</p>
         </Widget>
@@ -57,14 +74,39 @@ nmodule.exports = ReactDOM.renderToString(
 const React = require('react');
 const Widget = require('ui/widget');
 
+// For Single Select
 module.exports = () => {
   return (
-    <Widget selectable="single" name='flag1'>
+    <Widget selectable="single" name='flag' value="flag_1">
       <img src="someimage.png" />
       <p>Some text</p>
     </Widget>
 
-    <Widget selectable="multiple" name='flag2'>
+    <Widget selectable="multiple" name='flag' value="flag_2">
+      <img src="someimage.png" />
+      <p>Some text</p>
+    </Widget>
+  );
+}
+
+// For Multiple Selection
+module.exports = () => {
+  return (
+    <Widget selectable="single" name='flag_3'>
+      <img src="someimage.png" />
+      <p>Some text</p>
+    </Widget>
+
+    <Widget selectable="multiple" name='flag_4'>
+      <img src="someimage.png" />
+      <p>Some text</p>
+    </Widget>
+  );
+
+// Disabled
+module.exports = () => {
+  return (
+    <Widget disabled selectable="single" name='flag_5'>
       <img src="someimage.png" />
       <p>Some text</p>
     </Widget>

ui/src/components/widget/style.css

@@ -1,4 +1,5 @@
 .content {
+  cursor: pointer;
   border-radius: 4px;
   border: 1px solid #d8d8d8;
   padding: remCalc(36);
@@ -16,4 +17,12 @@
       border: 1px solid #2532bb;
     }
   }
+
+  &:disabled {
+    & ~ .content {
+      cursor: not-allowed;
+      filter: grayscale(80%);
+      opacity: 0.4;
+    }
+  }
 }