mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 06:00:06 +02:00
initial button implementation
This commit is contained in:
parent
7ecf377b78
commit
db37669ac6
@ -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
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user