diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
index d2ef2be29c4..6ef7dd060dc 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
@@ -15,387 +15,44 @@ Progress steppers have default icons associated with the `variant` property, and
 
 ### Basic
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-step1"
-    titleId="basic-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="basic-step2"
-    titleId="basic-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep variant="pending" id="basic-step3" titleId="basic-step3-title" aria-label="pending step">
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasic.tsx"
 ```
 
-### Basic with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With step descriptions
 
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="basic-desc-step1"
-    titleId="basic-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="basic-desc-step2"
-    titleId="basic-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="basic-desc-step3"
-    titleId="basic-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicWithDescription.tsx"
 ```
 
-### Center aligned with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper isCenterAligned>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="center-desc-step1"
-    titleId="center-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="center-desc-step2"
-    titleId="center-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="center-desc-step3"
-    titleId="center-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
-```
-
-### Vertical with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With alignment
 
-<ProgressStepper isVertical>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="vertical-desc-step1"
-    titleId="vertical-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="vertical-desc-step2"
-    titleId="vertical-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="vertical-desc-step3"
-    titleId="vertical-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicWithAlignment.tsx"
 ```
 
 ### Compact
 
 Compact progress steppers will only display the current step's `title`, and will not display any steps' `description` texts.
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper isCompact>
-  <ProgressStep
-    variant="success"
-    id="compact-step1"
-    titleId="compact-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="compact-step2"
-    titleId="compact-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep variant="pending" id="compact-step3" titleId="compact-step3-title" aria-label="pending step">
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperCompact.tsx"
 ```
 
-### Basic with an issue
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With an issue
 
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-with-issue-step1"
-    titleId="basic-with-issue-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-issue-step2"
-    titleId="basic-with-issue-step2-title"
-    aria-label="completed step, step with success"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="warning"
-    id="basic-with-issue-step3"
-    titleId="basic-with-issue-step3-title"
-    aria-label="completed step, step with warning"
-  >
-    Third step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="basic-with-issue-step4"
-    titleId="basic-with-issue-step4-title"
-    aria-label="step with info"
-  >
-    Fourth step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    id="basic-with-issue-step5"
-    titleId="basic-with-issue-step5-title"
-    aria-label="pending step"
-  >
-    Fifth step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicIssue.tsx"
 ```
 
-### Basic with a failure
+### With a failure
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step1"
-    titleId="basic-with-failure-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step2"
-    titleId="basic-with-failure-step2-title"
-    aria-label="completed step, step with success"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step3"
-    titleId="basic-with-failure-step3-title"
-    aria-label="completed step, step with success"
-  >
-    Third step
-  </ProgressStep>
-  <ProgressStep
-    variant="danger"
-    isCurrent
-    id="basic-with-failure-step4"
-    titleId="basic-with-failure-step4-title"
-    aria-label="step with danger"
-  >
-    Fourth step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    id="basic-with-failure-step5"
-    titleId="basic-with-failure-step5-title"
-    aria-label="pending step"
-  >
-    Fifth step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicFailure.tsx"
 ```
 
-### Basic with Patternfly icons
+### With custom icons
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="custom-step1"
-    titleId="custom-step1-title"
-    aria-label="completed step, step with success"
-  >
-    Successful completion
-  </ProgressStep>
-  <ProgressStep
-    isCurrent
-    icon={<InProgressIcon />}
-    id="custom-step2"
-    titleId="custom-step2-title"
-    aria-label="in progress"
-  >
-    In process
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    icon={<PendingIcon />}
-    id="custom-step3"
-    titleId="custom-step3-title"
-    aria-label="pending step"
-  >
-    Pending
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperCustomIcons.tsx"
 ```
 
 ### With help popover
 
 To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
