forked from Cambly/syntax
-
Notifications
You must be signed in to change notification settings - Fork 0
/
SelectList.stories.tsx
98 lines (90 loc) · 2.29 KB
/
SelectList.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { type StoryObj, type Meta } from "@storybook/react";
import SelectList from "./SelectList";
import React, { useState, type ReactElement } from "react";
import SelectOption from "./SelectOption";
export default {
title: "Components/SelectList",
component: SelectList,
parameters: {
design: {
name: "Figma",
type: "figma",
url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007-4102&t=7xGt6S9b6zUUiflR-0",
},
},
args: {
size: "md",
"data-testid": "",
label: "Label",
placeholderText: "Placeholder",
errorText: "",
helperText: "Helper text",
disabled: false,
id: "",
selectedValue: "",
},
argTypes: {
size: {
options: ["sm", "md", "lg"],
control: { type: "radio" },
},
disabled: {
control: "boolean",
},
onChange: { action: "clicked" },
},
tags: ["autodocs"],
} as Meta<typeof SelectList>;
const options = [
{ label: "Option 1", value: "opt1" },
{ label: "Option 2", value: "opt2" },
{ label: "Option 3", value: "opt3" },
];
const Options = () => (
<>
{options.map(({ label, value }) => (
<SelectOption key={value} value={value} label={label} />
))}
</>
);
export const Default: StoryObj<typeof SelectList> = {
args: {
children: <Options />,
},
};
export const Error: StoryObj<typeof SelectList> = {
args: {
children: <Options />,
errorText: "Select dropdown error message",
helperText: "Helper text",
label: "Label",
placeholderText: "Placeholder",
},
};
const SelectListInteractive = ({
placeholderText = "",
}: {
placeholderText?: string;
}): ReactElement => {
const [selectionValue, setSelectionValue] = useState("");
const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setSelectionValue(e.target.value);
};
return (
<SelectList
label="Label"
helperText="Helper text"
selectedValue={selectionValue}
placeholderText={placeholderText}
onChange={onChange}
>
<Options />
</SelectList>
);
};
export const Interactive: StoryObj<typeof SelectList> = {
render: () => <SelectListInteractive />,
};
export const InteractiveWithPlaceholder: StoryObj<typeof SelectList> = {
render: () => <SelectListInteractive placeholderText="Placeholder" />,
};