From 4a99c652a4d13b193923c7e0fbc15dba1ccc80ac Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 21 Jul 2022 11:11:34 -0400
Subject: [PATCH 1/4] docs(ProgressStepper): add examples to show alignment
 modifiers working together

---
 .../examples/ProgressStepper.md               | 369 +-----------------
 .../examples/ProgressStepperBasic.tsx         |  19 +
 .../examples/ProgressStepperBasicFailure.tsx  |  46 +++
 .../examples/ProgressStepperBasicIssue.tsx    |  46 +++
 .../ProgressStepperBasicWithAlignment.tsx     |  59 +++
 .../ProgressStepperBasicWithDescription.tsx   |  33 ++
 .../examples/ProgressStepperCompact.tsx       |  51 +++
 .../examples/ProgressStepperHelpPopover.tsx   |  62 +++
 .../examples/ProgressStepperIcons.tsx         |  33 ++
 9 files changed, 362 insertions(+), 356 deletions(-)
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperIcons.tsx

diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
index d2ef2be29c4..fe922979b87 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="ProgressStepperIcons.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..bb44e40dbd2
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
@@ -0,0 +1,19 @@
+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>;
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..77ecbc0e358
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx
@@ -0,0 +1,46 @@
+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>;
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..1da07b91db9
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+<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..0159652a949
--- /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-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>
+    </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..bd4ae1e0ab1
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+<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/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>
+);
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperIcons.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperIcons.tsx
new file mode 100644
index 00000000000..3710ce379a0
--- /dev/null
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperIcons.tsx
@@ -0,0 +1,33 @@
+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>;

From 582b259219fc0723759286ac0443475af4869faf Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 26 Jul 2022 12:01:52 -0400
Subject: [PATCH 2/4] add exports, update name

---
 .../examples/ProgressStepper.md               |  2 +-
 .../examples/ProgressStepperBasic.tsx         | 34 +++----
 .../examples/ProgressStepperBasicFailure.tsx  | 88 ++++++++++---------
 .../examples/ProgressStepperBasicIssue.tsx    | 88 ++++++++++---------
 .../ProgressStepperBasicWithDescription.tsx   | 62 ++++++-------
 .../examples/ProgressStepperCustomIcons.tsx   | 35 ++++++++
 .../examples/ProgressStepperIcons.tsx         | 33 -------
 7 files changed, 176 insertions(+), 166 deletions(-)
 create mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx
 delete mode 100644 packages/react-core/src/components/ProgressStepper/examples/ProgressStepperIcons.tsx

diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
index fe922979b87..6ef7dd060dc 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md
@@ -47,7 +47,7 @@ Compact progress steppers will only display the current step's `title`, and will
 
 ### With custom icons
 
-```ts file="ProgressStepperIcons.tsx"
+```ts file="ProgressStepperCustomIcons.tsx"
 ```
 
 ### With help popover
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
index bb44e40dbd2..1ee458c6f0d 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
@@ -1,19 +1,21 @@
 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>;
+export const ProgressStepperHelpPopover: 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
index 77ecbc0e358..63819b50361 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx
@@ -1,46 +1,48 @@
 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>;
+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
index 1da07b91db9..fcecdd989bf 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx
@@ -1,46 +1,48 @@
 import React from 'react';
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
 
-<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>;
+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/ProgressStepperBasicWithDescription.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx
index bd4ae1e0ab1..3e1eaeda69e 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx
@@ -1,33 +1,35 @@
 import React from 'react';
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
 
-<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>;
+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/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/ProgressStepperIcons.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperIcons.tsx
deleted file mode 100644
index 3710ce379a0..00000000000
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperIcons.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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>;

From 98c7883c1b9304d56afb9f0570ea3bdb0bc990ba Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 26 Jul 2022 12:02:30 -0400
Subject: [PATCH 3/4] add missing update

---
 .../ProgressStepper/examples/ProgressStepperBasic.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
index 1ee458c6f0d..614f0d66db4 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
 
-export const ProgressStepperHelpPopover: React.FunctionComponent = () => (
+export const ProgressStepperBasic: React.FunctionComponent = () => (
   <ProgressStepper>
     <ProgressStep
       variant="success"

From 19f1aaf10676575fb0c9fd455b1bdc525f588273 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 27 Jul 2022 09:28:35 -0400
Subject: [PATCH 4/4] update example ids

---
 .../examples/ProgressStepperBasicWithAlignment.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
index 0159652a949..d94bc74d72f 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx
@@ -28,8 +28,8 @@ export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () =>
         <ProgressStep
           variant="success"
           description="This is the first thing to happen"
-          id="basic-desc-step1"
-          titleId="basic-desc-step1-title"
+          id="basic-alignment-step1"
+          titleId="basic-alignment-step1-title"
           aria-label="completed step, step with success"
         >
           First step
@@ -38,8 +38,8 @@ export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () =>
           variant="info"
           isCurrent
           description="This is the second thing to happen"
-          id="basic-desc-step2"
-          titleId="basic-desc-step2-title"
+          id="basic-alignment-step2"
+          titleId="basic-alignment-step2-title"
           aria-label="step with info"
         >
           Second step
@@ -47,8 +47,8 @@ export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () =>
         <ProgressStep
           variant="pending"
           description="This is the last thing to happen"
-          id="basic-desc-step3"
-          titleId="basic-desc-step3-title"
+          id="basic-alignment-step3"
+          titleId="basic-alignment-step3-title"
           aria-label="pending step"
         >
           Third step