[Avatar] Hookify component

[BPScott]

WHY are these changes introduced?

Starting down the path of removing withAppProvider usage into the new world of hooks.
Part of #1995

WHAT is this pull request doing?

Converts Avatar to use hooks.
Reworks the logic for how we handle falling back to using initials if an image fails to load so it relies on a single status state that can be either "pending, errored or loading" rather than two hasError and hasLoading states.

Use react-testing in some Avatar tests as Enzyme doesn't seem to accurately reflect props chagnes for functional components.

How to 🎩

Play with the following to investigate how the onError fallback to initials logic behaves:

Copy-paste this code in playground/Playground.tsx:

import React, {useState, useCallback} from 'react';
import {Page, Button, Avatar} from '../src';

export function Playground() {
  const [isUsingValidSource, setIsUsingValidSource] = useState(true);
  const toggle = useCallback(() => {
    setIsUsingValidSource((state) => !state);
  }, []);

  const avatarSource = isUsingValidSource
    ? 'http://placekitten.com/40/40'
    : 'nope';

  return (
    <Page title="Playground">
      <Button onClick={toggle}>Toggle Source</Button>
      <hr />
      <Avatar size="large" initials="DL" source={avatarSource} />
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[dleroux]

I'm trying to run yarn prod but it isn't working for me. This one would be safer to test in web, prod, using an account that doesn't have an avatar. The code looks fine but we had a lot of back and forth when implementing the "error" approach.

[tmlayton]

Looks great! I like the change to use a single status. I think we are okay to not 🎩 in Web as it functionally the same.

[BPScott]

@dleroux did you have any further comments on this?

[dleroux]

If Tim is confident I'm good too. I just remember the trouble this one caused when we first rolled it out so being a little cautious. But the code looks good.