[SkeletonThumbnail] Align sizes with Thumbnail

[chloerice]

WHY are these changes introduced?

Fixes #1135

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import * as React from 'react';
import {Page, Card, Stack, Thumbnail, SkeletonThumbnail} from '../src';

interface State {
  loading: boolean;
}

export default class Playground extends React.Component<{}, State> {
  state: State = {
    loading: true,
  };

  toggleLoadingState = () => {
    this.setState(({loading}) => ({loading: !loading}));
  };

  render() {
    const {loading} = this.state;
    const source =
      'https://www.usmagazine.com/wp-content/uploads/2018/06/Smoothie-the-Cat-Instagram-zoom.jpg';

    const thumbnailMarkup = loading ? (
      <Stack vertical>
        <SkeletonThumbnail size="small" />
        <SkeletonThumbnail size="medium" />
        <SkeletonThumbnail size="large" />
      </Stack>
    ) : (
      <Stack vertical>
        <Thumbnail source={source} size="small" alt="Fluffy orange cat" />
        <Thumbnail source={source} size="medium" alt="Fluffy orange cat" />
        <Thumbnail source={source} size="large" alt="Fluffy orange cat" />
      </Stack>
    );

    return (
      <Page title="Playground">
        <Card
          sectioned
          actions={[
            {
              content: 'Toggle loading state',
              onAction: this.toggleLoadingState,
            },
          ]}
        >
          {thumbnailMarkup}
        </Card>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[amrocha]

Is there a way to import these from the actual Thumbnail component? Otherwise they're going to get out of sync again next time something changes

[AndrewMusgrave]

Maybe a simple function? thumbnailSize(small)?

[chloerice]

Done! Let me know what y'all think 😀

[amrocha]

:woo: