Skip to content

Commit cd13901

Browse files
beaesguerrabeaesguerra
committed
[dropdown-width] Add scenario stories for multi and single select and action menu
1 parent 80729b2 commit cd13901

File tree

3 files changed

+299
-0
lines changed

3 files changed

+299
-0
lines changed

‎__docs__/wonder-blocks-dropdown/action-menu-testing-snapshots.stories.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import * as React from "react";
2+
import type {Meta, StoryObj} from "@storybook/react-vite";
3+
import {ActionItem, ActionMenu} from "@khanacademy/wonder-blocks-dropdown";
4+
import {ScenariosLayout} from "../components/scenarios-layout";
5+
import {themeModes} from "../../.storybook/modes";
6+
import {
7+
longText,
8+
longTextWithNoWordBreak,
9+
} from "../components/text-for-testing";
10+
import {sizing} from "@khanacademy/wonder-blocks-tokens";
11+
12+
export default {
13+
title: "Packages / Dropdown / Testing / Snapshots / ActionMenu",
14+
parameters: {
15+
chromatic: {
16+
modes: themeModes,
17+
},
18+
},
19+
tags: ["!autodocs"],
20+
} satisfies Meta;
21+
22+
type Story = StoryObj<typeof ActionMenu>;
23+
24+
const ControlledActionMenu = (
25+
props: React.ComponentProps<typeof ActionMenu>,
26+
) => {
27+
const [opened, setOpened] = React.useState(false);
28+
React.useEffect(() => {
29+
if (props.opened !== undefined) {
30+
setOpened(props.opened);
31+
}
32+
}, [props.opened]);
33+
return <ActionMenu {...props} opened={opened} onToggle={setOpened} />;
34+
};
35+
36+
export const Scenarios: Story = {
37+
render: () => {
38+
const scenarios = [
39+
{
40+
name: "Long menuText",
41+
props: {
42+
menuText: longText,
43+
children: [
44+
<ActionItem label="item 1" key="1" />,
45+
<ActionItem label="item 2" key="2" />,
46+
<ActionItem label="item 3" key="3" />,
47+
],
48+
},
49+
},
50+
{
51+
name: "Long menuText with no word break",
52+
props: {
53+
menuText: longTextWithNoWordBreak,
54+
children: [
55+
<ActionItem label="item 1" key="1" />,
56+
<ActionItem label="item 2" key="2" />,
57+
<ActionItem label="item 3" key="3" />,
58+
],
59+
},
60+
},
61+
{
62+
name: "Long action item label",
63+
props: {
64+
menuText: "Action Menu",
65+
children: [
66+
<ActionItem label={longText} key="1" />,
67+
<ActionItem label={longTextWithNoWordBreak} key="2" />,
68+
],
69+
opened: true,
70+
style: {paddingBlockEnd: sizing.size_480},
71+
},
72+
},
73+
];
74+
return (
75+
<ScenariosLayout scenarios={scenarios}>
76+
{(props, name) => (
77+
<ControlledActionMenu {...props} aria-label={name} />
78+
)}
79+
</ScenariosLayout>
80+
);
81+
},
82+
globals: {
83+
viewport: {
84+
value: "small",
85+
},
86+
},
87+
};

‎__docs__/wonder-blocks-dropdown/multi-select-testing-snapshots.stories.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import type {Meta, StoryObj} from "@storybook/react-vite";
44
import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
55
import {themeModes} from "../../.storybook/modes";
66
import {defaultPseudoStates, StateSheet} from "../components/state-sheet";
7+
import {
8+
longText,
9+
longTextWithNoWordBreak,
10+
} from "../components/text-for-testing";
11+
import {ScenariosLayout} from "../components/scenarios-layout";
12+
import {PropsFor} from "@khanacademy/wonder-blocks-core";
13+
import {sizing} from "@khanacademy/wonder-blocks-tokens";
714

