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' ? : image} + {cover && typeof image === 'string' && } + {!cover && (typeof image === 'string' ? {title} : 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 = () => ( }/> + +