[terra-avatar] Changed fallback to initials from user icon for avatar

packages/terra-avatar/CHANGELOG.md

@@ -3,6 +3,8 @@ ChangeLog
 
 Unreleased
 ----------
+### Changed 
+* Changed generateImage function to Fallback to Initials if Provided.
 
 2.25.0 - (August 21, 2019)
 ------------------

packages/terra-avatar/src/common/AvatarUtils.jsx

@@ -60,17 +60,21 @@ const getColorVariant = (hashValue) => {
 /**
  * Render placeholder.
  */
-const generateImagePlaceholder = (alt, isAriaHidden, variant) => {
-  const avatarIconClassNames = cx(['icon', variant]);
+const generateImagePlaceholder = (alt, isAriaHidden, variant, initials) => {
+  if (initials && initials.length <= 2) {
+    const avatarTextClassNames = cx('initials');
+    return <span className={avatarTextClassNames} alt={alt} aria-label={alt} aria-hidden={isAriaHidden}>{initials.toUpperCase()}</span>;
+  }
 
+  const avatarIconClassNames = cx(['icon', variant]);
   return <span className={avatarIconClassNames} role="img" aria-label={alt} alt={alt} aria-hidden={isAriaHidden} />;
 };
 
 /**
  * Render image with placeholder.
  */
-const generateImage = (image, alt, isAriaHidden, variant, handleFallback) => {
-  const icon = generateImagePlaceholder(alt, isAriaHidden, variant);
+const generateImage = (image, alt, isAriaHidden, variant, handleFallback, initials) => {
+  const icon = generateImagePlaceholder(alt, isAriaHidden, variant, initials);
   return <TerraImage className={cx('image')} src={image} placeholder={icon} alt={alt} onError={handleFallback} fit="cover" />;
 };
 

packages/terra-avatar/src/terra-dev-site/test/avatar/avatar/InvalidImageAvatarWithInitials.test.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import Avatar from '../../../../index';
+
+export default () => <Avatar image="invalid-image-url" initials="JD" alt="User" id="invalid-image-avatar" />;

packages/terra-avatar/src/variants/Avatar.jsx

@@ -86,8 +86,8 @@ class Avatar extends React.Component {
     let avatarContent;
 
     if (image) {
-      avatarContent = generateImage(image, alt, isAriaHidden, AVATAR_VARIANTS.USER, this.handleFallback);
-    } else if (initials && (initials.length === 1 || initials.length === 2)) {
+      avatarContent = generateImage(image, alt, isAriaHidden, AVATAR_VARIANTS.USER, this.handleFallback, initials);
+    } else if (initials && initials.length <= 2) {
       const avatarTextClassNames = cx('initials');
       avatarContent = <span className={avatarTextClassNames} alt={alt} aria-label={alt} aria-hidden={isAriaHidden}>{initials.toUpperCase()}</span>;
     } else {

packages/terra-avatar/tests/jest/Avatar.test.jsx

@@ -34,7 +34,13 @@ describe('Avatar', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render fallback user avatar when invalid image is passed in', () => {
+  it('should render fallback initials when invalid image is passed in with initials', () => {
+    const avatar = <Avatar image="https://path/to/invalid_image.jpg" initials="JD" alt="placeholder" />;
+    const wrapper = render(avatar);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render fallback user avatar when invalid image is passed in without initials', () => {
     const avatar = <Avatar image="https://path/to/invalid_image.jpg" alt="placeholder" />;
     const wrapper = render(avatar);
     expect(wrapper).toMatchSnapshot();

packages/terra-avatar/tests/jest/__snapshots__/Avatar.test.jsx.snap

@@ -115,7 +115,35 @@ exports[`Avatar should render an isDeceased avatar 1`] = `
 </div>
 `;
 
-exports[`Avatar should render fallback user avatar when invalid image is passed in 1`] = `
+exports[`Avatar should render fallback initials when invalid image is passed in with initials 1`] = `
+<div
+  class="avatar five image"
+>
+  <div>
+    <div
+      class="hidden"
+    >
+      <img
+        alt="placeholder"
+        class="image cover default image"
+        src="https://path/to/invalid_image.jpg"
+      />
+    </div>
+    <div>
+      <span
+        alt="placeholder"
+        aria-hidden="false"
+        aria-label="placeholder"
+        class="initials"
+      >
+        JD
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Avatar should render fallback user avatar when invalid image is passed in without initials 1`] = `
 <div
   class="avatar five image"
 >

packages/terra-avatar/tests/wdio/avatar-common-spec.js

@@ -25,8 +25,14 @@ Terra.describeViewports('Avatar', ['huge'], () => {
     Terra.it.matchesScreenshot({ selector: '#image-avatar' });
   });
 
-  describe('Invalid Image Avatar', () => {
-    before(() => browser.url('/#/raw/tests/terra-avatar/avatar/avatar/invalid-image-avatar'));
+  describe('Invalid Image Avatar With Initials', () => {
+    before(() => browser.url('/#/raw/tests/terra-avatar/avatar/avatar/invalid-image-avatar-with-initials'));
+
+    Terra.it.validatesElement({ selector: '#invalid-image-avatar' });
+  });
+
+  describe('Invalid Image Avatar Without Initials', () => {
+    before(() => browser.url('/#/raw/tests/terra-avatar/avatar/avatar/invalid-image-avatar-without-initials'));
 
     Terra.it.validatesElement({ selector: '#invalid-image-avatar' });
   });