feat: add Avatar component

[mnajdova]

Avatar

The avatar component is component used for showing user on the web, alongside with a presence icon. It can show an image of the user, or initials form his/hers name if the image is not provided. The will be composed of:
<Image avatar > or <Label circular > if the image is not provided and a presence icon <Icon circular size='mini' inverted />

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• RTL check
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update CHANGELOG.md

API Proposal

src: string

The src prop will be use for showing the image in the avatar.

<Avatar src="avatar.jpg" />

name: string

The name prop will be use for showing the initials of the person, if there is not src provided. The name will also appear as a default tooltipfor the avatar.

<Avatar name="Marija Najdova" />

noTooltip: boolean

This property will be used to alter if the tooltip should be shown/hidden.

availability: oneOf(['Available', 'Away', 'BeRightBack', 'Busy', 'DoNotDisturb', 'Offline', 'PresenceUnknown'])

The availability prop will be use for showing different presence icons.

<Avatar src="avatar.jpg" availability='Available' />

size: number [0..10]

color: oneOf(SUI.colors)

The background color for the avatar if the src is not provided.

[codecov]

Codecov Report

Merging #75 into master will increase coverage by 0.76%.
The diff coverage is 84.61%.

@@            Coverage Diff             @@
##           master      #75      +/-   ##
==========================================
+ Coverage   68.96%   69.72%   +0.76%     
==========================================
  Files          67       70       +3     
  Lines        1073     1133      +60     
  Branches      204      215      +11     
==========================================
+ Hits          740      790      +50     
- Misses        329      338       +9     
- Partials        4        5       +1

Impacted Files	Coverage Δ
src/components/Label/labelRules.ts	100% <ø> (ø)	⬆️
src/components/Icon/fontAwesomeIconRules.ts	20% <ø> (ø)	⬆️
src/components/Icon/Icon.tsx	100% <ø> (ø)	⬆️
test/specs/commonTests/isConformant.tsx	87.14% <100%> (+0.77%)	⬆️
src/components/Label/labelVariables.ts	100% <100%> (ø)	⬆️
src/components/Avatar/avatarVariables.ts	100% <100%> (ø)
src/components/Avatar/Avatar.tsx	76% <76%> (ø)
src/components/Avatar/avatarRules.ts	83.33% <83.33%> (ø)
... and 1 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 97ca1af...e2d233e. Read the comment docs.

[levithomason]

Availability

Looking around the web at existing support around user avatars I see a colored dot, an icon, an enum for choosing the status, and possibly a custom status message. I would expect future versions of this component to support these use cases. In prep for that, I propose we rename availability to status for now.

Sources:

Feature	FB	Messenger	Skype	Slack	Teams	Twitter	Whats App
An icon showing your presence	Presence	Status		Availability	Status
An icon showing your context					Status
A word describing your context					Status
A message about what you're doing	Status			Status		Status	Status

[mnajdova]

The initial implementation is using the Label, Image and Icon components from stardust. I will need to update this with the exact color for the presence icon, and provide the color property for the background of the label. Here are couple of screen shots of it:

Code:
<Avatar name="John Doe" />

Code:
<Avatar src="/public/images/avatar/small/matt.jpg" />

Code:

<Avatar src="/public/images/avatar/small/matt.jpg"
      status="Available"
    />

The other values for the status are accordingly: Busy, DoNotDisturb, Away, BeRightBack, Offline, PresenceUnknown

Code:

 _.times(10, i => {
    const size = i + 1
    return (
        <Avatar
          key={size}
          size={size}
          src="/public/images/avatar/small/matt.jpg"
          status="Available"
        />
    )
  })

Code:
<Avatar status="Available" name="John Doe" />