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..a24af2c0
--- /dev/null
+++ b/ui/src/components/widget/index.js
@@ -0,0 +1,52 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Widget = ({
+ checked = false,
+ children,
+ className,
+ disabled = false,
+ name,
+ selectable = 'single',
+ style,
+ value = name
+}) => {
+
+ const cn = classNames(
+ className,
+ styles.widget
+ );
+
+ const type = selectable === 'single' ? 'radio' : 'checkbox';
+
+ return (
+
+ );
+};
+
+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,
+ value: React.PropTypes.string
+};
+
+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..f53241d8
--- /dev/null
+++ b/ui/src/components/widget/readme.md
@@ -0,0 +1,115 @@
+# ``
+
+## 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(
+
+ Single Option Select
+
+
+
+ .svg/2000px-Union_flag_1606_(Kings_Colors).svg.png)
+ Some text
+
+
+
+
+
+
+ Some text
+
+
+
+
+ Multi Option Select
+
+
+
+
+ Some text
+
+
+
+
+
+
+ Some text
+
+
+
+
+
+
+ Some text
+
+
+
+
+ Disabled
+
+
+
+
+ Some text
+
+
+
+
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Widget = require('ui/widget');
+
+// For Single Select
+module.exports = () => {
+ return (
+
+ 
+ Some text
+
+
+
+
+ Some text
+
+ );
+}
+
+// For Multiple Selection
+module.exports = () => {
+ return (
+
+
+ Some text
+
+
+
+
+ Some text
+
+ );
+
+// Disabled
+module.exports = () => {
+ return (
+
+
+ Some text
+
+ );
+}
+```
diff --git a/ui/src/components/widget/style.css b/ui/src/components/widget/style.css
new file mode 100644
index 00000000..89a6afa9
--- /dev/null
+++ b/ui/src/components/widget/style.css
@@ -0,0 +1,28 @@
+.content {
+ cursor: pointer;
+ 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;
+ }
+ }
+
+ &:disabled {
+ & ~ .content {
+ cursor: not-allowed;
+ filter: grayscale(80%);
+ opacity: 0.4;
+ }
+ }
+}
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')
};