fix(avatar): simplify logic for when to show image or icon (#2456)

* fix(avatar): prefer image over icon

* chore: add test

* update changelog

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.changeset/wicked-carrots-greet.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/avatar': patch
+'@twilio-paste/core': patch
+---
+
+[Avatar] simplify logic for when to show image or icon

packages/paste-core/components/avatar/__tests__/avatar.test.tsx

@@ -127,6 +127,22 @@ describe('Avatar', () => {
       );
       expect(asFragment()).toMatchSnapshot();
     });
+
+    it('should render an image if src and icon are passed', () => {
+      render(
+        <Avatar
+          data-testid="avatar"
+          size="sizeIcon20"
+          name="avatar example"
+          icon={UserIcon}
+          src="/avatars/avatar2.png"
+        />
+      );
+
+      expect(screen.getByRole('img').getAttribute('src')).toEqual('/avatars/avatar2.png');
+      expect(screen.getByRole('img').getAttribute('alt')).toEqual('avatar example');
+      expect(screen.getByTestId('avatar').querySelectorAll('svg').length).toEqual(0);
+    });
   });
 
   describe('ensure icon is a Paste Icon', () => {

packages/paste-core/components/avatar/src/index.tsx

@@ -11,6 +11,9 @@ const DEFAULT_SIZE = 'sizeIcon70';
 
 const AvatarContents: React.FC<AvatarContentProps> = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => {
   const computedTokenNames = getComputedTokenNames(size);
+  if (src != null) {
+    return <Box as="img" alt={name} maxWidth="100%" src={src} size={size} title={name} />;
+  }
   if (Icon != null) {
     if (!isValidElementType(Icon) || typeof Icon.displayName !== 'string' || !Icon.displayName.includes('Icon')) {
       throw new Error('[Paste Avatar]: icon prop expected to be a Paste icon only.');
@@ -21,9 +24,6 @@ const AvatarContents: React.FC<AvatarContentProps> = ({name, size = DEFAULT_SIZE
       </Box>
     );
   }
-  if (src != null) {
-    return <Box as="img" alt={name} maxWidth="100%" src={src} size={size} title={name} />;
-  }
   return (
     <Text
       as="abbr"
@@ -59,11 +59,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         size={size}
         color="colorText"
       >
-        {src ? (
-          <AvatarContents name={name} size={size} src={src} />
-        ) : (
-          <AvatarContents name={name} size={size} icon={icon} />
-        )}
+        <AvatarContents name={name} size={size} icon={icon} src={src} />
       </Box>
     );
   }

packages/paste-website/src/pages/components/avatar/index.mdx

@@ -121,7 +121,7 @@ Provide the Avatar with a source path via the `src` prop to render the Avatar as
   <CalloutTitle>A note about Avatar contents</CalloutTitle>
   <CalloutText>
     The Avatar component can either display an image or an icon, but not both. If both are present, the Avatar will
-    display the icon.
+    display the image.
   </CalloutText>
 </Callout>
 
@@ -152,7 +152,7 @@ Provide the Avatar with an `icon` prop to display an icon. You must import the i
   <CalloutTitle>A note about Avatar contents</CalloutTitle>
   <CalloutText>
     The Avatar component can either display an image or an icon, but not both. If both are present, the Avatar will
-    display the icon.
+    display the image.
   </CalloutText>
 </Callout>
 
@@ -207,7 +207,7 @@ The Avatar `size` can be set as a responsive array of sizes.
 
 ## Composition Notes
 
-The Avatar displays its contents in this priority: icon, then image, then initials.
+The Avatar displays its contents in this priority: image, then icon, then initials.
 
 ## Anatomy