From b933eff47b336db4fe1803352cc29d739b49f346 Mon Sep 17 00:00:00 2001 From: Alex Windett 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 ( + + ); +}; + +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 @@ +# `` + +## 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

+ + + + +

Some text

+
+
+ + + + +

Some text

+
+
+
+ +

Multi Option Select

+ + + + +

Some text

+
+
+ + + + +

Some text

+
+
+
+ +); +``` + +## usage + +```js +const React = require('react'); +const Widget = require('ui/widget'); + +module.exports = () => { + return ( + + +

Some text

+
+ + + +

Some text

+
+ ); +} +``` 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 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 ( -