mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 06:00:06 +02:00
Avatar Component
- Creating Avatar component and adding to showcase - Creating a composer file and adding class to vertically align content centrally
This commit is contained in:
parent
4c03f55498
commit
8c147e4127
50
ui/src/components/avatar/index.js
Normal file
50
ui/src/components/avatar/index.js
Normal file
@ -0,0 +1,50 @@
|
||||
// TODO: use a checkbox
|
||||
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Avatar = ({
|
||||
image,
|
||||
name,
|
||||
className,
|
||||
style
|
||||
}) => {
|
||||
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.avatar
|
||||
);
|
||||
|
||||
const fill = () => {
|
||||
if ( image ) {
|
||||
return (
|
||||
<img
|
||||
alt={name}
|
||||
className={styles.picture}
|
||||
src={image}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
const letter = name.split('')[0];
|
||||
return (
|
||||
<p className={styles.letter}>{letter}</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn}>
|
||||
{fill()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Avatar.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
image: React.PropTypes.string,
|
||||
name: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = Avatar;
|
41
ui/src/components/avatar/readme.md
Normal file
41
ui/src/components/avatar/readme.md
Normal file
@ -0,0 +1,41 @@
|
||||
# `<Avatar>`
|
||||
|
||||
## 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 Avatar = require('./index.js');
|
||||
const styles = require('./style.css');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Row>
|
||||
<Column>
|
||||
<Avatar name='Alex' />
|
||||
</Column>
|
||||
<Column>
|
||||
<Avatar name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Avatar = require('ui/avatar');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Avatar name='Alex' />
|
||||
<Avatar name='Alex' image='path/to/image.png' />
|
||||
);
|
||||
}
|
||||
```
|
19
ui/src/components/avatar/style.css
Normal file
19
ui/src/components/avatar/style.css
Normal file
@ -0,0 +1,19 @@
|
||||
.avatar {
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
height: remCalc(50);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
width: remCalc(50);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.letter {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.picture {
|
||||
max-width: 60%;
|
||||
|
||||
composes: verticle_align_center from '../../util/composers.css';
|
||||
}
|
@ -5,6 +5,7 @@ module.exports = {
|
||||
Layout: require('./guidelines/layout.md')
|
||||
},
|
||||
Components: {
|
||||
Avatar: require('./components/avatar/readme.md'),
|
||||
Base: require('./components/base/readme.md'),
|
||||
Container: require('./components/container/readme.md'),
|
||||
Row: require('./components/row/readme.md'),
|
||||
|
@ -1,4 +1,5 @@
|
||||
module.exports = {
|
||||
Avatar: require('./components/avatar'),
|
||||
Base: require('./components/base'),
|
||||
Button: require('./components/button'),
|
||||
Checkbox: require('./components/checkbox'),
|
||||
|
8
ui/src/util/composers.css
Normal file
8
ui/src/util/composers.css
Normal file
@ -0,0 +1,8 @@
|
||||
.verticle_align_center {
|
||||
/* Need to palce position:relative on parent*/
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
Loading…
Reference in New Issue
Block a user