1
0
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:
Alex Windett 2017-01-10 17:00:23 +00:00
parent df66179b5d
commit 0cc21f83d9
5 changed files with 20 additions and 81 deletions

View File

@ -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;

View File

@ -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>
);
}
```

View File

@ -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'),

Binary file not shown.

After

Width:  |  Height:  |  Size: 345 B

View File

@ -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 />