@availity/mui-stepper 0.1.4 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.4...@availity/mui-stepper@0.2.0) (2024-10-04)
+
+
+### Features
+
+* **mui-stepper:** legacy styles and docs ([9bad3a1](https://github.com/Availity/element/commit/9bad3a13300857e3d13e5b21bc11e20c492c69e7))
+
 ## [0.1.4](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.3...@availity/mui-stepper@0.1.4) (2024-09-09)
 
 

package/dist/index.d.mts

@@ -1,6 +1,44 @@
+import { StepProps as StepProps$1 } from '@mui/material/Step';
+import { StepButtonProps as StepButtonProps$1 } from '@mui/material/StepButton';
+import { StepConnectorProps as StepConnectorProps$1 } from '@mui/material/StepConnector';
+import { StepContentProps as StepContentProps$1 } from '@mui/material/StepContent';
+import { StepIconProps as StepIconProps$1 } from '@mui/material/StepIcon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { StepLabelProps as StepLabelProps$1 } from '@mui/material/StepLabel';
 import { StepperProps as StepperProps$1 } from '@mui/material/Stepper';
 
+type StepProps = StepProps$1;
+declare const Step: ({ children, ...rest }: StepProps) => JSX.Element;
+
+type StepButtonProps = StepButtonProps$1;
+declare const StepButton: ({ children, ...rest }: StepButtonProps) => JSX.Element;
+
+type StepConnectorProps = StepConnectorProps$1;
+declare const StepConnector: (props: StepConnectorProps) => JSX.Element;
+
+type StepContentProps = StepContentProps$1;
+declare const StepContent: ({ children, ...rest }: StepContentProps) => JSX.Element;
+
+type Tag = ((props: SvgIconProps) => JSX.Element) | null;
+declare module '@mui/material/StepIcon' {
+    interface StepIconProps {
+        as?: Tag;
+        warning?: boolean;
+    }
+}
+type StepIconProps = {
+    /** If `true`, the step will have a warning icon. */
+    warning?: boolean;
+} & StepIconProps$1;
+declare const StepIcon: ({ error, completed, warning, ...rest }: StepIconProps) => JSX.Element;
+
+type StepLabelProps = Pick<StepIconProps, 'warning'> & StepLabelProps$1;
+declare const StepLabel: {
+    ({ children, error, warning, ...rest }: StepLabelProps): JSX.Element;
+    muiName: string;
+};
+
 type StepperProps = Omit<StepperProps$1, 'alternativeLabel' | 'elevation'>;
 declare const Stepper: ({ children, orientation, ...rest }: StepperProps) => JSX.Element;
 
-export { Stepper, type StepperProps };
+export { Step, StepButton, type StepButtonProps, StepConnector, type StepConnectorProps, StepContent, type StepContentProps, StepIcon, type StepIconProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps };

package/dist/index.d.ts

@@ -1,6 +1,44 @@
+import { StepProps as StepProps$1 } from '@mui/material/Step';
+import { StepButtonProps as StepButtonProps$1 } from '@mui/material/StepButton';
+import { StepConnectorProps as StepConnectorProps$1 } from '@mui/material/StepConnector';
+import { StepContentProps as StepContentProps$1 } from '@mui/material/StepContent';
+import { StepIconProps as StepIconProps$1 } from '@mui/material/StepIcon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { StepLabelProps as StepLabelProps$1 } from '@mui/material/StepLabel';
 import { StepperProps as StepperProps$1 } from '@mui/material/Stepper';
 
+type StepProps = StepProps$1;
+declare const Step: ({ children, ...rest }: StepProps) => JSX.Element;
+
+type StepButtonProps = StepButtonProps$1;
+declare const StepButton: ({ children, ...rest }: StepButtonProps) => JSX.Element;
+
+type StepConnectorProps = StepConnectorProps$1;
+declare const StepConnector: (props: StepConnectorProps) => JSX.Element;
+
+type StepContentProps = StepContentProps$1;
+declare const StepContent: ({ children, ...rest }: StepContentProps) => JSX.Element;
+
+type Tag = ((props: SvgIconProps) => JSX.Element) | null;
+declare module '@mui/material/StepIcon' {
+    interface StepIconProps {
+        as?: Tag;
+        warning?: boolean;
+    }
+}
+type StepIconProps = {
+    /** If `true`, the step will have a warning icon. */
+    warning?: boolean;
+} & StepIconProps$1;
+declare const StepIcon: ({ error, completed, warning, ...rest }: StepIconProps) => JSX.Element;
+
+type StepLabelProps = Pick<StepIconProps, 'warning'> & StepLabelProps$1;
+declare const StepLabel: {
+    ({ children, error, warning, ...rest }: StepLabelProps): JSX.Element;
+    muiName: string;
+};
+
 type StepperProps = Omit<StepperProps$1, 'alternativeLabel' | 'elevation'>;
 declare const Stepper: ({ children, orientation, ...rest }: StepperProps) => JSX.Element;
 
-export { Stepper, type StepperProps };
+export { Step, StepButton, type StepButtonProps, StepConnector, type StepConnectorProps, StepContent, type StepContentProps, StepIcon, type StepIconProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps };

package/dist/index.js

@@ -59,19 +59,87 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Step: () => Step,
+  StepButton: () => StepButton,
+  StepConnector: () => StepConnector,
+  StepContent: () => StepContent,
+  StepIcon: () => StepIcon,
+  StepLabel: () => StepLabel,
   Stepper: () => Stepper
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/lib/Step.tsx
+var import_Step = __toESM(require("@mui/material/Step"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Step = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Step.default, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/StepButton.tsx
+var import_StepButton = __toESM(require("@mui/material/StepButton"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StepButton = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_StepButton.default, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/StepConnector.tsx
+var import_StepConnector = __toESM(require("@mui/material/StepConnector"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StepConnector = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_StepConnector.default, __spreadValues({}, props));
+};
+
+// src/lib/StepContent.tsx
+var import_StepContent = __toESM(require("@mui/material/StepContent"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var StepContent = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_StepContent.default, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/StepIcon.tsx
+var import_StepIcon = __toESM(require("@mui/material/StepIcon"));
+var import_mui_icon = require("@availity/mui-icon");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var StepIcon = (_a) => {
+  var _b = _a, { error, completed, warning } = _b, rest = __objRest(_b, ["error", "completed", "warning"]);
+  let tag = null;
+  if (error)
+    tag = import_mui_icon.WarningCircleIcon;
+  if (warning)
+    tag = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon.WarningCircleIcon, __spreadValues({ color: "warning" }, props));
+  if (completed)
+    tag = import_mui_icon.SuccessCircleIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_StepIcon.default, __spreadProps(__spreadValues({}, rest), { error, completed, as: tag }));
+};
+
+// src/lib/StepLabel.tsx
+var import_StepLabel = __toESM(require("@mui/material/StepLabel"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var StepLabel = (_a) => {
+  var _b = _a, { children, error, warning } = _b, rest = __objRest(_b, ["children", "error", "warning"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_StepLabel.default, __spreadProps(__spreadValues({ StepIconProps: { error, warning }, StepIconComponent: StepIcon, error }, rest), { children }));
+};
+StepLabel.muiName = import_StepLabel.default.muiName;
+
 // src/lib/Stepper.tsx
 var import_Stepper = __toESM(require("@mui/material/Stepper"));
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Stepper = (_a) => {
   var _b = _a, { children, orientation } = _b, rest = __objRest(_b, ["children", "orientation"]);
   const alternativeLabel = orientation !== "vertical";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Stepper.default, __spreadProps(__spreadValues({}, rest), { orientation, alternativeLabel, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Stepper.default, __spreadProps(__spreadValues({}, rest), { orientation, alternativeLabel, children }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Step,
+  StepButton,
+  StepConnector,
+  StepContent,
+  StepIcon,
+  StepLabel,
   Stepper
 });

package/dist/index.mjs

@@ -30,14 +30,76 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
+// src/lib/Step.tsx
+import MuiStep from "@mui/material/Step";
+import { jsx } from "react/jsx-runtime";
+var Step = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(MuiStep, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/StepButton.tsx
+import MuiStepButton from "@mui/material/StepButton";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StepButton = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx2(MuiStepButton, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/StepConnector.tsx
+import MuiStepConnector from "@mui/material/StepConnector";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var StepConnector = (props) => {
+  return /* @__PURE__ */ jsx3(MuiStepConnector, __spreadValues({}, props));
+};
+
+// src/lib/StepContent.tsx
+import MuiStepContent from "@mui/material/StepContent";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StepContent = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx4(MuiStepContent, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/StepIcon.tsx
+import MuiStepIcon from "@mui/material/StepIcon";
+import { SuccessCircleIcon, WarningCircleIcon } from "@availity/mui-icon";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StepIcon = (_a) => {
+  var _b = _a, { error, completed, warning } = _b, rest = __objRest(_b, ["error", "completed", "warning"]);
+  let tag = null;
+  if (error)
+    tag = WarningCircleIcon;
+  if (warning)
+    tag = (props) => /* @__PURE__ */ jsx5(WarningCircleIcon, __spreadValues({ color: "warning" }, props));
+  if (completed)
+    tag = SuccessCircleIcon;
+  return /* @__PURE__ */ jsx5(MuiStepIcon, __spreadProps(__spreadValues({}, rest), { error, completed, as: tag }));
+};
+
+// src/lib/StepLabel.tsx
+import MuiStepLabel from "@mui/material/StepLabel";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var StepLabel = (_a) => {
+  var _b = _a, { children, error, warning } = _b, rest = __objRest(_b, ["children", "error", "warning"]);
+  return /* @__PURE__ */ jsx6(MuiStepLabel, __spreadProps(__spreadValues({ StepIconProps: { error, warning }, StepIconComponent: StepIcon, error }, rest), { children }));
+};
+StepLabel.muiName = MuiStepLabel.muiName;
+
 // src/lib/Stepper.tsx
 import MuiStepper from "@mui/material/Stepper";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Stepper = (_a) => {
   var _b = _a, { children, orientation } = _b, rest = __objRest(_b, ["children", "orientation"]);
   const alternativeLabel = orientation !== "vertical";
-  return /* @__PURE__ */ jsx(MuiStepper, __spreadProps(__spreadValues({}, rest), { orientation, alternativeLabel, children }));
+  return /* @__PURE__ */ jsx7(MuiStepper, __spreadProps(__spreadValues({}, rest), { orientation, alternativeLabel, children }));
 };
 export {
+  Step,
+  StepButton,
+  StepConnector,
+  StepContent,
+  StepIcon,
+  StepLabel,
   Stepper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-stepper",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Availity MUI Stepper Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/index.ts

@@ -1 +1,7 @@
+export * from './lib/Step';
+export * from './lib/StepButton';
+export * from './lib/StepConnector';
+export * from './lib/StepContent';
+export * from './lib/StepIcon';
+export * from './lib/StepLabel';
 export * from './lib/Stepper';

package/src/lib/Step.stories.tsx

@@ -0,0 +1,188 @@
+// Each exported component in the package should have its own stories file
+import { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@availity/mui-button';
+import { Typography } from '@availity/mui-typography';
+import { Box } from '@availity/mui-layout';
+import { Paper } from '@availity/mui-paper';
+
+import { Stepper, Step, StepLabel, StepButton } from '..';
+
+const meta: Meta<typeof Step> = {
+  title: 'Components/Stepper/Step',
+  component: Step,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Step: StoryObj<typeof Step> = {
+  render: (args) => (
+    <Box>
+      <Paper sx={{ padding: '2rem' }}>
+        <Stepper>
+          <Step {...args}/>
+        </Stepper>
+      </Paper>
+    </Box>
+  ),
+  args: {
+    children: 'Children'
+  },
+};
+
+// credit: https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}
+
+const steps = ['First', 'Second', 'Third', 'Final'];
+
+export const _Stepper: StoryObj<typeof Step> = {
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [skipped, setSkipped] = useState(new Set<number>());
+
+    const { width } = useWindowDimensions();
+
+    const isStepOptional = (step: number) => {
+      return step > 1;
+    };
+
+    const isStepSkipped = (step: number) => {
+      return skipped.has(step);
+    };
+
+    const isStepError = (step: number) => {
+      return step === 2 && activeStep < 2;
+    };
+
+    const isStepWarning = (step: number) => {
+      return step === 3 && activeStep < 3;
+    };
+
+    const handleNext = () => {
+      let newSkipped = skipped;
+      if (isStepSkipped(activeStep)) {
+        newSkipped = new Set(newSkipped.values());
+        newSkipped.delete(activeStep);
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped(newSkipped);
+    };
+
+    const handleBack = () => {
+      setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    const handleStep = (step: number) => () => {
+      setActiveStep(step);
+    };
+
+    const handleSkip = () => {
+      if (!isStepOptional(activeStep)) {
+        // You probably want to guard against something like this,
+        // it should never occur unless someone's actively trying to break something.
+        throw new Error("You can't skip a step that isn't optional.");
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped((prevSkipped) => {
+        const newSkipped = new Set(prevSkipped.values());
+        newSkipped.add(activeStep);
+        return newSkipped;
+      });
+    };
+
+    const handleReset = () => {
+      setActiveStep(0);
+    };
+
+    return (
+      <Box maxWidth="75vw" marginX="auto">
+        <Paper sx={{ padding: '2rem' }}>
+          <Stepper activeStep={activeStep} orientation={width < 600 ? 'vertical' : 'horizontal'}>
+            {steps.map((label, index) => {
+              const stepProps: { completed?: boolean } = {};
+              const labelProps: { optional?: React.ReactNode; error?: boolean; warning?: boolean } = {};
+
+              if (isStepOptional(index)) {
+                labelProps.optional = <Typography variant="caption">Optional</Typography>;
+              }
+
+              if (isStepSkipped(index)) {
+                stepProps.completed = false;
+              }
+
+              if (isStepError(index)) {
+                labelProps.error = true;
+              }
+
+              if (isStepWarning(index)) {
+                labelProps.warning = true;
+              }
+
+              return (
+                <Step key={label} {...stepProps} {...args}>
+                  <StepButton color="inherit" onClick={handleStep(index)}>
+                    <StepLabel {...labelProps}>{label}</StepLabel>
+                  </StepButton>
+                </Step>
+              );
+            })}
+          </Stepper>
+          {activeStep === steps.length ? (
+            <>
+              <Typography sx={{ mt: 2, mb: 1 }}>All steps completed - you&apos;re finished</Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                <Box sx={{ flex: '1 1 auto' }} />
+                <Button color="tertiary" onClick={handleReset}>
+                  Reset
+                </Button>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                <Button color="secondary" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+                  Back
+                </Button>
+                <Box sx={{ flex: '1 1 auto' }} />
+                {isStepOptional(activeStep) && (
+                  <Button color="secondary" onClick={handleSkip} sx={{ mr: 1 }}>
+                    Skip
+                  </Button>
+                )}
+                <Button color={activeStep === steps.length - 1 ? 'primary' : 'secondary'} onClick={handleNext}>
+                  {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+                </Button>
+              </Box>
+            </>
+          )}
+        </Paper>
+      </Box>
+    );
+  },
+  args: {},
+};

package/src/lib/StepButton.stories.tsx

@@ -0,0 +1,187 @@
+// Each exported component in the package should have its own stories file
+import { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@availity/mui-button';
+import { Typography } from '@availity/mui-typography';
+import { Box } from '@availity/mui-layout';
+import { Paper } from '@availity/mui-paper';
+
+import { Stepper, Step, StepLabel, StepButton } from '..';
+
+const meta: Meta<typeof StepButton> = {
+  title: 'Components/Stepper/StepButton',
+  component: StepButton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _StepButton: StoryObj<typeof StepButton> = {
+  render: (args) => (
+    <Box>
+      <Paper sx={{ padding: '2rem' }}>
+        <Stepper>
+          <Step>
+            <StepButton {...args}/>
+          </Step>
+        </Stepper>
+      </Paper>
+    </Box>
+  ),
+};
+
+// credit: https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}
+
+const steps = ['First', 'Second', 'Third', 'Final'];
+
+export const _Stepper: StoryObj<typeof StepButton> = {
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [skipped, setSkipped] = useState(new Set<number>());
+
+    const { width } = useWindowDimensions();
+
+    const isStepOptional = (step: number) => {
+      return step > 1;
+    };
+
+    const isStepSkipped = (step: number) => {
+      return skipped.has(step);
+    };
+
+    const isStepError = (step: number) => {
+      return step === 2 && activeStep < 2;
+    };
+
+    const isStepWarning = (step: number) => {
+      return step === 3 && activeStep < 3;
+    };
+
+    const handleNext = () => {
+      let newSkipped = skipped;
+      if (isStepSkipped(activeStep)) {
+        newSkipped = new Set(newSkipped.values());
+        newSkipped.delete(activeStep);
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped(newSkipped);
+    };
+
+    const handleBack = () => {
+      setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    const handleStep = (step: number) => () => {
+      setActiveStep(step);
+    };
+
+    const handleSkip = () => {
+      if (!isStepOptional(activeStep)) {
+        // You probably want to guard against something like this,
+        // it should never occur unless someone's actively trying to break something.
+        throw new Error("You can't skip a step that isn't optional.");
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped((prevSkipped) => {
+        const newSkipped = new Set(prevSkipped.values());
+        newSkipped.add(activeStep);
+        return newSkipped;
+      });
+    };
+
+    const handleReset = () => {
+      setActiveStep(0);
+    };
+
+    return (
+      <Box maxWidth="75vw" marginX="auto">
+        <Paper sx={{ padding: '2rem' }}>
+          <Stepper activeStep={activeStep} orientation={width < 600 ? 'vertical' : 'horizontal'}>
+            {steps.map((label, index) => {
+              const stepProps: { completed?: boolean } = {};
+              const labelProps: { optional?: React.ReactNode; error?: boolean; warning?: boolean } = {};
+
+              if (isStepOptional(index)) {
+                labelProps.optional = <Typography variant="caption">Optional</Typography>;
+              }
+
+              if (isStepSkipped(index)) {
+                stepProps.completed = false;
+              }
+
+              if (isStepError(index)) {
+                labelProps.error = true;
+              }
+
+              if (isStepWarning(index)) {
+                labelProps.warning = true;
+              }
+
+              return (
+                <Step key={label} {...stepProps}>
+                  <StepButton color="inherit" onClick={handleStep(index)} {...args}>
+                    <StepLabel {...labelProps}>{label}</StepLabel>
+                  </StepButton>
+                </Step>
+              );
+            })}
+          </Stepper>
+          {activeStep === steps.length ? (
+            <>
+              <Typography sx={{ mt: 2, mb: 1 }}>All steps completed - you&apos;re finished</Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                <Box sx={{ flex: '1 1 auto' }} />
+                <Button color="tertiary" onClick={handleReset}>
+                  Reset
+                </Button>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                <Button color="secondary" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+                  Back
+                </Button>
+                <Box sx={{ flex: '1 1 auto' }} />
+                {isStepOptional(activeStep) && (
+                  <Button color="secondary" onClick={handleSkip} sx={{ mr: 1 }}>
+                    Skip
+                  </Button>
+                )}
+                <Button color={activeStep === steps.length - 1 ? 'primary' : 'secondary'} onClick={handleNext}>
+                  {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+                </Button>
+              </Box>
+            </>
+          )}
+        </Paper>
+      </Box>
+    );
+  },
+  args: {},
+};

package/src/lib/StepIcon.tsx

@@ -11,7 +11,10 @@ declare module '@mui/material/StepIcon' {
   }
 }
 
-export type StepIconProps = { warning?: boolean } & MuiStepIconProps;
+export type StepIconProps = {
+  /** If `true`, the step will have a warning icon. */
+  warning?: boolean
+} & MuiStepIconProps;
 
 export const StepIcon = ({ error, completed, warning, ...rest }: StepIconProps): JSX.Element => {
   let tag: Tag = null;

package/src/lib/StepLabel.stories.tsx

@@ -0,0 +1,187 @@
+// Each exported component in the package should have its own stories file
+import { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@availity/mui-button';
+import { Typography } from '@availity/mui-typography';
+import { Box } from '@availity/mui-layout';
+import { Paper } from '@availity/mui-paper';
+
+import { Stepper, Step, StepLabel, StepButton } from '..';
+
+const meta: Meta<typeof StepLabel> = {
+  title: 'Components/Stepper/StepLabel',
+  component: StepLabel,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Step: StoryObj<typeof StepLabel> = {
+  render: (args) => (
+    <Box>
+      <Paper sx={{ padding: '2rem' }}>
+        <Stepper>
+          <Step>
+            <StepLabel {...args}>Label</StepLabel>
+          </Step>
+        </Stepper>
+      </Paper>
+    </Box>
+  ),
+};
+
+// credit: https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}
+
+const steps = ['First', 'Second', 'Third', 'Final'];
+
+export const _Stepper: StoryObj<typeof StepLabel> = {
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [skipped, setSkipped] = useState(new Set<number>());
+
+    const { width } = useWindowDimensions();
+
+    const isStepOptional = (step: number) => {
+      return step > 1;
+    };
+
+    const isStepSkipped = (step: number) => {
+      return skipped.has(step);
+    };
+
+    const isStepError = (step: number) => {
+      return step === 2 && activeStep < 2;
+    };
+
+    const isStepWarning = (step: number) => {
+      return step === 3 && activeStep < 3;
+    };
+
+    const handleNext = () => {
+      let newSkipped = skipped;
+      if (isStepSkipped(activeStep)) {
+        newSkipped = new Set(newSkipped.values());
+        newSkipped.delete(activeStep);
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped(newSkipped);
+    };
+
+    const handleBack = () => {
+      setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    const handleStep = (step: number) => () => {
+      setActiveStep(step);
+    };
+
+    const handleSkip = () => {
+      if (!isStepOptional(activeStep)) {
+        // You probably want to guard against something like this,
+        // it should never occur unless someone's actively trying to break something.
+        throw new Error("You can't skip a step that isn't optional.");
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped((prevSkipped) => {
+        const newSkipped = new Set(prevSkipped.values());
+        newSkipped.add(activeStep);
+        return newSkipped;
+      });
+    };
+
+    const handleReset = () => {
+      setActiveStep(0);
+    };
+
+    return (
+      <Box maxWidth="75vw" marginX="auto">
+        <Paper sx={{ padding: '2rem' }}>
+          <Stepper activeStep={activeStep} orientation={width < 600 ? 'vertical' : 'horizontal'}>
+            {steps.map((label, index) => {
+              const stepProps: { completed?: boolean } = {};
+              const labelProps: { optional?: React.ReactNode; error?: boolean; warning?: boolean } = {};
+
+              if (isStepOptional(index)) {
+                labelProps.optional = <Typography variant="caption">Optional</Typography>;
+              }
+
+              if (isStepSkipped(index)) {
+                stepProps.completed = false;
+              }
+
+              if (isStepError(index)) {
+                labelProps.error = true;
+              }
+
+              if (isStepWarning(index)) {
+                labelProps.warning = true;
+              }
+
+              return (
+                <Step key={label} {...stepProps}>
+                  <StepButton color="inherit" onClick={handleStep(index)}>
+                    <StepLabel {...labelProps} {...args}>{label}</StepLabel>
+                  </StepButton>
+                </Step>
+              );
+            })}
+          </Stepper>
+          {activeStep === steps.length ? (
+            <>
+              <Typography sx={{ mt: 2, mb: 1 }}>All steps completed - you&apos;re finished</Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                <Box sx={{ flex: '1 1 auto' }} />
+                <Button color="tertiary" onClick={handleReset}>
+                  Reset
+                </Button>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+                <Button color="secondary" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+                  Back
+                </Button>
+                <Box sx={{ flex: '1 1 auto' }} />
+                {isStepOptional(activeStep) && (
+                  <Button color="secondary" onClick={handleSkip} sx={{ mr: 1 }}>
+                    Skip
+                  </Button>
+                )}
+                <Button color={activeStep === steps.length - 1 ? 'primary' : 'secondary'} onClick={handleNext}>
+                  {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+                </Button>
+              </Box>
+            </>
+          )}
+        </Paper>
+      </Box>
+    );
+  },
+  args: {},
+};

package/src/lib/StepLabel.tsx

@@ -1,15 +1,17 @@
 import MuiStepLabel, { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';
 
-import { StepIcon } from './StepIcon';
+import { StepIcon, StepIconProps } from './StepIcon';
 
-export type StepLabelProps = {
-  warning?: boolean;
-} & MuiStepLabelProps;
+export type StepLabelProps = Pick<StepIconProps, 'warning'> & MuiStepLabelProps;
 
-export const StepLabel = ({ children, error, warning, ...rest }: StepLabelProps): JSX.Element => {
+const StepLabel = ({ children, error, warning, ...rest }: StepLabelProps): JSX.Element => {
   return (
     <MuiStepLabel StepIconProps={{ error, warning }} StepIconComponent={StepIcon} error={error} {...rest}>
       {children}
     </MuiStepLabel>
   );
 };
+
+StepLabel.muiName = MuiStepLabel.muiName;
+
+export { StepLabel };

package/src/lib/Stepper.stories.tsx

@@ -6,9 +6,7 @@ import { Typography } from '@availity/mui-typography';
 import { Box } from '@availity/mui-layout';
 import { Paper } from '@availity/mui-paper';
 
-import { Stepper, StepperProps } from './Stepper';
-import { Step } from './Step';
-import { StepLabel } from './StepLabel';
+import { Stepper, StepperProps, Step, StepLabel, StepButton } from '..';
 
 const meta: Meta<typeof Stepper> = {
   title: 'Components/Stepper/Stepper',
@@ -72,6 +70,10 @@ export const _Stepper: StoryObj<typeof Stepper> = {
       return step === 3 && activeStep < 3;
     };
 
+    const handleStep = (step: number) => () => {
+      setActiveStep(step);
+    };
+
     const handleNext = () => {
       let newSkipped = skipped;
       if (isStepSkipped(activeStep)) {
@@ -132,7 +134,9 @@ export const _Stepper: StoryObj<typeof Stepper> = {
 
               return (
                 <Step key={label} {...stepProps}>
-                  <StepLabel {...labelProps}>{label}</StepLabel>
+                  <StepButton color="inherit" onClick={handleStep(index)}>
+                    <StepLabel {...labelProps}>{label}</StepLabel>
+                  </StepButton>
                 </Step>
               );
             })}