@hortiview/shared-components 2.15.0 → 2.16.1

package/dist/components/Stepper/Stepper.js

@@ -1,23 +1,70 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { G as o } from "../../index.es-oxil0uFe.js";
-import { useMemo as u } from "react";
-import { StepperPreviousButton as f, StepperNextButton as g } from "./components/StepperButton.js";
-import { StepperHeader as y } from "./components/StepperHeader.js";
-import { s as h } from "../../stepper.module-c-CWmpkt.js";
-const j = ({
-  stepperType: n = "default",
-  steps: e,
-  currentStep: t,
-  customTotalSteps: a,
-  children: l,
-  isStepLoading: p,
-  showStepperHeader: s = !0,
-  stepperButtonAlignment: d = "center",
-  showPreviousButtonOnFirstStep: m = !1
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { G as u } from "../../index.es-oxil0uFe.js";
+import { useMemo as v } from "react";
+import { StepperPreviousButton as g, StepperNextButton as A } from "./components/StepperButton.js";
+import { StepperHeader as k } from "./components/StepperHeader.js";
+import { s as S } from "../../stepper.module-DR_FbENS.js";
+import { StepperStyle as D } from "./stepperStyles.js";
+const W = ({
+  stepperStyle: h = D.DESKTOP,
+  steps: i,
+  currentStepId: o,
+  overwriteTotalSteps: P,
+  isStepLoading: x,
+  showStepperHeader: y = !0,
+  showStepperButtons: c = !0,
+  stepperButtonAlignment: C = "center",
+  showPreviousButtonOnFirstStep: d = !1,
+  children: B
 }) => {
-  const c = u(() => t === e.length - 1, [t, e.length]);
-  return /* @__PURE__ */ i(
-    o,
+  const p = v(() => {
+    const s = i.map((r, e) => (e === 0 && r.excludeFromHeader && console.error(
+      "The first step is excluded from the header. Please check your configuration."
+    ), {
+      step: r,
+      isActive: !1,
+      isCompleted: !1,
+      isRendered: !r.excludeFromHeader,
+      isFirst: e === 0,
+      isLast: e === i.length - 1
+    })), l = i.findIndex((r) => r.id === o);
+    l === -1 && console.error(
+      `Current step with id ${o} not found in steps array. Bad configuration?`
+    );
+    let f = o;
+    for (let r = 0; r < s.length; r++) {
+      const e = s[r];
+      if (r > l) {
+        e.isActive = !1, e.isCompleted = !1;
+        continue;
+      }
+      if (e.step.id === o)
+        if (e.isRendered)
+          e.isActive = !0, e.isCompleted = !1;
+        else {
+          const a = s.find((b) => b.step.id === f);
+          a && (a.isActive = !0, a.isCompleted = e.step.excludedStepCompletesPreviousStep ?? !1);
+        }
+      r < l && (e.isActive = !1, e.isCompleted = !0, e.isRendered && (f = e.step.id));
+    }
+    return s;
+  }, [i, o]), t = v(() => p.find((s) => s.isActive), [p]);
+  if (!t)
+    return console.error(
+      `No active step found for currentStepId ${o}. Please check your configuration.`
+    ), null;
+  if (c) {
+    if (!t.step.nextButtonProps?.onClick || !t.step.nextButtonProps?.label)
+      return console.error(
+        `Next button props not found for current step with id ${o}. If you want to use the stepper buttons, make sure to provide nextButtonProps for each step.`
+      ), null;
+    if ((!t.isFirst || d) && (!t.step.prevButtonProps?.onClick || !t.step.prevButtonProps?.label))
+      return console.error(
+        `Previous button props not found for current step with id ${o}. If you want to use the stepper buttons, make sure to provide prevButtonProps for each applicable step.`
+      ), null;
+  }
+  return /* @__PURE__ */ m(
+    u,
     {
       "data-testid": "stepper",
       fullWidth: !0,
@@ -26,51 +73,59 @@ const j = ({
       primaryAlign: "center",
       secondaryAlign: "center",
       children: [
-        s ? /* @__PURE__ */ r(
-          y,
+        y ? /* @__PURE__ */ n(
+          k,
           {
-            stepperType: n,
-            steps: e,
-            currentStep: t,
-            customTotalSteps: a
+            stepperStyle: h,
+            stepsData: p,
+            overwriteTotalSteps: P
           }
         ) : null,
-        /* @__PURE__ */ r(
-          o,
+        /* @__PURE__ */ n(
+          u,
           {
             "data-testid": "stepper-content",
             fullWidth: !0,
-            className: h.stepperContent,
+            className: S.stepperContent,
             gap: "airy",
             secondaryAlign: "center",
             direction: "vertical",
-            children: l
+            children: B
           }
         ),
-        /* @__PURE__ */ i(
-          o,
+        c ? /* @__PURE__ */ m(
+          u,
           {
             "data-testid": "stepper-buttons",
             fullWidth: !0,
             secondaryAlign: "center",
-            primaryAlign: d,
+            primaryAlign: C,
             children: [
-              (t !== 0 || m) && /* @__PURE__ */ r(f, { ...e[t].prevButtonProps }),
-              /* @__PURE__ */ r(
+              (!t.isFirst || d) && /* @__PURE__ */ n(
                 g,
                 {
-                  ...e[t].nextButtonProps,
-                  isStepLoading: p,
-                  isLastStep: c
+                  ...t.step.prevButtonProps,
+                  onClick: t.step.prevButtonProps.onClick,
+                  label: t.step.prevButtonProps.label
+                }
+              ),
+              /* @__PURE__ */ n(
+                A,
+                {
+                  ...t.step.nextButtonProps,
+                  onClick: t.step.nextButtonProps.onClick,
+                  label: t.step.nextButtonProps.label,
+                  isStepLoading: x,
+                  isLastStep: t.isLast
                 }
               )
             ]
           }
-        )
+        ) : null
       ]
     }
   );
 };
 export {
-  j as Stepper
+  W as Stepper
 };

package/dist/components/Stepper/Stepper.test.js

@@ -1,160 +1,344 @@
-import { jsx as e } from "react/jsx-runtime";
-import { a as p, s as t, f as u, c as l } from "../../react.esm-Bm0cAgpZ.js";
-import { Stepper as o } from "./Stepper.js";
-import { v as s, d as a, t as c, g as n } from "../../vi.bdSIJ99Y-B308Q-4w.js";
-const i = [
+import { jsx as n } from "react/jsx-runtime";
+import { a as p, s as t, f as S, c as C } from "../../react.esm-Bm0cAgpZ.js";
+import { a as y } from "../../useBreakpoints-MzTZ0tCT.js";
+import { Stepper as s } from "./Stepper.js";
+import { StepperStyle as i } from "./stepperStyles.js";
+import { d as B, b as h, t as c, g as e, v as a } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+const m = () => [
   {
-    name: "step1",
-    step: 0,
-    title: "Step 1",
+    id: "step1",
+    stepNumber: 1,
+    text: "Description 1",
+    secondaryText: "Secondary Description 1",
     optional: !1,
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: a.fn(), label: "Next" },
+    prevButtonProps: { onClick: a.fn(), label: "Back" }
   },
   {
-    name: "step2",
-    step: 1,
-    title: "Step 2",
+    id: "step2",
+    stepNumber: 2,
+    text: "Description 2",
+    secondaryText: "Secondary Description 2",
     optional: !1,
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: a.fn(), label: "Next" },
+    prevButtonProps: { onClick: a.fn(), label: "Back" }
   },
   {
-    name: "step3",
-    step: 2,
-    title: "Step 3",
+    id: "step3",
+    stepNumber: 3,
+    text: "Description 3",
+    secondaryText: "Secondary Description 3",
     optional: !0,
-    nextButtonProps: { onClick: s.fn(), label: "Finish" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: a.fn(), label: "Finish" },
+    prevButtonProps: { onClick: a.fn(), label: "Back" }
   }
 ];
-a("Stepper", () => {
-  c("renders the stepper header and children", () => {
+B("Generic Stepper Tests (StepperStyle.DESKTOP)", () => {
+  let o;
+  h(() => {
+    o = m();
+  }), c("Default Render", () => {
     p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), n(t.queryByText("Step 1")).not.toBeInTheDocument(), n(t.getByText("Step 2")).toBeInTheDocument(), n(t.queryByText("Step 3")).not.toBeInTheDocument(), n(t.getByText("Step Content")).toBeInTheDocument();
-  }), c("disables the next button when isStepLoading is true", () => {
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByText(
+      1
+      /* STEP_1 */
+    )).toBeInTheDocument(), e(t.getByText(
+      2
+      /* STEP_2 */
+    )).toBeInTheDocument(), e(t.getByText(
+      3
+      /* STEP_3 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Description 1"
+      /* STEP_1 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Description 2"
+      /* STEP_2 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Description 3"
+      /* STEP_3 */
+    )).toBeInTheDocument(), e(t.getByText("Step Content")).toBeInTheDocument(), e(t.getByText("Next")).toBeInTheDocument();
+  }), c("isStepLoading disables buttons", () => {
     p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !0, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step1", isStepLoading: !0, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     );
     const r = t.getByText("Next").closest("button");
-    n(r).toBeDisabled();
+    e(r).toBeDisabled();
   }), c("calls nextButtonProps.onClick when next button is clicked", () => {
-    const r = s.fn();
-    i[1].nextButtonProps.onClick = r, p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), u.click(t.getByText("Next")), n(r).toHaveBeenCalled();
+    const r = a.fn();
+    o[1].nextButtonProps.onClick = r, p(
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), S.click(t.getByText("Next")), e(r).toHaveBeenCalled();
   }), c("calls prevButtonProps.onClick when prev button is clicked", () => {
-    const r = s.fn();
-    i[1].prevButtonProps.onClick = r, p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), u.click(t.getByText("Back")), n(r).toHaveBeenCalled();
+    const r = a.fn();
+    o[1].prevButtonProps.onClick = r, p(
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), S.click(t.getByText("Back")), e(r).toHaveBeenCalled();
   }), c("does not render the prev button on the first step", () => {
     p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 0, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), n(t.queryByText("Back")).not.toBeInTheDocument();
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step1", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.queryByText("Back")).not.toBeInTheDocument();
   }), c("renders the next button as submit on last step", () => {
     p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 2, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step3", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     );
     const r = t.getByText("Finish").closest("button");
-    n(r).toHaveAttribute("type", "submit");
-  }), c("does not render the stepper header when showStepperHeader is false", () => {
+    e(r).toHaveAttribute("type", "submit");
+  }), c("hide stepper header when showStepperHeader is false", () => {
+    p(
+      /* @__PURE__ */ n(
+        s,
+        {
+          steps: o,
+          currentStepId: "step2",
+          isStepLoading: !1,
+          showStepperHeader: !1,
+          children: /* @__PURE__ */ n("div", { children: "Step Content" })
+        }
+      )
+    ), e(t.queryByTestId("stepper-header")).not.toBeInTheDocument();
+  }), c("hide stepper buttons when showStepperButtons is false", () => {
     p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !1, showStepperHeader: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), n(t.queryByTestId("stepper-header")).not.toBeInTheDocument();
+      /* @__PURE__ */ n(
+        s,
+        {
+          steps: o,
+          currentStepId: "step2",
+          isStepLoading: !1,
+          showStepperButtons: !1,
+          children: /* @__PURE__ */ n("div", { children: "Step Content" })
+        }
+      )
+    ), e(t.queryByText("Next")).not.toBeInTheDocument(), e(t.queryByText("Back")).not.toBeInTheDocument();
   }), c("does not render stepper button icons when showArrowIcon is false", () => {
-    i[1].nextButtonProps.showArrowIcon = !1, i[1].prevButtonProps.showArrowIcon = !1, p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), n(t.queryByText("arrow_forward")).not.toBeInTheDocument(), n(t.queryByText("arrow_back")).not.toBeInTheDocument();
+    o[1].nextButtonProps.showArrowIcon = !1, o[1].prevButtonProps.showArrowIcon = !1, p(
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.queryByText("arrow_forward")).not.toBeInTheDocument(), e(t.queryByText("arrow_back")).not.toBeInTheDocument();
+  }), c("prints an error when current step is not found", () => {
+    const r = a.spyOn(console, "error").mockImplementation(() => {
+    });
+    p(
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "unknownId", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(r).toHaveBeenCalledWith(
+      "Current step with id unknownId not found in steps array. Bad configuration?"
+    ), r.mockRestore(), e(t.queryByTestId("description-stepper-header")).not.toBeInTheDocument();
+  }), c("prints an error when next button props are not found but showStepperButtons is true", () => {
+    const r = a.spyOn(console, "error").mockImplementation(() => {
+    }), d = m();
+    d[0].nextButtonProps.onClick = void 0, d[1].prevButtonProps.label = void 0, p(
+      /* @__PURE__ */ n(s, { steps: d, currentStepId: "step1", showStepperButtons: !0, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(r).toHaveBeenCalledWith(
+      "Next button props not found for current step with id step1. If you want to use the stepper buttons, make sure to provide nextButtonProps for each step."
+    ), p(
+      /* @__PURE__ */ n(s, { steps: d, currentStepId: "step2", showStepperButtons: !0, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(r).toHaveBeenCalledWith(
+      "Previous button props not found for current step with id step2. If you want to use the stepper buttons, make sure to provide prevButtonProps for each applicable step."
+    ), r.mockRestore();
   });
 });
-const d = [
-  {
-    name: "Description Step 1",
-    step: 1,
-    title: "Description 1",
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
-  },
-  {
-    name: "Description Step 2",
-    step: 2,
-    title: "Description 2",
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
-  },
-  {
-    name: "Description Step 2.5",
-    step: 2.5,
-    title: "Description 2.5",
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
-  },
-  {
-    name: "Description Step 3",
-    step: 3,
-    title: "Description 3",
-    nextButtonProps: { onClick: s.fn(), label: "Finish" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
-  }
-];
-a("stepper types", () => {
-  const r = /* @__PURE__ */ e("div", { children: "content" });
-  c("default type without prop", () => {
+B("Stepper Type DESKTOP Tests", () => {
+  let o;
+  h(() => {
+    o = m();
+  }), c("renders numbers, text and secondary text", () => {
     p(
-      /* @__PURE__ */ e(o, { steps: i, currentStep: 0, children: r })
-    ), n(t.getByTestId("stepper-header")).toBeInTheDocument(), n(t.getByText("Step 1")).toBeInTheDocument();
-  }), c("default type via prop", () => {
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByTestId("desktop-stepper-header")).toBeInTheDocument(), e(t.getByText(
+      1
+      /* STEP_1 */
+    )).toBeInTheDocument(), e(t.getByText(
+      2
+      /* STEP_2 */
+    )).toBeInTheDocument(), e(t.getByText(
+      3
+      /* STEP_3 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Description 1"
+      /* STEP_1 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Description 2"
+      /* STEP_2 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Description 3"
+      /* STEP_3 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Secondary Description 1"
+      /* STEP_1 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Secondary Description 2"
+      /* STEP_2 */
+    )).toBeInTheDocument(), e(t.getByText(
+      "Secondary Description 3"
+      /* STEP_3 */
+    )).toBeInTheDocument(), e(t.getByTestId("stepper-connector-before-step2")).toBeInTheDocument(), e(t.getByTestId("stepper-connector-before-step3")).toBeInTheDocument(), e(
+      t.queryByTestId("stepper-connector-before-step1")
+    ).not.toBeInTheDocument(), e(t.getByText("Step Content")).toBeInTheDocument(), e(t.getByText("Next")).toBeInTheDocument();
+  }), c("show numbers for active and incompleted step", () => {
     p(
-      /* @__PURE__ */ e(o, { stepperType: "default", steps: i, currentStep: 0, children: r })
-    ), n(t.getByTestId("stepper-header")).toBeInTheDocument(), n(t.getByText("Step 1")).toBeInTheDocument();
-  }), c("description type via prop", () => {
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.queryByText(
+      1
+      /* STEP_1 */
+    )).not.toBeInTheDocument(), e(t.getByText(
+      2
+      /* STEP_2 */
+    )).toBeInTheDocument(), e(t.getByText(
+      3
+      /* STEP_3 */
+    )).toBeInTheDocument();
+  }), c("show checkmark for completed step", () => {
     p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 0, children: r })
-    ), n(t.getByTestId("description-stepper-header")).toBeInTheDocument(), n(t.getByText("Description 1")).toBeInTheDocument();
-  });
-});
-a("description stepper header", () => {
-  const r = /* @__PURE__ */ e("div", { children: "content" });
-  c("render step process", () => {
-    p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 0, children: r })
-    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("1/4"), l(), p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 1, children: r })
-    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("2/4"), l(), p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 2, children: r })
-    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("2.5/4"), l(), p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 3, children: r })
-    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("3/4"), l(), p(
-      /* @__PURE__ */ e(
-        o,
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.queryByText(
+      1
+      /* STEP_1 */
+    )).not.toBeInTheDocument(), e(t.queryByText(
+      2
+      /* STEP_2 */
+    )).not.toBeInTheDocument(), e(t.getByTestId("stepper-item-check-for-step1")).toBeInTheDocument(), e(t.getByTestId("stepper-item-check-for-step2")).toBeInTheDocument();
+  }), c("has correct color styles for completed and active steps", () => {
+    p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    );
+    const r = t.getByTestId("stepper-item-circle-for-step1"), d = t.getByTestId(
+      "stepper-connector-before-step2"
+    ), l = t.getByTestId("stepper-item-circle-for-step2"), u = t.getByTestId("stepper-connector-before-step3"), I = t.getByTestId("stepper-item-circle-for-step3");
+    e(r.className).toContain("stepperItemNumberActive"), e(d.className).toContain("stepperItemConnectorCompleted"), e(l.className).toContain("stepperItemNumberActive"), e(u.className).not.toContain("stepperItemConnectorCompleted"), e(I.className).not.toContain("stepperItemNumberActive");
+  }), c("advancing step changes number to checkmark and adjusts color", () => {
+    const { rerender: r } = p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), d = t.getByTestId("stepper-item-circle-for-step1"), l = t.getByTestId("stepper-connector-before-step2"), u = t.getByTestId("stepper-item-circle-for-step2"), I = t.getByTestId("stepper-connector-before-step3"), T = t.getByTestId("stepper-item-circle-for-step3");
+    e(d.className).toContain("stepperItemNumberActive"), e(l.className).not.toContain("stepperItemConnectorCompleted"), e(u.className).not.toContain("stepperItemNumberActive"), e(I.className).not.toContain("stepperItemConnectorCompleted"), e(T.className).not.toContain("stepperItemNumberActive"), r(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(d.className).toContain("stepperItemNumberActive"), e(l.className).toContain("stepperItemConnectorCompleted"), e(u.className).toContain("stepperItemNumberActive"), e(I.className).not.toContain("stepperItemConnectorCompleted"), e(T.className).not.toContain("stepperItemNumberActive"), r(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(d.className).toContain("stepperItemNumberActive"), e(l.className).toContain("stepperItemConnectorCompleted"), e(u.className).toContain("stepperItemNumberActive"), e(I.className).toContain("stepperItemConnectorCompleted"), e(T.className).toContain("stepperItemNumberActive");
+  }), c("custom button icons are shown as expected", () => {
+    o[1].nextButtonProps.showArrowIcon = !1, o[1].nextButtonProps.trailingIcon = "flag", o[1].prevButtonProps.showArrowIcon = !1, o[1].prevButtonProps.leadingIcon = "wifi", p(
+      /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByText("flag")).toBeInTheDocument(), e(t.getByText("wifi")).toBeInTheDocument();
+  }), c("handles excludeFromHeader and excludedStepCompletesPreviousStep correctly", () => {
+    const r = m();
+    r.push({
+      id: "step4",
+      stepNumber: 4,
+      text: "Description 4",
+      excludeFromHeader: !0,
+      excludedStepCompletesPreviousStep: !1,
+      secondaryText: "Secondary Description 4",
+      nextButtonProps: { onClick: a.fn(), label: "Next" },
+      prevButtonProps: { onClick: a.fn(), label: "Back" }
+    }), r[1].excludedStepCompletesPreviousStep = !0, r[1].excludeFromHeader = !0, p(
+      /* @__PURE__ */ n(
+        s,
         {
-          stepperType: "description",
-          steps: d,
-          currentStep: 3,
-          customTotalSteps: 3,
-          children: r
+          stepperStyle: i.DESKTOP,
+          steps: r,
+          currentStepId: "step2",
+          children: /* @__PURE__ */ n("div", { children: "Step Content" })
         }
       )
-    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("3/3");
-  }), c("render description text", () => {
+    ), e(t.getByTestId("stepper-item-check-for-step1")).toBeInTheDocument();
+    const d = t.getByTestId("stepper-connector-before-step3");
+    e(d.className).not.toContain("stepperItemConnectorCompleted"), e(t.queryByTestId("stepper-item-step2")).not.toBeInTheDocument(), e(t.queryByTestId("stepper-item-step4")).not.toBeInTheDocument(), C(), p(
+      /* @__PURE__ */ n(
+        s,
+        {
+          stepperStyle: i.DESKTOP,
+          steps: r,
+          currentStepId: "step4",
+          children: /* @__PURE__ */ n("div", { children: "Step Content" })
+        }
+      )
+    );
+    const l = t.getByTestId("stepper-connector-before-step3");
+    e(l.className).toContain("stepperItemConnectorCompleted"), e(
+      t.queryByTestId("stepper-item-check-for-step3")
+    ).not.toBeInTheDocument();
+  }), c("shows mobile view breakpoint is triggered (<600px)", () => {
+    a.spyOn(y, "useBreakpoints").mockReturnValue({
+      isMobile: !0,
+      isDesktop: !1,
+      isDesktopNavbar: !1,
+      isTablet: !1
+    }), p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByTestId("desktop-stepper-header")).toBeInTheDocument(), e(t.getByTestId("stepper-item-step2")).toBeInTheDocument(), e(t.queryByTestId("stepper-item-step1")).not.toBeInTheDocument(), e(t.queryByTestId("stepper-item-step3")).not.toBeInTheDocument(), a.spyOn(y, "useBreakpoints").mockRestore();
+  });
+});
+B("Stepper Type DOTS Tests", () => {
+  let o;
+  h(() => {
+    o = m();
+  }), c("renders dots and text", () => {
     p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 0, children: r })
-    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByTestId("dots-stepper-header")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator-step1")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator-step2")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator-step3")).toBeInTheDocument(), e(t.getByText(
       "Description 1"
-    ), l(), p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 1, children: r })
-    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      /* STEP_1 */
+    )).toBeInTheDocument(), e(t.queryByText(
       "Description 2"
-    ), l(), p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 2, children: r })
-    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
-      "Description 2.5"
-    ), l(), p(
-      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 3, children: r })
-    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      /* STEP_2 */
+    )).not.toBeInTheDocument(), e(t.queryByText(
       "Description 3"
+      /* STEP_3 */
+    )).not.toBeInTheDocument(), e(t.getByText("Step Content")).toBeInTheDocument(), e(t.getByText("Next")).toBeInTheDocument();
+  }), c("show active style for completed, active and incompleted steps", () => {
+    p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     );
+    const r = t.getByTestId("stepper-indicator-step1"), d = t.getByTestId("stepper-indicator-step2"), l = t.getByTestId("stepper-indicator-step3");
+    e(r.className).toContain("stepperIndicatorItemActive"), e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).not.toContain("stepperIndicatorItemActive");
+  }), c("show optional style", () => {
+    p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    );
+    const r = t.getByTestId("stepper-indicator-step3");
+    e(r.className).toContain("stepperIndicatorItemOptional");
+  }), c("advancing step adjusts styles accordingly", () => {
+    const { rerender: r } = p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), d = t.getByTestId("stepper-indicator-step1"), l = t.getByTestId("stepper-indicator-step2"), u = t.getByTestId("stepper-indicator-step3");
+    e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).not.toContain("stepperIndicatorItemActive"), e(u.className).not.toContain("stepperIndicatorItemActive"), r(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).toContain("stepperIndicatorItemActive"), e(u.className).not.toContain("stepperIndicatorItemActive"), r(
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).toContain("stepperIndicatorItemActive"), e(u.className).toContain("stepperIndicatorItemActive");
+  });
+});
+B("Stepper Type SMALL Tests", () => {
+  let o;
+  h(() => {
+    o = m();
+  }), c("renders step number, total steps and text", () => {
+    p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByTestId("description-stepper-header")).toBeInTheDocument(), e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("1/3"), e(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      "Description 1"
+      /* STEP_1 */
+    ), e(t.getByText("Step Content")).toBeInTheDocument(), e(t.getByText("Next")).toBeInTheDocument();
+  }), c("advancing step adjusts progress accordingly", () => {
+    const { rerender: r } = p(
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    );
+    e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("1/3"), r(
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("2/3"), r(
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("3/3");
+  }), c("overwriting total steps accordingly", () => {
+    p(
+      /* @__PURE__ */ n(
+        s,
+        {
+          stepperStyle: i.SMALL,
+          steps: o,
+          currentStepId: "step3",
+          overwriteTotalSteps: 5,
+          children: /* @__PURE__ */ n("div", { children: "Step Content" })
+        }
+      )
+    ), e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("3/5");
   });
 });