feat(Avatar): added image&label shorthands

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Add `image` and `label` shorthands props for `Avatar` @mnajdova ([#270](https://github.com/stardust-ui/react/pull/270))
+
 ### Features
 - Add `Attachment` component @levithomason ([#220](https://github.com/stardust-ui/react/pull/220))
 

docs/src/examples/components/Avatar/Variations/AvatarExampleImage.shorthand.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Avatar } from '@stardust-ui/react'
+
+const AvatarExampleImageShorthand = () => <Avatar image="public/images/avatar/small/matt.jpg" />
+
+export default AvatarExampleImageShorthand

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Avatar, Icon } from '@stardust-ui/react'
+
+const iconAsImage = (Image, props, children) => {
+  return <Icon name="user" circular variables={{ color: 'blue' }} styles={{ fontSize: '16px' }} />
+}
+
+const AvatarExampleImageCustomizationShorthand = () => (
+  <>
+    <Avatar
+      image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of John Doe' }}
+      status={{ color: 'green', icon: 'check', title: 'Available' }}
+    />
+    &emsp;
+    <Avatar image={iconAsImage} status={{ color: 'green', icon: 'check', title: 'Available' }} />
+  </>
+)
+
+export default AvatarExampleImageCustomizationShorthand

docs/src/examples/components/Avatar/Variations/AvatarExampleLabel.shorthand.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Avatar } from '@stardust-ui/react'
+
+const AvatarExampleLabelShorthand = () => (
+  <Avatar name="John Doe" label={{ variables: { backgroundColor: 'pink' } }} />
+)
+
+export default AvatarExampleLabelShorthand

docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx

@@ -11,11 +11,11 @@ const AvatarExampleSizeShorthand = () =>
       <p key={size}>
         <strong>{size}</strong>
         &emsp;
-        <Avatar size={size} src="public/images/avatar/small/matt.jpg" status={status} />
+        <Avatar size={size} image="public/images/avatar/small/matt.jpg" status={status} />
         &emsp;
         <Avatar size={size} name="John Doe" status={status} />
         &emsp;
-        <Avatar size={size} src="public/images/avatar/small/matt.jpg" />
+        <Avatar size={size} image="public/images/avatar/small/matt.jpg" />
       </p>
     )
   })

docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx

