Avatar specification

Avatar Specification

Contents

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

Owned by

Team Name

Developer Name

Stefan Ivanov

Requires approval from

• Peer Developer Name | Date:
• Simeon Simeonov | Date:

Signed off by

• Product Owner Name | Date:
• Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Stefan Ivanov	Date 29 Jun 2021	Update spec template

1. Overview

Avatar is used as a circular or square representation of the user identity typically in a user profile.

Objectives

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

Acceptance criteria

1. Have avatar that shows image.
2. Have avatar that shows initials as image.
3. Have avatar that shows icon as image.
4. The avatar must have a size (small, medium, large) changing the width/height of the component.
5. The avatar must accept image href path for image representation.
6. The avatar should have the ability to set initials color.
7. The avatar should have the ability to set initials background color.
8. The avatar should have the ability to set rounded shape.

2. User Stories

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 avatar. Using [ ] binding.

<igx-avatar initials="ZK" width="100" roundShape="true" bgColor="#ff6978">
</igx-avatar>

• Story 2: As a developer, I want to be able to show avatars in different sizes e.g. larger ones for profile screens and smaller ones for list items and toolbars.
• Story 3: As a developer, I want to be able to choose between the circular and square shapes of the avatar.
• Story 4: As a developer, I want to be able to customize the avatar giving different combinations of colors for background and foreground elements.

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.

3. Functionality

End User Experience

The avatar should always display image, initials or icon.

Developer Experience

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

roundShape: Change the type of the Avatar, by using roundShape the avatar will look like circle or square.

bgColor: Set the background corner of the initials or icon avatars.

color: Set the color of the initials or icon avatars.

icon: Set the icon of the avatar. Currently all icons from the material icon set are supported.

src: Set the image source of the avatar.

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

User Interface

The end user interface consists of:

1. Image, initials or icon representation of the avatar

2. In a circle or square shape.

3. With 3 different sizes (small, medium or large).

API

You should be able to configure the igx-avatar by passing an Options object to it.

• Properties
• src - Set the image source of the avatar.
• initials - Set the initials of the avatar.
• icon - Set the icon of the avatar. Currently all icons from the material icon set are supported. Not applicable for initals and image avatars.
• bgColor - Set the background color of initials or icon avatars.
• color - Set the color of initilas or icon avatars. (optional)
• roundShape - Set the shape of the avatar to circle. The default shape is square.
• size - Set the size of the avatar to either small, medium or large.
• Methods Internal
• generateInitials() - Create canvas element
• isRounded() - Check the rounded property and return Boolean

ARIA support

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