mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40: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'),
|
Select: require('./components/select/readme.md'),
|
||||||
Column: require('./components/column/readme.md'),
|
Column: require('./components/column/readme.md'),
|
||||||
Button: require('./components/button/readme.md'),
|
Button: require('./components/button/readme.md'),
|
||||||
|
'Button Icon': require('./components/button-icon/readme.md'),
|
||||||
'Range Slider': require('./components/range-slider/readme.md'),
|
'Range Slider': require('./components/range-slider/readme.md'),
|
||||||
Toggle: require('./components/toggle/readme.md'),
|
Toggle: require('./components/toggle/readme.md'),
|
||||||
Checkbox: require('./components/checkbox/readme.md'),
|
Checkbox: require('./components/checkbox/readme.md'),
|
||||||
|
@ -2,6 +2,7 @@ module.exports = {
|
|||||||
Avatar: require('./components/avatar'),
|
Avatar: require('./components/avatar'),
|
||||||
Base: require('./components/base'),
|
Base: require('./components/base'),
|
||||||
Button: require('./components/button'),
|
Button: require('./components/button'),
|
||||||
|
ButtonIcon: require('./components/button-icon'),
|
||||||
Checkbox: require('./components/checkbox'),
|
Checkbox: require('./components/checkbox'),
|
||||||
Column: require('./components/column'),
|
Column: require('./components/column'),
|
||||||
Container: require('./components/container'),
|
Container: require('./components/container'),
|
||||||
|
Loading…
Reference in New Issue
Block a user