fix: dsr avatar linting violations (#674)

## **Description**

This PR improves the Avatar components in the design-system-react
package by removing ESLint ignores and fixing TypeScript type issues.

1. What is the reason for the change?
   - Several Avatar components were being ignored by ESLint checks
- Components were using type assertions (`as any`) which can hide
potential errors
   - Some components were using less optimal React imports

2. What is the improvement/solution?
   - Removed ESLint ignores for Avatar components
   - Properly typed `imageProps` to include `data-testid` property
- Changed `React.forwardRef` to destructured `{ forwardRef }` from React
   - Fixed string concatenation in error messages
   - Added missing default case in AvatarGroupStory component
   - Fixed TailwindCSS class ordering

## **Related issues**

Part of: #657

## **Manual testing steps**

1. Run the storybook for design-system-react
2. Verify all Avatar components render properly
3. Verify tests pass for all Avatar components

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: georgewrmarshall

eslint.config.mjs

@@ -22,12 +22,8 @@ const config = createConfig([
       // design system react
       'packages/design-system-react/src/components/Icon/icons/*.tsx',
       'packages/design-system-react/src/components/Icon/icons/index.ts',
-      'packages/design-system-react/src/components/AvatarFavicon/AvatarFavicon.test.tsx',
-      'packages/design-system-react/src/components/AvatarGroup/AvatarGroup.stories.tsx',
-      'packages/design-system-react/src/components/AvatarGroup/AvatarGroup.test.tsx',
-      'packages/design-system-react/src/components/AvatarGroup/AvatarGroup.tsx',
-      'packages/design-system-react/src/components/AvatarNetwork/AvatarNetwork.test.tsx',
-      'packages/design-system-react/src/components/AvatarToken/AvatarToken.test.tsx',
+      'packages/design-system-react/src/components/BadgeNetwork/BadgeNetwork.test.tsx',
+      'packages/design-system-react/src/components/BadgeWrapper/BadgeWrapper.test.tsx',
       'packages/design-system-react/src/components/temp-components/Jazzicon/Jazzicon.test.tsx',
       'packages/design-system-react/src/components/temp-components/Jazzicon/Jazzicon.tsx',
       'packages/design-system-react/src/components/temp-components/Maskicon/Maskicon.test.tsx',

packages/design-system-react/src/components/AvatarFavicon/AvatarFavicon.test.tsx

@@ -7,6 +7,7 @@ import {
   TWCLASSMAP_AVATARBASE_SIZE_BORDER,
   TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,
 } from '../AvatarBase/AvatarBase.constants';
+
 import { AvatarFavicon } from './AvatarFavicon';
 
 describe('AvatarFavicon', () => {
@@ -65,7 +66,7 @@ describe('AvatarFavicon', () => {
         <AvatarFavicon
           name="ACME"
           src={src}
-          imageProps={{ 'data-testid': 'img', id: 'img-id' } as any}
+          imageProps={{ 'data-testid': 'img', id: 'img-id' }}
         />,
       );
       const img = screen.getByTestId('img') as HTMLImageElement;
@@ -80,7 +81,7 @@ describe('AvatarFavicon', () => {
         <AvatarFavicon
           name=""
           src={src}
-          imageProps={{ 'data-testid': 'img2' } as any}
+          imageProps={{ 'data-testid': 'img2' }}
         />,
       );
       expect(screen.getByTestId('img2')).toHaveAttribute('alt', 'Dapp logo');
@@ -103,7 +104,7 @@ describe('AvatarFavicon', () => {
         <AvatarFavicon
           name="Beta"
           src="bad.png"
-          imageProps={{ 'data-testid': 'bad-img', onError } as any}
+          imageProps={{ 'data-testid': 'bad-img', onError }}
         />,
       );
       fireEvent.error(screen.getByTestId('bad-img'));
@@ -143,7 +144,7 @@ describe('AvatarFavicon', () => {
       render(
         <AvatarFavicon
           src={src}
-          imageProps={{ 'data-testid': 'img-no-name' } as any}
+          imageProps={{ 'data-testid': 'img-no-name' }}
         />,
       );
       const img = screen.getByTestId('img-no-name') as HTMLImageElement;

packages/design-system-react/src/components/AvatarFavicon/AvatarFavicon.types.ts

@@ -21,5 +21,7 @@ export type AvatarFaviconProps = Omit<
      * Optional prop to pass to the underlying img element
      * Useful for overriding the default alt text which is the dapp name
      */
-    imageProps?: ComponentProps<'img'>;
+    imageProps?: ComponentProps<'img'> & {
+      'data-testid'?: string;
+    };
   };

packages/design-system-react/src/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { AvatarGroupSize, AvatarGroupVariant } from '../../types';
+
 import { AvatarGroup } from './AvatarGroup';
 import {
   SAMPLE_AVATARGROUP_AVATARACCOUNTPROPSARR,
@@ -90,6 +91,14 @@ const AvatarGroupStory: React.FC<Omit<AvatarGroupProps, 'avatarPropsArr'>> = ({
           avatarPropsArr={SAMPLE_AVATARGROUP_AVATARTOKENPROPSARR}
         />
       );
+    default:
+      return (
+        <AvatarGroup
+          {...props}
+          variant={AvatarGroupVariant.Favicon}
+          avatarPropsArr={SAMPLE_AVATARGROUP_AVATARFAVICONPROPSARR}
+        />
+      );
   }
 };
 
@@ -140,10 +149,7 @@ export const Size: Story = {
   render: () => (
     <div>
       {Object.keys(AvatarGroupSize).map((sizeKey) => (
-        <div
-          key={sizeKey}
-          className="flex flex-col gap-1 mb-4"
-        >
+        <div key={sizeKey} className="mb-4 flex flex-col gap-1">
           <AvatarGroupStory
             variant={AvatarGroupVariant.Account}
             size={AvatarGroupSize[sizeKey as keyof typeof AvatarGroupSize]}
@@ -180,19 +186,19 @@ export const Max: Story = {
 export const IsReverse: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-1 items-start">
+      <div className="flex flex-col items-start gap-1">
         <AvatarGroupStory variant={AvatarGroupVariant.Account} />
         <AvatarGroupStory variant={AvatarGroupVariant.Account} isReverse />
       </div>
-      <div className="flex flex-col gap-1 items-start">
+      <div className="flex flex-col items-start gap-1">
         <AvatarGroupStory variant={AvatarGroupVariant.Favicon} />
         <AvatarGroupStory variant={AvatarGroupVariant.Favicon} isReverse />
       </div>
-      <div className="flex flex-col gap-1 items-start">
+      <div className="flex flex-col items-start gap-1">
         <AvatarGroupStory variant={AvatarGroupVariant.Network} />
         <AvatarGroupStory variant={AvatarGroupVariant.Network} isReverse />
       </div>
-      <div className="flex flex-col gap-1 items-start">
+      <div className="flex flex-col items-start gap-1">
         <AvatarGroupStory variant={AvatarGroupVariant.Token} />
         <AvatarGroupStory variant={AvatarGroupVariant.Token} isReverse />
       </div>

packages/design-system-react/src/components/AvatarGroup/AvatarGroup.test.tsx

@@ -5,6 +5,7 @@ import { AvatarGroupVariant, AvatarGroupSize } from '../../types';
 import { AvatarAccountVariant } from '../AvatarAccount';
 import { TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE } from '../AvatarBase/AvatarBase.constants';
 import { TextColor } from '../Text';
+
 import { AvatarGroup } from './AvatarGroup';
 import { AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP } from './AvatarGroup.constants';
 
@@ -119,11 +120,12 @@ describe('AvatarGroup', () => {
       expect(() =>
         render(
           <AvatarGroup
-            variant={'Invalid' as any}
-            avatarPropsArr={[{ foo: 'bar' } as any]}
+            variant={'Invalid' as unknown as AvatarGroupVariant}
+            // @ts-expect-error - invalid variant
+            avatarPropsArr={[{ foo: 'bar' }]}
           />,
         ),
-      ).toThrow(/Invalid Avatar Variant: Invalid/);
+      ).toThrow(/Invalid Avatar Variant: Invalid/u);
     });
   });
 

packages/design-system-react/src/components/AvatarGroup/AvatarGroup.tsx

@@ -2,19 +2,25 @@ import React, { forwardRef, useCallback } from 'react';
 
 import { AvatarGroupSize, AvatarGroupVariant } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
+import type { AvatarAccountProps } from '../AvatarAccount';
+import { AvatarAccount } from '../AvatarAccount';
+import type { AvatarBaseSize } from '../AvatarBase';
 import { AvatarBase } from '../AvatarBase';
-import { AvatarAccount, AvatarAccountProps } from '../AvatarAccount';
-import { AvatarBaseSize, AvatarBaseShape } from '../AvatarBase';
-import { AvatarFavicon, AvatarFaviconProps } from '../AvatarFavicon';
-import { AvatarNetwork, AvatarNetworkProps } from '../AvatarNetwork';
-import { AvatarToken, AvatarTokenProps } from '../AvatarToken';
+import { AvatarBaseShape } from '../AvatarBase';
+import type { AvatarFaviconProps } from '../AvatarFavicon';
+import { AvatarFavicon } from '../AvatarFavicon';
+import type { AvatarNetworkProps } from '../AvatarNetwork';
+import { AvatarNetwork } from '../AvatarNetwork';
+import type { AvatarTokenProps } from '../AvatarToken';
+import { AvatarToken } from '../AvatarToken';
 import { TextColor } from '../Text';
+
 import {
   AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP,
   AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP,
   AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP,
 } from './AvatarGroup.constants';
-import { AvatarGroupProps } from './AvatarGroup.types';
+import type { AvatarGroupProps } from './AvatarGroup.types';
 
 export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
   (
@@ -118,7 +124,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
               );
             default:
               throw new Error(
-                `Invalid Avatar Variant: ${variant}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`,
+                `Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`,
               );
           }
         }),

packages/design-system-react/src/components/AvatarGroup/README.mdx

@@ -496,7 +496,7 @@ Example:
       src: { uri: 'https://example.com/token3.png' },
     },
   ]}
-  className="my-4 mx-2"
+  className="mx-2 my-4"
 />
 ```
 

packages/design-system-react/src/components/AvatarNetwork/AvatarNetwork.test.tsx

@@ -7,6 +7,7 @@ import {
   TWCLASSMAP_AVATARBASE_SIZE_BORDER,
   TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,
 } from '../AvatarBase/AvatarBase.constants';
+
 import { AvatarNetwork } from './AvatarNetwork';
 
 describe('AvatarNetwork', () => {
@@ -65,7 +66,7 @@ describe('AvatarNetwork', () => {
         <AvatarNetwork
           name="ACME"
           src={src}
-          imageProps={{ 'data-testid': 'img', id: 'img-id' } as any}
+          imageProps={{ 'data-testid': 'img', id: 'img-id' }}
         />,
       );
       const img = screen.getByTestId('img') as HTMLImageElement;
@@ -80,7 +81,7 @@ describe('AvatarNetwork', () => {
         <AvatarNetwork
           name=""
           src={src}
-          imageProps={{ 'data-testid': 'img2' } as any}
+          imageProps={{ 'data-testid': 'img2' }}
         />,
       );
       expect(screen.getByTestId('img2')).toHaveAttribute('alt', 'Network logo');
@@ -103,7 +104,7 @@ describe('AvatarNetwork', () => {
         <AvatarNetwork
           name="Beta"
           src="bad.png"
-          imageProps={{ 'data-testid': 'bad-img', onError } as any}
+          imageProps={{ 'data-testid': 'bad-img', onError }}
         />,
       );
       fireEvent.error(screen.getByTestId('bad-img'));
@@ -143,7 +144,7 @@ describe('AvatarNetwork', () => {
       render(
         <AvatarNetwork
           src={src}
-          imageProps={{ 'data-testid': 'img-no-name' } as any}
+          imageProps={{ 'data-testid': 'img-no-name' }}
         />,
       );
       const img = screen.getByTestId('img-no-name') as HTMLImageElement;

packages/design-system-react/src/components/AvatarNetwork/AvatarNetwork.types.ts

@@ -21,5 +21,7 @@ export type AvatarNetworkProps = Omit<
      * Optional prop to pass to the underlying img element
      * Useful for overriding the default alt text which is the network name
      */
-    imageProps?: ComponentProps<'img'>;
+    imageProps?: ComponentProps<'img'> & {
+      'data-testid'?: string;
+    };
   };

packages/design-system-react/src/components/AvatarToken/AvatarToken.test.tsx

@@ -7,6 +7,7 @@ import {
   TWCLASSMAP_AVATARBASE_SIZE_BORDER,
   TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,
 } from '../AvatarBase/AvatarBase.constants';
+
 import { AvatarToken } from './AvatarToken';
 
 describe('AvatarToken', () => {
@@ -65,7 +66,7 @@ describe('AvatarToken', () => {
         <AvatarToken
           name="ACME"
           src={src}
-          imageProps={{ 'data-testid': 'img', id: 'img-id' } as any}
+          imageProps={{ 'data-testid': 'img', id: 'img-id' }}
         />,
       );
       const img = screen.getByTestId('img') as HTMLImageElement;
@@ -80,7 +81,7 @@ describe('AvatarToken', () => {
         <AvatarToken
           name=""
           src={src}
-          imageProps={{ 'data-testid': 'img2' } as any}
+          imageProps={{ 'data-testid': 'img2' }}
         />,
       );
       expect(screen.getByTestId('img2')).toHaveAttribute('alt', 'Token logo');
@@ -103,7 +104,7 @@ describe('AvatarToken', () => {
         <AvatarToken
           name="Beta"
           src="bad.png"
-          imageProps={{ 'data-testid': 'bad-img', onError } as any}
+          imageProps={{ 'data-testid': 'bad-img', onError }}
         />,
       );
       fireEvent.error(screen.getByTestId('bad-img'));
@@ -141,10 +142,7 @@ describe('AvatarToken', () => {
 
     it('uses default alt text when name prop is omitted', () => {
       render(
-        <AvatarToken
-          src={src}
-          imageProps={{ 'data-testid': 'img-no-name' } as any}
-        />,
+        <AvatarToken src={src} imageProps={{ 'data-testid': 'img-no-name' }} />,
       );
       const img = screen.getByTestId('img-no-name') as HTMLImageElement;
       expect(img.alt).toBe('Token logo');

packages/design-system-react/src/components/AvatarToken/AvatarToken.types.ts

@@ -21,5 +21,7 @@ export type AvatarTokenProps = Omit<
      * Optional prop to pass to the underlying img element
      * Useful for overriding the default alt text which is the token name
      */
-    imageProps?: ComponentProps<'img'>;
+    imageProps?: ComponentProps<'img'> & {
+      'data-testid'?: string;
+    };
   };

packages/design-system-react/src/components/BadgeNetwork/README.mdx

@@ -78,7 +78,7 @@ Example:
   name="Ethereum"
   src="path/to/ethereum-logo.png"
   fallbackText="E"
-  className="my-4 mx-2"
+  className="mx-2 my-4"
 />
 ```