/
Stepper.stories.tsx
64 lines (57 loc) · 1.7 KB
/
Stepper.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import * as React from "react";
import { action } from "@storybook/addon-actions";
import { text, number, boolean } from "@storybook/addon-knobs";
import BaggageStepper from ".";
export default {
title: "BaggageStepper",
};
export const Default = () => {
const titleIncrement = text("Title increment", "Add a passenger");
const titleDecrement = text("Title decrement", "Remove a passenger");
return (
<BaggageStepper
titleIncrement={titleIncrement}
titleDecrement={titleDecrement}
onChange={action("onChange")}
/>
);
};
Default.story = {
parameters: {
info: "Some description about this type of BaggageStepper in general.",
},
};
export const Playground = () => {
const min = number("minValue", 1);
const max = number("maxValue", 10);
const step = number("step", 2);
const defaultValue = number("defaultValue", 4);
const name = text("Name", "name");
const disabled = boolean("disabled", false);
const selected = boolean("selected", false);
const dataTest = text("dataTest", "test");
const titleIncrement = text("Title increment", "Add a passenger");
const titleDecrement = text("Title decrement", "Remove a passenger");
return (
<BaggageStepper
defaultValue={defaultValue}
step={step}
name={name}
maxValue={max}
minValue={min}
selected={selected}
disabled={disabled}
dataTest={dataTest}
titleIncrement={titleIncrement}
titleDecrement={titleDecrement}
onChange={action("onChange")}
onFocus={action("onFocus")}
onBlur={action("onBlur")}
/>
);
};
Playground.story = {
parameters: {
info: "Here you can try BaggageStepper component with additional functionality.",
},
};