[React]: Create AvatarIcon component in shared UI component library

[brianacnguyen]

Description

Create a reusable AvatarIcon component for the shared UI component library. The component should implement the Avatar design standards outlined in the Avatar Audit and Insight Report Figma Board. This task is part of the migration to the new shared UI component library, ensuring consistency with the conventions set by existing components.

Technical Details

• Component Implementation:

  • Build using React Native and TypeScript.

• Integration:

  • Ensure compatibility with twrnc or any relevant design system tokens (e.g., spacing, colors, typography).
  • Align with global typography and accessibility standards outlined in the Avatar Audit.

• Testing:

  • Integrate unit tests using Jest and React Testing Library.
  • Add accessibility tests to ensure ARIA compliance for keyboard and screen reader users.

• Documentation:

  • Provide detailed usage examples for different variants, sizes, and states.
  • Include a storybook story for each prop and for default configurations.

Acceptance Criteria

• The AvatarIcon component should match the design specs in the Avatar Audit and Insight Report Figma Board.
• Component implementation must cover the following:
  • Proper alignment with typography and spacing standards.
  • Compatibility with all design system color tokens and themes.
  • Inclusion of hover, focus, and active states.
• Unit tests must cover at least 80% of the component’s functionality, including interactivity and accessibility.
• Component must be reviewed and approved by both engineering and design teams.
• Documentation for the component should be added, covering usage, available props, and examples.
• Ensure all aspects meet the Definition of Done.

References

• Avatar Audit and Insight Report Figma Board
• Definition of Done