-
Notifications
You must be signed in to change notification settings - Fork 112
/
radio-uncontrolled.stories.tsx
99 lines (92 loc) · 2.32 KB
/
radio-uncontrolled.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import * as React from 'react';
import {useUID} from '@twilio-paste/uid-library';
import {Anchor} from '@twilio-paste/anchor';
import {Radio, RadioGroup} from '../src';
// eslint-disable-next-line import/no-default-export
export default {
title: 'Components/Radio/Radio (Uncontrolled)',
component: Radio,
subcomponents: {RadioGroup},
};
/**
* No defaultChecked passed to Radio
*/
export const RadioBasic = (): React.ReactNode => {
return (
<>
<Radio id={useUID()} value="1" name="foo" helpText="This is some help text.">
First option
</Radio>
<Radio id={useUID()} value="2" name="foo" helpText="This is some help text.">
Second option
</Radio>
<Radio id={useUID()} value="2" name="foo" helpText="This is some help text." disabled>
Disabled option
</Radio>
</>
);
};
RadioBasic.story = {
name: 'Radio - no initial defaultChecked',
parameters: {
chromatic: {disableSnapshot: true},
},
};
/**
* No id passed to Radio
*/
export const RadioWithNoID = (): React.ReactNode => {
return (
<>
<Radio value="1" name="foo" helpText="This is some help text.">
First option
</Radio>
<Radio value="2" name="foo" helpText="This is some help text.">
Second option
</Radio>
<Radio value="2" name="foo" helpText="This is some help text." disabled>
Disabled option
</Radio>
</>
);
};
RadioWithNoID.story = {
name: 'Radio - with no ID',
parameters: {
chromatic: {disableSnapshot: true},
},
};
/**
* Only `defaultChecked` passed to Radio
*/
export const RadioDefaultChecked = (): React.ReactNode => {
return (
<>
<Radio id={useUID()} value="1" name="foo" helpText="This is some help text.">
First option
</Radio>
<Radio
id={useUID()}
value="2"
name="foo"
defaultChecked
helpText={
<>
Some interesting help text with a <Anchor href="http://www.google.com">link</Anchor>
</>
}
>
Second option
</Radio>
<Radio id={useUID()} value="2" name="foo" helpText="This is some help text." disabled>
Disabled option
</Radio>
</>
);
};
RadioDefaultChecked.story = {
name: 'Radio - initial defaultChecked',
parameters: {
chromatic: {disableSnapshot: true},
},
};