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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 345 B

View File

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