✨ Add avatar component

[XuTheBunny]

Motivation

A circular image that pulls a user's gravatar image.

Use Cases

1. Kids First Data Tracker

2. Kids First Portal + 3. Kids First website

API changes

No API changes are made on this component.

Implementation Notes

Props with different values:

• Has imgUrl
  • imgUrl is valid: Display user gravatar
  • imgUrl is not valid but no found specific image: Display default gravatar
  • imgUrl is not valid: Display alternative text
• No imgUrl: Display image.
  • Has userName : Display name initial
  • No userName: Display three dots

Size: range: 20 - 200, default: 40

Rendering and Storybook location

src/
└── components
    ├── Avatar
    │   ├── __tests__/
    │   ├── Avatar.jsx
    │   ├── Avatar.story.jsx
    │   └── Avatar.css
    └── index.js

Functional Tests

Test avatar component with/without userName, imgUrl, and different size values.

Closes #77

[dankolbman]

UIKit Storybook for Review

Built with commit 37ea9b9b798a0a0c4a85e32606350fc8afb31ab1

https://deploy-preview-109--kf-uikit.netlify.com

[dankolbman]

Looks good so far. There are two other things I think we need to consider:

Drop down

How will we integrate the dropdown with the Avatar? Maybe the dropdown in the nav will contain the avatar component?

Size

We also have the potential for little icon chips like in the design for the data tracker. Maybe we should have a size variant of it?

[bdolly]

@XuTheBunny doesn't look the size is working properly in the Percy tests

you can tests this inside storybook by removing the show-in-tests hidden classes from that section in the story and just add them back before committing