mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
reworking notification component
This commit is contained in:
parent
c31d08a15c
commit
848450e023
39
ui/src/components/close/index.js
Normal file
39
ui/src/components/close/index.js
Normal 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;
|
65
ui/src/components/close/readme.md
Normal file
65
ui/src/components/close/readme.md
Normal 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>
|
||||
);
|
||||
}
|
||||
```
|
@ -1,6 +1,6 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const match = require('../../shared/match');
|
||||
const composers = require('../../shared/composers');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
@ -12,44 +12,46 @@ const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
prop: matchProp
|
||||
} = match;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const background = matchProp({
|
||||
warning: colors.warningLight,
|
||||
alert: colors.alertLight,
|
||||
}, 'transparent');
|
||||
const {
|
||||
baseBox,
|
||||
pseudoEl
|
||||
} = composers;
|
||||
|
||||
const border = matchProp({
|
||||
warning: colors.warning,
|
||||
alert: 'red',
|
||||
}, 'none');
|
||||
const decorationWidth = remcalc(108);
|
||||
|
||||
const StyledNotification = styled.div`
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
background-color: ${background('type')};
|
||||
border: ${border('type')};
|
||||
${baseBox(0)}
|
||||
|
||||
&::before {
|
||||
background-color: ${props => colors[props.type] || colors.brandPrimary}
|
||||
width: ${decorationWidth};
|
||||
height: 100%;
|
||||
|
||||
${pseudoEl()}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
float: left;
|
||||
padding: ${remcalc(20)};
|
||||
padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)};
|
||||
margin-left: ${decorationWidth};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Notificaton = ({
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
type = ''
|
||||
type
|
||||
}) => {
|
||||
return (
|
||||
<StyledNotification
|
||||
@ -68,7 +70,7 @@ Notificaton.propTypes = {
|
||||
children: React.PropTypes.object,
|
||||
className: React.PropTypes.str,
|
||||
style: React.PropTypes.object,
|
||||
type: React.PropTypes.str
|
||||
type: React.PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = Notificaton;
|
||||
|
@ -33,6 +33,7 @@ const notifications = {
|
||||
alert: '#DA4B42',
|
||||
alertLight: '#FFC7C7',
|
||||
confirmation: '#00AF66',
|
||||
success: '#00AF66',
|
||||
warning: '#E4A800',
|
||||
warningLight: '#FFFAED',
|
||||
};
|
||||
|
@ -242,19 +242,25 @@ storiesOf('Modal', module)
|
||||
|
||||
storiesOf('Notificaton', module)
|
||||
.add('Default', () => (
|
||||
<Notificaton>
|
||||
<span>This is the default content</span>
|
||||
</Notificaton>
|
||||
<Base>
|
||||
<Notificaton>
|
||||
<span>This is the default content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('warning', () => (
|
||||
<Notificaton type='warning'>
|
||||
<span>This is the warning content</span>
|
||||
</Notificaton>
|
||||
.add('Success', () => (
|
||||
<Base>
|
||||
<Notificaton type="success">
|
||||
<span>This is the success content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('alert', () => (
|
||||
<Notificaton type='alert'>
|
||||
<span>This is the alert content</span>
|
||||
</Notificaton>
|
||||
.add('Alert', () => (
|
||||
<Base>
|
||||
<Notificaton type="alert">
|
||||
<span>This is the alert content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('Pagination', module)
|
||||
|
Loading…
Reference in New Issue
Block a user