@availity/mui-stepper 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

package/package.json

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

package/src/lib/Stepper.stories.tsx

@@ -1,5 +1,5 @@
 // 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';
@@ -23,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> = {
@@ -30,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;
     };
@@ -83,7 +109,7 @@ export const _Stepper: StoryObj<typeof Stepper> = {
     return (
       <Box maxWidth="75vw" marginX="auto">
         <Paper sx={{ padding: '2rem' }}>
-          <Stepper activeStep={activeStep} {...args}>
+          <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 } = {};