initial button implementation

This commit is contained in:
Sérgio Ramos 2016-10-26 11:55:08 +01:00
parent 7ecf377b78
commit db37669ac6
3 changed files with 61 additions and 6 deletions

View File

@ -1,15 +1,24 @@
const classNames = require('classnames');
const React = require('react'); const React = require('react');
const styles = require('./style.css'); const styles = require('./style.css');
const Button = ({ const Button = ({
disabled = false, disabled = false,
secundary = false,
className, className,
style, style,
children children
}) => { }) => {
const cn = classNames(
className,
styles.button,
secundary ? styles.secundary : styles.primary,
disabled ? styles.inactive : '',
);
return ( return (
<button <button
className={styles.button} className={cn}
disabled={disabled} disabled={disabled}
style={style} style={style}
> >
@ -22,6 +31,7 @@ Button.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
className: React.PropTypes.string, className: React.PropTypes.string,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
secundary: React.PropTypes.bool,
style: React.PropTypes.object style: React.PropTypes.object
}; };

View File

@ -5,11 +5,35 @@
```embed ```embed
const React = require('react'); const React = require('react');
const ReactDOM = require('react-dom/server'); const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Button = require('./index.js'); const Button = require('./index.js');
const styles = require('./style.css'); const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString( nmodule.exports = ReactDOM.renderToString(
<Button>Hello World</Button> <Base>
<Container>
<Row>
<Column>
<Button>
Create an Instance
</Button>
</Column>
<Column>
<Button secundary>
Cancel
</Button>
</Column>
<Column>
<Button disabled>
Inactive Button
</Button>
</Column>
</Row>
</Container>
</Base>
); );
``` ```
@ -21,7 +45,7 @@ const Button = require('ui/button');
module.exports = () => { module.exports = () => {
return ( return (
<Button disabled={false}> <Button>
Hello World Hello World
</Button> </Button>
); );

View File

@ -1,4 +1,25 @@
.button { .button {
background-color: #e500ee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: none; font-size: 16px;
border-radius: 4px;
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.05);
&.primary {
background: #3B47CC;
border: 1px solid #2532BB;
color: #FFFFFF;
}
&.secundary {
background: #FFFFFF;
border: 1px solid #D8D8D8;
color: #646464;
}
&.inactive {
background: #F9F9F9;
border: 1px solid #D8D8D8;
color: #737373;
}
} }