Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'widget-group'

Browse Source 
* widget-group:
  Widget
  Widget - implimenting widget
This commit is contained in:
Alex Windett 2016-10-28 16:02:24 +01:00
commit 9793440e09
7 changed files with 228 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/.postcss.js Normal file
View 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')()
])
}

7
ui/src/components/button/style.css
View File

@ -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;

52
ui/src/components/widget/index.js Normal file
View 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
View 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
View 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;
}
}
}

3
ui/src/docs.js
View File

@ -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')
};

3
ui/src/index.js
View File

@ -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')
};