From b53c9d16515b7f1e0f3711a4169590a136311900 Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Wed, 25 Jun 2025 11:55:16 -0400
Subject: [PATCH] feat(CC-wizard): added and validated wizard

---
 .../Wizard/WizardBasicModal.figma.tsx         | 47 +++++++++++++++++
 .../components/Wizard/WizardInPage.figma.tsx  | 17 +++++++
 .../Wizard/WizardStepItem.figma.tsx           | 51 +++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 packages/code-connect/components/Wizard/WizardBasicModal.figma.tsx
 create mode 100644 packages/code-connect/components/Wizard/WizardInPage.figma.tsx
 create mode 100644 packages/code-connect/components/Wizard/WizardStepItem.figma.tsx

diff --git a/packages/code-connect/components/Wizard/WizardBasicModal.figma.tsx b/packages/code-connect/components/Wizard/WizardBasicModal.figma.tsx
new file mode 100644
index 00000000000..6f2aa50f3a1
--- /dev/null
+++ b/packages/code-connect/components/Wizard/WizardBasicModal.figma.tsx
@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerContentBody,
+  Modal,
+  ModalVariant,
+  Wizard,
+  WizardHeader
+} from '@patternfly/react-core';
+
+// TODO: FIGMA: Update left panel to a semantic name or component
+// TODO: FIGMA: Add 'Wizard step content' prop to Wizard Step Item
+// Documentation for Wizard can be found at https://www.patternfly.org/components/wizard
+
+figma.connect(
+  Wizard,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14628-18627',
+  {
+    props: {
+      children: figma.children('Wizard step item')
+    },
+    example: (props) => (
+      <Modal isOpen={true} aria-label="Wizard modal" variant={ModalVariant.medium} onEscapePress={() => {}}>
+        <Drawer isExpanded={true} onExpand={() => {}}>
+          <DrawerContent panelContent="Panel content">
+            <DrawerContentBody>
+              <Wizard
+                height={400}
+                title="Header wizard"
+                header={
+                  <WizardHeader
+                    title="Wizard header title"
+                    description="Wizard header description"
+                    closeButtonAriaLabel="Close header"
+                  />
+                }
+              >
+                {props.children}
+              </Wizard>
+            </DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </Modal>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Wizard/WizardInPage.figma.tsx b/packages/code-connect/components/Wizard/WizardInPage.figma.tsx
new file mode 100644
index 00000000000..81458756def
--- /dev/null
+++ b/packages/code-connect/components/Wizard/WizardInPage.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Wizard } from '@patternfly/react-core';
+
+// TODO: FIGMA: Update left panel to a semantic name or component
+// TODO: FIGMA: Add 'Wizard step content' prop to Wizard Step Item
+// Documentation for Wizard can be found at https://www.patternfly.org/components/wizard
+
+figma.connect(
+  Wizard,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14628-23799',
+  {
+    props: {
+      children: figma.children('Wizard step item')
+    },
+    example: (props) => <Wizard>{props.children}</Wizard>
+  }
+);
diff --git a/packages/code-connect/components/Wizard/WizardStepItem.figma.tsx b/packages/code-connect/components/Wizard/WizardStepItem.figma.tsx
new file mode 100644
index 00000000000..23bcee086b4
--- /dev/null
+++ b/packages/code-connect/components/Wizard/WizardStepItem.figma.tsx
@@ -0,0 +1,51 @@
+import figma from '@figma/code-connect';
+import { WizardStep } from '@patternfly/react-core';
+
+// TODO: FIGMA: Add "With drawer" should be an enum if we expect to conditionally render the variant
+// Documentation for WizardStep can be found at https://www.patternfly.org/components/wizard
+
+figma.connect(
+  WizardStep,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14628-17356',
+  {
+    props: {
+      // string
+      name: figma.string('✏️ Nav item'),
+
+      // boolean
+      isExpandable: figma.boolean('Expandable'),
+
+      // enum
+      isDisabled: figma.enum('State', {
+        Disabled: true,
+        Enabled: false
+      }),
+
+      hasSteps: figma.enum('Expansion', {
+        'No expansion': undefined,
+        'Expandable - Open': [
+          <WizardStep name="Substep A" id="expand-steps-sub-a" key="expand-steps-sub-a">
+            Substep A content
+          </WizardStep>,
+          <WizardStep name="Substep B" id="expand-steps-sub-b" key="expand-steps-sub-b">
+            Substep B content
+          </WizardStep>
+        ],
+        'Expandable - Close': undefined
+      })
+
+      // children
+    },
+    example: (props) => (
+      <WizardStep
+        isDisabled={props.isDisabled}
+        isExpandable={props.isExpandable}
+        name={props.name}
+        id="<your-id>"
+        steps={props.hasSteps}
+      >
+        Step content
+      </WizardStep>
+    )
+  }
+);