From 80c596db66dfdd9eae0e0c2edfacce9e860d2567 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Fri, 28 Oct 2016 11:21:46 +0100 Subject: [PATCH] Avatar - Adding custom color and style to avatar component --- ui/src/components/avatar/index.js | 19 ++++++++++++++++--- ui/src/components/avatar/readme.md | 8 ++++---- ui/src/components/avatar/style.css | 1 - 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js index 320a347e..903caf0d 100644 --- a/ui/src/components/avatar/index.js +++ b/ui/src/components/avatar/index.js @@ -5,6 +5,7 @@ const React = require('react'); const styles = require('./style.css'); const Avatar = ({ + color, image, name, className, @@ -16,6 +17,11 @@ const Avatar = ({ styles.avatar ); + style = { + ...style, + background: color + } + const fill = () => { if ( image ) { return ( @@ -23,18 +29,24 @@ const Avatar = ({ alt={name} className={styles.picture} src={image} - /> + style={style} + /> ); } else { const letter = name.split('')[0]; return ( -

{letter}

+

+ {letter} +

); } } return ( -
+
{fill()}
); @@ -42,6 +54,7 @@ const Avatar = ({ Avatar.propTypes = { className: React.PropTypes.string, + color: React.PropTypes.string, image: React.PropTypes.string, name: React.PropTypes.string, style: React.PropTypes.object diff --git a/ui/src/components/avatar/readme.md b/ui/src/components/avatar/readme.md index c7520bdd..38f58712 100644 --- a/ui/src/components/avatar/readme.md +++ b/ui/src/components/avatar/readme.md @@ -16,10 +16,10 @@ nmodule.exports = ReactDOM.renderToString( - + - + @@ -34,8 +34,8 @@ const Avatar = require('ui/avatar'); module.exports = () => { return ( - - + + ); } ``` diff --git a/ui/src/components/avatar/style.css b/ui/src/components/avatar/style.css index 0816e095..7683e0d5 100644 --- a/ui/src/components/avatar/style.css +++ b/ui/src/components/avatar/style.css @@ -1,5 +1,4 @@ .avatar { - background: red; border-radius: 50%; height: remCalc(50); overflow: hidden;