Skip to content

Avatar Specification

Jump to bottom
Simeon Simeonoff edited this page Jul 21, 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: Design and Web Development (DnD)

Developer: Silvia Ivanova

Designer: Stefan Ivanov

Requires approval from

  • Simeon Simeonov | Date: 08 July 2021

Signed off by

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

Revision History

Version Users Date Notes
1 Stefan Ivanov Date 29 Jun 2021 Update spec template
2 Silvia Ivanova Date 07 July 2021 Update specification

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 the 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 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. Functionality

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

Properties

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

Name Description Type Default value Reflected
initials Set the initials of the avatar string false
shape Set the shape of the avatar circle, square, rounded square true
size Set the size of the avatar small, medium, large small true
src Set the image source of the avatar string false
alt Set the description of the avatar image string false

Slots

Name Description
(default) Renders an icon inside the default slot.

CSS Parts

Name Description
base The base wrapper of the avatar.
initials The avatar's initials wrapper.
image The avatar's image wrapper.
icon The avatar's icon wrapper.

4. Test Scenarios

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.

5. Accessibility

Clone this wiki locally