From b933eff47b336db4fe1803352cc29d739b49f346 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 28 Oct 2016 14:59:28 +0100
Subject: [PATCH 1/2] Widget - implimenting widget

---
 ui/.postcss.js                     | 25 ++++++++++
 ui/src/components/button/style.css |  7 +--
 ui/src/components/widget/index.js  | 42 +++++++++++++++++
 ui/src/components/widget/readme.md | 73 ++++++++++++++++++++++++++++++
 ui/src/components/widget/style.css | 19 ++++++++
 ui/src/docs.js                     |  3 +-
 ui/src/index.js                    |  3 +-
 7 files changed, 167 insertions(+), 5 deletions(-)
 create mode 100644 ui/.postcss.js
 create mode 100644 ui/src/components/widget/index.js
 create mode 100644 ui/src/components/widget/readme.md
 create mode 100644 ui/src/components/widget/style.css

diff --git a/ui/.postcss.js b/ui/.postcss.js
new file mode 100644
index 00000000..803aa6ec
--- /dev/null
+++ b/ui/.postcss.js
@@ -0,0 +1,25 @@
+module.exports = function (postcss) {
+  return postcss([
+    require('postcss-import')(),
+    require('postcss-at-rules-variables')(),
+    require('postcss-modules-values'),
+    require('postcss-functions')({
+      functions: {
+        remCalc: function(values) {
+          values = values.replace('px', '');
+          values = values.split(' ');
+          let outputRems = '';
+          const base = 16;
+          values.forEach( (value, i) => {
+            const remValue = value / base;
+            outputRems += i === 0 ? `${remValue}rem` : ` ${remValue}rem`;
+          });
+          return outputRems;
+        }
+      },
+    }),
+    require('postcss-mixins')(),
+    require('postcss-for'),
+    require('postcss-cssnext')()
+  ])
+}
diff --git a/ui/src/components/button/style.css b/ui/src/components/button/style.css
index 22220536..8cb0e006 100644
--- a/ui/src/components/button/style.css
+++ b/ui/src/components/button/style.css
@@ -1,9 +1,10 @@
 .button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: remCalc(16);
   border-radius: 4px;
   box-shadow: remCalc(0 2 0 0) rgba(0,0,0,0.05);
-
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: remCalc(16);
+  min-width: remCalc(120);
+  padding: remCalc(18 24);
 
   &.primary {
     background: #3B47CC;
diff --git a/ui/src/components/widget/index.js b/ui/src/components/widget/index.js
new file mode 100644
index 00000000..491f20ac
--- /dev/null
+++ b/ui/src/components/widget/index.js
@@ -0,0 +1,42 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Widget = ({
+  children,
+  selectable = 'single',
+  name,
+  className,
+  style
+}) => {
+
+  const cn = classNames(
+    className,
+    styles.widget
+  );
+
+  const type = selectable === 'single' ? 'radio' : 'checkbox';
+
+  return (
+    <label className={cn} htmlFor={name}>
+      <input
+        className={styles.input}
+        name={name}
+        type={type}
+      />
+      <div className={styles.content}>
+        {children}
+      </div>
+    </label>
+  );
+};
+
+Widget.propTypes = {
+  children: React.PropTypes.object,
+  className: React.PropTypes.string,
+  name: React.PropTypes.string,
+  selectable: React.PropTypes.string,
+  style: React.PropTypes.object
+};
+
+module.exports = Widget;
diff --git a/ui/src/components/widget/readme.md b/ui/src/components/widget/readme.md
new file mode 100644
index 00000000..685d303f
--- /dev/null
+++ b/ui/src/components/widget/readme.md
@@ -0,0 +1,73 @@
+# `<Widget>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Widget = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <h2>Single Option Select</h2>
+    <Row>
+      <Column xs={2}>
+        <Widget selectable="single" name='flag1'>
+          <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'>
+          <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>Multi Option Select</h2>
+    <Row>
+      <Column xs={2}>
+        <Widget selectable="multiple" name='flag1'>
+          <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'>
+          <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>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Widget = require('ui/widget');
+
+module.exports = () => {
+  return (
+    <Widget selectable="single" name='flag1'>
+      <img src="someimage.png" />
+      <p>Some text</p>
+    </Widget>
+
+    <Widget selectable="multiple" name='flag2'>
+      <img src="someimage.png" />
+      <p>Some text</p>
+    </Widget>
+  );
+}
+```
diff --git a/ui/src/components/widget/style.css b/ui/src/components/widget/style.css
new file mode 100644
index 00000000..6a7e9042
--- /dev/null
+++ b/ui/src/components/widget/style.css
@@ -0,0 +1,19 @@
+.content {
+  border-radius: 4px;
+  border: 1px solid #d8d8d8;
+  padding: remCalc(36);
+  & img {
+    max-width: 100%;
+  }
+}
+
+.input {
+  display: none;
+  visibility: hidden;
+
+  &:checked {
+    & ~ .content {
+      border: 1px solid #2532bb;
+    }
+  }
+}
diff --git a/ui/src/docs.js b/ui/src/docs.js
index 6fa79c6c..8c9d8d36 100644
--- a/ui/src/docs.js
+++ b/ui/src/docs.js
@@ -16,7 +16,8 @@ module.exports = {
     Toggle: require('./components/toggle/readme.md'),
     Checkbox: require('./components/checkbox/readme.md'),
     Tab: require('./components/tab/readme.md'),
-    Tabs: require('./components/tabs/readme.md')
+    Tabs: require('./components/tabs/readme.md'),
+    Widget: require('./components/widget/readme.md')
   },
   FAQ: require('./faq.md')
 };
diff --git a/ui/src/index.js b/ui/src/index.js
index d8a0d049..643817da 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -10,5 +10,6 @@ module.exports = {
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
   Radio: require('./components/radio'),
-  RadioGroup: require('./components/radio-group')
+  RadioGroup: require('./components/radio-group'),
+  Widget: require('./components/widget')
 };

From aa3c9406740a881d4ddbe257b5ab1d18f1917ff0 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 28 Oct 2016 16:01:23 +0100
Subject: [PATCH 2/2] Widget

Fixing HTML attributes for single select and multi select, and
adding disabled option
---
 ui/src/components/widget/index.js  | 20 ++++++++---
 ui/src/components/widget/readme.md | 54 ++++++++++++++++++++++++++----
 ui/src/components/widget/style.css |  9 +++++
 3 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/widget/index.js b/ui/src/components/widget/index.js
index 491f20ac..a24af2c0 100644
--- a/ui/src/components/widget/index.js
+++ b/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;
diff --git a/ui/src/components/widget/readme.md b/ui/src/components/widget/readme.md
index 685d303f..f53241d8 100644
--- a/ui/src/components/widget/readme.md
+++ b/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>
diff --git a/ui/src/components/widget/style.css b/ui/src/components/widget/style.css
index 6a7e9042..89a6afa9 100644
--- a/ui/src/components/widget/style.css
+++ b/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;
+    }
+  }
 }