[Skeleton] Add skeleton for thumbnails

UNRELEASED.md

@@ -8,6 +8,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### New components
 
+- `SkeletonThumbnail` for representing thumbnails in loading state
+
 ### Enhancements
 
 - Updates `TopBar.UserMenu` interaction states styling ([#1006](https://github.com/Shopify/polaris-react/pull/1006))

src/components/SkeletonThumbnail/README.md

@@ -0,0 +1,56 @@
+---
+name: Skeleton thumbnail
+category: Feedback indicators
+releasedIn: 3.7.2
+keywords:
+  - SkeletonThumbnail
+  - skeleton
+  - loading
+  - page
+---
+
+# Skeleton image
+
+Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Use for thumbnails in or outside of a card.
+
+---
+
+## Best practices
+
+Skeleton thumbnail component should:
+
+- Try to match the size of the thumbnail to the content being loaded so it gives an accurate representation.
+
+---
+
+## Examples
+
+### Medium thumbnail
+
+Use this component to represent medium thumbnails.
+
+```jsx
+<SkeletonThumbnail size="medium" />
+```
+
+### Large thumbnail
+
+Use this component to represent large thumbnails.
+
+```jsx
+<SkeletonThumbnail size="large" />
+```
+
+### Small thumbnail
+
+Use this component to represent small thumbnails.
+
+```jsx
+<SkeletonThumbnail size="small" />
+```
+
+---
+
+## Related components
+
+- Use this component with [Skeleton display text](/components/feedback-indicators/skeleton-display-text) to represent the content of a card while it’s loading.

src/components/SkeletonThumbnail/SkeletonThumbnail.scss

@@ -0,0 +1,21 @@
+@mixin skeleton-thumbnail-size($size) {
+  height: $size;
+  width: $size;
+}
+
+.SkeletonThumbnail {
+  @include skeleton-shimmer;
+  @include skeleton-content;
+}
+
+.sizeSmall {
+  @include skeleton-thumbnail-size(rem(30px));
+}
+
+.sizeMedium {
+  @include skeleton-thumbnail-size(rem(40px));
+}
+
+.sizeLarge {
+  @include skeleton-thumbnail-size(rem(50px));
+}

src/components/SkeletonThumbnail/SkeletonThumbnail.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {classNames, variationName} from '@shopify/react-utilities/styles';
+import styles from './SkeletonThumbnail.scss';
+
+export type Size = 'small' | 'medium' | 'large';
+
+export interface Props {
+  /**
+   * Size of the thumbnail
+   * @default 'medium'
+   */
+  size?: Size;
+}
+
+export default function SkeletonThumbnail({size = 'medium'}: Props) {
+  const className = classNames(
+    styles.SkeletonThumbnail,
+    size && styles[variationName('size', size)],
+  );
+
+  return <div className={className} />;
+}

src/components/SkeletonThumbnail/index.ts

@@ -0,0 +1,4 @@
+import SkeletonThumbnail from './SkeletonThumbnail';
+
+export {Props} from './SkeletonThumbnail';
+export default SkeletonThumbnail;

src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import {mountWithAppProvider} from 'test-utilities';
+import SkeletonThumbnail from '../SkeletonThumbnail';
+
+describe('<SkeletonThumbnail />', () => {
+  it('renders', () => {
+    const skeletonThumbnail = mountWithAppProvider(<SkeletonThumbnail />);
+    expect(skeletonThumbnail.exists()).toBe(true);
+  });
+});

src/components/index.ts

@@ -294,6 +294,11 @@ export {
   Props as SkeletonDisplayTextProps,
 } from './SkeletonDisplayText';
 
+export {
+  default as SkeletonThumbnail,
+  Props as SkeletonThumbnailProps,
+} from './SkeletonThumbnail';
+
 export {default as ProgressBar, Props as ProgressBarProps} from './ProgressBar';
 
 export {default as Indicator, Props as IndicatorProps} from './Indicator';