Skip to content

Commit a4a1b04

Browse files
stomitastomita
committed
change to storiesof => csf
1 parent 31e7f67 commit a4a1b04

26 files changed

+3527
-3232
lines changed

‎stories/BadgeStories.tsx‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
11
import React from 'react';
2-
import { storiesOf } from '@storybook/react';
32
import { action } from '@storybook/addon-actions';
43
import { Badge } from '../src/scripts';
54

6-
storiesOf('Badge', module)
7-
.add('Default', () => <Badge onClick={action('click')}>Badge Label</Badge>, {
5+
export default {
6+
title: 'Badge',
7+
};
8+
9+
export const Default = () => (
10+
<Badge onClick={action('click')}>Badge Label</Badge>
11+
);
12+
13+
Default.story = {
14+
parameters: {
815
info: 'Default badge',
9-
})
10-
.add(
11-
'Shade',
12-
() => (
13-
<Badge type='shade' onClick={action('click')}>
14-
Badge Label
15-
</Badge>
16-
),
17-
{
18-
info: 'Badge with type: shade',
19-
}
20-
)
21-
.add(
22-
'Inverse',
23-
() => (
24-
<Badge type='inverse' onClick={action('click')}>
25-
Badge Label
26-
</Badge>
27-
),
28-
{
29-
info: 'Badge with type: inverse',
30-
}
31-
);
16+
},
17+
};
18+
19+
export const Shade = () => (
20+
<Badge type='shade' onClick={action('click')}>
21+
Badge Label
22+
</Badge>
23+
);
24+
25+
Shade.story = {
26+
parameters: {
27+
info: 'Badge with type: shade',
28+
},
29+
};
30+
31+
export const Inverse = () => (
32+
<Badge type='inverse' onClick={action('click')}>
33+
Badge Label
34+
</Badge>
35+
);
36+
37+
Inverse.story = {
38+
parameters: {
39+
info: 'Badge with type: inverse',
40+
},
41+
};

‎stories/BreadCrumbsStories.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import React from 'react';
2-
import { storiesOf } from '@storybook/react';
32
import { action } from '@storybook/addon-actions';
43
import { BreadCrumbs, Crumb } from '../src/scripts';
54

