1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

making notifcations closable by adding function to props

This commit is contained in:
Alex Windett 2017-01-10 17:13:54 +00:00
parent 0cc21f83d9
commit 4c80ca619f
3 changed files with 21 additions and 3 deletions

View File

@ -1,14 +1,22 @@
const React = require('react');
const Styled = require('styled-components');
const closeIcon = require('../../shared/assets/close.png');
const fns = require('../../shared/functions');
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const StyledButton = styled.button`
background: none;
border: none;
position: absolute;
top: ${remcalc(16)};
right: ${remcalc(16)};
`;
const Close = ({

View File

@ -3,6 +3,7 @@ const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const React = require('react');
const Styled = require('styled-components');
const Close = require('../close');
const {
colors
@ -51,14 +52,19 @@ const Notificaton = ({
children,
className,
style,
type
type,
close
}) => {
const renderClose = close ? (<Close onClick={close} />) : null;
return (
<StyledNotification
className={className}
style={style}
type={type}
>
{ renderClose }
<StyledContent>
{children}
</StyledContent>
@ -69,6 +75,7 @@ const Notificaton = ({
Notificaton.propTypes = {
children: React.PropTypes.object,
className: React.PropTypes.str,
close: React.PropTypes.func,
style: React.PropTypes.object,
type: React.PropTypes.string
};

View File

@ -260,8 +260,11 @@ storiesOf('Notificaton', module)
))
.add('Success', () => (
<Base>
<Notificaton type="success">
<span>This is the success content</span>
<Notificaton
close={function noop() {}}
type="success"
>
<span>This is a success notification that is closable</span>
</Notificaton>
</Base>
))