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 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="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
52const positionVariants: Required<StepperProps>['position'][] = ['start', 'center', 'end'];
53
54export const Centered = () => {
55    const [activeStep, setActiveStep] = useState(0);
56    const [position, setPosition] = useState<Required<StepperProps>['position']>('start');
57
58    const steps = ['Item 1', 'Item 2.', 'Item 3', 'Item 4'];
59
60    return (
61        <>
62            <div className="mb-8">
63                <strong className="block mb-4">Position</strong>
64                <RadioGroup
65                    name="selected-variant"
66                    onChange={setPosition}
67                    value={position}
68                    options={positionVariants.map((variant) => ({ value: variant, label: variant }))}
69                />
70            </div>
71
72            <Stepper position={position} activeStep={activeStep}>
73                {steps.map((step) => (
74                    <Step key={step}>{step}</Step>
75                ))}
76            </Stepper>
77
78            <div className="mt-11 flex justify-end">
79                <Button
80                    className="mr-2"
81                    color="norm"
82                    disabled={activeStep === 0}
83                    onClick={() => setActiveStep((step) => step - 1)}
84                >
85                    Previous
86                </Button>
87                <Button
88                    color="norm"
89                    disabled={activeStep === steps.length - 1}
90                    onClick={() => setActiveStep((step) => step + 1)}
91                >
92                    Next
93                </Button>
94            </div>
95        </>
96    );
97};