reworking notification component

This commit is contained in:
Alex Windett 2017-01-10 16:52:08 +00:00
parent c31d08a15c
commit 848450e023
5 changed files with 145 additions and 32 deletions

View File

@ -0,0 +1,39 @@
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 {
default: styled
} = Styled;
const Close = ({
style,
onClick
}) => {
return (
<StyledButton
style={style}
onClick={onClick}
>
<img src={closeIcon} alt="Close"/>
</StyledButton>
);
};
Close.propTypes = {
style: React.PropTypes.object,
onClick: React.PropTypes.func
};
module.exports = Close;

View File

@ -0,0 +1,65 @@
# `<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

@ -1,6 +1,6 @@
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const match = require('../../shared/match'); const composers = require('../../shared/composers');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
@ -12,44 +12,46 @@ const {
remcalc remcalc
} = fns; } = fns;
const {
prop: matchProp
} = match;
const { const {
default: styled default: styled
} = Styled; } = Styled;
const background = matchProp({ const {
warning: colors.warningLight, baseBox,
alert: colors.alertLight, pseudoEl
}, 'transparent'); } = composers;
const border = matchProp({ const decorationWidth = remcalc(108);
warning: colors.warning,
alert: 'red',
}, 'none');
const StyledNotification = styled.div` const StyledNotification = styled.div`
border-radius: 4px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
display: inline-block; display: inline-block;
min-height: 100%;
position: relative;
width: 100%;
${baseBox(0)}
&::before {
background-color: ${props => colors[props.type] || colors.brandPrimary}
width: ${decorationWidth};
height: 100%; height: 100%;
background-color: ${background('type')}; ${pseudoEl()}
border: ${border('type')}; }
`; `;
const StyledContent = styled.div` const StyledContent = styled.div`
float: left; float: left;
padding: ${remcalc(20)}; padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)};
margin-left: ${decorationWidth};
width: 100%;
`; `;
const Notificaton = ({ const Notificaton = ({
children, children,
className, className,
style, style,
type = '' type
}) => { }) => {
return ( return (
<StyledNotification <StyledNotification
@ -68,7 +70,7 @@ Notificaton.propTypes = {
children: React.PropTypes.object, children: React.PropTypes.object,
className: React.PropTypes.str, className: React.PropTypes.str,
style: React.PropTypes.object, style: React.PropTypes.object,
type: React.PropTypes.str type: React.PropTypes.string
}; };
module.exports = Notificaton; module.exports = Notificaton;

View File

@ -33,6 +33,7 @@ const notifications = {
alert: '#DA4B42', alert: '#DA4B42',
alertLight: '#FFC7C7', alertLight: '#FFC7C7',
confirmation: '#00AF66', confirmation: '#00AF66',
success: '#00AF66',
warning: '#E4A800', warning: '#E4A800',
warningLight: '#FFFAED', warningLight: '#FFFAED',
}; };

View File

@ -242,19 +242,25 @@ storiesOf('Modal', module)
storiesOf('Notificaton', module) storiesOf('Notificaton', module)
.add('Default', () => ( .add('Default', () => (
<Base>
<Notificaton> <Notificaton>
<span>This is the default content</span> <span>This is the default content</span>
</Notificaton> </Notificaton>
</Base>
)) ))
.add('warning', () => ( .add('Success', () => (
<Notificaton type='warning'> <Base>
<span>This is the warning content</span> <Notificaton type="success">
<span>This is the success content</span>
</Notificaton> </Notificaton>
</Base>
)) ))
.add('alert', () => ( .add('Alert', () => (
<Notificaton type='alert'> <Base>
<Notificaton type="alert">
<span>This is the alert content</span> <span>This is the alert content</span>
</Notificaton> </Notificaton>
</Base>
)); ));
storiesOf('Pagination', module) storiesOf('Pagination', module)