[Avatar] Add styled placeholder when initials are blank

[kyledurand]

WHY are these changes introduced?

The last step for react on this issue: https://github.com/Shopify/polaris-ux/issues/333

This issue stems from a change that was made to our api. Our server was returning an empty array when it detected non-latin characters present in the initials field that are returned for a staff member. This would result in a blank but colored avatar. This PR maintains color, but adds a customer placeholder image that is also colored.

Figma:

Playground:

Important note: We need to add another color variant to the decorative set to perfectly match what's in Figma. I'm of the mind to ship this first and ask design if they're ok with these higher contrast versions. If not then we can add the variation later.

Tracking this detail here: https://github.com/Shopify/polaris-ux/issues/333#issuecomment-580870302

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {Page, Avatar, Stack} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Stack>
        x
        <Stack vertical>
          <Avatar initials="KD" name="a" />
          <Avatar initials="KD" name="b" />
          <Avatar initials="KD" name="c" />
          <Avatar initials="KD" name="d" />
          <Avatar initials="KD" name="e" />
          <Avatar initials="KD" name="f" />
        </Stack>
        <Stack vertical>
          <Avatar initials={[].join()} name="パ" />
          <Avatar initials={[].join()} name="ネ" />
          <Avatar initials={[].join()} name="セ" />
          <Avatar initials={[].join()} name="エ" />
          <Avatar initials={[].join()} name="ジ" />
          <Avatar initials={[].join()} name="ア" />
        </Stack>
      </Stack>
      <Stack alignment="baseline">
        <div
          style={{borderLeft: '1px solid hsl(0, 0%, 50%)', height: '40px'}}
        />
        <Avatar customer initials="KD" name="e" />
        <Avatar
          initials="JD"
          name="John D"
          source="https://images.unsplash.com/photo-1574157573248-293553e90ead?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"
        />
      </Stack>
      <Stack alignment="baseline">
        <Avatar
          size="small"
          initials="JD"
          name="John D"
          source="https://images.unsplash.com/photo-1574157573248-293553e90ead?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"
        />
        <Avatar
          initials="JD"
          name="John D"
          source="https://images.unsplash.com/photo-1574157573248-293553e90ead?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"
        />
        <Avatar
          size="large"
          initials="JD"
          name="John D"
          source="https://images.unsplash.com/photo-1574157573248-293553e90ead?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"
        />
      </Stack>
      <Stack alignment="baseline">
        <Avatar size="small" customer initials="KD" name="e" />
        <Avatar customer initials="KD" name="e" />
        <Avatar size="large" customer initials="KD" name="e" />
      </Stack>
    </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

[github-actions]

🟡 This pull request modifies 3 files and might impact 12 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:

All files potentially affected (total: 12)

• /src/components/AccountConnection/AccountConnection.tsx
• /src/components/OptionList/OptionList.tsx
• /src/components/Autocomplete/components/ComboBox/ComboBox.tsx
• /src/components/Autocomplete/Autocomplete.tsx
• /src/components/OptionList/components/Option/Option.tsx
• /src/components/Page/components/Header/components/Title/Title.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx
• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Avatar/Avatar.tsx (total: 12)

Files potentially affected (total: 12)

• /src/components/AccountConnection/AccountConnection.tsx
• /src/components/OptionList/OptionList.tsx
• /src/components/Autocomplete/components/ComboBox/ComboBox.tsx
• /src/components/Autocomplete/Autocomplete.tsx
• /src/components/OptionList/components/Option/Option.tsx
• /src/components/Page/components/Header/components/Title/Title.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx
• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

🧩 src/components/Avatar/tests/Avatar.test.tsx (total: 0)

Files potentially affected (total: 0)

[AndrewMusgrave]

Looks like codecov didn't run but this probably isn't covered. Should we add a test?