mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
creating notification component and adding in shared values and new composer
This commit is contained in:
parent
7fb2cb3131
commit
bce2e8fc01
@ -2,7 +2,6 @@ const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
// const App = require('../src/components/icon/');
|
||||
const App = require('./containers/app/');
|
||||
|
||||
const {
|
||||
|
@ -17,8 +17,8 @@ const Icon = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Component className={cn} style={style} />
|
||||
<div className={cn}>
|
||||
<Component style={style} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
54
ui/src/components/notification/index.js
Normal file
54
ui/src/components/notification/index.js
Normal file
@ -0,0 +1,54 @@
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
const Icon = require('../icon');
|
||||
|
||||
const Notificaton = ({
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
type = '',
|
||||
icon = ''
|
||||
}) => {
|
||||
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles[`notification__${type}`],
|
||||
styles.notification
|
||||
);
|
||||
|
||||
const iconClass = classNames(
|
||||
className,
|
||||
styles.notification__icon,
|
||||
styles[`notification__icon--${type}`]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn}
|
||||
style={style}
|
||||
type={type}
|
||||
>
|
||||
{ icon ? (
|
||||
<Icon
|
||||
className={iconClass}
|
||||
iconSet="fa"
|
||||
name={icon}
|
||||
/>
|
||||
) : null }
|
||||
<div className={styles.notification__content}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Notificaton.propTypes = {
|
||||
children: React.PropTypes.object,
|
||||
className: React.PropTypes.str,
|
||||
icon: React.PropTypes.str,
|
||||
style: React.PropTypes.object,
|
||||
type: React.PropTypes.str
|
||||
};
|
||||
|
||||
module.exports = Notificaton;
|
65
ui/src/components/notification/readme.md
Normal file
65
ui/src/components/notification/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='warning' icon='question'>
|
||||
<p style={style}>This is the question content</p>
|
||||
</Notificaton>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Notificaton = require('ui/avatar');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Notificaton type='warning' icon='exclamation'>
|
||||
<p>This is the warning content</p>
|
||||
</Notificaton>
|
||||
<Notificaton type='warning' icon='question'>
|
||||
<p>This is the warning content</p>
|
||||
</Notificaton>
|
||||
<Notificaton type='warning' icon='question'>
|
||||
<p>This is the warning content</p>
|
||||
</Notificaton>
|
||||
);
|
||||
}
|
||||
```
|
54
ui/src/components/notification/style.css
Normal file
54
ui/src/components/notification/style.css
Normal file
@ -0,0 +1,54 @@
|
||||
~colors: "../../shared/constants.js";
|
||||
|
||||
@define-mixin block-decoration $background, $color {
|
||||
background-color: $background;
|
||||
border: solid 1px $color;
|
||||
}
|
||||
|
||||
@define-mixin icon-decoration $background, $color {
|
||||
background: $background;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.notification {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
composes: clearfix from "../../shared/composers.css";
|
||||
height: 100%;
|
||||
|
||||
&__warning {
|
||||
@add-mixin block-decoration ~colors.warningLight, ~colors.warning;
|
||||
}
|
||||
|
||||
&__alert {
|
||||
@add-mixin block-decoration ~colors.alertLight, red;
|
||||
}
|
||||
|
||||
&__content {
|
||||
float: left;
|
||||
padding: remcalc(20);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
padding: remcalc(15);
|
||||
text-align: center;
|
||||
|
||||
& svg {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@add-mixin icon-decoration ~colors.warning, white;
|
||||
}
|
||||
|
||||
&--alert {
|
||||
@add-mixin icon-decoration ~colors.alert, white;
|
||||
}
|
||||
}
|
||||
}
|
@ -19,6 +19,7 @@ module.exports = {
|
||||
'Button Icon': require('./components/button-icon/readme.md'),
|
||||
'Range Slider': require('./components/range-slider/readme.md'),
|
||||
Toggle: require('./components/toggle/readme.md'),
|
||||
Notificaton: require('./components/notification/readme.md'),
|
||||
Checkbox: require('./components/checkbox/readme.md'),
|
||||
Tab: require('./components/tab/readme.md'),
|
||||
Tabs: require('./components/tabs/readme.md'),
|
||||
|
@ -10,6 +10,7 @@ module.exports = {
|
||||
Tab: require('./components/tab'),
|
||||
Tabs: require('./components/tabs'),
|
||||
Toggle: require('./components/toggle'),
|
||||
Notificaton: require('./components/notification'),
|
||||
Input: require('./components/input'),
|
||||
Icon: require('./components/icon'),
|
||||
RangeSlider: require('./components/range-slider'),
|
||||
|
@ -5,3 +5,19 @@
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
@ -88,7 +88,11 @@ const colors = {
|
||||
confirmation: '#38C647',
|
||||
background: '#ffffff',
|
||||
border: '#D8D8D8',
|
||||
borderSelected: '#1D35BC'
|
||||
borderSelected: '#1D35BC',
|
||||
warning: '#e4a800',
|
||||
warningLight: '#fffaed',
|
||||
alert: '#D0011B',
|
||||
alertLight: '#ffc7c7'
|
||||
};
|
||||
|
||||
const typography = {
|
||||
|
Loading…
Reference in New Issue
Block a user