mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 22:20:06 +02:00
creating close icon component
This commit is contained in:
parent
df66179b5d
commit
0cc21f83d9
@ -1,39 +1,36 @@
|
|||||||
const constants = require('../../shared/constants');
|
|
||||||
const fns = require('../../shared/functions');
|
|
||||||
const composers = require('../../shared/composers');
|
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const Styled = require('styled-components');
|
const Styled = require('styled-components');
|
||||||
const closeIcon = require('../../shared/assets/close');
|
const closeIcon = require('../../shared/assets/close.png');
|
||||||
|
|
||||||
const {
|
|
||||||
colors
|
|
||||||
} = constants;
|
|
||||||
|
|
||||||
const {
|
|
||||||
remcalc
|
|
||||||
} = fns;
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
default: styled
|
default: styled
|
||||||
} = Styled;
|
} = Styled;
|
||||||
|
|
||||||
|
const StyledButton = styled.button`
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
`;
|
||||||
|
|
||||||
const Close = ({
|
const Close = ({
|
||||||
style,
|
style,
|
||||||
onClick
|
onClick
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<StyledButton
|
<StyledButton
|
||||||
style={style}
|
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
style={style}
|
||||||
>
|
>
|
||||||
<img src={closeIcon} alt="Close"/>
|
<img
|
||||||
|
alt="Close"
|
||||||
|
src={closeIcon}
|
||||||
|
/>
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Close.propTypes = {
|
Close.propTypes = {
|
||||||
style: React.PropTypes.object,
|
onClick: React.PropTypes.func,
|
||||||
onClick: React.PropTypes.func
|
style: React.PropTypes.object
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = Close;
|
module.exports = Close;
|
||||||
|
@ -1,65 +0,0 @@
|
|||||||
# `<Notification>`
|
|
||||||
|
|
||||||
## 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 Notificaton = require('./index.js');
|
|
||||||
const styles = require('./style.css');
|
|
||||||
|
|
||||||
const style = {
|
|
||||||
marginBottom: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
nmodule.exports = ReactDOM.renderToString(
|
|
||||||
<Base>
|
|
||||||
<Row>
|
|
||||||
<Column>
|
|
||||||
<Notificaton type='warning' icon='exclamation'>
|
|
||||||
<p style={style}>This is the warning content</p>
|
|
||||||
</Notificaton>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Column>
|
|
||||||
<Notificaton type='warning' icon='question'>
|
|
||||||
<p style={style}>This is the question content</p>
|
|
||||||
</Notificaton>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Column>
|
|
||||||
<Notificaton type='alert' icon='exclamation'>
|
|
||||||
<p style={style}>This is the alert content</p>
|
|
||||||
</Notificaton>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
</Base>
|
|
||||||
);
|
|
||||||
```
|
|
||||||
|
|
||||||
## usage
|
|
||||||
|
|
||||||
```js
|
|
||||||
const React = require('react');
|
|
||||||
const Notificaton = require('ui/avatar');
|
|
||||||
|
|
||||||
module.exports = () => {
|
|
||||||
return (
|
|
||||||
<Notificaton type='warning' icon='question'>
|
|
||||||
<p>This is the warning content</p>
|
|
||||||
</Notificaton>
|
|
||||||
<Notificaton type='warning' icon='question'>
|
|
||||||
<p>This is the question content</p>
|
|
||||||
</Notificaton>
|
|
||||||
<Notificaton type='alert' icon='exclamation'>
|
|
||||||
<p>This is the alert content</p>
|
|
||||||
</Notificaton>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
@ -7,6 +7,7 @@ module.exports = {
|
|||||||
Checkbox: require('./components/checkbox'),
|
Checkbox: require('./components/checkbox'),
|
||||||
Column: require('./components/column'),
|
Column: require('./components/column'),
|
||||||
Container: require('./components/container'),
|
Container: require('./components/container'),
|
||||||
|
Close: require('./components/close'),
|
||||||
Input: require('./components/input'),
|
Input: require('./components/input'),
|
||||||
List: require('./components/list'),
|
List: require('./components/list'),
|
||||||
Modal: require('./components/modal'),
|
Modal: require('./components/modal'),
|
||||||
|
BIN
ui/src/shared/assets/close.png
Normal file
BIN
ui/src/shared/assets/close.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 345 B |
@ -12,6 +12,7 @@ const {
|
|||||||
Checkbox,
|
Checkbox,
|
||||||
Row,
|
Row,
|
||||||
Column,
|
Column,
|
||||||
|
Close,
|
||||||
AddMetric: {
|
AddMetric: {
|
||||||
AddMetricButton,
|
AddMetricButton,
|
||||||
AddMetricDescription,
|
AddMetricDescription,
|
||||||
@ -353,6 +354,11 @@ storiesOf('Tabs', module)
|
|||||||
</Tabs>
|
</Tabs>
|
||||||
));
|
));
|
||||||
|
|
||||||
|
storiesOf('Close', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Close onClick={function noop() {}} />
|
||||||
|
));
|
||||||
|
|
||||||
storiesOf('Toggle', module)
|
storiesOf('Toggle', module)
|
||||||
.add('default', () => (
|
.add('default', () => (
|
||||||
<Toggle checked />
|
<Toggle checked />
|
||||||
|
Loading…
Reference in New Issue
Block a user