mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
creating button-icon component
This commit is contained in:
parent
07e391bd37
commit
7fb2cb3131
36
ui/src/components/button-icon/index.js
Normal file
36
ui/src/components/button-icon/index.js
Normal file
@ -0,0 +1,36 @@
|
||||
const React = require('react');
|
||||
const classNames = require('classnames');
|
||||
const styles = require('./style.css');
|
||||
const Button = require('../button');
|
||||
|
||||
const ButtonIcon = ({
|
||||
name = 'beer',
|
||||
className,
|
||||
iconSet = 'fa',
|
||||
style
|
||||
}) => {
|
||||
|
||||
const Component = require(`react-icons/lib/${iconSet}/${name}`);
|
||||
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.icon
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button>
|
||||
<Component className={cn} style={style} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonIcon.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
iconSet: React.PropTypes.string.isRequired,
|
||||
name: React.PropTypes.string.isRequired,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = ButtonIcon;
|
37
ui/src/components/button-icon/readme.md
Normal file
37
ui/src/components/button-icon/readme.md
Normal file
@ -0,0 +1,37 @@
|
||||
# `<ButtonIcon>`
|
||||
|
||||
## 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 ButtonIcon = require('./index.js');
|
||||
const styles = require('./style.css');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Row>
|
||||
<Column>
|
||||
<ButtonIcon iconSet='fa' name='beer' />
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const ButtonIcon = require('ui/button-icon');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<ButtonIcon iconSet='fa' name='beer' />
|
||||
);
|
||||
}
|
||||
```
|
3
ui/src/components/button-icon/style.css
Normal file
3
ui/src/components/button-icon/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
.icon {
|
||||
font-size: inherit;
|
||||
}
|
@ -16,6 +16,7 @@ module.exports = {
|
||||
Select: require('./components/select/readme.md'),
|
||||
Column: require('./components/column/readme.md'),
|
||||
Button: require('./components/button/readme.md'),
|
||||
'Button Icon': require('./components/button-icon/readme.md'),
|
||||
'Range Slider': require('./components/range-slider/readme.md'),
|
||||
Toggle: require('./components/toggle/readme.md'),
|
||||
Checkbox: require('./components/checkbox/readme.md'),
|
||||
|
@ -2,6 +2,7 @@ module.exports = {
|
||||
Avatar: require('./components/avatar'),
|
||||
Base: require('./components/base'),
|
||||
Button: require('./components/button'),
|
||||
ButtonIcon: require('./components/button-icon'),
|
||||
Checkbox: require('./components/checkbox'),
|
||||
Column: require('./components/column'),
|
||||
Container: require('./components/container'),
|
||||
|
Loading…
Reference in New Issue
Block a user