New Avatar and Monogram components

[Stanton]

⚠️ Because html.avatar can depend on html.monogram, a single PR has been created.

Avatar and Monogram Components with Accessible Color Generation

Overview

This PR introduces two complementary components designed with accessibility as a core principle:

• Avatar Component: Displays user identification visually through images, monograms, or icons
  
  

• Monogram Component: Shows user initials with deterministic, WCAG-compliant color generation
  
  

Both components work together to provide consistent, accessible user representation across the interface.

Avatar Component

Features

• Multiple Display Types:
  • Image-based avatars with proper alt text
  • Monogram avatars with auto-generated background colors
  • Icon avatars with configurable icon choice
• Size Variants: Small (24px), Medium (32px - default), and Large (48px)
• Optional Label: Can be displayed with or without accompanying text
• Consistent Layout: Maintains proper alignment with various content types

Usage

{{ html.avatar({
    'image': '/path/to/image.jpg',
    'label': 'John Smith'
}) }}

{{ html.avatar({
    'monogram': 'JS',
    'label': 'John Smith'
}) }}

{{ html.avatar({
    'icon': 'user',
    'label': 'John Smith'
}) }}

Monogram Component

Features

• Consistent Visual Identification: Same text input always generates the same color
• Deterministic Color Generation: Colors are computed based on input text
• Size Variants: Small, Medium (default), and Large
• Standalone or Avatar Integration: Works independently or within the avatar component

Usage

{{ html.monogram('JS') }}

{{ html.monogram('JS', { 'size': 'large' }) }}

Accessibility Considerations

Color Contrast Compliance

• WCAG 2.1 AA Compliant: All text/background combinations meet minimum 4.5:1 contrast ratio
• Intelligent Text Color Selection:
  • Light backgrounds (65-80% lightness) paired with dark text (8% lightness)
  • Dark backgrounds (20-35% lightness) paired with light text (97% lightness)
  • Avoids the middle lightness range that can create contrast issues

Screen Reader Support

• Proper Alt Text: Automatic generation of alt text for avatar images
• Meaningful Labels: Clear association between visual elements and labels
• ARIA Support: Compatible with assistive technologies

User Experience

• Consistent Identity: Same user always represented with the same colors
• Visual Distinction: Colors are distinct enough to differentiate users
• Flexible Implementation: Supports various layout contexts and sizes

Technical Implementation

• HSL Color Model: Uses HSL for improved control over lightness and contrast
• Twig Integration: Easy to use within existing Twig templates
• SCSS Structure: Clean component organization following BEM conventions
• No JavaScript Dependencies: Works without JavaScript enabled

Documentation

Both components are fully documented in the Lexicon with comprehensive examples showing:

• All size variants
• Display types
• Color variations
• Accessibility features

Avatar Examples

Monogram Examples