Merge branch 'widget-group'
* widget-group: Widget Widget - implimenting widget
This commit is contained in:
commit
9793440e09
25
ui/.postcss.js
Normal file
25
ui/.postcss.js
Normal file
@ -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')()
|
||||||
|
])
|
||||||
|
}
|
@ -1,9 +1,10 @@
|
|||||||
.button {
|
.button {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
||||||
font-size: remCalc(16);
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: remCalc(0 2 0 0) rgba(0,0,0,0.05);
|
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 {
|
&.primary {
|
||||||
background: #3B47CC;
|
background: #3B47CC;
|
||||||
|
52
ui/src/components/widget/index.js
Normal file
52
ui/src/components/widget/index.js
Normal file
@ -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 (
|
||||||
|
<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}
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
115
ui/src/components/widget/readme.md
Normal file
115
ui/src/components/widget/readme.md
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
# `<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 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='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>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<h2>Multi Option Select</h2>
|
||||||
|
<Row>
|
||||||
|
<Column xs={2}>
|
||||||
|
<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 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>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Base>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
## usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
const React = require('react');
|
||||||
|
const Widget = require('ui/widget');
|
||||||
|
|
||||||
|
// For Single Select
|
||||||
|
module.exports = () => {
|
||||||
|
return (
|
||||||
|
<Widget selectable="single" name='flag' value="flag_1">
|
||||||
|
<img src="someimage.png" />
|
||||||
|
<p>Some text</p>
|
||||||
|
</Widget>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
28
ui/src/components/widget/style.css
Normal file
28
ui/src/components/widget/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -16,7 +16,8 @@ module.exports = {
|
|||||||
Toggle: require('./components/toggle/readme.md'),
|
Toggle: require('./components/toggle/readme.md'),
|
||||||
Checkbox: require('./components/checkbox/readme.md'),
|
Checkbox: require('./components/checkbox/readme.md'),
|
||||||
Tab: require('./components/tab/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')
|
FAQ: require('./faq.md')
|
||||||
};
|
};
|
||||||
|
@ -10,5 +10,6 @@ module.exports = {
|
|||||||
Tabs: require('./components/tabs'),
|
Tabs: require('./components/tabs'),
|
||||||
Toggle: require('./components/toggle'),
|
Toggle: require('./components/toggle'),
|
||||||
Radio: require('./components/radio'),
|
Radio: require('./components/radio'),
|
||||||
RadioGroup: require('./components/radio-group')
|
RadioGroup: require('./components/radio-group'),
|
||||||
|
Widget: require('./components/widget')
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user