@@ -4,24 +4,24 @@ import { Avatar } from '@stardust-ui/react'
 const AvatarExampleStatusShorthand = () => (
   <div>
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      image="public/images/avatar/small/matt.jpg"
       status={{ color: 'green', icon: 'check', title: 'Available' }}
     />
     &emsp;
-    <Avatar src="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />
+    <Avatar image="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />
     &emsp;
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      image="public/images/avatar/small/matt.jpg"
       status={{ color: 'red', icon: 'minus', title: 'Do not disturb' }}
     />
     &emsp;
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      image="public/images/avatar/small/matt.jpg"
       status={{ color: 'yellow', icon: 'clock', title: 'Away' }}
     />
     &emsp;
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      image="public/images/avatar/small/matt.jpg"
       status={{ color: 'grey', title: 'Offline' }}
     />
     &emsp;

docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx

@@ -3,8 +3,7 @@ import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleStatusCustomizationShorthand = () => (
   <Avatar
-    src="public/images/avatar/small/matt.jpg"
-    alt="Profile picture of Matt"
+    image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
     status={{
       color: 'green',
       icon: 'check',

docs/src/examples/components/Avatar/Variations/index.tsx

@@ -7,12 +7,17 @@ const Variations = () => (
     <ComponentExample
       title="Image"
       description="An Avatar can show the image of the user."
-      examplePath="components/Avatar/Variations/AvatarExampleSrc"
+      examplePath="components/Avatar/Variations/AvatarExampleImage"
     />
     <ComponentExample
-      title="Alt"
-      description="The alternative text for the image used in the Avatar."
-      examplePath="components/Avatar/Variations/AvatarExampleAlt"
+      title="Image customizations"
+      description="The image slot inside the Avatar can be customized."
+      examplePath="components/Avatar/Variations/AvatarExampleImageCustomization"
+    />
+    <ComponentExample
+      title="Label"
+      description="The avatars without image can show label containing the user's initials."
+      examplePath="components/Avatar/Variations/AvatarExampleLabel"
     />
     <ComponentExample
       title="Status"

docs/src/examples/components/Chat/Variations/ChatExampleAvatar.shorthand.tsx

@@ -11,29 +11,29 @@ const messages = [
     timestamp: 'Yesterday, 10:15 PM',
     content: 'Hello',
     mine: true,
-    avatar: { src: 'public/images/avatar/small/matt.jpg', status: availableStatus },
+    avatar: { image: 'public/images/avatar/small/matt.jpg', status: availableStatus },
   },
   {
     key: 2,
     author: 'Jenny Doe',
     timestamp: 'Yesterday, 10:17 PM',
     content: 'Hi',
-    avatar: { src: 'public/images/avatar/small/jenny.jpg', status: busyStatus },
+    avatar: { image: 'public/images/avatar/small/jenny.jpg', status: busyStatus },
   },
   {
     key: 3,
     author: 'Matt Doe',
     timestamp: 'Yesterday, 10:18 PM',
     content: "Let's go get some lunch!",
     mine: true,
-    avatar: { src: 'public/images/avatar/small/matt.jpg', status: availableStatus },
+    avatar: { image: 'public/images/avatar/small/matt.jpg', status: availableStatus },
   },
   {
     key: 4,
     author: 'Jenny Doe',
     timestamp: 'Yesterday, 10:20 PM',
     content: 'Sure thing. I was thinking we should try the new place downtown.',
-    avatar: { src: 'public/images/avatar/small/jenny.jpg', status: busyStatus },
+    avatar: { image: 'public/images/avatar/small/jenny.jpg', status: busyStatus },
   },
 ]
 

src/components/Avatar/Avatar.tsx

@@ -2,17 +2,17 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Image, Label, Status } from '../../'
 
-import { customPropTypes, UIComponent, createShorthandFactory } from '../../lib'
-import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme'
+import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
+import { ComponentPartStyle, ComponentVariablesInput } from '../../../types/theme'
 import { Extendable, ItemShorthand } from '../../../types/utils'
 
 export interface IAvatarProps {
-  alt?: string
   as?: any
   className?: string
+  image?: ItemShorthand
+  label?: ItemShorthand
   name?: string
   size?: number
-  src?: string
   status?: ItemShorthand
   getInitials?: (name: string) => string
   styles?: ComponentPartStyle
@@ -31,22 +31,19 @@ class Avatar extends UIComponent<Extendable<IAvatarProps>, any> {
   static displayName = 'Avatar'
 
   static handledProps = [
-    'alt',
     'as',
     'className',
     'getInitials',
+    'image',
+    'label',
     'name',
     'size',
-    'src',
     'status',
     'styles',
     'variables',
   ]
 
   static propTypes = {
-    /** The alternative text for the image used in the Avatar. */
-    alt: PropTypes.string,
-
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
@@ -56,13 +53,16 @@ class Avatar extends UIComponent<Extendable<IAvatarProps>, any> {
     /** The name used for displaying the initials of the avatar if the image is not provided. */
     name: PropTypes.string,
 
-    /** Size multiplier */
-    size: PropTypes.number,
+    /** Shorthand for the image. */
+    image: customPropTypes.itemShorthand,
 
-    /** The src of the image used in the Avatar. */
-    src: PropTypes.string,
+    /** Shorthand for the label. */
+    label: customPropTypes.itemShorthand,
+
+    /** Size multiplier. */
+    size: PropTypes.number,
 
-    /** Shorthand for the status of the user */
+    /** Shorthand for the status of the user. */
     status: customPropTypes.itemShorthand,
 
     /** Custom method for generating the initials from the name property, shown in the avatar if there is no image provided. */
@@ -101,22 +101,28 @@ class Avatar extends UIComponent<Extendable<IAvatarProps>, any> {
   }
 
   renderComponent({ ElementType, classes, rest, styles, variables }) {
-    const { src, alt, name, status, getInitials, size } = this.props as IAvatarPropsWithDefaults
+    const { name, status, image, label, getInitials, size } = this.props as IAvatarPropsWithDefaults
 
     return (
       <ElementType {...rest} className={classes.root}>
-        {src ? (
-          <Image styles={styles.imageAvatar} fluid avatar src={src} alt={alt} title={name} />
-        ) : (
-          <Label
-            styles={styles.avatarNameContainer}
-            as="div"
-            content={getInitials(name || '')}
-            variables={{ padding: '0px' }}
-            circular
-            title={name}
-          />
-        )}
+        {Image.create(image, {
+          defaultProps: {
+            fluid: true,
+            avatar: true,
+            title: name,
+            styles: styles.image,
+          },
+        })}
+        {!image &&
+          Label.create(label || {}, {
+            defaultProps: {
+              as: 'div',
+              content: getInitials(name),
+              circular: true,
+              title: name,
+              styles: styles.label,
+            },
+          })}
         {Status.create(status, {
           defaultProps: {
             styles: styles.status,

src/themes/teams/components/Avatar/avatarStyles.ts

@@ -11,17 +11,18 @@ const avatarStyles: IComponentPartStylesInput<IAvatarPropsWithDefaults, any> = {
     height: pxToRem(size),
     width: pxToRem(size),
   }),
-  imageAvatar: (): ICSSInJSStyle => ({
+  image: (): ICSSInJSStyle => ({
     verticalAlign: 'top',
   }),
-  avatarNameContainer: ({ props: { size } }): ICSSInJSStyle => ({
+  label: ({ props: { size } }): ICSSInJSStyle => ({
     display: 'inline-block',
     width: pxToRem(size),
     height: pxToRem(size),
     lineHeight: pxToRem(size),
     fontSize: pxToRem(size / 2.333),
     verticalAlign: 'top',
     textAlign: 'center',
+    padding: '0px',
   }),
   status: ({ props, variables }): ICSSInJSStyle => ({
     position: 'absolute',

test/specs/components/Avatar/Avatar-test.tsx

@@ -1,9 +1,15 @@
-import { isConformant } from 'test/specs/commonTests'
+import { implementsShorthandProp, isConformant } from 'test/specs/commonTests'
 
 import Avatar from 'src/components/Avatar/Avatar'
+import Label from 'src/components/Label/Label'
+import Image from 'src/components/Image/Image'
+
+const avatarImplementsShorthandProp = implementsShorthandProp(Avatar)
 
 describe('Avatar', () => {
   isConformant(Avatar)
+  avatarImplementsShorthandProp('label', Label)
+  avatarImplementsShorthandProp('image', Image, { mapsValueToProp: 'src' })
 
   describe('generateInitials', () => {
     it('generateInitials should show just the initials of the first and last words in the name', () => {