@@ -183,4 +183,84 @@ storiesOf('Select', module)
183
183
</ div >
184
184
</ >
185
185
) ;
186
+ } )
187
+ . addWithJSX ( 'select, with icon' , ( ) => {
188
+ setTimeout ( init ) ;
189
+
190
+ return withPadding (
191
+ < >
192
+ < div className = "ray-form-item" >
193
+ < div className = "ray-select ray-select--with-icon-left" >
194
+ < div className = "ray-select__icon--left" > 😜</ div >
195
+
196
+ < select className = "ray-select__input" >
197
+ < option value = "" disabled selected data-ray-placeholder />
198
+ < option value = "Pikachu" > Pikachu</ option >
199
+ < option value = "Squirtle" > Squirtle</ option >
200
+ < option value = "Bulbasaur" > Bulbasaur</ option >
201
+ < option value = "Charmander" > Charmander</ option >
202
+ </ select >
203
+
204
+ < label className = "ray-select__label" >
205
+ { "What's your starter Pokémon?" }
206
+ </ label >
207
+ </ div >
208
+ </ div >
209
+
210
+ < div className = "ray-form-item" >
211
+ < div className = "ray-select ray-select--with-icon-left ray-select--with-icon-right" >
212
+ < div className = "ray-select__icon--left" > 🤖</ div >
213
+ < div className = "ray-select__icon--right" > 👽</ div >
214
+
215
+ < select className = "ray-select__input" >
216
+ < option value = "" disabled selected data-ray-placeholder />
217
+ < option value = "Pikachu" > Pikachu</ option >
218
+ < option value = "Squirtle" > Squirtle</ option >
219
+ < option value = "Bulbasaur" > Bulbasaur</ option >
220
+ < option value = "Charmander" > Charmander</ option >
221
+ </ select >
222
+
223
+ < label className = "ray-select__label" >
224
+ { "What's your starter Pokémon?" }
225
+ </ label >
226
+ </ div >
227
+ </ div >
228
+
229
+ < div className = "ray-form-item" >
230
+ < div className = "ray-select ray-select--with-icon-right" >
231
+ < div className = "ray-select__icon--right" > 🙏</ div >
232
+
233
+ < select className = "ray-select__input" >
234
+ < option value = "" disabled selected data-ray-placeholder />
235
+ < option value = "Pikachu" > Pikachu</ option >
236
+ < option value = "Squirtle" > Squirtle</ option >
237
+ < option value = "Bulbasaur" > Bulbasaur</ option >
238
+ < option value = "Charmander" > Charmander</ option >
239
+ </ select >
240
+
241
+ < label className = "ray-select__label" >
242
+ { "What's your starter Pokémon?" }
243
+ </ label >
244
+ </ div >
245
+ </ div >
246
+
247
+ < div className = "ray-form-item" >
248
+ < div className = "ray-select ray-select--compact ray-select--with-icon-left" >
249
+ < div className = "ray-select__icon--left" > 🏂</ div >
250
+
251
+ < select className = "ray-select__input" >
252
+ < option value = "" disabled selected data-ray-placeholder />
253
+ < option value = "Pikachu" > Pikachu</ option >
254
+ < option value = "Squirtle" > Squirtle</ option >
255
+ < option value = "Bulbasaur" > Bulbasaur</ option >
256
+ < option value = "Charmander" > Charmander</ option >
257
+ </ select >
258
+
259
+ < label className = "ray-select__label" >
260
+ { "What's your starter Pokémon?" }
261
+ </ label >
262
+ </ div >
263
+ </ div >
264
+ </ >
265
+ ) ;
186
266
} ) ;
0 commit comments