@availity/mui-stepper 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.4](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.3...@availity/mui-stepper@0.1.4) (2024-09-09)
+
+
+### Bug Fixes
+
+* resolve accessibility issues in stories ([7e22419](https://github.com/Availity/element/commit/7e2241913f8ad10f467493b605fc0234e6eab5e2))
+
+## [0.1.3](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.2...@availity/mui-stepper@0.1.3) (2024-08-08)
+
+
+### Bug Fixes
+
+* **mui-stepper:** add background to stories ([627fd5d](https://github.com/Availity/element/commit/627fd5da3f571ca2d95ffdc6c2e270878929cc2d))
+
 ## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.1...@availity/mui-stepper@0.1.2) (2024-08-08)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-stepper",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Availity MUI Stepper Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@availity/mui-button": "^0.6.10",
     "@availity/mui-layout": "^0.1.6",
+    "@availity/mui-paper": "^0.1.9",
     "@availity/mui-typography": "^0.2.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",

package/src/lib/Stepper.stories.tsx

@@ -1,9 +1,10 @@
 // Each exported component in the package should have its own stories file
-import { useState } from 'react';
+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, StepperProps } from './Stepper';
 import { Step } from './Step';
@@ -22,6 +23,30 @@ const meta: Meta<typeof Stepper> = {
 
 export default meta;
 
+// 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 = ['Select', 'Another Step', 'Form Data', 'Create a new one'];
 
 export const _Stepper: StoryObj<typeof Stepper> = {
@@ -29,6 +54,8 @@ export const _Stepper: StoryObj<typeof Stepper> = {
     const [activeStep, setActiveStep] = useState(0);
     const [skipped, setSkipped] = useState(new Set<number>());
 
+    const { width } = useWindowDimensions();
+
     const isStepOptional = (step: number) => {
       return step > 1;
     };
@@ -81,63 +108,65 @@ export const _Stepper: StoryObj<typeof Stepper> = {
 
     return (
       <Box maxWidth="75vw" marginX="auto">
-        <Stepper activeStep={activeStep} {...args}>
-          {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}>
-                <StepLabel {...labelProps}>{label}</StepLabel>
-              </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
+        <Paper sx={{ padding: '2rem' }}>
+          <Stepper activeStep={activeStep} {...args} orientation={width < 600 ? 'vertical' : args.orientation}>
+            {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}>
+                  <StepLabel {...labelProps}>{label}</StepLabel>
+                </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>
-              )}
-              <Button color={activeStep === steps.length - 1 ? 'primary' : 'secondary'} onClick={handleNext}>
-                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-              </Button>
-            </Box>
-          </>
-        )}
+                <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>
     );
   },
@@ -153,10 +182,14 @@ export const _StepLabel: StoryObj<typeof StepLabel> = {
 
 export const _Step: StoryObj<typeof Step> = {
   render: (args) => (
-    <Stepper>
-      <Step {...args}>
-        <StepLabel>Label</StepLabel>
-      </Step>
-    </Stepper>
+    <Box>
+      <Paper sx={{ padding: '2rem' }}>
+        <Stepper>
+          <Step {...args}>
+            <StepLabel>Label</StepLabel>
+          </Step>
+        </Stepper>
+      </Paper>
+    </Box>
   ),
 };