feat: adding avatar network to design system react

[georgewrmarshall]

Has a dependency on #390

Description

This PR adds the initial AvatarNetwork component to design system react

Key features:

1. Supports image display with fallback text
2. Configurable sizes (xs, sm, md, lg, xl) with appropriate text scaling
3. Customizable styling through className and imageProps
4. Built on top of the existing AvatarBase component
5. Fully tested and documented

Related issues

Fixes: #366

Manual testing steps

1. Run Storybook and navigate to React Components/AvatarNetwork
2. Test different sizes using the size control
3. Test image display by providing a valid src URL
4. Test fallback text by removing the src URL
5. Test custom styling using className and imageProps
6. Verify accessibility by checking alt text and ARIA attributes

Screenshots/Recordings

Before

N/A - New component

After

after720.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• I've completed the PR template to the best of my ability
• I've included tests for the AvatarNetwork component
• I've documented my code using JSDoc format
• I've applied the right labels on the PR

Pre-merge reviewer checklist

• I've manually tested the PR
• I confirm that this PR addresses all acceptance criteria and includes the necessary testing evidence

[georgewrmarshall]

To prevent a circular dependency we export AvatarBaseSize as AvatarNetworkSize but use AvatarBaseSize internally.

[georgewrmarshall]

Typescript workaround. I need to further investigate why data- attributes are not accepted when using prop objects.

Applying a data-testid attribute directly to the Text component works:

However, applying it through a prop object does not: