diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-01-28 11:35:25 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-01-28 11:35:25 +0100 |
commit | 9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46 (patch) | |
tree | 038dc5e0a209d06e1c15c1e3c4740d5bdda96f8a /uidev | |
parent | Add href and type to button component (diff) | |
download | ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.tar.gz ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.tar.zst ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.zip |
Update packages
Diffstat (limited to 'uidev')
-rw-r--r-- | uidev/src/app.tsx | 8 | ||||
-rw-r--r-- | uidev/src/stories/badge.stories.tsx | 21 | ||||
-rw-r--r-- | uidev/src/stories/headline.stories.tsx | 54 | ||||
-rw-r--r-- | uidev/src/stories/icon.stories.tsx | 53 | ||||
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 126 | ||||
-rw-r--r-- | uidev/src/stories/loader.stories.tsx | 14 | ||||
-rw-r--r-- | uidev/src/stories/select.stories.tsx | 320 |
7 files changed, 596 insertions, 0 deletions
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx index 0fd524e34..870911c2f 100644 --- a/uidev/src/app.tsx +++ b/uidev/src/app.tsx | |||
@@ -7,8 +7,14 @@ import injectSheet from 'react-jss'; | |||
7 | 7 | ||
8 | import { WithTheme } from './withTheme'; | 8 | import { WithTheme } from './withTheme'; |
9 | 9 | ||
10 | import './stories/badge.stories'; | ||
10 | import './stories/button.stories'; | 11 | import './stories/button.stories'; |
12 | import './stories/headline.stories'; | ||
13 | import './stories/icon.stories'; | ||
14 | import './stories/infobox.stories'; | ||
11 | import './stories/input.stories'; | 15 | import './stories/input.stories'; |
16 | import './stories/loader.stories'; | ||
17 | import './stories/select.stories'; | ||
12 | import './stories/toggle.stories'; | 18 | import './stories/toggle.stories'; |
13 | 19 | ||
14 | import { store } from './stores'; | 20 | import { store } from './stores'; |
@@ -31,6 +37,8 @@ const styles = { | |||
31 | position: 'fixed' as CSS.PositionProperty, | 37 | position: 'fixed' as CSS.PositionProperty, |
32 | listStyleType: 'none', | 38 | listStyleType: 'none', |
33 | fontSize: 14, | 39 | fontSize: 14, |
40 | overflow: 'scroll', | ||
41 | height: '100%', | ||
34 | }, | 42 | }, |
35 | storyList: { | 43 | storyList: { |
36 | paddingLeft: 18, | 44 | paddingLeft: 18, |
diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx new file mode 100644 index 000000000..6de2034bf --- /dev/null +++ b/uidev/src/stories/badge.stories.tsx | |||
@@ -0,0 +1,21 @@ | |||
1 | import React from 'react'; | ||
2 | |||
3 | import { Badge } from '@meetfranz/ui'; | ||
4 | import { storiesOf } from '../stores/stories'; | ||
5 | |||
6 | storiesOf('Badge') | ||
7 | .add('Basic', () => ( | ||
8 | <> | ||
9 | <Badge>New</Badge> | ||
10 | </> | ||
11 | )) | ||
12 | .add('Styles', () => ( | ||
13 | <> | ||
14 | <Badge type="primary">Primary</Badge> | ||
15 | <Badge type="secondary">secondary</Badge> | ||
16 | <Badge type="success">success</Badge> | ||
17 | <Badge type="warning">warning</Badge> | ||
18 | <Badge type="danger">danger</Badge> | ||
19 | <Badge type="inverted">inverted</Badge> | ||
20 | </> | ||
21 | )); | ||
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx new file mode 100644 index 000000000..f42771cae --- /dev/null +++ b/uidev/src/stories/headline.stories.tsx | |||
@@ -0,0 +1,54 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | import uuid from 'uuid/v4'; | ||
5 | |||
6 | import { H1, H2, H3, H4 } from '@meetfranz/ui'; | ||
7 | import { storiesOf } from '../stores/stories'; | ||
8 | |||
9 | // interface IStoreArgs { | ||
10 | // value?: boolean; | ||
11 | // checked?: boolean; | ||
12 | // label?: string; | ||
13 | // id?: string; | ||
14 | // name?: string; | ||
15 | // disabled?: boolean; | ||
16 | // error?: string; | ||
17 | // } | ||
18 | |||
19 | // const createStore = (args?: IStoreArgs) => { | ||
20 | // return observable(Object.assign({ | ||
21 | // id: `element-${uuid()}`, | ||
22 | // name: 'toggle', | ||
23 | // label: 'Label', | ||
24 | // value: true, | ||
25 | // checked: false, | ||
26 | // disabled: false, | ||
27 | // error: '', | ||
28 | // }, args)); | ||
29 | // }; | ||
30 | |||
31 | // const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
32 | // <> | ||
33 | // <Toggle | ||
34 | // value={store.value} | ||
35 | // checked={store.checked} | ||
36 | // label={store.label} | ||
37 | // id={store.id} | ||
38 | // name={store.name} | ||
39 | // disabled={store.disabled} | ||
40 | // error={store.error} | ||
41 | // onChange={() => store.checked = !store.checked} | ||
42 | // /> | ||
43 | // </> | ||
44 | // )); | ||
45 | |||
46 | storiesOf('Typo') | ||
47 | .add('Headlines', () => ( | ||
48 | <> | ||
49 | <H1>Welcome to the world of tomorrow</H1> | ||
50 | <H2>Welcome to the world of tomorrow</H2> | ||
51 | <H3>Welcome to the world of tomorrow</H3> | ||
52 | <H4>Welcome to the world of tomorrow</H4> | ||
53 | </> | ||
54 | )); | ||
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx new file mode 100644 index 000000000..c8e7f8ced --- /dev/null +++ b/uidev/src/stories/icon.stories.tsx | |||
@@ -0,0 +1,53 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | import uuid from 'uuid/v4'; | ||
5 | |||
6 | import { Icon } from '@meetfranz/ui'; | ||
7 | import { storiesOf } from '../stores/stories'; | ||
8 | |||
9 | // interface IStoreArgs { | ||
10 | // value?: boolean; | ||
11 | // checked?: boolean; | ||
12 | // label?: string; | ||
13 | // id?: string; | ||
14 | // name?: string; | ||
15 | // disabled?: boolean; | ||
16 | // error?: string; | ||
17 | // } | ||
18 | |||
19 | // const createStore = (args?: IStoreArgs) => { | ||
20 | // return observable(Object.assign({ | ||
21 | // id: `element-${uuid()}`, | ||
22 | // name: 'toggle', | ||
23 | // label: 'Label', | ||
24 | // value: true, | ||
25 | // checked: false, | ||
26 | // disabled: false, | ||
27 | // error: '', | ||
28 | // }, args)); | ||
29 | // }; | ||
30 | |||
31 | // const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
32 | // <> | ||
33 | // <Toggle | ||
34 | // value={store.value} | ||
35 | // checked={store.checked} | ||
36 | // label={store.label} | ||
37 | // id={store.id} | ||
38 | // name={store.name} | ||
39 | // disabled={store.disabled} | ||
40 | // error={store.error} | ||
41 | // onChange={() => store.checked = !store.checked} | ||
42 | // /> | ||
43 | // </> | ||
44 | // )); | ||
45 | |||
46 | storiesOf('Icon') | ||
47 | .add('Basic', () => ( | ||
48 | <> | ||
49 | <Icon icon="mdiAccountCircle" /> | ||
50 | <Icon icon="mdiAccountCircle" size={2} /> | ||
51 | <Icon icon="mdiAccountCircle" size={3} /> | ||
52 | </> | ||
53 | )); | ||
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx new file mode 100644 index 000000000..2a5e8b0d5 --- /dev/null +++ b/uidev/src/stories/infobox.stories.tsx | |||
@@ -0,0 +1,126 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | |||
5 | import { Infobox } from '@meetfranz/ui'; | ||
6 | import { storiesOf } from '../stores/stories'; | ||
7 | |||
8 | interface IStoreArgs { | ||
9 | icon?: string; | ||
10 | ctaLabel?: string; | ||
11 | type?: string; | ||
12 | dismissable?: boolean; | ||
13 | } | ||
14 | |||
15 | const createStore = (args?: IStoreArgs) => { | ||
16 | return observable(Object.assign({ | ||
17 | type: 'primary', | ||
18 | ctaOnClick: () => { | ||
19 | alert('on click handler'); | ||
20 | }, | ||
21 | }, args)); | ||
22 | }; | ||
23 | |||
24 | const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => ( | ||
25 | <> | ||
26 | <Infobox | ||
27 | icon={store.icon} | ||
28 | ctaLabel={store.ctaLabel} | ||
29 | type={store.type} | ||
30 | ctaOnClick={store.ctaOnClick} | ||
31 | dismissable={store.dismissable} | ||
32 | > | ||
33 | {children} | ||
34 | </Infobox> | ||
35 | </> | ||
36 | )); | ||
37 | |||
38 | storiesOf('Infobox') | ||
39 | .add('Basic', () => ( | ||
40 | <WithStoreInfobox store={createStore()}>Welcome to the world of tomorrow</WithStoreInfobox> | ||
41 | )) | ||
42 | .add('Icon + Dismissable', () => ( | ||
43 | <WithStoreInfobox | ||
44 | store={createStore({ | ||
45 | icon: 'mdiEarth', | ||
46 | dismissable: true, | ||
47 | })} | ||
48 | > | ||
49 | Welcome to the world of tomorrow | ||
50 | </WithStoreInfobox> | ||
51 | )) | ||
52 | .add('With CTA', () => ( | ||
53 | <WithStoreInfobox | ||
54 | store={createStore({ | ||
55 | icon: 'mdiEarth', | ||
56 | ctaLabel: 'Ok, hi!', | ||
57 | })} | ||
58 | > | ||
59 | Welcome to the world of tomorrow | ||
60 | </WithStoreInfobox> | ||
61 | )) | ||
62 | .add('With long text', () => ( | ||
63 | <WithStoreInfobox | ||
64 | store={createStore({ | ||
65 | icon: 'mdiEarth', | ||
66 | ctaLabel: 'Ok, hi!', | ||
67 | })} | ||
68 | > | ||
69 | Franz is your messaging app / former Emperor of Austria and combines chat & messaging services into one application. Franz currently supports Slack, WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google Hangouts,GroupMe, Skype and many more. | ||
70 | </WithStoreInfobox> | ||
71 | )) | ||
72 | .add('Secondary', () => ( | ||
73 | <WithStoreInfobox | ||
74 | store={createStore({ | ||
75 | icon: 'mdiEarth', | ||
76 | ctaLabel: 'Ok, hi!', | ||
77 | type: 'secondary', | ||
78 | })} | ||
79 | > | ||
80 | Welcome to the world of tomorrow | ||
81 | </WithStoreInfobox> | ||
82 | )) | ||
83 | .add('Success', () => ( | ||
84 | <WithStoreInfobox | ||
85 | store={createStore({ | ||
86 | icon: 'mdiEarth', | ||
87 | ctaLabel: 'Ok, hi!', | ||
88 | type: 'success', | ||
89 | })} | ||
90 | > | ||
91 | Welcome to the world of tomorrow | ||
92 | </WithStoreInfobox> | ||
93 | )) | ||
94 | .add('Warning', () => ( | ||
95 | <WithStoreInfobox | ||
96 | store={createStore({ | ||
97 | icon: 'mdiEarth', | ||
98 | ctaLabel: 'Ok, hi!', | ||
99 | type: 'warning', | ||
100 | })} | ||
101 | > | ||
102 | Welcome to the world of tomorrow | ||
103 | </WithStoreInfobox> | ||
104 | )) | ||
105 | .add('Danger', () => ( | ||
106 | <WithStoreInfobox | ||
107 | store={createStore({ | ||
108 | icon: 'mdiEarth', | ||
109 | ctaLabel: 'Ok, hi!', | ||
110 | type: 'danger', | ||
111 | })} | ||
112 | > | ||
113 | Welcome to the world of tomorrow | ||
114 | </WithStoreInfobox> | ||
115 | )) | ||
116 | .add('Inverted', () => ( | ||
117 | <WithStoreInfobox | ||
118 | store={createStore({ | ||
119 | icon: 'mdiEarth', | ||
120 | ctaLabel: 'Ok, hi!', | ||
121 | type: 'inverted', | ||
122 | })} | ||
123 | > | ||
124 | Welcome to the world of tomorrow | ||
125 | </WithStoreInfobox> | ||
126 | )); | ||
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx new file mode 100644 index 000000000..84e813c04 --- /dev/null +++ b/uidev/src/stories/loader.stories.tsx | |||
@@ -0,0 +1,14 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | import uuid from 'uuid/v4'; | ||
5 | |||
6 | import { Loader } from '@meetfranz/ui'; | ||
7 | import { storiesOf } from '../stores/stories'; | ||
8 | |||
9 | storiesOf('Loader') | ||
10 | .add('Basic', () => ( | ||
11 | <> | ||
12 | <Loader /> | ||
13 | </> | ||
14 | )); | ||
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx new file mode 100644 index 000000000..81f7f08a6 --- /dev/null +++ b/uidev/src/stories/select.stories.tsx | |||
@@ -0,0 +1,320 @@ | |||
1 | import React from 'react'; | ||
2 | import uuid from 'uuid/v4'; | ||
3 | |||
4 | import { Select } from '@meetfranz/forms'; | ||
5 | import { storiesOf } from '../stores/stories'; | ||
6 | |||
7 | const defaultProps = () => { | ||
8 | const id = uuid(); | ||
9 | return { | ||
10 | label: 'Label', | ||
11 | id: `test-${id}`, | ||
12 | name: `test-${id}`, | ||
13 | options: { | ||
14 | AF: 'Afghanistan', | ||
15 | AL: 'Albania', | ||
16 | DZ: 'Algeria', | ||
17 | AS: 'American Samoa', | ||
18 | AD: 'Andorra', | ||
19 | AO: 'Angola', | ||
20 | AI: 'Anguilla', | ||
21 | AQ: 'Antarctica', | ||
22 | AG: 'Antigua and Barbuda', | ||
23 | AR: 'Argentina', | ||
24 | AM: 'Armenia', | ||
25 | AW: 'Aruba', | ||
26 | AC: 'Ascension Island', | ||
27 | AU: 'Australia', | ||
28 | AT: 'Austria', | ||
29 | AZ: 'Azerbaijan', | ||
30 | BS: 'Bahamas', | ||
31 | BH: 'Bahrain', | ||
32 | BD: 'Bangladesh', | ||
33 | BB: 'Barbados', | ||
34 | BY: 'Belarus', | ||
35 | BE: 'Belgium', | ||
36 | BZ: 'Belize', | ||
37 | BJ: 'Benin', | ||
38 | BM: 'Bermuda', | ||
39 | BT: 'Bhutan', | ||
40 | BO: 'Bolivia', | ||
41 | BA: 'Bosnia and Herzegovina', | ||
42 | BW: 'Botswana', | ||
43 | BV: 'Bouvet Island', | ||
44 | BR: 'Brazil', | ||
45 | BQ: 'British Antarctic Territory', | ||
46 | IO: 'British Indian Ocean Territory', | ||
47 | VG: 'British Virgin Islands', | ||
48 | BN: 'Brunei', | ||
49 | BG: 'Bulgaria', | ||
50 | BF: 'Burkina Faso', | ||
51 | BI: 'Burundi', | ||
52 | KH: 'Cambodia', | ||
53 | CM: 'Cameroon', | ||
54 | CA: 'Canada', | ||
55 | IC: 'Canary Islands', | ||
56 | CT: 'Canton and Enderbury Islands', | ||
57 | CV: 'Cape Verde', | ||
58 | KY: 'Cayman Islands', | ||
59 | CF: 'Central African Republic', | ||
60 | EA: 'Ceuta and Melilla', | ||
61 | TD: 'Chad', | ||
62 | CL: 'Chile', | ||
63 | CN: 'China', | ||
64 | CX: 'Christmas Island', | ||
65 | CP: 'Clipperton Island', | ||
66 | CC: 'Cocos [Keeling] Islands', | ||
67 | CO: 'Colombia', | ||
68 | KM: 'Comoros', | ||
69 | CD: 'Congo - Kinshasa', | ||
70 | CG: 'Congo [Republic]', | ||
71 | CK: 'Cook Islands', | ||
72 | CR: 'Costa Rica', | ||
73 | HR: 'Croatia', | ||
74 | CU: 'Cuba', | ||
75 | CY: 'Cyprus', | ||
76 | CZ: 'Czech Republic', | ||
77 | CI: 'Côte d’Ivoire', | ||
78 | DK: 'Denmark', | ||
79 | DG: 'Diego Garcia', | ||
80 | DJ: 'Djibouti', | ||
81 | DM: 'Dominica', | ||
82 | DO: 'Dominican Republic', | ||
83 | NQ: 'Dronning Maud Land', | ||
84 | TL: 'East Timor', | ||
85 | EC: 'Ecuador', | ||
86 | EG: 'Egypt', | ||
87 | SV: 'El Salvador', | ||
88 | GQ: 'Equatorial Guinea', | ||
89 | ER: 'Eritrea', | ||
90 | EE: 'Estonia', | ||
91 | ET: 'Ethiopia', | ||
92 | FK: 'Falkland Islands', | ||
93 | FO: 'Faroe Islands', | ||
94 | FJ: 'Fiji', | ||
95 | FI: 'Finland', | ||
96 | FR: 'France', | ||
97 | GF: 'French Guiana', | ||
98 | PF: 'French Polynesia', | ||
99 | TF: 'French Southern Territories', | ||
100 | FQ: 'French Southern and Antarctic Territories', | ||
101 | GA: 'Gabon', | ||
102 | GM: 'Gambia', | ||
103 | GE: 'Georgia', | ||
104 | DE: 'Germany', | ||
105 | GH: 'Ghana', | ||
106 | GI: 'Gibraltar', | ||
107 | GR: 'Greece', | ||
108 | GL: 'Greenland', | ||
109 | GD: 'Grenada', | ||
110 | GP: 'Guadeloupe', | ||
111 | GU: 'Guam', | ||
112 | GT: 'Guatemala', | ||
113 | GG: 'Guernsey', | ||
114 | GN: 'Guinea', | ||
115 | GW: 'Guinea-Bissau', | ||
116 | GY: 'Guyana', | ||
117 | HT: 'Haiti', | ||
118 | HM: 'Heard Island and McDonald Islands', | ||
119 | HN: 'Honduras', | ||
120 | HK: 'Hong Kong', | ||
121 | HU: 'Hungary', | ||
122 | IS: 'Iceland', | ||
123 | IN: 'India', | ||
124 | ID: 'Indonesia', | ||
125 | IR: 'Iran', | ||
126 | IQ: 'Iraq', | ||
127 | IE: 'Ireland', | ||
128 | IM: 'Isle of Man', | ||
129 | IL: 'Israel', | ||
130 | IT: 'Italy', | ||
131 | JM: 'Jamaica', | ||
132 | JP: 'Japan', | ||
133 | JE: 'Jersey', | ||
134 | JT: 'Johnston Island', | ||
135 | JO: 'Jordan', | ||
136 | KZ: 'Kazakhstan', | ||
137 | KE: 'Kenya', | ||
138 | KI: 'Kiribati', | ||
139 | XK: 'Kosovo', | ||
140 | KW: 'Kuwait', | ||
141 | KG: 'Kyrgyzstan', | ||
142 | LA: 'Laos', | ||
143 | LV: 'Latvia', | ||
144 | LB: 'Lebanon', | ||
145 | LS: 'Lesotho', | ||
146 | LR: 'Liberia', | ||
147 | LY: 'Libya', | ||
148 | LI: 'Liechtenstein', | ||
149 | LT: 'Lithuania', | ||
150 | LU: 'Luxembourg', | ||
151 | MO: 'Macau', | ||
152 | MK: 'Macedonia', | ||
153 | MG: 'Madagascar', | ||
154 | MW: 'Malawi', | ||
155 | MY: 'Malaysia', | ||
156 | MV: 'Maldives', | ||
157 | ML: 'Mali', | ||
158 | MT: 'Malta', | ||
159 | MH: 'Marshall Islands', | ||
160 | MQ: 'Martinique', | ||
161 | MR: 'Mauritania', | ||
162 | MU: 'Mauritius', | ||
163 | YT: 'Mayotte', | ||
164 | FX: 'Metropolitan France', | ||
165 | MX: 'Mexico', | ||
166 | FM: 'Micronesia', | ||
167 | MI: 'Midway Islands', | ||
168 | MD: 'Moldova', | ||
169 | MC: 'Monaco', | ||
170 | MN: 'Mongolia', | ||
171 | ME: 'Montenegro', | ||
172 | MS: 'Montserrat', | ||
173 | MA: 'Morocco', | ||
174 | MZ: 'Mozambique', | ||
175 | MM: 'Myanmar [Burma]', | ||
176 | NA: 'Namibia', | ||
177 | NR: 'Nauru', | ||
178 | NP: 'Nepal', | ||
179 | NL: 'Netherlands', | ||
180 | AN: 'Netherlands Antilles', | ||
181 | NC: 'New Caledonia', | ||
182 | NZ: 'New Zealand', | ||
183 | NI: 'Nicaragua', | ||
184 | NE: 'Niger', | ||
185 | NG: 'Nigeria', | ||
186 | NU: 'Niue', | ||
187 | NF: 'Norfolk Island', | ||
188 | KP: 'North Korea', | ||
189 | VD: 'North Vietnam', | ||
190 | MP: 'Northern Mariana Islands', | ||
191 | NO: 'Norway', | ||
192 | OM: 'Oman', | ||
193 | QO: 'Outlying Oceania', | ||
194 | PC: 'Pacific Islands Trust Territory', | ||
195 | PK: 'Pakistan', | ||
196 | PW: 'Palau', | ||
197 | PS: 'Palestinian Territories', | ||
198 | PA: 'Panama', | ||
199 | PZ: 'Panama Canal Zone', | ||
200 | PG: 'Papua New Guinea', | ||
201 | PY: 'Paraguay', | ||
202 | YD: 'Peoples Democratic Republic of Yemen', | ||
203 | PE: 'Peru', | ||
204 | PH: 'Philippines', | ||
205 | PN: 'Pitcairn Islands', | ||
206 | PL: 'Poland', | ||
207 | PT: 'Portugal', | ||
208 | PR: 'Puerto Rico', | ||
209 | QA: 'Qatar', | ||
210 | RO: 'Romania', | ||
211 | RU: 'Russia', | ||
212 | RW: 'Rwanda', | ||
213 | RE: 'Réunion', | ||
214 | BL: 'Saint Barthélemy', | ||
215 | SH: 'Saint Helena', | ||
216 | KN: 'Saint Kitts and Nevis', | ||
217 | LC: 'Saint Lucia', | ||
218 | MF: 'Saint Martin', | ||
219 | PM: 'Saint Pierre and Miquelon', | ||
220 | VC: 'Saint Vincent and the Grenadines', | ||
221 | WS: 'Samoa', | ||
222 | SM: 'San Marino', | ||
223 | SA: 'Saudi Arabia', | ||
224 | SN: 'Senegal', | ||
225 | RS: 'Serbia', | ||
226 | CS: 'Serbia and Montenegro', | ||
227 | SC: 'Seychelles', | ||
228 | SL: 'Sierra Leone', | ||
229 | SG: 'Singapore', | ||
230 | SK: 'Slovakia', | ||
231 | SI: 'Slovenia', | ||
232 | SB: 'Solomon Islands', | ||
233 | SO: 'Somalia', | ||
234 | ZA: 'South Africa', | ||
235 | GS: 'South Georgia and the South Sandwich Islands', | ||
236 | KR: 'South Korea', | ||
237 | ES: 'Spain', | ||
238 | LK: 'Sri Lanka', | ||
239 | SD: 'Sudan', | ||
240 | SR: 'Suriname', | ||
241 | SJ: 'Svalbard and Jan Mayen', | ||
242 | SZ: 'Swaziland', | ||
243 | SE: 'Sweden', | ||
244 | CH: 'Switzerland', | ||
245 | SY: 'Syria', | ||
246 | ST: 'São Tomé and Príncipe', | ||
247 | TW: 'Taiwan', | ||
248 | TJ: 'Tajikistan', | ||
249 | TZ: 'Tanzania', | ||
250 | TH: 'Thailand', | ||
251 | TG: 'Togo', | ||
252 | TK: 'Tokelau', | ||
253 | TO: 'Tonga', | ||
254 | TT: 'Trinidad and Tobago', | ||
255 | TA: 'Tristan da Cunha', | ||
256 | TN: 'Tunisia', | ||
257 | TR: 'Turkey', | ||
258 | TM: 'Turkmenistan', | ||
259 | TC: 'Turks and Caicos Islands', | ||
260 | TV: 'Tuvalu', | ||
261 | UM: 'U.S. Minor Outlying Islands', | ||
262 | PU: 'U.S. Miscellaneous Pacific Islands', | ||
263 | VI: 'U.S. Virgin Islands', | ||
264 | UG: 'Uganda', | ||
265 | UA: 'Ukraine', | ||
266 | AE: 'United Arab Emirates', | ||
267 | GB: 'United Kingdom', | ||
268 | US: 'United States', | ||
269 | UY: 'Uruguay', | ||
270 | UZ: 'Uzbekistan', | ||
271 | VU: 'Vanuatu', | ||
272 | VA: 'Vatican City', | ||
273 | VE: 'Venezuela', | ||
274 | VN: 'Vietnam', | ||
275 | WK: 'Wake Island', | ||
276 | WF: 'Wallis and Futuna', | ||
277 | EH: 'Western Sahara', | ||
278 | YE: 'Yemen', | ||
279 | ZM: 'Zambia', | ||
280 | ZW: 'Zimbabwe', | ||
281 | AX: 'Åland Islands', | ||
282 | }, | ||
283 | actionText: 'Select country', | ||
284 | // defaultValue: 'AT', | ||
285 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), | ||
286 | }; | ||
287 | }; | ||
288 | |||
289 | storiesOf('Select') | ||
290 | .add('Basic', () => ( | ||
291 | <Select | ||
292 | {...defaultProps()} | ||
293 | /> | ||
294 | )) | ||
295 | .add('With preselection', () => ( | ||
296 | <Select | ||
297 | {...defaultProps()} | ||
298 | defaultValue="AT" | ||
299 | /> | ||
300 | )) | ||
301 | .add('With search', () => ( | ||
302 | <Select | ||
303 | {...defaultProps()} | ||
304 | showSearch | ||
305 | /> | ||
306 | )) | ||
307 | .add('Disabled', () => ( | ||
308 | <Select | ||
309 | {...defaultProps()} | ||
310 | showSearch | ||
311 | disabled | ||
312 | /> | ||
313 | )) | ||
314 | .add('With error', () => ( | ||
315 | <Select | ||
316 | {...defaultProps()} | ||
317 | showSearch | ||
318 | error="Your selection was a bit too funky for my taste" | ||
319 | /> | ||
320 | )); | ||