6-
storiesOf('BreadCrumbs', module).add(
7-
'Default',
8-
() => (
9-
<BreadCrumbs>
10-
<Crumb onClick={action('crumb1#click')}>Parent Entity</Crumb>
11-
<Crumb onClick={action('crumb2#click')}>Parent Record Name</Crumb>
12-
</BreadCrumbs>
13-
),
14-
{ info: 'Default BreadCrumbs' }
5+
export default {
6+
title: 'BreadCrumbs',
7+
};
8+
9+
export const Default = () => (
10+
<BreadCrumbs>
11+
<Crumb onClick={action('crumb1#click')}>Parent Entity</Crumb>
12+
<Crumb onClick={action('crumb2#click')}>Parent Record Name</Crumb>
13+
</BreadCrumbs>
1514
);
15+
16+
Default.story = {
17+
parameters: { info: 'Default BreadCrumbs' },
18+
};

‎stories/CheckboxStories.tsx‎

Lines changed: 78 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,83 @@
11
import React from 'react';
2-
import { storiesOf } from '@storybook/react';
32
import { action } from '@storybook/addon-actions';
43
import { text, boolean } from '@storybook/addon-knobs';
54
import { CheckboxGroup, Checkbox } from '../src/scripts';
65

7-
storiesOf('Checkbox', module)
8-
.add(
9-
'Controlled with knobs',
10-
() => (
11-
<CheckboxGroup
12-
label={text('label', 'Checkbox Group Label')}
13-
error={text('error', '')}
14-
required={boolean('required', false)}
15-
onChange={action('change')}
16-
>
17-
<Checkbox
18-
label='Checkbox Label One'
19-
value='1'
20-
disabled={boolean('disabled #1', false)}
21-
checked={boolean('checked #1', false)}
22-
/>
23-
<Checkbox
24-
label='Checkbox Label Two'
25-
value='2'
26-
disabled={boolean('disabled #2', false)}
27-
checked={boolean('checked #2', false)}
28-
/>
29-
</CheckboxGroup>
30-
),
31-
{ info: 'Checkbox controlled with knobs' }
32-
)
33-
.add(
34-
'Default',
35-
() => (
36-
<CheckboxGroup label='Checkbox Group Label'>
37-
<Checkbox label='Checkbox Label One' value='1' checked />
38-
<Checkbox label='Checkbox Label Two' value='2' checked={false} />
39-
</CheckboxGroup>
40-
),
41-
{ info: 'Checkbox Textarea control' }
42-
)
43-
.add(
44-
'Required',
45-
() => (
46-
<CheckboxGroup label='Checkbox Group Label' required>
47-
<Checkbox label='Checkbox Label One' value='1' checked />
48-
<Checkbox label='Checkbox Label Two' value='2' />
49-
</CheckboxGroup>
50-
),
51-
{ info: 'Checkbox control with required attribute' }
52-
)
53-
.add(
54-
'Error',
55-
() => (
56-
<CheckboxGroup
57-
label='Checkbox Group Label'
58-
required
59-
error='This field is required'
60-
>
61-
<Checkbox label='Checkbox Label One' value='1' checked />
62-
<Checkbox label='Checkbox Label Two' value='2' />
63-
</CheckboxGroup>
64-
),
65-
{ info: 'Checkbox control with error message' }
66-
)
67-
.add(
68-
'Disabled',
69-
() => (
70-
<CheckboxGroup label='Checkbox Group Label'>
71-
<Checkbox label='Checkbox Label One' value='1' disabled />
72-
<Checkbox label='Checkbox Label Two' value='2' disabled />
73-
</CheckboxGroup>
74-
),
75-
{ info: 'Checkbox control with disabled status' }
76-
);
6+
export default {
7+
title: 'Checkbox',
8+
};
9+
10+
export const ControlledWithKnobs = () => (
11+
<CheckboxGroup
12+
label={text('label', 'Checkbox Group Label')}
13+
error={text('error', '')}
14+
required={boolean('required', false)}
15+
onChange={action('change')}
16+
>
17+
<Checkbox
18+
label='Checkbox Label One'
19+
value='1'
20+
disabled={boolean('disabled #1', false)}
21+
checked={boolean('checked #1', false)}
22+
/>
23+
<Checkbox
24+
label='Checkbox Label Two'
25+
value='2'
26+
disabled={boolean('disabled #2', false)}
27+
checked={boolean('checked #2', false)}
28+
/>
29+
</CheckboxGroup>
30+
);
31+
32+
ControlledWithKnobs.story = {
33+
name: 'Controlled with knobs',
34+
parameters: { info: 'Checkbox controlled with knobs' },
35+
};
36+
37+
export const Default = () => (
38+
<CheckboxGroup label='Checkbox Group Label'>
39+
<Checkbox label='Checkbox Label One' value='1' checked />
40+
<Checkbox label='Checkbox Label Two' value='2' checked={false} />
41+
</CheckboxGroup>
42+
);
43+
44+
Default.story = {
45+
parameters: { info: 'Checkbox Textarea control' },
46+
};
47+
48+
export const Required = () => (
49+
<CheckboxGroup label='Checkbox Group Label' required>
50+
<Checkbox label='Checkbox Label One' value='1' checked />
51+
<Checkbox label='Checkbox Label Two' value='2' />
52+
</CheckboxGroup>
53+
);
54+
55+
Required.story = {
56+
parameters: { info: 'Checkbox control with required attribute' },
57+
};
58+
59+
export const Error = () => (
60+
<CheckboxGroup
61+
label='Checkbox Group Label'
62+
required
63+
error='This field is required'
64+
>
65+
<Checkbox label='Checkbox Label One' value='1' checked />
66+
<Checkbox label='Checkbox Label Two' value='2' />
67+
</CheckboxGroup>
68+
);
69+
70+
Error.story = {
71+
parameters: { info: 'Checkbox control with error message' },
72+
};
73+
74+
export const Disabled = () => (
75+
<CheckboxGroup label='Checkbox Group Label'>
76+
<Checkbox label='Checkbox Label One' value='1' disabled />
77+
<Checkbox label='Checkbox Label Two' value='2' disabled />
78+
</CheckboxGroup>
79+
);
80+
81+
Disabled.story = {
82+
parameters: { info: 'Checkbox control with disabled status' },
83+
};

0 commit comments

Comments
 (0)