-
Notifications
You must be signed in to change notification settings - Fork 182
/
radio.stories.tsx
70 lines (58 loc) · 1.73 KB
/
radio.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
import React, {useState, Fragment} from 'react';
import Radio from './radio';
export default {
title: 'Components/Radio',
parameters: {
notes:
'Displays a radio button. Adopted from [react-radio-group](https://github.com/chenglou/react-radio-group).',
zeplinLink: 'https://app.zeplin.io/project/5afd8f5511c2d1c625752bb0/screen/6193bc703afd36a8d65af24c'
}
};
export const Basic = () => {
const [value, onChange] = useState('one');
return (
<Fragment>
Selected: {value}
<Radio value={value} onChange={onChange}>
<Radio.Item value="one">One</Radio.Item>
<Radio.Item value="two">Two</Radio.Item>
<Radio.Item value="three">Three</Radio.Item>
</Radio>
</Fragment>
);
};
Basic.storyName = 'basic';
export const Multiline = () => {
const [value, onChange] = useState('one');
return (
<div style={{width: 200}}>
Selected: {value}
<Radio value={value} onChange={onChange}>
<Radio.Item value="one">One</Radio.Item>
<Radio.Item value="two">This is a multiline radio item that should wrap</Radio.Item>
</Radio>
</div>
);
};
Multiline.storyName = 'multiline';
export const uncontrolled = () => (
<Radio>
<Radio.Item value="one" defaultChecked>
One
</Radio.Item>
<Radio.Item value="two">Two</Radio.Item>
<Radio.Item value="three">Three</Radio.Item>
</Radio>
);
uncontrolled.storyName = 'uncontrolled';
uncontrolled.parameters = {screenshots: {skip: true}};
export const disabled = () => (
<Radio disabled>
<Radio.Item value="one" defaultChecked>
One
</Radio.Item>
<Radio.Item value="two">Two</Radio.Item>
<Radio.Item value="three">Three</Radio.Item>
</Radio>
);
disabled.storyName = 'disabled';