1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40: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:
Alex Windett 2016-10-28 10:35:22 +01:00
parent 4c03f55498
commit 8c147e4127
6 changed files with 120 additions and 0 deletions

View 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;

View 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' />
);
}
```

View 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';
}

View File

@ -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'),

View File

@ -1,4 +1,5 @@
module.exports = {
Avatar: require('./components/avatar'),
Base: require('./components/base'),
Button: require('./components/button'),
Checkbox: require('./components/checkbox'),

View 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%);
}