From e70dd365fc29fe9c53d2fd9e22c164e44e66bbe5 Mon Sep 17 00:00:00 2001
From: Mitch Lillie <mitch.lillie@shopify.com>
Date: Tue, 10 Oct 2023 10:42:24 -0700
Subject: [PATCH] Add ProgressIndicator component

---
 .../src/surfaces/admin/components.ts          |   2 +
 .../ProgressIndicator/ProgressIndicator.ts    |   9 ++++
 .../basic-ProgressIndicator.example.tsx       |  12 +++++
 .../screenshots/progressindicator-default.png | Bin 0 -> 3554 bytes
 .../progressindicator-thumbnail.png           | Bin 0 -> 5881 bytes
 .../src/surfaces/admin/components.ts          |   2 +
 .../ProgressIndicator.doc.ts                  |  48 ++++++++++++++++++
 .../ProgressIndicator/ProgressIndicator.ts    |  32 ++++++++++++
 .../examples/basic-ProgressIndicator.ts       |  18 +++++++
 .../surfaces/admin/components/shared/index.ts |  18 +++++++
 10 files changed, 141 insertions(+)
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx
 create mode 100644 packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-default.png
 create mode 100644 packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-thumbnail.png
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts

diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts
index a9a3e4885e..3f21e729f2 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components.ts
@@ -38,6 +38,8 @@ export {PasswordField} from './components/PasswordField/PasswordField';
 export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
 export {Pressable} from './components/Pressable/Pressable';
 export type {PressableProps} from './components/Pressable/Pressable';
+export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
+export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
 export {ResourceItem} from './components/ResourceItem/ResourceItem';
 export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
 export {ResourceList} from './components/ResourceList/ResourceList';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
new file mode 100644
index 0000000000..655e9ab99d
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
@@ -0,0 +1,9 @@
+import {ProgressIndicator as BaseProgressIndicator} from '@shopify/ui-extensions/admin';
+import type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const ProgressIndicator = createRemoteReactComponent<
+  'ProgressIndicator',
+  ProgressIndicatorProps
+>(BaseProgressIndicator);
+export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx
new file mode 100644
index 0000000000..8b4968f5e9
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx
@@ -0,0 +1,12 @@
+import {
+  reactExtension,
+  ProgressIndicator,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => <App />);
+
+function App() {
+  return (
+    <ProgressIndicator size="small-200" />
+  );
+}
diff --git a/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-default.png b/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce7052d8f2eaa1ef125c734909414c36a73207d8
GIT binary patch
literal 3554
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

literal 0
HcmV?d00001

diff --git a/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-thumbnail.png b/packages/ui-extensions/docs/surfaces/admin/screenshots/progressindicator-thumbnail.png
new file mode 100644
index 0000000000000000000000000000000000000000..302d208261229d630e8a1c69b3aa6ee65c3cdb5f
GIT binary patch
literal 5881
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

literal 0
HcmV?d00001

diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index dc32dcb200..6f085e7c87 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -42,6 +42,8 @@ export {PasswordField} from './components/PasswordField/PasswordField';
 export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
 export {Pressable} from './components/Pressable/Pressable';
 export type {PressableProps} from './components/Pressable/Pressable';
+export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
+export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
 export {ResourceItem} from './components/ResourceItem/ResourceItem';
 export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
 export {ResourceList} from './components/ResourceList/ResourceList';
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
new file mode 100644
index 0000000000..84305047a6
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
@@ -0,0 +1,48 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'ProgressIndicator',
+  description:
+    'Use this component to notify merchants that their action is being processed or loaded.',
+  requires: '',
+  thumbnail: 'progressindicator-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'ProgressIndicatorProps',
+      description: '',
+      type: 'ProgressIndicatorProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Media',
+  defaultExample: {
+    image: 'progressindicator-default.png',
+    codeblock: {
+      title: 'Simple spinner example',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-progressindicator.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [
+    {
+      type: 'component',
+      name: 'Button',
+      url: '/docs/api/admin-extensions/components/actions/button',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
new file mode 100644
index 0000000000..fd3b55636a
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
@@ -0,0 +1,32 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {GlobalProps, SizeScale, AccessibilityLabelProps} from '../shared';
+
+export interface ProgressIndicatorProps
+  extends GlobalProps,
+    AccessibilityLabelProps {
+  /**
+   * The size of the component.
+   */
+  size: SizeScale;
+
+  /**
+   * Set the color of the progress indicator.
+   *
+   * - `inherit` will take the color value from its parent,
+   * giving the progress indicator a monochrome appearance.
+   *
+   * @defaultValue 'inherit'
+   */
+  tone?: 'inherit' | 'default';
+
+  /**
+   * Style of the progress indicator
+   * @default 'spinner'
+   */
+  variant?: 'spinner';
+}
+
+export const ProgressIndicator = createRemoteComponent<
+  'ProgressIndicator',
+  ProgressIndicatorProps
+>('ProgressIndicator');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts
new file mode 100644
index 0000000000..1c5b343f39
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts
@@ -0,0 +1,18 @@
+import {
+  extension,
+  ProgressIndicator,
+} from '@shopify/ui-extensions/admin';
+
+export default extension(
+  'Playground',
+  (root) => {
+    const progressIndicator = root.createComponent(
+      ProgressIndicator,
+      {
+        size: 'small-200',
+      },
+    );
+
+    root.appendChild(progressIndicator);
+  },
+);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts b/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
index 9200e7c6aa..13021490e8 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
@@ -122,6 +122,15 @@ export interface MinMaxLengthProps {
   minLength?: number;
 }
 
+export interface AccessibilityLabelProps {
+  /**
+   * A label that describes the purpose or contents of the element. When set, it will be announced
+   * to users using assistive technologies and will provide them with more context. When set, any
+   * children or `label` supplied will not be announced to screen readers.
+   */
+  accessibilityLabel?: string;
+}
+
 export interface AccessibilityRoleProps {
   /**
    * Sets the semantic meaning of the component’s content. When set,
@@ -636,6 +645,15 @@ export type SpaceScale =
   | '28'
   | '32';
 
+export type SizeScale =
+  | 'small-300'
+  | 'small-200'
+  | 'small-100'
+  | 'base'
+  | 'large-100'
+  | 'large-200'
+  | 'large-300';
+
 export interface AnchorProps {
   /**
    * The URL to link to.