Rename title to initials in AvatarImage component

src/components/Avatar/Avatar.Image.jsx

@@ -10,7 +10,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import VisuallyHidden from '../VisuallyHidden'
 import { classNames } from '../../utilities/classNames'
 import { noop } from '../../utilities/other'
-import { ImageWrapperUI, ImageUI, TitleUI } from './Avatar.css'
+import { ImageWrapperUI, ImageUI, InitialsUI } from './Avatar.css'
 import { getAnimationProps } from './Avatar.utils'
 
 let cache = {}
@@ -184,15 +184,15 @@ export class AvatarImage extends React.PureComponent {
     }
   }
 
-  getTitleMarkup() {
-    const { light, title } = this.props
+  renderInitials() {
+    const { light, initials } = this.props
 
     const componentClassName = classNames(
-      'c-Avatar__title',
+      'c-Avatar__initials',
       light && 'is-light'
     )
 
-    return <TitleUI className={componentClassName}>{title}</TitleUI>
+    return <InitialsUI className={componentClassName}>{initials}</InitialsUI>
   }
 
   render() {
@@ -228,7 +228,7 @@ export class AvatarImage extends React.PureComponent {
         </ImageUI>
       </ImageWrapperUI>
     )
-    return hasImage ? contentMarkup : this.getTitleMarkup()
+    return hasImage ? contentMarkup : this.renderInitials()
   }
 }
 
@@ -237,12 +237,12 @@ AvatarImage.defaultProps = {
   animationDuration: 160,
   animationEasing: 'ease',
   'data-cy': 'AvatarImage',
-  src: null,
+  initials: null,
+  light: false,
+  name: null,
   onError: noop,
   onLoad: noop,
-  name: null,
-  title: null,
-  light: false,
+  src: null,
 }
 
 AvatarImage.propTypes = {
@@ -251,12 +251,12 @@ AvatarImage.propTypes = {
   animationEasing: PropTypes.string,
   /** Data attr for Cypress tests. */
   'data-cy': PropTypes.string,
-  src: PropTypes.any,
+  initials: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   light: PropTypes.bool,
   name: PropTypes.string,
   onError: PropTypes.func,
   onLoad: PropTypes.func,
-  title: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  src: PropTypes.any,
 }
 
 export default AvatarImage

src/components/Avatar/Avatar.css.js

@@ -155,7 +155,7 @@ export const ImageUI = styled('div')`
   width: 100%;
 `
 
-export const TitleUI = styled('div')`
+export const InitialsUI = styled('div')`
   color: white;
   line-height: 1;
   text-transform: uppercase;

src/components/Avatar/Avatar.jsx

@@ -114,7 +114,7 @@ export class Avatar extends React.PureComponent {
 
     const hasImage = this.src.length > 0 && !this.state.imageFailed
 
-    const title = this.getTitle()
+    const initials = this.getInitials()
     return (
       <AvatarCrop
         className={shapeClassnames}
@@ -129,7 +129,7 @@ export class Avatar extends React.PureComponent {
           className={classNames('c-Avatar__imageMainWrapper', shapeClassnames)}
           src={this.src}
           name={name}
-          title={title}
+          initials={initials}
           light={light}
           onError={this.onImageLoadedError}
           onLoad={this.onImageLoadedSuccess}
@@ -143,7 +143,7 @@ export class Avatar extends React.PureComponent {
             )}
             src={fallbackImage}
             name={name}
-            title={title}
+            initials={initials}
             light={light}
           />
         )}
@@ -182,7 +182,7 @@ export class Avatar extends React.PureComponent {
     )
   }
 
-  getTitle() {
+  getInitials() {
     const { count, initials, name } = this.props
 
     return count || initials || nameToInitials(name)

src/components/Avatar/Avatar.test.js

@@ -16,7 +16,7 @@ const ui = {
   borderAnimation: '.c-Avatar__borderAnimation',
   image: '.c-Avatar__image',
   imageWrapper: '.c-Avatar__imageWrapper',
-  initials: '.c-Avatar__title',
+  initials: '.c-Avatar__initials',
   action: '.c-Avatar__action',
 }