@availity/mui-stepper 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/package.json +2 -1
- package/src/lib/Stepper.stories.tsx +68 -61
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.1.3](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.2...@availity/mui-stepper@0.1.3) (2024-08-08)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **mui-stepper:** add background to stories ([627fd5d](https://github.com/Availity/element/commit/627fd5da3f571ca2d95ffdc6c2e270878929cc2d))
|
|
11
|
+
|
|
5
12
|
## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-stepper@0.1.1...@availity/mui-stepper@0.1.2) (2024-08-08)
|
|
6
13
|
|
|
7
14
|
### Dependency Updates
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-stepper",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Availity MUI Stepper Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@availity/mui-button": "^0.6.10",
|
|
39
39
|
"@availity/mui-layout": "^0.1.6",
|
|
40
|
+
"@availity/mui-paper": "^0.1.9",
|
|
40
41
|
"@availity/mui-typography": "^0.2.0",
|
|
41
42
|
"@mui/material": "^5.15.15",
|
|
42
43
|
"react": "18.2.0",
|
|
@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
|
|
|
4
4
|
import { Button } from '@availity/mui-button';
|
|
5
5
|
import { Typography } from '@availity/mui-typography';
|
|
6
6
|
import { Box } from '@availity/mui-layout';
|
|
7
|
+
import { Paper } from '@availity/mui-paper';
|
|
7
8
|
|
|
8
9
|
import { Stepper, StepperProps } from './Stepper';
|
|
9
10
|
import { Step } from './Step';
|
|
@@ -81,63 +82,65 @@ export const _Stepper: StoryObj<typeof Stepper> = {
|
|
|
81
82
|
|
|
82
83
|
return (
|
|
83
84
|
<Box maxWidth="75vw" marginX="auto">
|
|
84
|
-
<
|
|
85
|
-
{
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<Box sx={{
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<Box sx={{ flex: '1 1 auto' }} />
|
|
130
|
-
{isStepOptional(activeStep) && (
|
|
131
|
-
<Button color="secondary" onClick={handleSkip} sx={{ mr: 1 }}>
|
|
132
|
-
Skip
|
|
85
|
+
<Paper sx={{ padding: '2rem' }}>
|
|
86
|
+
<Stepper activeStep={activeStep} {...args}>
|
|
87
|
+
{steps.map((label, index) => {
|
|
88
|
+
const stepProps: { completed?: boolean } = {};
|
|
89
|
+
const labelProps: { optional?: React.ReactNode; error?: boolean; warning?: boolean } = {};
|
|
90
|
+
|
|
91
|
+
if (isStepOptional(index)) {
|
|
92
|
+
labelProps.optional = <Typography variant="caption">Optional</Typography>;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
if (isStepSkipped(index)) {
|
|
96
|
+
stepProps.completed = false;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (isStepError(index)) {
|
|
100
|
+
labelProps.error = true;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
if (isStepWarning(index)) {
|
|
104
|
+
labelProps.warning = true;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
return (
|
|
108
|
+
<Step key={label} {...stepProps}>
|
|
109
|
+
<StepLabel {...labelProps}>{label}</StepLabel>
|
|
110
|
+
</Step>
|
|
111
|
+
);
|
|
112
|
+
})}
|
|
113
|
+
</Stepper>
|
|
114
|
+
{activeStep === steps.length ? (
|
|
115
|
+
<>
|
|
116
|
+
<Typography sx={{ mt: 2, mb: 1 }}>All steps completed - you're finished</Typography>
|
|
117
|
+
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
|
118
|
+
<Box sx={{ flex: '1 1 auto' }} />
|
|
119
|
+
<Button color="tertiary" onClick={handleReset}>
|
|
120
|
+
Reset
|
|
121
|
+
</Button>
|
|
122
|
+
</Box>
|
|
123
|
+
</>
|
|
124
|
+
) : (
|
|
125
|
+
<>
|
|
126
|
+
<Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
|
|
127
|
+
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
|
128
|
+
<Button color="secondary" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
|
|
129
|
+
Back
|
|
133
130
|
</Button>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
131
|
+
<Box sx={{ flex: '1 1 auto' }} />
|
|
132
|
+
{isStepOptional(activeStep) && (
|
|
133
|
+
<Button color="secondary" onClick={handleSkip} sx={{ mr: 1 }}>
|
|
134
|
+
Skip
|
|
135
|
+
</Button>
|
|
136
|
+
)}
|
|
137
|
+
<Button color={activeStep === steps.length - 1 ? 'primary' : 'secondary'} onClick={handleNext}>
|
|
138
|
+
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
|
|
139
|
+
</Button>
|
|
140
|
+
</Box>
|
|
141
|
+
</>
|
|
142
|
+
)}
|
|
143
|
+
</Paper>
|
|
141
144
|
</Box>
|
|
142
145
|
);
|
|
143
146
|
},
|
|
@@ -153,10 +156,14 @@ export const _StepLabel: StoryObj<typeof StepLabel> = {
|
|
|
153
156
|
|
|
154
157
|
export const _Step: StoryObj<typeof Step> = {
|
|
155
158
|
render: (args) => (
|
|
156
|
-
<
|
|
157
|
-
<
|
|
158
|
-
<
|
|
159
|
-
|
|
160
|
-
|
|
159
|
+
<Box>
|
|
160
|
+
<Paper sx={{ padding: '2rem' }}>
|
|
161
|
+
<Stepper>
|
|
162
|
+
<Step {...args}>
|
|
163
|
+
<StepLabel>Label</StepLabel>
|
|
164
|
+
</Step>
|
|
165
|
+
</Stepper>
|
|
166
|
+
</Paper>
|
|
167
|
+
</Box>
|
|
161
168
|
),
|
|
162
169
|
};
|