Team logo component #5
Description
Implement the TeamLogo component, a reusable UI element that displays team logos throughout the application. This component is used in multiple contexts including game cards, standings, and potentially team profile screens.
Visual Requirements
- Default size: 48px (configurable)
- Size variations:
- Large: 75px (used in FeaturedGameCard)
- Medium: 48px (used in regular GameCard)
- Small: 30px (used in Standings screen)
- Proper aspect ratio maintenance
- No visible pixelation at any size
- Proper handling of transparent backgrounds
- Consistent sizing across different team logos
Data Requirements
The component should accept the following data:
- Team object containing:
- Team logo path/URL
- Team identifier (for accessibility and tracking)
- Size parameter (optional, defaults to 48px)
Functionality
- Properly display logo from specified path/URL
- Maintain proper sizing based on size parameter
- Graceful handling of loading states
- Fallback placeholder if image fails to load
- Properly scale without distortion
Accessibility Requirements
- Include alt text derived from team name
- Appropriate ARIA attributes for screen readers
- Handle high contrast mode appropriately
Acceptance Criteria
- TeamLogo renders at the specified size
- Component accepts and properly uses the team data
- All size variations render correctly
- Logos maintain proper aspect ratio
- Placeholder appears when images fail to load
- Component is properly reusable across the app
- Logos appear with correct quality at all sizes
- Proper accessibility attributes are included
Edge Cases
- Handle missing logo assets
- Handle different logo aspect ratios
- Handle various image formats
- Ensure consistent behavior across all screens
Dependencies
- Design Style Guide implementation
- Asset management system for logo files