1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. Assumptions and Limitations
7. References

Team Name: Design and Web Development (DnD)

Developer: Silvia Ivanova

Designer: Stefan Ivanov

• Simeon Simeonov | Date: 08 July 2021

• Product Owner: Radoslav Mirchev | Date: 08 July 2021
• Radoslav Karaivanov | Date: 08 July 2021

The <igc-avatar> component is used as a representation of a user identity typically in a user profile.

It is providing API for the most common use cases, leaving maximum flexibility in the developer's hands. It follows the mobile-first approach and should be suitable for hybrid applications.

1. The avatar component should be able to show an image.
2. The avatar component should be able to show initials as an image.
3. The avatar component should be able to show an icon as an image.
4. The avatar component should accept an image href path for image representation.
5. The avatar component should have a size (small, medium, large) changing the width / height of the component.
6. The avatar component should have a shape (circle, rounded, square).

Developer stories:

• Story 1: As a developer, I want to be able to provide a way to display a certain image, initials, or icon as an avatar.
• Story 2: As a developer, I want to be able to specify the size of the avatar - small, medium, large.
• Story 3: As a developer, I want to be able to specify the shape of the avatar - circle, rounded, square.
• Story 4: As a developer, I want to be able to set avatar's initials, so that they can be used as a fallback when no image or icon is provided.
• Story 5: As a developer, I want to be able to set an alternative (alt) text, so that a description for the avatar image can be provided.
• Story 6: As a developer, I want to be able to set aria attributes, so that application accessibility can be provided.
• Story 7: As a developer, I want to be able to customize the avatar giving different combinations of colors for background and foreground elements.

<igc-avatar initials="ZK" shape="circle" size="medium">
</igc-avatar>

End-user stories:

• Story 1: As an end-user, I want to be shown a visual representation of me as a user via an image, initials, or icon.
• Story 2: As an end-user, I want to be shown an icon avatar if no image or initials are provided.
• Story 3: As an end-user, I want to be shown an initials avatar if both initials and icon are provided.
• Story 4: As an end-user, I want to be shown an image avatar if initials, icon, and image are provided.

3.1. End-User Experience

The avatar should always display an image, initials, or an icon. It comes in 3 different shapes (circle, rounded, square) with 3 different sizes (small, medium or large).

3.2. Developer Experience

initials: Set the initials that should be shown by the avatar.

shape: Set the type of the avatar to either circle, rounded, or square.

size: Set the size of the avatar to either small, medium, or large.

src: Set the image source of the avatar.

alt: Set the avatar image description.

3.5. API

You should be able to configure the igc-avatar by setting properties on it.

Automation

• Scenario 1: Should set the avatar size correctly.
• Scenario 2: Should set the avatar shape correctly.
• Scenario 3: Should display an icon avatar if no image or initials are provided.
• Scenario 4: Should display an initials avatar if both initials and icon are provided.
• Scenario 5: Should fallback to initials avatar when no image or wrong image source is provided.
• Scenario 6: Should display an image avatar if initials, image, and icon are provided.

• Roles:
• role="img". https://www.w3.org/TR/wai-aria-1.1/#img
• Attributes:
• aria-label="avatar". https://www.w3.org/TR/wai-aria-1.1/#aria-label
• aria-roledescription="roleDescription". https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription