+ );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ isOpen: true,
+ title: "What do you call your group's new policy?",
+ description:
+ "You can also combine or add new approaches to the list",
+ children: (
+
+
+
+ 0/48
+
+
+ ),
+ showBackButton: true,
+ showNextButton: true,
+ backButtonText: "Back",
+ nextButtonText: "Next",
+ nextButtonDisabled: false,
+};
+
+export const WithStepper = Template.bind({});
+WithStepper.args = {
+ isOpen: true,
+ title: "What do you call your group's new policy?",
+ description:
+ "You can also combine or add new approaches to the list",
+ children: (
+
+
+
+ 0/48
+
+
+ ),
+ showBackButton: true,
+ showNextButton: true,
+ backButtonText: "Back",
+ nextButtonText: "Next",
+ nextButtonDisabled: false,
+ currentStep: 1,
+ totalSteps: 3,
+};
+
+export const Step2 = Template.bind({});
+Step2.args = {
+ isOpen: true,
+ title: "How should conflicts be resolved?",
+ description:
+ "You can also combine or add new approaches to the list",
+ children: (
+
+ ),
+ showBackButton: false,
+ showNextButton: false,
+};
+
+export const NextButtonDisabled = Template.bind({});
+NextButtonDisabled.args = {
+ isOpen: true,
+ title: "What do you call your group's new policy?",
+ description:
+ "You can also combine or add new approaches to the list",
+ children: (
+
diff --git a/app/components/Stepper/Stepper.types.ts b/app/components/Stepper/Stepper.types.ts
index 7c635b4..f82acab 100644
--- a/app/components/Stepper/Stepper.types.ts
+++ b/app/components/Stepper/Stepper.types.ts
@@ -1,4 +1,4 @@
-export type StepperActive = 1 | 2 | 3 | 4 | 5;
+export type StepperActive = number;
export interface StepperProps {
active?: StepperActive;
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7ab6f77..4036877 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -176,6 +176,14 @@ const eslintConfig = [
"react-hooks/exhaustive-deps": "off",
},
},
+ // Type definition files - interface properties are used in implementation files
+ {
+ files: ["**/*.types.ts"],
+ rules: {
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ },
+ },
];
export default eslintConfig;
diff --git a/stories/Create.stories.js b/stories/Create.stories.js
index 87fd449..cea920c 100644
--- a/stories/Create.stories.js
+++ b/stories/Create.stories.js
@@ -65,15 +65,10 @@ export const Default = Template.bind({});
Default.args = {
isOpen: true,
title: "What do you call your group's new policy?",
- description:
- "You can also combine or add new approaches to the list",
+ description: "You can also combine or add new approaches to the list",
children: (
-
+
0/48
@@ -90,15 +85,10 @@ export const WithStepper = Template.bind({});
WithStepper.args = {
isOpen: true,
title: "What do you call your group's new policy?",
- description:
- "You can also combine or add new approaches to the list",
+ description: "You can also combine or add new approaches to the list",
children: (
-
+
0/48
@@ -117,15 +107,10 @@ export const Step2 = Template.bind({});
Step2.args = {
isOpen: true,
title: "How should conflicts be resolved?",
- description:
- "You can also combine or add new approaches to the list",
+ description: "You can also combine or add new approaches to the list",
children: (
-
+
),
showBackButton: true,
@@ -178,15 +163,10 @@ export const NextButtonDisabled = Template.bind({});
NextButtonDisabled.args = {
isOpen: true,
title: "What do you call your group's new policy?",
- description:
- "You can also combine or add new approaches to the list",
+ description: "You can also combine or add new approaches to the list",
children: (
-
+
0/48
diff --git a/tests/components/Create.test.tsx b/tests/components/Create.test.tsx
index ff2dfaf..e1f7f0e 100644
--- a/tests/components/Create.test.tsx
+++ b/tests/components/Create.test.tsx
@@ -1,7 +1,8 @@
import React from "react";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
+import { renderWithProviders } from "../utils/test-utils";
import Create from "../../app/components/Create";
import Input from "../../app/components/Input";
@@ -20,20 +21,22 @@ describe("Create", () => {
});
it("renders when isOpen is true", () => {
- render(Create dialog content);
+ renderWithProviders(
+ Create dialog content,
+ );
expect(screen.getByRole("dialog")).toBeInTheDocument();
expect(screen.getByText("Test Create Dialog")).toBeInTheDocument();
expect(screen.getByText("Create dialog content")).toBeInTheDocument();
});
it("does not render when isOpen is false", () => {
- render();
+ renderWithProviders();
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});
it("calls onClose when close button is clicked", () => {
const onClose = vi.fn();
- render();
+ renderWithProviders();
const closeButton = screen.getByLabelText("Close dialog");
fireEvent.click(closeButton);
expect(onClose).toHaveBeenCalledTimes(1);
@@ -41,14 +44,14 @@ describe("Create", () => {
it("calls onClose when ESC key is pressed", () => {
const onClose = vi.fn();
- render();
+ renderWithProviders();
fireEvent.keyDown(document, { key: "Escape" });
expect(onClose).toHaveBeenCalledTimes(1);
});
it("calls onClose when overlay is clicked", () => {
const onClose = vi.fn();
- render();
+ renderWithProviders();
const overlay = document.querySelector(".fixed.inset-0");
if (overlay) {
fireEvent.click(overlay);
@@ -59,7 +62,7 @@ describe("Create", () => {
it("renders footer buttons when provided", () => {
const onBack = vi.fn();
const onNext = vi.fn();
- render(
+ renderWithProviders(
{
it("calls onBack when back button is clicked", () => {
const onBack = vi.fn();
- render(
+ renderWithProviders(
{
it("calls onNext when next button is clicked", () => {
const onNext = vi.fn();
- render(
+ renderWithProviders(
{
});
it("disables next button when nextButtonDisabled is true", () => {
- render(
+ renderWithProviders(
{
});
it("renders stepper when currentStep and totalSteps are provided", () => {
- render(
- ,
+ renderWithProviders(
+ ,
);
- const steppers = screen.getAllByRole("progressbar");
- // Find the stepper in the footer (not the progress bar if any)
- const footerStepper = steppers.find((stepper) => {
- const parent = stepper.closest(".absolute.bottom-0");
- return parent !== null;
+ // Find the stepper by its aria-label
+ const stepper = screen.getByRole("progressbar", {
+ name: "Step 2 of 5",
});
- expect(footerStepper).toBeInTheDocument();
- if (footerStepper) {
- expect(footerStepper).toHaveAttribute("aria-valuenow", "2");
- expect(footerStepper).toHaveAttribute("aria-valuemax", "5");
- }
+ expect(stepper).toBeInTheDocument();
+ expect(stepper).toHaveAttribute("aria-valuenow", "2");
+ expect(stepper).toHaveAttribute("aria-valuemax", "5");
});
it("renders custom footer content", () => {
- render(
+ renderWithProviders(
Custom Footer}
@@ -149,33 +144,35 @@ describe("Create", () => {
});
it("has proper ARIA attributes", () => {
- render();
+ renderWithProviders(
+ ,
+ );
const dialog = screen.getByRole("dialog");
expect(dialog).toHaveAttribute("aria-modal", "true");
expect(dialog).toHaveAttribute("aria-label", "Test create dialog");
});
it("locks body scroll when open", () => {
- render();
+ renderWithProviders();
expect(document.body.style.overflow).toBe("hidden");
});
it("restores body scroll when closed", () => {
- const { rerender } = render();
+ const { rerender } = renderWithProviders();
expect(document.body.style.overflow).toBe("hidden");
rerender();
expect(document.body.style.overflow).toBe("");
});
it("traps focus within create dialog", async () => {
- render(
+ renderWithProviders(
,
);
const closeButton = screen.getByLabelText("Close dialog");
- const input = screen.getByLabelText("Test Input");
+ screen.getByLabelText("Test Input"); // Verify input is rendered
// Focus should start on first focusable element (close button)
await waitFor(() => {