@etus/ui 0.1.0

package/src/components/workflow/ProgressSteps/ProgressSteps.test.tsx

@@ -0,0 +1,318 @@
+import type { Step } from "./ProgressSteps.types"
+
+import { render, screen } from "@testing-library/react"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { CircleCheck, Home, Package, Truck } from "lucide-react"
+import { describe, expect, it } from "vitest"
+
+import { ProgressSteps } from "./ProgressSteps"
+
+expect.extend(toHaveNoViolations)
+
+const mockSteps: Step[] = [
+  { id: "1", label: "Step 1" },
+  { id: "2", label: "Step 2" },
+  { id: "3", label: "Step 3" },
+]
+
+const mockStepsWithDescriptions: Step[] = [
+  { description: "First step description", id: "1", label: "Step 1" },
+  { description: "Second step description", id: "2", label: "Step 2" },
+  { description: "Third step description", id: "3", label: "Step 3" },
+]
+
+const mockStepsWithIcons: Step[] = [
+  { icon: <Package data-testid="icon-package" />, id: "1", label: "Order" },
+  { icon: <Truck data-testid="icon-truck" />, id: "2", label: "Shipping" },
+  { icon: <Home data-testid="icon-home" />, id: "3", label: "Delivery" },
+  { icon: <CircleCheck data-testid="icon-check" />, id: "4", label: "Complete" },
+]
+
+const mockStepsWithStatus: Step[] = [
+  { id: "1", label: "Step 1", status: "completed" },
+  { id: "2", label: "Step 2", status: "completed" },
+  { id: "3", label: "Step 3", status: "error" },
+  { id: "4", label: "Step 4", status: "upcoming" },
+  { id: "5", label: "Step 5", status: "skipped" },
+]
+
+describe("ProgressSteps", () => {
+  describe("Rendering", () => {
+    it("renders all steps", () => {
+      render(<ProgressSteps steps={mockSteps} />)
+
+      expect(screen.getByText("Step 1")).toBeInTheDocument()
+      expect(screen.getByText("Step 2")).toBeInTheDocument()
+      expect(screen.getByText("Step 3")).toBeInTheDocument()
+    })
+
+    it("renders with correct role and aria-label", () => {
+      render(<ProgressSteps steps={mockSteps} />)
+
+      const container = screen.getByRole("list", { name: "Progress Steps" })
+      expect(container).toBeInTheDocument()
+    })
+
+    it("renders step items with listitem role", () => {
+      render(<ProgressSteps steps={mockSteps} />)
+
+      const items = screen.getAllByRole("listitem")
+      expect(items).toHaveLength(3)
+    })
+
+    it("marks current step correctly with aria-current", () => {
+      render(<ProgressSteps currentStep={1} steps={mockSteps} />)
+
+      const step2 = screen.getByText("Step 2").closest('[role="listitem"]')
+      expect(step2).toHaveAttribute("aria-current", "step")
+    })
+
+    it("applies data-status attribute correctly", () => {
+      const { container } = render(
+        <ProgressSteps currentStep={1} steps={mockSteps} />
+      )
+
+      const steps = container.querySelectorAll('[data-slot="progress-step"]')
+      expect(steps[0]).toHaveAttribute("data-status", "completed")
+      expect(steps[1]).toHaveAttribute("data-status", "current")
+      expect(steps[2]).toHaveAttribute("data-status", "upcoming")
+    })
+  })
+
+  describe("Variants", () => {
+    it("renders default variant with circles", () => {
+      const { container } = render(<ProgressSteps steps={mockSteps} />)
+
+      const circles = container.querySelectorAll(
+        '[data-slot="progress-step-circle"]'
+      )
+      expect(circles).toHaveLength(3)
+    })
+
+    it("renders numbered variant with step numbers", () => {
+      render(<ProgressSteps steps={mockSteps} variant="numbered" />)
+
+      expect(screen.getByText("1")).toBeInTheDocument()
+      expect(screen.getByText("2")).toBeInTheDocument()
+      expect(screen.getByText("3")).toBeInTheDocument()
+    })
+
+    it("renders dot variant with dots", () => {
+      const { container } = render(
+        <ProgressSteps steps={mockSteps} variant="dot" />
+      )
+
+      const dots = container.querySelectorAll('[data-slot="progress-step-dot"]')
+      expect(dots).toHaveLength(3)
+    })
+
+    it("renders icon variant with custom icons", () => {
+      render(<ProgressSteps steps={mockStepsWithIcons} variant="icon" />)
+
+      expect(screen.getByTestId("icon-package")).toBeInTheDocument()
+      expect(screen.getByTestId("icon-truck")).toBeInTheDocument()
+    })
+
+    it("renders bar variant with bar segments", () => {
+      const { container } = render(
+        <ProgressSteps steps={mockSteps} variant="bar" />
+      )
+
+      const bars = container.querySelectorAll('[data-slot="progress-step-bar"]')
+      expect(bars).toHaveLength(3)
+    })
+  })
+
+  describe("Orientation", () => {
+    it("renders horizontal orientation by default", () => {
+      const { container } = render(<ProgressSteps steps={mockSteps} />)
+
+      expect(container.firstChild).toHaveClass("flex-row")
+    })
+
+    it("renders vertical orientation when specified", () => {
+      const { container } = render(
+        <ProgressSteps orientation="vertical" steps={mockSteps} />
+      )
+
+      expect(container.firstChild).toHaveClass("flex-col")
+    })
+  })
+
+  describe("Sizes", () => {
+    it("applies small size classes", () => {
+      const { container } = render(
+        <ProgressSteps size="sm" steps={mockSteps} />
+      )
+
+      const circles = container.querySelectorAll(
+        '[data-slot="progress-step-circle"]'
+      )
+      expect(circles[0]).toHaveClass("h-6", "w-6")
+    })
+
+    it("applies medium size classes", () => {
+      const { container } = render(
+        <ProgressSteps size="md" steps={mockSteps} />
+      )
+
+      const circles = container.querySelectorAll(
+        '[data-slot="progress-step-circle"]'
+      )
+      expect(circles[0]).toHaveClass("h-8", "w-8")
+    })
+
+    it("applies large size classes", () => {
+      const { container } = render(
+        <ProgressSteps size="lg" steps={mockSteps} />
+      )
+
+      const circles = container.querySelectorAll(
+        '[data-slot="progress-step-circle"]'
+      )
+      expect(circles[0]).toHaveClass("h-10", "w-10")
+    })
+  })
+
+  describe("Labels and Descriptions", () => {
+    it("shows labels by default", () => {
+      render(<ProgressSteps steps={mockSteps} />)
+
+      expect(screen.getByText("Step 1")).toBeInTheDocument()
+    })
+
+    it("hides labels when showLabels is false", () => {
+      render(<ProgressSteps showLabels={false} steps={mockSteps} />)
+
+      expect(screen.queryByText("Step 1")).not.toBeInTheDocument()
+    })
+
+    it("shows descriptions when showDescriptions is true", () => {
+      render(
+        <ProgressSteps showDescriptions steps={mockStepsWithDescriptions} />
+      )
+
+      expect(screen.getByText("First step description")).toBeInTheDocument()
+    })
+
+    it("hides descriptions by default", () => {
+      render(<ProgressSteps steps={mockStepsWithDescriptions} />)
+
+      expect(
+        screen.queryByText("First step description")
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe("Connectors", () => {
+    it("shows connectors by default", () => {
+      const { container } = render(<ProgressSteps steps={mockSteps} />)
+
+      const connectors = container.querySelectorAll(
+        '[data-slot="progress-step-connector"]'
+      )
+      // Should have 2 connectors for 3 steps (not after last step)
+      expect(connectors).toHaveLength(2)
+    })
+
+    it("hides connectors when showConnectors is false", () => {
+      const { container } = render(
+        <ProgressSteps showConnectors={false} steps={mockSteps} />
+      )
+
+      const connectors = container.querySelectorAll(
+        '[data-slot="progress-step-connector"]'
+      )
+      expect(connectors).toHaveLength(0)
+    })
+  })
+
+  describe("Custom Step Status", () => {
+    it("respects custom status on steps", () => {
+      const { container } = render(
+        <ProgressSteps steps={mockStepsWithStatus} />
+      )
+
+      const steps = container.querySelectorAll('[data-slot="progress-step"]')
+      expect(steps[0]).toHaveAttribute("data-status", "completed")
+      expect(steps[1]).toHaveAttribute("data-status", "completed")
+      expect(steps[2]).toHaveAttribute("data-status", "error")
+      expect(steps[3]).toHaveAttribute("data-status", "upcoming")
+      expect(steps[4]).toHaveAttribute("data-status", "skipped")
+    })
+
+    it("applies completed style to steps", () => {
+      const { container } = render(
+        <ProgressSteps currentStep={2} steps={mockSteps} />
+      )
+
+      const completedCircles = container.querySelectorAll(
+        '[data-slot="progress-step-circle"].bg-primary'
+      )
+      expect(completedCircles.length).toBeGreaterThanOrEqual(2)
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <ProgressSteps currentStep={1} steps={mockSteps} />
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with vertical orientation", async () => {
+      const { container } = render(
+        <ProgressSteps
+          currentStep={1}
+          orientation="vertical"
+          steps={mockSteps}
+        />
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with numbered variant", async () => {
+      const { container } = render(
+        <ProgressSteps
+          currentStep={1}
+          steps={mockSteps}
+          variant="numbered"
+        />
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe("Props", () => {
+    it("passes className to container", () => {
+      const { container } = render(
+        <ProgressSteps className="custom-class" steps={mockSteps} />
+      )
+
+      expect(container.firstChild).toHaveClass("custom-class")
+    })
+
+    it("applies data-variant attribute", () => {
+      const { container } = render(
+        <ProgressSteps steps={mockSteps} variant="numbered" />
+      )
+
+      expect(container.firstChild).toHaveAttribute("data-variant", "numbered")
+    })
+
+    it("passes additional props to container", () => {
+      render(
+        <ProgressSteps data-testid="progress-steps" steps={mockSteps} />
+      )
+
+      expect(screen.getByTestId("progress-steps")).toBeInTheDocument()
+    })
+  })
+})

package/src/components/workflow/ProgressSteps/ProgressSteps.tsx

@@ -0,0 +1,350 @@
+import type { ProgressStepsProps, Step, StepItemProps } from "./ProgressSteps.types"
+
+import { Check, X } from "lucide-react"
+
+import { cn } from "../../../lib/utils"
+import {
+  progressStepsVariants,
+  stepBarSegmentVariants,
+  stepCircleVariants,
+  stepConnectorHorizontalVariants,
+  stepConnectorVerticalVariants,
+  stepDescriptionVariants,
+  stepDotVariants,
+  stepItemVariants,
+  stepLabelVariants,
+} from "./ProgressSteps.variants"
+
+/**
+ * Compute the status of a step based on its index and current step
+ */
+function computeStepStatus(
+  step: Step,
+  index: number,
+  currentStep: number
+): "completed" | "current" | "error" | "skipped" | "upcoming" {
+  // If step has explicit status, use it
+  if (step.status) {
+    return step.status
+  }
+
+  // Auto-compute based on currentStep
+  if (index < currentStep) {
+    return "completed"
+  }
+  if (index === currentStep) {
+    return "current"
+  }
+  return "upcoming"
+}
+
+/**
+ * Format a date to a human-readable string
+ */
+function formatTimestamp(date: Date): string {
+  return date.toLocaleDateString(undefined, {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  })
+}
+
+/**
+ * Render the step marker content based on variant
+ */
+function StepMarkerContent({
+  index,
+  size = "md",
+  status,
+  step,
+  variant = "default",
+}: {
+  index: number
+  size?: "lg" | "md" | "sm"
+  status: "completed" | "current" | "error" | "skipped" | "upcoming"
+  step: Step
+  variant?: "bar" | "default" | "dot" | "icon" | "numbered"
+}) {
+  const iconSize = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4"
+
+  switch (variant) {
+    case "numbered":
+      if (status === "completed") {
+        return <Check className={iconSize} />
+      }
+      if (status === "error") {
+        return <X className={iconSize} />
+      }
+      return <span>{index + 1}</span>
+
+    case "icon":
+      if (step.icon) {
+        return (
+          <span className={cn("flex items-center justify-center", `[&>svg]:${iconSize}`)}>
+            {step.icon}
+          </span>
+        )
+      }
+      // Fallback to checkmark for completed, number otherwise
+      if (status === "completed") {
+        return <Check className={iconSize} />
+      }
+      return <span>{index + 1}</span>
+
+    case "default":
+    default:
+      // Default shows checkmark for completed, nothing otherwise
+      if (status === "completed") {
+        return <Check className={iconSize} />
+      }
+      if (status === "error") {
+        return <X className={iconSize} />
+      }
+      return null
+  }
+}
+
+/**
+ * Single step item component
+ */
+function StepItem({
+  animated = true,
+  index,
+  isLast = false,
+  orientation = "horizontal",
+  showConnector = true,
+  showDescription = false,
+  showLabel = true,
+  size = "md",
+  status,
+  step,
+  variant = "default",
+}: StepItemProps) {
+  const isHorizontal = orientation === "horizontal"
+  const isDot = variant === "dot"
+  const isBar = variant === "bar"
+
+  // Get the connector status (next step's status affects connector appearance)
+  const connectorStatus = status === "completed" ? "completed" : "upcoming"
+
+  return (
+    <div
+      aria-current={status === "current" ? "step" : undefined}
+      aria-label={`${step.label}${status === "completed" ? " - Completed" : status === "current" ? " - Current" : status === "error" ? " - Error" : ""}`}
+      className={cn(stepItemVariants({ orientation, size }))}
+      data-slot="progress-step"
+      data-status={status}
+      role="listitem"
+    >
+      {/* Circle/Marker wrapper for horizontal orientation */}
+      {isHorizontal && !isBar && (
+        <div className="relative flex items-center justify-center">
+          {/* Circle or Dot */}
+          {isDot ? (
+            <div
+              className={stepDotVariants({ animated, size, status })}
+              data-slot="progress-step-dot"
+            />
+          ) : (
+            <div
+              className={stepCircleVariants({ animated, size, status, variant })}
+              data-slot="progress-step-circle"
+            >
+              <StepMarkerContent
+                index={index}
+                size={size}
+                status={status}
+                step={step}
+                variant={variant}
+              />
+            </div>
+          )}
+
+          {/* Horizontal Connector */}
+          {showConnector && !isLast && (
+            <div
+              className={stepConnectorHorizontalVariants({
+                size,
+                status: connectorStatus,
+                variant,
+              })}
+              aria-hidden="true"
+              data-slot="progress-step-connector"
+            />
+          )}
+        </div>
+      )}
+
+      {/* Vertical layout marker */}
+      {!isHorizontal && !isBar && (
+        <div className="relative flex flex-col items-center">
+          {/* Circle or Dot */}
+          {isDot ? (
+            <div
+              className={stepDotVariants({ animated, size, status })}
+              data-slot="progress-step-dot"
+            />
+          ) : (
+            <div
+              className={stepCircleVariants({ animated, size, status, variant })}
+              data-slot="progress-step-circle"
+            >
+              <StepMarkerContent
+                index={index}
+                size={size}
+                status={status}
+                step={step}
+                variant={variant}
+              />
+            </div>
+          )}
+
+          {/* Vertical Connector */}
+          {showConnector && !isLast && (
+            <div
+              className={cn(
+                stepConnectorVerticalVariants({
+                  size,
+                  status: connectorStatus,
+                  variant,
+                }),
+                "min-h-8"
+              )}
+              aria-hidden="true"
+              data-slot="progress-step-connector"
+            />
+          )}
+        </div>
+      )}
+
+      {/* Bar variant segment */}
+      {isBar && (
+        <div
+          className={stepBarSegmentVariants({ status })}
+          data-slot="progress-step-bar"
+        />
+      )}
+
+      {/* Labels and Description */}
+      {(showLabel || showDescription) && !isBar && (
+        <div
+          className={cn(
+            "flex flex-col",
+            isHorizontal ? "mt-2 items-center text-center" : "min-w-0 flex-1"
+          )}
+          data-slot="progress-step-content"
+        >
+          {showLabel && (
+            <span
+              className={stepLabelVariants({ size, status })}
+              data-slot="progress-step-label"
+            >
+              {step.label}
+            </span>
+          )}
+          {showDescription && step.description && (
+            <span
+              className={stepDescriptionVariants({ size })}
+              data-slot="progress-step-description"
+            >
+              {step.description}
+            </span>
+          )}
+          {showDescription && step.timestamp && (
+            <time
+              className={cn(stepDescriptionVariants({ size }), "mt-0.5")}
+              data-slot="progress-step-timestamp"
+              dateTime={step.timestamp.toISOString()}
+            >
+              {formatTimestamp(step.timestamp)}
+            </time>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * ProgressSteps component displays a sequence of steps in a process.
+ *
+ * @example
+ * ```tsx
+ * const steps = [
+ *   { id: "1", label: "Order Received" },
+ *   { id: "2", label: "In Preparation" },
+ *   { id: "3", label: "Shipped" },
+ *   { id: "4", label: "Delivered" },
+ * ]
+ *
+ * <ProgressSteps steps={steps} currentStep={1} />
+ * ```
+ */
+function ProgressSteps({
+  animated = true,
+  className,
+  currentStep = 0,
+  orientation = "horizontal",
+  showConnectors = true,
+  showDescriptions = false,
+  showLabels = true,
+  size = "md",
+  steps,
+  variant = "default",
+  ...props
+}: ProgressStepsProps) {
+  const isBar = variant === "bar"
+
+  // Compute gap based on size and orientation
+  const gapClass = orientation === "horizontal"
+    ? size === "sm"
+      ? "gap-2"
+      : size === "lg"
+        ? "gap-4"
+        : "gap-3"
+    : size === "sm"
+      ? "gap-4"
+      : size === "lg"
+        ? "gap-8"
+        : "gap-6"
+
+  return (
+    <div
+      className={cn(
+        progressStepsVariants({ orientation, size, variant }),
+        isBar && "gap-1",
+        !isBar && gapClass,
+        className
+      )}
+      aria-label="Progress Steps"
+      data-slot="progress-steps"
+      data-variant={variant}
+      role="list"
+      {...props}
+    >
+      {steps.map((step, index) => {
+        const status = computeStepStatus(step, index, currentStep)
+
+        return (
+          <StepItem
+            key={step.id}
+            animated={animated}
+            index={index}
+            isLast={index === steps.length - 1}
+            orientation={orientation}
+            showConnector={showConnectors}
+            showDescription={showDescriptions}
+            showLabel={showLabels}
+            size={size}
+            status={status}
+            step={step}
+            variant={variant}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export { ProgressSteps }
+export type { ProgressStepsProps, Step }