Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Wizard): migrate to tailwind #4285

Merged
merged 2 commits into from
Mar 25, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/data/tailwind-migration-status.yaml
Original file line number Diff line number Diff line change
@@ -109,5 +109,5 @@ Toast: true
ToastRoot: true
Tooltip: true
Truncate: true
Wizard: false
WizardStep: false
Wizard: true
WizardStep: true
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions packages/orbit-components/src/Wizard/Wizard.ct-story.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
87 changes: 87 additions & 0 deletions packages/orbit-components/src/Wizard/Wizard.ct.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions packages/orbit-components/src/Wizard/Wizard.stories.tsx
Original file line number Diff line number Diff line change
@@ -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} />
Loading