815
/**
916
* The following stories are used to generate the pseudo states for the
@@ -82,3 +89,93 @@ export const StateSheetStory: Story = {
8289
pseudo: defaultPseudoStates,
8390
},
8491
};
92+
93+
const ControlledMultiSelect = (props: PropsFor<typeof MultiSelect>) => {
94+
const [selectedValues, setSelectedValues] = React.useState(
95+
props.selectedValues,
96+
);
97+
return (
98+
<MultiSelect
99+
{...props}
100+
selectedValues={selectedValues}
101+
onChange={setSelectedValues}
102+
/>
103+
);
104+
};
105+
106+
export const Scenarios: Story = {
107+
render: () => {
108+
const scenarios = [
109+
{
110+
name: "Long option item label",
111+
props: {
112+
children: [
113+
<OptionItem label={longText} value="1" key="1" />,
114+
],
115+
opened: true,
116+
style: {paddingBlockEnd: sizing.size_560},
117+
},
118+
},
119+
{
120+
name: "Long option item label with no word break",
121+
props: {
122+
children: [
123+
<OptionItem
124+
label={longTextWithNoWordBreak}
125+
value="1"
126+
key="1"
127+
/>,
128+
],
129+
opened: true,
130+
style: {marginBlockEnd: sizing.size_560},
131+
},
132+
},
133+
{
134+
name: "Long selected option label",
135+
props: {
136+
children: [
137+
<OptionItem label={longText} value="1" key="1" />,
138+
<OptionItem label={longText} value="2" key="2" />,
139+
<OptionItem label={longText} value="3" key="3" />,
140+
],
141+
selectedValues: ["1"],
142+
},
143+
},
144+
{
145+
name: "Long selected option label with no word break",
146+
props: {
147+
children: [
148+
<OptionItem
149+
label={longTextWithNoWordBreak}
150+
value="1"
151+
key="1"
152+
/>,
153+
<OptionItem
154+
label={longTextWithNoWordBreak}
155+
value="2"
156+
key="2"
157+
/>,
158+
<OptionItem
159+
label={longTextWithNoWordBreak}
160+
value="3"
161+
key="3"
162+
/>,
163+
],
164+
selectedValues: ["1"],
165+
},
166+
},
167+
];
168+
return (
169+
<ScenariosLayout scenarios={scenarios}>
170+
{(props, name) => (
171+
<ControlledMultiSelect {...props} aria-label={name} />
172+
)}
173+
</ScenariosLayout>
174+
);
175+
},
176+
globals: {
177+
viewport: {
178+
value: "small",
179+
},
180+
},
181+
};

‎__docs__/wonder-blocks-dropdown/single-select-testing-snapshots.stories.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import type {Meta, StoryObj} from "@storybook/react-vite";
44
import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
55
import {themeModes} from "../../.storybook/modes";
66
import {defaultPseudoStates, StateSheet} from "../components/state-sheet";
7+
import {ScenariosLayout} from "../components/scenarios-layout";
8+
import {
9+
longText,
10+
longTextWithNoWordBreak,
11+
} from "../components/text-for-testing";
12+
import {PropsFor} from "@khanacademy/wonder-blocks-core";
13+
import {sizing} from "@khanacademy/wonder-blocks-tokens";
714

815
/**
916
* The following stories are used to generate the pseudo states for the
@@ -75,3 +82,111 @@ export const StateSheetStory: Story = {
7582
pseudo: defaultPseudoStates,
7683
},
7784
};
85+
86+
const children = [
87+
<OptionItem label="item 1" value="1" key="1" />,
88+
<OptionItem label="item 2" value="2" key="2" />,
89+
<OptionItem label="item 3" value="3" key="3" />,
90+
];
91+
92+
const ControlledSingleSelect = (props: PropsFor<typeof SingleSelect>) => {
93+
const [value, setValue] = React.useState(props.selectedValue);
94+
95+
return (
96+
<SingleSelect {...props} selectedValue={value} onChange={setValue}>
97+
{props.children}
98+
</SingleSelect>
99+
);
100+
};
101+
export const Scenarios: Story = {
102+
render: () => {
103+
const scenarios = [
104+
{
105+
name: "Long option item label",
106+
props: {
107+
placeholder: "Placeholder",
108+
children: [
109+
<OptionItem label={longText} value="1" key="1" />,
110+
],
111+
opened: true,
112+
style: {paddingBlockEnd: sizing.size_560},
113+
},
114+
},
115+
{
116+
name: "Long option item label with no word break",
117+
props: {
118+
placeholder: "Placeholder",
119+
children: [
120+
<OptionItem
121+
label={longTextWithNoWordBreak}
122+
value="1"
123+
key="1"
124+
/>,
125+
],
126+
opened: true,
127+
style: {paddingBlockEnd: sizing.size_560},
128+
},
129+
},
130+
{
131+
name: "Long placeholder",
132+
props: {
133+
placeholder: longText,
134+
children,
135+
},
136+
},
137+
{
138+
name: "Long placeholder with no word break",
139+
props: {
140+
placeholder: longTextWithNoWordBreak,
141+
children,
142+
},
143+
},
144+
{
145+
name: "Long selected option label",
146+
props: {
147+
placeholder: "Placeholder",
148+
children: [
149+
<OptionItem label={longText} value="1" key="1" />,
150+
<OptionItem label={longText} value="2" key="2" />,
151+
<OptionItem label={longText} value="3" key="3" />,
152+
],
153+
selectedValue: "1",
154+
},
155+
},
156+
{
157+
name: "Long selected option label with no word break",
158+
props: {
159+
placeholder: "Placeholder",
160+
children: [
161+
<OptionItem
162+
label={longTextWithNoWordBreak}
163+
value="1"
164+
key="1"
165+
/>,
166+
<OptionItem
167+
label={longTextWithNoWordBreak}
168+
value="2"
169+
key="2"
170+
/>,
171+
<OptionItem
172+
label={longTextWithNoWordBreak}
173+
value="3"
174+
key="3"
175+
/>,
176+
],
177+
selectedValue: "1",
178+
},
179+
},
180+
];
181+
return (
182+
<ScenariosLayout scenarios={scenarios}>
183+
{(props) => <ControlledSingleSelect {...props} key={name} />}
184+
</ScenariosLayout>
185+
);
186+
},
187+
globals: {
188+
viewport: {
189+
value: "small",
190+
},
191+
},
192+
};

0 commit comments

Comments
 (0)