From 95fcfd03f4d2e63d6a0636a8e032714ac2ac149e Mon Sep 17 00:00:00 2001
From: KateMacdonald <ktmacdonald@westpac.com.au>
Date: Wed, 25 Sep 2024 16:14:29 +1000
Subject: [PATCH] Update
 src/content/design-system/components/progress-indicator

---
 .../design/progress-indicator/content.mdoc    | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc
index 8335bb1c1..9aa908308 100644
--- a/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc
+++ b/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc
@@ -1,5 +1,41 @@
+### Default
+
+Use this progress indicator to show a process is running.
+
 ```tsx
 () => {
-  return <ProgressIndicator />;
+  return (
+    <div className="p-1 rounded-md flex items-end justify-center" >
+      <ProgressIndicator size="xlarge" />
+    </div>
+  );
+}
+```
+
+### Sizes
+
+The indicator comes in various sizes (Xs, Sm, Md, Lg and Xl) suitable for buttons, fields, or full-page loading.
+
+```tsx
+() => {
+  return (
+    <div className="p-1 rounded-md flex items-end justify-center" >
+      {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
+        <ProgressIndicator size={size} className="mr-2" />
+      ))}
+    </div>
+  );
 };
 ```
+
+### Dark backgrounds
+
+The indicator can appear white for use on dark backgrounds.
+
+```tsx
+() => {
+  return <div className="rounded-md bg-black flex items-end justify-center">
+      <ProgressIndicator size="xlarge" color="white" className="mr-2 mb-2 mt-2" />)}
+    </div>;
+}
+```