Skip to content

Commit cafdb63

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor Conditionals stories
1 parent 00901c7 commit cafdb63

File tree

2 files changed

+69
-48
lines changed

2 files changed

+69
-48
lines changed

‎site/src/components/Conditionals/ChooseOne.stories.tsx

+53-36
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,63 @@
1-
import { Story } from "@storybook/react";
1+
import { Meta, StoryObj } from "@storybook/react";
22
import { ChooseOne, Cond } from "./ChooseOne";
33

4-
export default {
4+
const meta: Meta<typeof ChooseOne> = {
55
title: "components/Conditionals/ChooseOne",
66
component: ChooseOne,
7-
subcomponents: { Cond },
87
};
98

10-
export const FirstIsTrue: Story = () => (
11-
<ChooseOne>
12-
<Cond condition>The first one shows.</Cond>
13-
<Cond condition={false}>The second one does not show.</Cond>
14-
<Cond>The default does not show.</Cond>
15-
</ChooseOne>
16-
);
9+
export default meta;
10+
type Story = StoryObj<typeof ChooseOne>;
1711

18-
export const SecondIsTrue: Story = () => (
19-
<ChooseOne>
20-
<Cond condition={false}>The first one does not show.</Cond>
21-
<Cond condition>The second one shows.</Cond>
22-
<Cond>The default does not show.</Cond>
23-
</ChooseOne>
24-
);
12+
export const FirstIsTrue: Story = {
13+
args: {
14+
children: (
15+
<>
16+
<Cond condition>The first one shows.</Cond>
17+
<Cond condition={false}>The second one does not show.</Cond>
18+
<Cond>The default does not show.</Cond>
19+
</>
20+
),
21+
},
22+
};
2523

26-
export const AllAreTrue: Story = () => (
27-
<ChooseOne>
28-
<Cond condition>Only the first one shows.</Cond>
29-
<Cond condition>The second one does not show.</Cond>
30-
<Cond>The default does not show.</Cond>
31-
</ChooseOne>
32-
);
24+
export const SecondIsTrue: Story = {
25+
args: {
26+
children: (
27+
<>
28+
<Cond condition={false}>The first one does not show.</Cond>
29+
<Cond condition>The second one shows.</Cond>
30+
<Cond>The default does not show.</Cond>
31+
</>
32+
),
33+
},
34+
};
35+
export const AllAreTrue: Story = {
36+
args: {
37+
children: (
38+
<>
39+
<Cond condition>Only the first one shows.</Cond>
40+
<Cond condition>The second one does not show.</Cond>
41+
<Cond>The default does not show.</Cond>
42+
</>
43+
),
44+
},
45+
};
3346

34-
export const NoneAreTrue: Story = () => (
35-
<ChooseOne>
36-
<Cond condition={false}>The first one does not show.</Cond>
37-
<Cond condition={false}>The second one does not show.</Cond>
38-
<Cond>The default shows.</Cond>
39-
</ChooseOne>
40-
);
47+
export const NoneAreTrue: Story = {
48+
args: {
49+
children: (
50+
<>
51+
<Cond condition={false}>The first one does not show.</Cond>
52+
<Cond condition={false}>The second one does not show.</Cond>
53+
<Cond>The default shows.</Cond>
54+
</>
55+
),
56+
},
57+
};
4158

42-
export const OneCond: Story = () => (
43-
<ChooseOne>
44-
<Cond>An only child renders.</Cond>
45-
</ChooseOne>
46-
);
59+
export const OneCond: Story = {
60+
args: {
61+
children: <Cond>An only child renders.</Cond>,
62+
},
63+
};

‎site/src/components/Conditionals/Maybe.stories.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import { Story } from "@storybook/react";
2-
import { Maybe, MaybeProps } from "./Maybe";
1+
import { StoryObj, Meta } from "@storybook/react";
2+
import { Maybe } from "./Maybe";
33

4-
export default {
4+
const meta: Meta<typeof Maybe> = {
55
title: "components/Conditionals/Maybe",
66
component: Maybe,
7+
args: {
8+
children: "Now you see me",
9+
},
710
};
811

9-
const Template: Story<MaybeProps> = (args: MaybeProps) => (
10-
<Maybe {...args}>Now you see me</Maybe>
11-
);
12+
export default meta;
13+
type Story = StoryObj<typeof Maybe>;
1214

13-
export const ConditionIsTrue = Template.bind({});
14-
ConditionIsTrue.args = {
15-
condition: true,
15+
export const ConditionIsTrue: Story = {
16+
args: {
17+
condition: true,
18+
},
1619
};
1720

18-
export const ConditionIsFalse = Template.bind({});
19-
ConditionIsFalse.args = {
20-
condition: false,
21+
export const ConditionIsFalse: Story = {
22+
args: {
23+
condition: false,
24+
},
2125
};

0 commit comments

Comments
 (0)