feat(Wizard): migrate to tailwind

docs/src/data/tailwind-migration-status.yaml

@@ -109,5 +109,5 @@ Toast: true
 ToastRoot: true
 Tooltip: true
 Truncate: true
-Wizard: false
-WizardStep: false
+Wizard: true
+WizardStep: true

packages/orbit-components/src/Wizard/Wizard.ct-story.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+
+import Wizard, { WizardStep } from ".";
+
+export function WizardStory() {
+  return (["row", "column"] as const).map(direction => (
+    <>
+      <div className="p-md">
+        <Wizard
+          id={`wizard-single-${direction}`}
+          dataTest={`wizard-single-${direction}`}
+          direction={direction}
+          activeStep={0}
+          completedSteps={0}
+        >
+          <WizardStep title="Search" />
+        </Wizard>
+      </div>
+      <div className="p-md">
+        <Wizard
+          id={`wizard-completed-0-${direction}`}
+          direction={direction}
+          activeStep={1}
+          completedSteps={0}
+        >
+          <WizardStep title="Search" />
+          <WizardStep title="Passenger details" />
+          <WizardStep title="Ticket fare" />
+          <WizardStep title="Customize your trip" isCompleted />
+          <WizardStep title="Overview & Payment" />
+        </Wizard>
+      </div>
+      <div className="p-md">
+        <Wizard
+          id={`wizard-completed-2-${direction}`}
+          direction={direction}
+          activeStep={1}
+          completedSteps={2}
+        >
+          <WizardStep title="Search" />
+          <WizardStep title="Passenger details" />
+          <WizardStep title="Ticket fare" />
+          <WizardStep title="Customize your trip" isCompleted />
+          <WizardStep title="Overview & Payment" />
+        </Wizard>
+      </div>
+      <div className="p-md">
+        <Wizard
+          id={`wizard-completed-5-${direction}`}
+          direction={direction}
+          activeStep={4}
+          completedSteps={5}
+          labelClose="CLOSE"
+          labelProgress="PROGRESS"
+        >
+          <WizardStep title="Search" />
+          <WizardStep title="Passenger details" />
+          <WizardStep title="Ticket fare" />
+          <WizardStep title="Customize your trip" isCompleted />
+          <WizardStep title="Overview & Payment" />
+        </Wizard>
+      </div>
+    </>
+  ));
+}
+
+export function WizardStoryHover({ direction }: { direction: "row" | "column" }) {
+  return (
+    <div className="p-md">
+      <Wizard id={React.useId()} direction={direction} activeStep={1} completedSteps={2}>
+        <WizardStep title="Search" />
+        <WizardStep title="Passenger details" />
+        <WizardStep title="Ticket fare" />
+        <WizardStep title="Customize your trip" isCompleted />
+        <WizardStep title="Overview & Payment" />
+      </Wizard>
+    </div>
+  );
+}

packages/orbit-components/src/Wizard/Wizard.ct.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import RenderInRtl from "../utils/rtl/RenderInRtl";
+import { WizardStory, WizardStoryHover } from "./Wizard.ct-story";
+
+test.describe("visual Wizard", () => {
+  async function maybeHoverByText(component, text: string) {
+    if ((await component.getByText(text).count()) === 0) {
+      return Promise.resolve();
+    }
+
+    return component.getByText(text).hover();
+  }
+
+  test("default", async ({ mount }) => {
+    const component = await mount(<WizardStory />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("row hover completed step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="row" />);
+    await maybeHoverByText(component, "Search");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("row hover active step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="row" />);
+    await maybeHoverByText(component, "Passenger details");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("row hover inactive step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="row" />);
+    await maybeHoverByText(component, "Overview & Payment");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("row hover completed inactive step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="row" />);
+    await maybeHoverByText(component, "Customize your trip");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("column hover completed step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="column" />);
+    await maybeHoverByText(component, "Search");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("column hover active step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="column" />);
+    await maybeHoverByText(component, "Passenger details");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("column hover inactive step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="column" />);
+    await maybeHoverByText(component, "Overview & Payment");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("column hover completed inactive step", async ({ mount }) => {
+    const component = await mount(<WizardStoryHover direction="column" />);
+    await maybeHoverByText(component, "Customize your trip");
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("rtl", async ({ mount }) => {
+    const component = await mount(
+      <RenderInRtl>
+        <WizardStory />
+      </RenderInRtl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

packages/orbit-components/src/Wizard/Wizard.stories.tsx

@@ -37,10 +37,13 @@ export const Default = () => {
 };
 
 export const Rtl = () => {
+  const direction = select("direction", ["row", "column"], "row");
+
   return (
     <RenderInRtl>
       <Wizard
         id="wizard"
+        direction={direction}
         completedSteps={3}
         activeStep={3}
         onChangeStep={action("onChangeStep")}
@@ -88,6 +91,8 @@ export const Playground = () => {
     max: Math.min(completedSteps, steps.length - 1),
     step: 1,
   });
+  const direction = select("direction", ["row", "column"], "row");
+
   return (
     <Wizard
       id="wizard"
@@ -96,6 +101,7 @@ export const Playground = () => {
       completedSteps={completedSteps}
       activeStep={activeStep}
       onChangeStep={action("onChangeStep")}
+      direction={direction}
     >
       {steps.map(step => (
         <WizardStep key={step} title={step} />