Skip to content

Commit db2f460

Browse files
MMFaneMMFane
authored
Merge pull request #392 from lifeomic/csf3-s2
Update second batch of S- Components to Storybook CSF3
2 parents f2a8668 + 08b9326 commit db2f460

File tree

3 files changed

+163
-134
lines changed

3 files changed

+163
-134
lines changed

‎src/components/Select/Select.stories.tsx

Lines changed: 74 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import React from 'react';
2-
import { ComponentStory, ComponentMeta } from '@storybook/react';
2+
import { StoryObj, StoryFn, Meta } from '@storybook/react';
33

44
import { Select } from './Select';
55
import { SelectOption } from './SelectOption';
66
import { ChevronRight, Edit } from '@lifeomic/chromicons';
77
import { GroupHeading } from './GroupHeading';
88

9-
export default {
9+
const meta: Meta<typeof Select> = {
1010
title: 'Form Components/Select',
1111
component: Select,
12-
argTypes: {},
13-
subcomponents: { SelectOption, GroupHeading },
14-
} as ComponentMeta<typeof Select>;
12+
args: {
13+
label: 'Select',
14+
},
15+
};
16+
export default meta;
17+
type Story = StoryObj<typeof Select>;
1518

16-
const Template: ComponentStory<typeof Select> = (args) => {
19+
const Template: StoryFn<typeof Select> = (args) => {
1720
const [selected, setSelected] = React.useState<string>('');
1821

1922
return (
@@ -52,82 +55,91 @@ const Template: ComponentStory<typeof Select> = (args) => {
5255
);
5356
};
5457

55-
export const Default = Template.bind({});
56-
Default.args = {
57-
label: 'Select',
58+
export const Default: Story = {
59+
render: Template,
5860
};
5961

60-
export const Placeholder = Template.bind({});
61-
Placeholder.args = {
62-
label: 'Select',
63-
placeholder: 'Placeholder',
62+
export const Placeholder: Story = {
63+
render: Template,
64+
args: {
65+
placeholder: 'Placeholder',
66+
},
6467
};
6568

66-
export const SecondaryLabel = Template.bind({});
67-
SecondaryLabel.args = {
68-
label: 'Select',
69-
secondaryLabel: 'Secondary Label',
69+
export const SecondaryLabel: Story = {
70+
render: Template,
71+
args: {
72+
secondaryLabel: 'Secondary Label',
73+
},
7074
};
7175

72-
export const HelpMessage = Template.bind({});
73-
HelpMessage.args = {
74-
label: 'Select',
75-
helpMessage: 'Help Message',
76+
export const HelpMessage: Story = {
77+
render: Template,
78+
args: {
79+
helpMessage: 'Help Message',
80+
},
7681
};
7782

78-
export const Error = Template.bind({});
79-
Error.args = {
80-
label: 'Select',
81-
errorMessage: 'Error Message',
82-
hasError: true,
83+
export const Error: Story = {
84+
render: Template,
85+
args: {
86+
errorMessage: 'Error Message',
87+
hasError: true,
88+
},
8389
};
8490

85-
export const Disabled = Template.bind({});
86-
Disabled.args = {
87-
label: 'Select',
88-
disabled: true,
91+
export const Disabled: Story = {
92+
render: Template,
93+
args: {
94+
disabled: true,
95+
},
8996
};
9097

91-
export const FullWidth = Template.bind({});
92-
FullWidth.args = {
93-
label: 'Select',
94-
fullWidth: true,
98+
export const FullWidth: Story = {
99+
render: Template,
100+
args: {
101+
fullWidth: true,
102+
},
95103
};
96104

97-
export const Tooltip = Template.bind({});
98-
Tooltip.args = {
99-
label: 'Select',
100-
icon: Edit,
101-
tooltipMessage: 'Tooltip Message',
105+
export const Tooltip: Story = {
106+
render: Template,
107+
args: {
108+
icon: Edit,
109+
tooltipMessage: 'Tooltip Message',
110+
},
102111
};
103112

104-
export const SecondaryAction = Template.bind({});
105-
SecondaryAction.args = {
106-
label: 'Select',
107-
secondaryAction: {
108-
args: 'https://lifeomic.com/',
109-
action: (args: string) => {
110-
alert(`You can do something with arg "${args}"`);
113+
export const SecondaryAction: Story = {
114+
render: Template,
115+
args: {
116+
secondaryAction: {
117+
args: 'https://lifeomic.com/',
118+
action: (args: string) => {
119+
alert(`You can do something with arg "${args}"`);
120+
},
121+
label: 'Do something',
122+
icon: ChevronRight,
111123
},
112-
label: 'Do something',
113-
icon: ChevronRight,
114124
},
115125
};
116126

117-
export const InverseDark = Template.bind({});
118-
InverseDark.parameters = {
119-
backgrounds: { default: 'dark' },
120-
};
121-
InverseDark.args = {
122-
label: 'Select',
123-
color: 'inverse',
127+
export const InverseDark: Story = {
128+
render: Template,
129+
parameters: {
130+
backgrounds: { default: 'dark' },
131+
},
132+
args: {
133+
color: 'inverse',
134+
},
124135
};
125136

126-
export const InverseBlue = Template.bind({});
127-
InverseBlue.parameters = {
128-
backgrounds: { default: 'blue' },
129-
};
130-
InverseBlue.args = {
131-
label: 'Select',
132-
color: 'inverse',
137+
export const InverseBlue: Story = {
138+
render: Template,
139+
parameters: {
140+
backgrounds: { default: 'blue' },
141+
},
142+
args: {
143+
color: 'inverse',
144+
},
133145
};

‎src/components/Skeleton/Skeleton.stories.tsx

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from 'react';
2-
import { ComponentStory, ComponentMeta } from '@storybook/react';
2+
import { StoryObj, Meta } from '@storybook/react';
33

44
import { Skeleton } from './Skeleton';
55

6-
export default {
7-
title: 'Components/Skeleton',
6+
const meta: Meta<typeof Skeleton> = {
87
component: Skeleton,
9-
argTypes: {},
8+
args: {
9+
height: 30,
10+
width: 300,
11+
},
1012
decorators: [
1113
(story) => (
1214
<div
@@ -21,14 +23,8 @@ export default {
2123
</div>
2224
),
2325
],
24-
} as ComponentMeta<typeof Skeleton>;
25-
26-
const Template: ComponentStory<typeof Skeleton> = (args) => (
27-
<Skeleton {...args} />
28-
);
29-
30-
export const Default = Template.bind({});
31-
Default.args = {
32-
height: 100,
33-
width: 100,
3426
};
27+
export default meta;
28+
type Story = StoryObj<typeof Skeleton>;
29+
30+
export const Default: Story = {};

‎src/components/SlideOver/SlideOver.stories.tsx

Lines changed: 79 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { ComponentStory, ComponentMeta } from '@storybook/react';
2+
import { StoryObj, StoryFn, Meta } from '@storybook/react';
33

44
import { SlideOver } from './SlideOver';
55
import { Header } from './Header';
@@ -10,72 +10,93 @@ import { Actions } from './Actions';
1010
import { Button } from '../Button';
1111
import { Settings } from '@lifeomic/chromicons';
1212

13-
export default {
14-
title: 'Components/SlideOver',
13+
const meta: Meta<typeof SlideOver> = {
1514
component: SlideOver,
16-
argTypes: {},
17-
subcomponents: { Header, Body, Actions },
18-
} as ComponentMeta<typeof SlideOver>;
15+
decorators: [
16+
(story: Function) => <div style={{ height: '200px' }}>{story()}</div>,
17+
],
18+
};
19+
export default meta;
20+
type Story = StoryObj<typeof SlideOver>;
1921

20-
const Template: ComponentStory<typeof SlideOver> = (args) => (
21-
<SlideOver {...args} />
22-
);
22+
const Template: StoryFn<typeof SlideOver> = (args) => {
23+
const [isOpen, setIsOpen] = React.useState(false);
2324

24-
export const Default = Template.bind({});
25-
Default.args = {
26-
children: (
25+
return (
2726
<>
28-
<Header title="Panel Title" onClose={() => {}} />
29-
<Body>
30-
<Text>Content</Text>
31-
</Body>
27+
<Button
28+
onClick={() => {
29+
setIsOpen(!isOpen);
30+
}}
31+
>
32+
Toggle SlideOver
33+
</Button>
34+
<SlideOver {...args} isOpen={isOpen}>
35+
{args.children}
36+
</SlideOver>
3237
</>
33-
),
34-
isOpen: true,
38+
);
3539
};
3640

37-
export const HeaderWithIcon = Template.bind({});
38-
HeaderWithIcon.args = {
39-
children: (
40-
<>
41-
<Header title="Panel Title" titleIcon={Settings} onClose={() => {}} />
42-
<Body>
43-
<Text>Content</Text>
44-
</Body>
45-
</>
46-
),
47-
isOpen: true,
41+
export const Default: Story = {
42+
render: Template,
43+
args: {
44+
children: (
45+
<>
46+
<Header title="Panel Title" onClose={() => {}} />
47+
<Body>
48+
<Text>Content</Text>
49+
</Body>
50+
</>
51+
),
52+
},
4853
};
4954

50-
export const CustomHeader = Template.bind({});
51-
CustomHeader.args = {
52-
children: (
53-
<>
54-
<Header onClose={() => {}}>
55-
<Avatar name="Chroma" />
56-
<Text>Custom Header</Text>
57-
</Header>
58-
<Body>
59-
<Text>Content</Text>
60-
</Body>
61-
</>
62-
),
63-
isOpen: true,
55+
export const HeaderWithIcon: Story = {
56+
render: Template,
57+
args: {
58+
children: (
59+
<>
60+
<Header title="Panel Title" titleIcon={Settings} onClose={() => {}} />
61+
<Body>
62+
<Text>Content</Text>
63+
</Body>
64+
</>
65+
),
66+
},
6467
};
6568

66-
export const PanelActions = Template.bind({});
67-
PanelActions.args = {
68-
children: (
69-
<>
70-
<Header title="Panel Title" onClose={() => {}} />
71-
<Body>
72-
<Text>Content</Text>
73-
</Body>
74-
<Actions justify="flex-end">
75-
<Button variant="text">Cancel</Button>
76-
<Button>Save</Button>
77-
</Actions>
78-
</>
79-
),
80-
isOpen: true,
69+
export const CustomHeader: Story = {
70+
render: Template,
71+
args: {
72+
children: (
73+
<>
74+
<Header onClose={() => {}}>
75+
<Avatar name="Chroma" />
76+
<Text>Custom Header</Text>
77+
</Header>
78+
<Body>
79+
<Text>Content</Text>
80+
</Body>
81+
</>
82+
),
83+
},
84+
};
85+
86+
export const PanelActions: Story = {
87+
render: Template,
88+
args: {
89+
children: (
90+
<>
91+
<Header title="Panel Title" onClose={() => {}} />
92+
<Body>
93+
<Text>Content</Text>
94+
</Body>
95+
<Actions justify="flex-end">
96+
<Button variant="text">Cancel</Button>
97+
<Button>Save</Button>
98+
</Actions>
99+
</>
100+
),
101+
},
81102
};

0 commit comments

Comments
 (0)