initial implementation of checkbox ui component

This commit is contained in:
Sérgio Ramos 2016-10-26 14:04:32 +01:00
parent c182bc2e76
commit 88df5fce34
5 changed files with 97 additions and 1 deletions

View File

@ -0,0 +1,44 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const Checkbox = ({
checked = false,
className,
children,
disabled = false,
onChange,
style
}) => {
const cn = classNames(
className,
styles.checkbox,
checked ? styles.checked : '',
disabled ? styles.disabled : ''
);
return (
<label className={styles.label}>
<input
className={cn}
style={style}
checked={checked}
onChange={onChange}
disabled={disabled}
type='checkbox'
/>
<span>{children}</span>
</label>
);
};
Checkbox.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
checked: React.PropTypes.bool,
disabled: React.PropTypes.bool,
onChange: React.PropTypes.func,
style: React.PropTypes.object
};
module.exports = Checkbox;

View File

@ -0,0 +1,42 @@
# `<Checkbox>`
## 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 Checkbox = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Container>
<Row>
<Column>
<Checkbox checked>
Checkbox checked
</Checkbox>
</Column>
</Row>
<Row>
<Column>
<Checkbox>
Checkbox unchecked
</Checkbox>
</Column>
</Row>
<Row>
<Column>
<Checkbox disabled>
Checkbox disabled
</Checkbox>
</Column>
</Row>
</Container>
</Base>
);
```

View File

@ -0,0 +1,8 @@
input[type='checkbox'] {
&.checkbox {
}
}
.label {
color: #646464;
}

View File

@ -10,7 +10,8 @@ module.exports = {
Row: require('./components/row/readme.md'),
Column: require('./components/column/readme.md'),
Button: require('./components/button/readme.md'),
Toggle: require('./components/toggle/readme.md')
Toggle: require('./components/toggle/readme.md'),
Checkbox: require('./components/checkbox/readme.md')
},
FAQ: require('./faq.md')
};

View File

@ -1,6 +1,7 @@
module.exports = {
Base: require('./components/base'),
Button: require('./components/button'),
Checkbox: require('./components/checkbox'),
Column: require('./components/column'),
Container: require('./components/container'),
Row: require('./components/row'),