feat(progress-indicator): add storybook controls (#12473)

* feat(progress-indicator): add storybook controls

* Update packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js

@@ -72,3 +72,64 @@ export const Interactive = () => (
 );
 
 export const Skeleton = () => <ProgressIndicatorSkeleton />;
+
+export const Playground = (args) => (
+  <ProgressIndicator {...args}>
+    <ProgressStep
+      complete
+      label="First step"
+      description="Step 1: Getting started with Carbon Design System"
+      secondaryLabel="Optional label"
+    />
+    <ProgressStep
+      current
+      label="Second step with tooltip"
+      description="Step 2: Getting started with Carbon Design System"
+    />
+    <ProgressStep
+      label="Third step with tooltip"
+      description="Step 3: Getting started with Carbon Design System"
+    />
+    <ProgressStep
+      label="Fourth step"
+      description="Step 4: Getting started with Carbon Design System"
+      invalid
+      secondaryLabel="Example invalid step"
+    />
+    <ProgressStep
+      label="Fifth step"
+      description="Step 5: Getting started with Carbon Design System"
+      disabled
+    />
+  </ProgressIndicator>
+);
+
+Playground.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    table: {
+      disable: true,
+    },
+  },
+  currentIndex: {
+    control: { type: 'number' },
+    defaultValue: 0,
+  },
+  spaceEqually: {
+    control: { type: 'boolean' },
+    defaultValue: false,
+  },
+  vertical: {
+    control: { type: 'boolean' },
+    defaultValue: false,
+  },
+};