mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +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 Styled = require('styled-components');
|
||||
const closeIcon = require('../../shared/assets/close');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
const closeIcon = require('../../shared/assets/close.png');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledButton = styled.button`
|
||||
background: none;
|
||||
border: none;
|
||||
`;
|
||||
|
||||
const Close = ({
|
||||
style,
|
||||
onClick
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
style={style}
|
||||
onClick={onClick}
|
||||
style={style}
|
||||
>
|
||||
<img src={closeIcon} alt="Close"/>
|
||||
<img
|
||||
alt="Close"
|
||||
src={closeIcon}
|
||||
/>
|
||||
</StyledButton>
|
||||
);
|
||||
};
|
||||
|
||||
Close.propTypes = {
|
||||
style: React.PropTypes.object,
|
||||
onClick: React.PropTypes.func
|
||||
onClick: React.PropTypes.func,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
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'),
|
||||
Column: require('./components/column'),
|
||||
Container: require('./components/container'),
|
||||
Close: require('./components/close'),
|
||||
Input: require('./components/input'),
|
||||
List: require('./components/list'),
|
||||
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,
|
||||
Row,
|
||||
Column,
|
||||
Close,
|
||||
AddMetric: {
|
||||
AddMetricButton,
|
||||
AddMetricDescription,
|
||||
@ -353,6 +354,11 @@ storiesOf('Tabs', module)
|
||||
</Tabs>
|
||||
));
|
||||
|
||||
storiesOf('Close', module)
|
||||
.add('Default', () => (
|
||||
<Close onClick={function noop() {}} />
|
||||
));
|
||||
|
||||
storiesOf('Toggle', module)
|
||||
.add('default', () => (
|
||||
<Toggle checked />
|
||||
|
Loading…
Reference in New Issue
Block a user