1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40:06 +02:00

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

View File

@ -5,11 +5,35 @@
```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 Button = require('./index.js');
const styles = require('./style.css');
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 = () => {
return (
<Button disabled={false}>
<Button>
Hello World
</Button>
);

View File

@ -1,4 +1,25 @@
.button {
background-color: #e500ee;
margin: none;
}
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
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;
}
}