Skip to content

Avatar Specification

Jump to bottom
Silvia Ivanova edited this page Jul 7, 2021 · 15 revisions

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

Silvia Ivanova

Stefan Ivanov

Requires approval from

  • 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

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

Objectives

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

Acceptance criteria

  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).

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to be able to specify the type of the avatar - image, icon, initials.
  • 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 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 aia attributes.
  • Story 7: As a developer, I want to be able to customize the avatar giving different combinations of colors for background and foreground elements.
<igx-avatar initials="ZK" width="100">
</igx-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.

3. Functionality

3.1. End-User Experience

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

3.2. Developer Experience

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

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

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.

3.5. API

Options

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

Name Description Type Default value Valid values
src Set the image source of the avatar string
initials Set the initials of the avatar string
icon Set the icon of the avatar string
shape Set the shape of the avatar string circle, square or rounded
size Set the size of the avatar string small, medium or large

slots parts

4. Test Scenarios

Automation

  • Scenario 1:
  • scenario 2:

5. Accessibility

Clone this wiki locally