-
-PopoverProgressStep = () => {
-  return (
-    <ProgressStepper>
-      <ProgressStep
-        variant="success"
-        id="popover-step1"
-        titleId="popover-step1-title"
-        aria-label="completed step with popover, step with success"
-        popoverRender={( stepRef ) => (
-          <Popover
-            aria-label="First step help"
-            headerContent={<div>First step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-           )}
-      >
-        First step
-      </ProgressStep>
-      <ProgressStep
-        variant="danger"
-        id="popover-step2"
-        titleId="popover-step2-title"
-        aria-label="completed step with popover, step with danger"
-        popoverRender={( stepRef ) => (
-          <Popover
-            aria-label="Second step help"
-            headerContent={<div>Second step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-        )}
-      >
-        Second step
-      </ProgressStep>
-      <ProgressStep
-        variant="info"
-        id="popover-step3"
-        titleId="popover-step3-title"
-        aria-label="step with popover"
-        popoverRender={(stepRef) => (
-          <Popover
-            aria-label="Third step help"
-            headerContent={<div>Third step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-        )}
-        isCurrent
-      >
-        Third step
-      </ProgressStep>
-      <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
-        Fourth step
-      </ProgressStep>
-    </ProgressStepper>
-  );
-};
+```ts file="ProgressStepperHelpPopover.tsx"
 ```
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
new file mode 100644
index 00000000000..614f0d66db4
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasic: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="basic-step1"
+      titleId="basic-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep variant="info" isCurrent id="basic-step2" titleId="basic-step2-title" aria-label="step with info">
+      Second step
+    </ProgressStep>
+    <ProgressStep variant="pending" id="basic-step3" titleId="basic-step3-title" aria-label="pending step">
+      Third step
+    </ProgressStep>
+  </ProgressStepper>
+);
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx
new file mode 100644
index 00000000000..63819b50361
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasicFailure: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="basic-with-failure-step1"
+      titleId="basic-with-failure-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="success"
+      id="basic-with-failure-step2"
+      titleId="basic-with-failure-step2-title"
+      aria-label="completed step, step with success"
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="success"
+      id="basic-with-failure-step3"
+      titleId="basic-with-failure-step3-title"
+      aria-label="completed step, step with success"
+    >
+      Third step
+    </ProgressStep>
+    <ProgressStep
+      variant="danger"
+      isCurrent
+      id="basic-with-failure-step4"
+      titleId="basic-with-failure-step4-title"
+      aria-label="step with danger"
+    >
+      Fourth step
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      id="basic-with-failure-step5"
+      titleId="basic-with-failure-step5-title"
+      aria-label="pending step"
+    >
+      Fifth step
+    </ProgressStep>
+  </ProgressStepper>
+);
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx
new file mode 100644
index 00000000000..fcecdd989bf
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasicIssue: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="basic-with-issue-step1"
+      titleId="basic-with-issue-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="success"
+      id="basic-with-issue-step2"
+      titleId="basic-with-issue-step2-title"
+      aria-label="completed step, step with success"
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="warning"
+      id="basic-with-issue-step3"
+      titleId="basic-with-issue-step3-title"
+      aria-label="completed step, step with warning"
+    >
+      Third step
+    </ProgressStep>
+    <ProgressStep
+      variant="info"
+      isCurrent
+      id="basic-with-issue-step4"
+      titleId="basic-with-issue-step4-title"
+      aria-label="step with info"
+    >
+      Fourth step
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      id="basic-with-issue-step5"
+      titleId="basic-with-issue-step5-title"
+      aria-label="pending step"
+    >
+      Fifth step
+    </ProgressStep>
+  </ProgressStepper>
+);
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
new file mode 100644
index 00000000000..d94bc74d72f
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
+
+export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () => {
+  const [isVertical, setIsVertical] = React.useState(false);
+  const [isCenterAligned, setIsCenterAligned] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Vertical alignment"
+        isChecked={isVertical}
+        onChange={setIsVertical}
+        aria-label="Toggle vertical alignment"
+        id="toggle-vertical"
+        name="toggle-vertical"
+      />
+      <Checkbox
+        label="Center alignment"
+        isChecked={isCenterAligned}
+        onChange={setIsCenterAligned}
+        aria-label="Toggle center alignment"
+        id="toggle-center"
+        name="toggle-center"
+      />
+      <br />
+      <ProgressStepper isVertical={isVertical} isCenterAligned={isCenterAligned}>
+        <ProgressStep
+          variant="success"
+          description="This is the first thing to happen"
+          id="basic-alignment-step1"
+          titleId="basic-alignment-step1-title"
+          aria-label="completed step, step with success"
+        >
+          First step
+        </ProgressStep>
+        <ProgressStep
+          variant="info"
+          isCurrent
+          description="This is the second thing to happen"
+          id="basic-alignment-step2"
+          titleId="basic-alignment-step2-title"
+          aria-label="step with info"
+        >
+          Second step
+        </ProgressStep>
+        <ProgressStep
+          variant="pending"
+          description="This is the last thing to happen"
+          id="basic-alignment-step3"
+          titleId="basic-alignment-step3-title"
+          aria-label="pending step"
+        >
+          Third step
+        </ProgressStep>
+      </ProgressStepper>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx
new file mode 100644
index 00000000000..3e1eaeda69e
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasicWithDescription: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      description="This is the first thing to happen"
+      id="basic-desc-step1"
+      titleId="basic-desc-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="info"
+      isCurrent
+      description="This is the second thing to happen"
+      id="basic-desc-step2"
+      titleId="basic-desc-step2-title"
+      aria-label="step with info"
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      description="This is the last thing to happen"
+      id="basic-desc-step3"
+      titleId="basic-desc-step3-title"
+      aria-label="pending step"
+    >
+      Third step
+    </ProgressStep>
+  </ProgressStepper>
+);
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx
new file mode 100644
index 00000000000..297f6ad884f
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
+
+export const ProgressStepperCompact: React.FunctionComponent = () => {
+  const [isVertical, setIsVertical] = React.useState(false);
+  const [isCenterAligned, setIsCenterAligned] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Vertical alignment"
+        isChecked={isVertical}
+        onChange={setIsVertical}
+        aria-label="Toggle compact vertical alignment"
+        id="toggle-compact-vertical"
+        name="toggle-compact-vertical"
+      />
+      <Checkbox
+        label="Center alignment"
+        isChecked={isCenterAligned}
+        onChange={setIsCenterAligned}
+        aria-label="Toggle compact center alignment"
+        id="toggle-compact-center"
+        name="toggle-compact-center"
+      />
+      <br />
+      <ProgressStepper isCompact isVertical={isVertical} isCenterAligned={isCenterAligned}>
+        <ProgressStep
+          variant="success"
+          id="compact-step1"
+          titleId="compact-step1-title"
+          aria-label="completed step, step with success"
+        >
+          First step
+        </ProgressStep>
+        <ProgressStep
+          variant="info"
+          isCurrent
+          id="compact-step2"
+          titleId="compact-step2-title"
+          aria-label="step with info"
+        >
+          Second step
+        </ProgressStep>
+        <ProgressStep variant="pending" id="compact-step3" titleId="compact-step3-title" aria-label="pending step">
+          Third step
+        </ProgressStep>
+      </ProgressStepper>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx
new file mode 100644
index 00000000000..3c353a3c2c5
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
+import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+
+export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="custom-step1"
+      titleId="custom-step1-title"
+      aria-label="completed step, step with success"
+    >
+      Successful completion
+    </ProgressStep>
+    <ProgressStep
+      isCurrent
+      icon={<InProgressIcon />}
+      id="custom-step2"
+      titleId="custom-step2-title"
+      aria-label="in progress"
+    >
+      In process
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      icon={<PendingIcon />}
+      id="custom-step3"
+      titleId="custom-step3-title"
+      aria-label="pending step"
+    >
+      Pending
+    </ProgressStep>
+  </ProgressStepper>
+);
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx
new file mode 100644
index 00000000000..a4e80e5c37c
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
+
+export const PopoverProgressStep = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="popover-step1"
+      titleId="popover-step1-title"
+      aria-label="completed step with popover, step with success"
+      popoverRender={stepRef => (
+        <Popover
+          aria-label="First step help"
+          headerContent={<div>First step popover</div>}
+          bodyContent={<div>Additional info or help text content.</div>}
+          reference={stepRef}
+          position="right"
+        />
+      )}
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="danger"
+      id="popover-step2"
+      titleId="popover-step2-title"
+      aria-label="completed step with popover, step with danger"
+      popoverRender={stepRef => (
+        <Popover
+          aria-label="Second step help"
+          headerContent={<div>Second step popover</div>}
+          bodyContent={<div>Additional info or help text content.</div>}
+          reference={stepRef}
+          position="right"
+        />
+      )}
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="info"
+      id="popover-step3"
+      titleId="popover-step3-title"
+      aria-label="step with popover"
+      popoverRender={stepRef => (
+        <Popover
+          aria-label="Third step help"
+          headerContent={<div>Third step popover</div>}
+          bodyContent={<div>Additional info or help text content.</div>}
+          reference={stepRef}
+          position="right"
+        />
+      )}
+      isCurrent
+    >
+      Third step
+    </ProgressStep>
+    <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
+      Fourth step
+    </ProgressStep>
+  </ProgressStepper>
+);