From a19cbd37fad555a961d038bea861d72f5a0611e2 Mon Sep 17 00:00:00 2001
From: Michael Rabbitt <284825+mrabbitt@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:15:15 -0700
Subject: [PATCH] Added multi-component demo storybook to test Mui Stepper

---
 src/stories/MuiStepper.stories.tsx | 48 ++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/stories/MuiStepper.stories.tsx

diff --git a/src/stories/MuiStepper.stories.tsx b/src/stories/MuiStepper.stories.tsx
new file mode 100644
index 00000000..be01cc02
--- /dev/null
+++ b/src/stories/MuiStepper.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Box from "@mui/material/Box";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import TripOriginRoundedIcon from "@mui/icons-material/TripOriginRounded";
+
+const meta: Meta<typeof Stepper> = {
+  component: Stepper,
+};
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+
+const steps = ["Completed", "Active", "Disabled"];
+
+export const DemoMuiStepper: Story = {
+  args: {
+    activeStep: 0,
+  },
+  /* See here about using "render" to test multiple components:
+      https://storybook.js.org/docs/writing-stories#stories-for-two-or-more-components */
+  render: (args) => (
+    /* Mostly copied from the demo in settings.tsx, except using "activeStep" to match Stepper's props so it can be
+      exposed as in "args" to Storybook */
+    <Box sx={{ width: "100%" }}>
+      <Stepper {...args} alternativeLabel connector={null}>
+        {steps.map((label, index) => (
+          <Step key={label}>
+            {index !== steps.length && (
+              <StepLabel
+                StepIconComponent={
+                  index < (args.activeStep ?? 0)
+                    ? CheckCircleIcon
+                    : TripOriginRoundedIcon
+                }
+              >
+                {label}
+              </StepLabel>
+            )}
+          </Step>
+        ))}
+      </Stepper>
+    </Box>
+  ),
+};