@availity/mui-stepper 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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
+
+* `mui-button` updated to version `0.1.1`
+* `mui-icon` updated to version `0.1.1`
+
+### Bug Fixes
+
+* **mui-icon:** deprecate duplicate checkcircleicon ([5f744a9](https://github.com/Availity/element/commit/5f744a90014b7507511f012075cceeded54001e5))
+
 ## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.0...@availity/mui-stepper@0.1.1) (2024-08-05)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-stepper",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Availity MUI Stepper Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,11 +32,12 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-icon": "^0.10.0"
+    "@availity/mui-icon": "^0.10.1"
   },
   "devDependencies": {
-    "@availity/mui-button": "^0.6.9",
+    "@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/StepIcon.tsx

@@ -1,5 +1,5 @@
 import MuiStepIcon, { StepIconProps as MuiStepIconProps } from '@mui/material/StepIcon';
-import { CheckCircleIcon, WarningCircleIcon } from '@availity/mui-icon';
+import { SuccessCircleIcon, WarningCircleIcon } from '@availity/mui-icon';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 
 type Tag = ((props: SvgIconProps) => JSX.Element) | null;
@@ -17,7 +17,7 @@ export const StepIcon = ({ error, completed, warning, ...rest }: StepIconProps):
   let tag: Tag = null;
   if (error) tag = WarningCircleIcon;
   if (warning) tag = (props: SvgIconProps) => <WarningCircleIcon color="warning" {...props} />;
-  if (completed) tag = CheckCircleIcon;
+  if (completed) tag = SuccessCircleIcon;
 
   return <MuiStepIcon {...rest} error={error} completed={completed} as={tag} />;
 };

package/src/lib/Stepper.stories.tsx

@@ -4,6 +4,7 @@ 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';
@@ -81,63 +82,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}>
+            {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 +156,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>
   ),
 };