init project

docs/data/joy/components/stepper/SizesStepper.js

@@ -0,0 +1,52 @@
+import Stepper from '@mui/joy/Stepper';
+import Step from '@mui/joy/Step';
+import StepIndicator from '@mui/joy/StepIndicator';
+import Stack from '@mui/joy/Stack';
+
+export default function SizesStepper() {
+  return (
+    <Stack spacing={2} sx={{ width: '100%' }}>
+      <Stepper size="sm">
+        <Step
+          indicator={
+            <StepIndicator variant="solid" color="neutral">
+              1
+            </StepIndicator>
+          }
+        >
+          Order placed
+        </Step>
+        <Step indicator={<StepIndicator>2</StepIndicator>}>In review</Step>
+        <Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
+      </Stepper>
+
+      <Stepper sx={{ width: '100%' }}>
+        <Step
+          indicator={
+            <StepIndicator variant="solid" color="neutral">
+              1
+            </StepIndicator>
+          }
+        >
+          Order placed
+        </Step>
+        <Step indicator={<StepIndicator>2</StepIndicator>}>In review</Step>
+        <Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
+      </Stepper>
+
+      <Stepper size="lg" sx={{ width: '100%' }}>
+        <Step
+          indicator={
+            <StepIndicator variant="solid" color="neutral">
+              1
+            </StepIndicator>
+          }
+        >
+          Order placed
+        </Step>
+        <Step indicator={<StepIndicator>2</StepIndicator>}>In review</Step>
+        <Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
+      </Stepper>
+    </Stack>
+  );
+}