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

packages/terra-avatar/CHANGELOG.md

@@ -3,6 +3,8 @@ ChangeLog
 
 Unreleased
 ----------
+### Changed 
+* Changed the fallback behavior of Avatar. Such that if the image fails to load when initials are provided, the avatar falls back to the initials display instead of default user icon.
 
 2.26.0 - (September 6, 2019)
 ------------------

packages/terra-avatar/docs/avatar.md

@@ -1,6 +1,6 @@
 # Terra Avatar
 
-The `Avatar` variant represents a person - it displays an image or initials in a circular frame. If neither are provided, a fallback user icon displays. This is the default export of the `terra-avatar` package.
+The `Avatar` variant represents a person - it displays an image or initials in a circular frame. If valid image is not provided and initials is provided, then fallback initial displays. If neither are provided, a fallback user icon displays. This is the default export of the `terra-avatar` package.
 
 ## Getting Started
 

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

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

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

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

@@ -73,10 +73,18 @@ class Facility extends React.Component {
 
     let facilityContent;
 
+    const facilityParams = {
+      image,
+      alt,
+      isAriaHidden,
+      variant: AVATAR_VARIANTS.FACILITY,
+      handleFallback: this.handleFallback,
+    };
+
     if (image) {
-      facilityContent = generateImage(image, alt, isAriaHidden, AVATAR_VARIANTS.FACILITY, this.handleFallback);
+      facilityContent = generateImage(facilityParams);
     } else {
-      facilityContent = generateImagePlaceholder(alt, isAriaHidden, AVATAR_VARIANTS.FACILITY);
+      facilityContent = generateImagePlaceholder(facilityParams);
     }
     const attributes = { ...customProps };
     const customStyles = size ? ({ fontSize: size, ...attributes.style }) : attributes.style;

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' });
   });