1import { useState } from 'react';
2
3import { Button } from '@proton/atoms/Button/Button';
4import { RadioGroup } from '@proton/components';
5
6import Step from './Step';
7import type { StepperProps } from './Stepper';
8import Stepper, { StepperPositionEnum } from './Stepper';
9import mdx from './Stepper.mdx';
10
11export default {
12    component: Stepper,
13    subcomponents: { Step },
14    title: 'components/Stepper',
15    parameters: { docs: { page: mdx } },
16};
17
18export const Basic = () => {
19    const [activeStep, setActiveStep] = useState(0);
20
21    const steps = ['Item 1', 'Item 2 with super long label. I should wrap.', 'Item 3', 'Item 4'];
22
23    return (
24        <>
25            <Stepper position={StepperPositionEnum.Center} activeStep={activeStep}>
26                {steps.map((step) => (
27                    <Step key={step}>{step}</Step>
28                ))}
29            </Stepper>
30
31            <div className="mt-11 flex justify-end">
32                <Button
33                    className="mr-2"
34                    color="norm"
35                    disabled={activeStep === 0}
36                    onClick={() => setActiveStep((step) => step - 1)}
37                >
38                    Previous
39                </Button>
40                <Button
41                    color="norm"
42                    disabled={activeStep === steps.length - 1}
43                    onClick={() => setActiveStep((step) => step + 1)}
44                >
45                    Next
46                </Button>
47            </div>
48        </>
49    );
50};
51
52export const Centered = () => {
53    const [activeStep, setActiveStep] = useState(0);
54    const [position, setPosition] = useState<Required<StepperProps>['position']>(StepperPositionEnum.Start);
55
56    const steps = ['Item 1', 'Item 2.', 'Item 3', 'Item 4'];
57
58    return (
59        <>
60            <div className="mb-8">
61                <strong className="block mb-4">Position</strong>
62                <RadioGroup
63                    name="selected-variant"
64                    onChange={setPosition}
65                    value={position}
66                    options={Object.values(StepperPositionEnum).map((variant) => ({ value: variant, label: variant }))}
67                />
68            </div>
69
70            <Stepper position={position} activeStep={activeStep}>
71                {steps.map((step) => (
72                    <Step key={step}>{step}</Step>
73                ))}
74            </Stepper>
75
76            <div className="mt-11 flex justify-end">
77                <Button
78                    className="mr-2"
79                    color="norm"
80                    disabled={activeStep === 0}
81                    onClick={() => setActiveStep((step) => step - 1)}
82                >
83                    Previous
84                </Button>
85                <Button
86                    color="norm"
87                    disabled={activeStep === steps.length - 1}
88                    onClick={() => setActiveStep((step) => step + 1)}
89                >
90                    Next
91                </Button>
92            </div>
93        </>
94    );
95};