diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index 24cf719a..9023663b 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -5,10 +5,11 @@ import { AVATAR } from '../identifiers.js';
import InjectFontIcon from '../font_icon/FontIcon.js';
const factory = (FontIcon) => {
- const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
+ const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
{children}
- {typeof image === 'string' ?
![{title}]({image})
: image}
+ {cover && typeof image === 'string' &&
}
+ {!cover && (typeof image === 'string' ?
![{title} {title}]({image})
: image)}
{typeof icon === 'string' ?
: icon}
{title ?
{title[0]} : null}
@@ -17,6 +18,7 @@ const factory = (FontIcon) => {
Avatar.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
+ cover: PropTypes.bool,
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
theme: PropTypes.shape({
@@ -27,6 +29,10 @@ const factory = (FontIcon) => {
title: PropTypes.string
};
+ Avatar.defaultProps = {
+ cover: false
+ };
+
return Avatar;
};
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index a30c5212..ff90fdd9 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -18,6 +18,7 @@ const AvatarTest = () => (
} />
+
);
@@ -31,6 +32,7 @@ If you want to provide a theme via context, the component key is `RTAvatar`.
|:-----|:-----|:-----|:-----|
| `children` | `Node` | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
| `className` | `String` | `''` | Set a class to style the Component.|
+| `cover` | `Boolean` | `''` | Set to true if your image is not squared so it will be used as a cover for the element.|
| `icon` | `String` or `Element` | | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
| `image` | `String` or `Element` | | An image source or an image element. |
| `title` | `String` | `''` | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
diff --git a/spec/components/avatar.js b/spec/components/avatar.js
index 82eb22ae..8255435c 100644
--- a/spec/components/avatar.js
+++ b/spec/components/avatar.js
@@ -9,6 +9,8 @@ const AvatarTest = () => (
}/>
+
+