@mrshmllw/smores-react 2.0.1 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +1 -1
  2. package/dist/Button/Button.js +8 -4
  3. package/dist/Button/Button.js.map +1 -1
  4. package/dist/Dropdown/Dropdown.js +1 -1
  5. package/dist/Dropdown/Dropdown.js.map +1 -1
  6. package/dist/Icon/Container.js +3 -0
  7. package/dist/Icon/Container.js.map +1 -1
  8. package/dist/Icon/Icon.js +6 -0
  9. package/dist/Icon/Icon.js.map +1 -1
  10. package/dist/NumberInput/NumberInput.js +1 -1
  11. package/dist/NumberInput/NumberInput.js.map +1 -1
  12. package/dist/SearchInput/SearchInput.js +1 -1
  13. package/dist/SearchInput/SearchInput.js.map +1 -1
  14. package/dist/Text/Text.d.ts +3 -2
  15. package/dist/Text/Text.js +17 -2
  16. package/dist/Text/Text.js.map +1 -1
  17. package/dist/TextInput/TextInput.js +1 -1
  18. package/dist/TextInput/TextInput.js.map +1 -1
  19. package/dist/Textarea/Textarea.js +1 -1
  20. package/dist/Textarea/Textarea.js.map +1 -1
  21. package/dist/colors.stories.d.ts +7 -0
  22. package/dist/colors.stories.js +71 -0
  23. package/dist/colors.stories.js.map +1 -0
  24. package/dist/theme.js +2 -2
  25. package/package.json +2 -2
  26. package/dist/ActionDropdown/__tests__/__snapshots__/ActionDropdown.js.snap +0 -167
  27. package/dist/Box/__tests__/__snapshots__/Box.js.snap +0 -20
  28. package/dist/Button/__tests__/__snapshots__/Button.js.snap +0 -46
  29. package/dist/Card/__tests__/__snapshots__/Card.js.snap +0 -24
  30. package/dist/CheckBox/__tests__/__snapshots__/CheckBox.js.snap +0 -20
  31. package/dist/Dropdown/__tests__/__snapshots__/Dropdown.js.snap +0 -167
  32. package/dist/Emoji/__tests__/__snapshots__/Emoji.js.snap +0 -20
  33. package/dist/Icon/__tests__/__snapshots__/Icon.js.snap +0 -47
  34. package/dist/IconWrapper/__tests__/__snapshots__/IconWrapper.js.snap +0 -121
  35. package/dist/LabelledText/__tests__/__snapshots__/LabelledText.js.snap +0 -57
  36. package/dist/Loader/__tests__/__snapshots__/Loader.js.snap +0 -53
  37. package/dist/Message/__tests__/__snapshots__/Message.js.snap +0 -279
  38. package/dist/Modal/__tests__/__snapshots__/Modal.js.snap +0 -208
  39. package/dist/NumberInput/__tests__/__snapshots__/NumberInput.js.snap +0 -1398
  40. package/dist/Pagination/__tests__/__snapshots__/Pagination.js.snap +0 -273
  41. package/dist/RadioButton/__tests__/__snapshots__/RadioButton.js.snap +0 -146
  42. package/dist/Row/__tests__/__snapshots__/Row.js.snap +0 -96
  43. package/dist/SearchInput/__tests__/__snapshots__/SearchInput.js.snap +0 -146
  44. package/dist/Tag/__tests__/__snapshots__/Tag.js.snap +0 -54
  45. package/dist/Text/__tests__/__snapshots__/Text.js.snap +0 -34
  46. package/dist/TextInput/__tests__/__snapshots__/TextInput.js.snap +0 -74
  47. package/dist/Textarea/__tests__/__snapshots__/Textarea.js.snap +0 -271
  48. package/dist/Toggle/__tests__/__snapshots__/Toggle.js.snap +0 -70
@@ -1,1398 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`renders - currency 1`] = `
4
- .c1 {
5
- margin-bottom: 0px;
6
- }
7
-
8
- .c2 {
9
- font-size: 8px;
10
- line-height: 100%;
11
- font-weight: 700;
12
- text-transform: uppercase;
13
- -webkit-letter-spacing: 0.75px;
14
- -moz-letter-spacing: 0.75px;
15
- -ms-letter-spacing: 0.75px;
16
- letter-spacing: 0.75px;
17
- margin: 0;
18
- padding: 0;
19
- color: #D2D2D2;
20
- text-align: left;
21
- cursor: inherit;
22
- -webkit-letter-spacing: 0.15px;
23
- -moz-letter-spacing: 0.15px;
24
- -ms-letter-spacing: 0.15px;
25
- letter-spacing: 0.15px;
26
- }
27
-
28
- .c4 {
29
- font-size: 14px;
30
- line-height: 23px;
31
- font-weight: 400;
32
- margin: 0;
33
- padding: 0;
34
- color: #112035;
35
- text-align: left;
36
- cursor: inherit;
37
- -webkit-letter-spacing: 0.15px;
38
- -moz-letter-spacing: 0.15px;
39
- -ms-letter-spacing: 0.15px;
40
- letter-spacing: 0.15px;
41
- }
42
-
43
- .c9 {
44
- display: -webkit-box;
45
- display: -webkit-flex;
46
- display: -ms-flexbox;
47
- display: flex;
48
- -webkit-align-items: center;
49
- -webkit-box-align: center;
50
- -ms-flex-align: center;
51
- align-items: center;
52
- -webkit-box-pack: center;
53
- -webkit-justify-content: center;
54
- -ms-flex-pack: center;
55
- justify-content: center;
56
- width: 100%;
57
- max-width: 24px;
58
- height: 24px;
59
- -webkit-transform: rotate(180deg);
60
- -ms-transform: rotate(180deg);
61
- transform: rotate(180deg);
62
- margin-top: 0;
63
- margin-right: 0;
64
- margin-bottom: 0;
65
- margin-left: 0;
66
- }
67
-
68
- .c10 {
69
- display: -webkit-box;
70
- display: -webkit-flex;
71
- display: -ms-flexbox;
72
- display: flex;
73
- -webkit-align-items: center;
74
- -webkit-box-align: center;
75
- -ms-flex-align: center;
76
- align-items: center;
77
- -webkit-box-pack: center;
78
- -webkit-justify-content: center;
79
- -ms-flex-pack: center;
80
- justify-content: center;
81
- width: 100%;
82
- max-width: 24px;
83
- height: 24px;
84
- -webkit-transform: rotate(0deg);
85
- -ms-transform: rotate(0deg);
86
- transform: rotate(0deg);
87
- margin-top: 0;
88
- margin-right: 0;
89
- margin-bottom: 0;
90
- margin-left: 0;
91
- }
92
-
93
- .c0 {
94
- font-family: 'Gordita',san-serif;
95
- display: -webkit-box;
96
- display: -webkit-flex;
97
- display: -ms-flexbox;
98
- display: flex;
99
- -webkit-flex-direction: column;
100
- -ms-flex-direction: column;
101
- flex-direction: column;
102
- height: auto;
103
- }
104
-
105
- .c3 {
106
- border-bottom: 1px solid;
107
- border-color: #D2D2D2;
108
- display: -webkit-box;
109
- display: -webkit-flex;
110
- display: -ms-flexbox;
111
- display: flex;
112
- -webkit-align-items: center;
113
- -webkit-box-align: center;
114
- -ms-flex-align: center;
115
- align-items: center;
116
- height: 32px;
117
- cursor: pointer;
118
- opacity: 1;
119
- border-color: #9E9E9E;
120
- }
121
-
122
- .c3:hover,
123
- .c3:focus-within {
124
- border-color: #9E9E9E;
125
- }
126
-
127
- .c6 {
128
- font-family: 'Gordita',san-serif;
129
- border: none;
130
- color: #000000;
131
- font-size: 16px;
132
- width: 100%;
133
- outline: none;
134
- cursor: pointer;
135
- -moz-appearance: textfield;
136
- }
137
-
138
- .c6::-webkit-input-placeholder {
139
- color: #D2D2D2;
140
- }
141
-
142
- .c6::-moz-placeholder {
143
- color: #D2D2D2;
144
- }
145
-
146
- .c6:-ms-input-placeholder {
147
- color: #D2D2D2;
148
- }
149
-
150
- .c6::placeholder {
151
- color: #D2D2D2;
152
- }
153
-
154
- .c6::-webkit-outer-spin-button,
155
- .c6::-webkit-inner-spin-button {
156
- -webkit-appearance: none;
157
- margin: 0;
158
- }
159
-
160
- .c5 {
161
- font-family: 'Gordita',san-serif;
162
- font-size: 16px;
163
- line-height: 19px;
164
- }
165
-
166
- .c7 {
167
- display: -webkit-box;
168
- display: -webkit-flex;
169
- display: -ms-flexbox;
170
- display: flex;
171
- position: relative;
172
- top: -3px;
173
- }
174
-
175
- .c8 {
176
- width: 24px;
177
- height: 24px;
178
- background-color: transparent;
179
- border: 0;
180
- padding: 0;
181
- cursor: pointer;
182
- }
183
-
184
- @media (min-width:768px) {
185
- .c2 {
186
- font-size: 10px;
187
- }
188
- }
189
-
190
- @media (min-width:768px) {
191
- .c4 {
192
- font-size: 16px;
193
- line-height: 26px;
194
- }
195
- }
196
-
197
- <div
198
- class="c0"
199
- >
200
- <div
201
- class="c1"
202
- >
203
- <label
204
- class="c2"
205
- color="grey4"
206
- cursor="inherit"
207
- title=""
208
- >
209
- Currency
210
-  
211
- </label>
212
- </div>
213
- <div
214
- class="c3"
215
- value="50"
216
- >
217
- <span
218
- class="c4 c5"
219
- color="blue7"
220
- cursor="inherit"
221
- title=""
222
- >
223
- $
224
- </span>
225
- <input
226
- class="c6"
227
- id="currencyInput"
228
- name="currencyInput"
229
- placeholder="100.00"
230
- type="number"
231
- value="50"
232
- />
233
- <div
234
- class="c7"
235
- >
236
- <button
237
- class="c8"
238
- >
239
- <span
240
- class="c9"
241
- color="grey4"
242
- rotate="180"
243
- size="24"
244
- >
245
- <svg
246
- fill="none"
247
- height="100%"
248
- viewBox="0 0 24 24"
249
- width="100%"
250
- xmlns="http://www.w3.org/2000/svg"
251
- >
252
- <path
253
- d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
254
- fill="#D2D2D2"
255
- />
256
- </svg>
257
- </span>
258
- </button>
259
- <button
260
- class="c8"
261
- >
262
- <span
263
- class="c10"
264
- color="grey4"
265
- rotate="0"
266
- size="24"
267
- >
268
- <svg
269
- fill="none"
270
- height="100%"
271
- viewBox="0 0 24 24"
272
- width="100%"
273
- xmlns="http://www.w3.org/2000/svg"
274
- >
275
- <path
276
- d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
277
- fill="#D2D2D2"
278
- />
279
- </svg>
280
- </span>
281
- </button>
282
- </div>
283
- </div>
284
- </div>
285
- `;
286
-
287
- exports[`renders - disabled 1`] = `
288
- .c1 {
289
- margin-bottom: 0px;
290
- }
291
-
292
- .c2 {
293
- font-size: 8px;
294
- line-height: 100%;
295
- font-weight: 700;
296
- text-transform: uppercase;
297
- -webkit-letter-spacing: 0.75px;
298
- -moz-letter-spacing: 0.75px;
299
- -ms-letter-spacing: 0.75px;
300
- letter-spacing: 0.75px;
301
- margin: 0;
302
- padding: 0;
303
- color: #D2D2D2;
304
- text-align: left;
305
- cursor: inherit;
306
- -webkit-letter-spacing: 0.15px;
307
- -moz-letter-spacing: 0.15px;
308
- -ms-letter-spacing: 0.15px;
309
- letter-spacing: 0.15px;
310
- }
311
-
312
- .c0 {
313
- font-family: 'Gordita',san-serif;
314
- display: -webkit-box;
315
- display: -webkit-flex;
316
- display: -ms-flexbox;
317
- display: flex;
318
- -webkit-flex-direction: column;
319
- -ms-flex-direction: column;
320
- flex-direction: column;
321
- height: auto;
322
- }
323
-
324
- .c3 {
325
- border-bottom: 1px solid;
326
- border-color: #D2D2D2;
327
- display: -webkit-box;
328
- display: -webkit-flex;
329
- display: -ms-flexbox;
330
- display: flex;
331
- -webkit-align-items: center;
332
- -webkit-box-align: center;
333
- -ms-flex-align: center;
334
- align-items: center;
335
- height: 32px;
336
- cursor: not-allowed;
337
- opacity: 0.5;
338
- }
339
-
340
- .c3:hover,
341
- .c3:focus-within {
342
- border-color: #9E9E9E;
343
- }
344
-
345
- .c4 {
346
- font-family: 'Gordita',san-serif;
347
- border: none;
348
- color: #000000;
349
- font-size: 16px;
350
- width: 100%;
351
- outline: none;
352
- cursor: not-allowed;
353
- -moz-appearance: textfield;
354
- }
355
-
356
- .c4::-webkit-input-placeholder {
357
- color: #D2D2D2;
358
- }
359
-
360
- .c4::-moz-placeholder {
361
- color: #D2D2D2;
362
- }
363
-
364
- .c4:-ms-input-placeholder {
365
- color: #D2D2D2;
366
- }
367
-
368
- .c4::placeholder {
369
- color: #D2D2D2;
370
- }
371
-
372
- .c4::-webkit-outer-spin-button,
373
- .c4::-webkit-inner-spin-button {
374
- -webkit-appearance: none;
375
- margin: 0;
376
- }
377
-
378
- @media (min-width:768px) {
379
- .c2 {
380
- font-size: 10px;
381
- }
382
- }
383
-
384
- <div
385
- class="c0"
386
- >
387
- <div
388
- class="c1"
389
- >
390
- <label
391
- class="c2"
392
- color="grey4"
393
- cursor="inherit"
394
- title=""
395
- >
396
- Currency
397
-  
398
- </label>
399
- </div>
400
- <div
401
- class="c3"
402
- disabled=""
403
- value=""
404
- >
405
- <input
406
- class="c4"
407
- disabled=""
408
- id="currencyInput"
409
- name="currencyInput"
410
- placeholder="100.00"
411
- type="number"
412
- value=""
413
- />
414
- </div>
415
- </div>
416
- `;
417
-
418
- exports[`renders - error 1`] = `
419
- .c1 {
420
- margin-bottom: 0px;
421
- }
422
-
423
- .c2 {
424
- font-size: 8px;
425
- line-height: 100%;
426
- font-weight: 700;
427
- text-transform: uppercase;
428
- -webkit-letter-spacing: 0.75px;
429
- -moz-letter-spacing: 0.75px;
430
- -ms-letter-spacing: 0.75px;
431
- letter-spacing: 0.75px;
432
- margin: 0;
433
- padding: 0;
434
- color: #D2D2D2;
435
- text-align: left;
436
- cursor: inherit;
437
- -webkit-letter-spacing: 0.15px;
438
- -moz-letter-spacing: 0.15px;
439
- -ms-letter-spacing: 0.15px;
440
- letter-spacing: 0.15px;
441
- }
442
-
443
- .c4 {
444
- font-size: 14px;
445
- line-height: 23px;
446
- font-weight: 400;
447
- margin: 0;
448
- padding: 0;
449
- color: #112035;
450
- text-align: left;
451
- cursor: inherit;
452
- -webkit-letter-spacing: 0.15px;
453
- -moz-letter-spacing: 0.15px;
454
- -ms-letter-spacing: 0.15px;
455
- letter-spacing: 0.15px;
456
- }
457
-
458
- .c9 {
459
- display: -webkit-box;
460
- display: -webkit-flex;
461
- display: -ms-flexbox;
462
- display: flex;
463
- -webkit-align-items: center;
464
- -webkit-box-align: center;
465
- -ms-flex-align: center;
466
- align-items: center;
467
- -webkit-box-pack: center;
468
- -webkit-justify-content: center;
469
- -ms-flex-pack: center;
470
- justify-content: center;
471
- width: 100%;
472
- max-width: 24px;
473
- height: 24px;
474
- -webkit-transform: rotate(180deg);
475
- -ms-transform: rotate(180deg);
476
- transform: rotate(180deg);
477
- margin-top: 0;
478
- margin-right: 0;
479
- margin-bottom: 0;
480
- margin-left: 0;
481
- }
482
-
483
- .c10 {
484
- display: -webkit-box;
485
- display: -webkit-flex;
486
- display: -ms-flexbox;
487
- display: flex;
488
- -webkit-align-items: center;
489
- -webkit-box-align: center;
490
- -ms-flex-align: center;
491
- align-items: center;
492
- -webkit-box-pack: center;
493
- -webkit-justify-content: center;
494
- -ms-flex-pack: center;
495
- justify-content: center;
496
- width: 100%;
497
- max-width: 24px;
498
- height: 24px;
499
- -webkit-transform: rotate(0deg);
500
- -ms-transform: rotate(0deg);
501
- transform: rotate(0deg);
502
- margin-top: 0;
503
- margin-right: 0;
504
- margin-bottom: 0;
505
- margin-left: 0;
506
- }
507
-
508
- .c0 {
509
- font-family: 'Gordita',san-serif;
510
- display: -webkit-box;
511
- display: -webkit-flex;
512
- display: -ms-flexbox;
513
- display: flex;
514
- -webkit-flex-direction: column;
515
- -ms-flex-direction: column;
516
- flex-direction: column;
517
- height: auto;
518
- }
519
-
520
- .c3 {
521
- border-bottom: 1px solid;
522
- border-color: #B52525;
523
- display: -webkit-box;
524
- display: -webkit-flex;
525
- display: -ms-flexbox;
526
- display: flex;
527
- -webkit-align-items: center;
528
- -webkit-box-align: center;
529
- -ms-flex-align: center;
530
- align-items: center;
531
- height: 32px;
532
- cursor: pointer;
533
- opacity: 1;
534
- border-color: #9E9E9E;
535
- }
536
-
537
- .c3:hover,
538
- .c3:focus-within {
539
- border-color: #B52525;
540
- }
541
-
542
- .c6 {
543
- font-family: 'Gordita',san-serif;
544
- border: none;
545
- color: #B52525;
546
- font-size: 16px;
547
- width: 100%;
548
- outline: none;
549
- cursor: pointer;
550
- -moz-appearance: textfield;
551
- }
552
-
553
- .c6::-webkit-input-placeholder {
554
- color: #D2D2D2;
555
- }
556
-
557
- .c6::-moz-placeholder {
558
- color: #D2D2D2;
559
- }
560
-
561
- .c6:-ms-input-placeholder {
562
- color: #D2D2D2;
563
- }
564
-
565
- .c6::placeholder {
566
- color: #D2D2D2;
567
- }
568
-
569
- .c6::-webkit-outer-spin-button,
570
- .c6::-webkit-inner-spin-button {
571
- -webkit-appearance: none;
572
- margin: 0;
573
- }
574
-
575
- .c11 {
576
- margin-top: 7px;
577
- color: #B52525;
578
- font-size: 12px;
579
- }
580
-
581
- .c5 {
582
- font-family: 'Gordita',san-serif;
583
- font-size: 16px;
584
- line-height: 19px;
585
- }
586
-
587
- .c7 {
588
- display: -webkit-box;
589
- display: -webkit-flex;
590
- display: -ms-flexbox;
591
- display: flex;
592
- position: relative;
593
- top: -3px;
594
- }
595
-
596
- .c8 {
597
- width: 24px;
598
- height: 24px;
599
- background-color: transparent;
600
- border: 0;
601
- padding: 0;
602
- cursor: pointer;
603
- }
604
-
605
- @media (min-width:768px) {
606
- .c2 {
607
- font-size: 10px;
608
- }
609
- }
610
-
611
- @media (min-width:768px) {
612
- .c4 {
613
- font-size: 16px;
614
- line-height: 26px;
615
- }
616
- }
617
-
618
- <div
619
- class="c0"
620
- >
621
- <div
622
- class="c1"
623
- >
624
- <label
625
- class="c2"
626
- color="grey4"
627
- cursor="inherit"
628
- title=""
629
- >
630
- Currency
631
-  
632
- </label>
633
- </div>
634
- <div
635
- class="c3"
636
- value="200"
637
- >
638
- <span
639
- class="c4 c5"
640
- color="blue7"
641
- cursor="inherit"
642
- title=""
643
- >
644
- $
645
- </span>
646
- <input
647
- class="c6"
648
- id="currencyInput"
649
- name="currencyInput"
650
- placeholder="100.00"
651
- type="number"
652
- value="200"
653
- />
654
- <div
655
- class="c7"
656
- >
657
- <button
658
- class="c8"
659
- >
660
- <span
661
- class="c9"
662
- color="grey4"
663
- rotate="180"
664
- size="24"
665
- >
666
- <svg
667
- fill="none"
668
- height="100%"
669
- viewBox="0 0 24 24"
670
- width="100%"
671
- xmlns="http://www.w3.org/2000/svg"
672
- >
673
- <path
674
- d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
675
- fill="#D2D2D2"
676
- />
677
- </svg>
678
- </span>
679
- </button>
680
- <button
681
- class="c8"
682
- >
683
- <span
684
- class="c10"
685
- color="grey4"
686
- rotate="0"
687
- size="24"
688
- >
689
- <svg
690
- fill="none"
691
- height="100%"
692
- viewBox="0 0 24 24"
693
- width="100%"
694
- xmlns="http://www.w3.org/2000/svg"
695
- >
696
- <path
697
- d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
698
- fill="#D2D2D2"
699
- />
700
- </svg>
701
- </span>
702
- </button>
703
- </div>
704
- </div>
705
- <span
706
- class="c11"
707
- >
708
- Oh gosh, this is an error isn't it!
709
- </span>
710
- </div>
711
- `;
712
-
713
- exports[`renders - number 1`] = `
714
- .c1 {
715
- margin-bottom: 0px;
716
- }
717
-
718
- .c2 {
719
- font-size: 8px;
720
- line-height: 100%;
721
- font-weight: 700;
722
- text-transform: uppercase;
723
- -webkit-letter-spacing: 0.75px;
724
- -moz-letter-spacing: 0.75px;
725
- -ms-letter-spacing: 0.75px;
726
- letter-spacing: 0.75px;
727
- margin: 0;
728
- padding: 0;
729
- color: #D2D2D2;
730
- text-align: left;
731
- cursor: inherit;
732
- -webkit-letter-spacing: 0.15px;
733
- -moz-letter-spacing: 0.15px;
734
- -ms-letter-spacing: 0.15px;
735
- letter-spacing: 0.15px;
736
- }
737
-
738
- .c0 {
739
- font-family: 'Gordita',san-serif;
740
- display: -webkit-box;
741
- display: -webkit-flex;
742
- display: -ms-flexbox;
743
- display: flex;
744
- -webkit-flex-direction: column;
745
- -ms-flex-direction: column;
746
- flex-direction: column;
747
- height: auto;
748
- }
749
-
750
- .c4 {
751
- border-bottom: 1px solid;
752
- border-color: #D2D2D2;
753
- display: -webkit-box;
754
- display: -webkit-flex;
755
- display: -ms-flexbox;
756
- display: flex;
757
- -webkit-align-items: center;
758
- -webkit-box-align: center;
759
- -ms-flex-align: center;
760
- align-items: center;
761
- height: 32px;
762
- cursor: pointer;
763
- opacity: 1;
764
- }
765
-
766
- .c4:hover,
767
- .c4:focus-within {
768
- border-color: #9E9E9E;
769
- }
770
-
771
- .c5 {
772
- font-family: 'Gordita',san-serif;
773
- border: none;
774
- color: #000000;
775
- font-size: 16px;
776
- width: 100%;
777
- outline: none;
778
- cursor: pointer;
779
- -moz-appearance: textfield;
780
- }
781
-
782
- .c5::-webkit-input-placeholder {
783
- color: #D2D2D2;
784
- }
785
-
786
- .c5::-moz-placeholder {
787
- color: #D2D2D2;
788
- }
789
-
790
- .c5:-ms-input-placeholder {
791
- color: #D2D2D2;
792
- }
793
-
794
- .c5::placeholder {
795
- color: #D2D2D2;
796
- }
797
-
798
- .c5::-webkit-outer-spin-button,
799
- .c5::-webkit-inner-spin-button {
800
- -webkit-appearance: none;
801
- margin: 0;
802
- }
803
-
804
- .c3 {
805
- font-size: 14px;
806
- color: #55D6AA;
807
- }
808
-
809
- @media (min-width:768px) {
810
- .c2 {
811
- font-size: 10px;
812
- }
813
- }
814
-
815
- <div
816
- class="c0"
817
- >
818
- <div
819
- class="c1"
820
- >
821
- <label
822
- class="c2"
823
- color="grey4"
824
- cursor="inherit"
825
- title=""
826
- >
827
- Number
828
-  
829
- <span
830
- class="c3"
831
- >
832
- *
833
- </span>
834
- </label>
835
- </div>
836
- <div
837
- class="c4"
838
- value=""
839
- >
840
- <input
841
- class="c5"
842
- id="numberInput"
843
- name="numberInput"
844
- placeholder="0.00"
845
- required=""
846
- type="number"
847
- value=""
848
- />
849
- </div>
850
- </div>
851
- `;
852
-
853
- exports[`renders - tel 1`] = `
854
- .c1 {
855
- margin-bottom: 0px;
856
- }
857
-
858
- .c2 {
859
- font-size: 8px;
860
- line-height: 100%;
861
- font-weight: 700;
862
- text-transform: uppercase;
863
- -webkit-letter-spacing: 0.75px;
864
- -moz-letter-spacing: 0.75px;
865
- -ms-letter-spacing: 0.75px;
866
- letter-spacing: 0.75px;
867
- margin: 0;
868
- padding: 0;
869
- color: #D2D2D2;
870
- text-align: left;
871
- cursor: inherit;
872
- -webkit-letter-spacing: 0.15px;
873
- -moz-letter-spacing: 0.15px;
874
- -ms-letter-spacing: 0.15px;
875
- letter-spacing: 0.15px;
876
- }
877
-
878
- .c4 {
879
- font-size: 14px;
880
- line-height: 23px;
881
- font-weight: 400;
882
- margin: 0;
883
- padding: 0;
884
- color: #112035;
885
- text-align: left;
886
- cursor: inherit;
887
- -webkit-letter-spacing: 0.15px;
888
- -moz-letter-spacing: 0.15px;
889
- -ms-letter-spacing: 0.15px;
890
- letter-spacing: 0.15px;
891
- }
892
-
893
- .c0 {
894
- font-family: 'Gordita',san-serif;
895
- display: -webkit-box;
896
- display: -webkit-flex;
897
- display: -ms-flexbox;
898
- display: flex;
899
- -webkit-flex-direction: column;
900
- -ms-flex-direction: column;
901
- flex-direction: column;
902
- height: auto;
903
- }
904
-
905
- .c3 {
906
- border-bottom: 1px solid;
907
- border-color: #D2D2D2;
908
- display: -webkit-box;
909
- display: -webkit-flex;
910
- display: -ms-flexbox;
911
- display: flex;
912
- -webkit-align-items: center;
913
- -webkit-box-align: center;
914
- -ms-flex-align: center;
915
- align-items: center;
916
- height: 32px;
917
- cursor: pointer;
918
- opacity: 1;
919
- }
920
-
921
- .c3:hover,
922
- .c3:focus-within {
923
- border-color: #9E9E9E;
924
- }
925
-
926
- .c6 {
927
- font-family: 'Gordita',san-serif;
928
- border: none;
929
- color: #000000;
930
- font-size: 16px;
931
- width: 100%;
932
- outline: none;
933
- cursor: pointer;
934
- -moz-appearance: textfield;
935
- }
936
-
937
- .c6::-webkit-input-placeholder {
938
- color: #D2D2D2;
939
- }
940
-
941
- .c6::-moz-placeholder {
942
- color: #D2D2D2;
943
- }
944
-
945
- .c6:-ms-input-placeholder {
946
- color: #D2D2D2;
947
- }
948
-
949
- .c6::placeholder {
950
- color: #D2D2D2;
951
- }
952
-
953
- .c6::-webkit-outer-spin-button,
954
- .c6::-webkit-inner-spin-button {
955
- -webkit-appearance: none;
956
- margin: 0;
957
- }
958
-
959
- .c5 {
960
- font-family: 'Gordita',san-serif;
961
- font-size: 16px;
962
- line-height: 19px;
963
- }
964
-
965
- @media (min-width:768px) {
966
- .c2 {
967
- font-size: 10px;
968
- }
969
- }
970
-
971
- @media (min-width:768px) {
972
- .c4 {
973
- font-size: 16px;
974
- line-height: 26px;
975
- }
976
- }
977
-
978
- <div
979
- class="c0"
980
- >
981
- <div
982
- class="c1"
983
- >
984
- <label
985
- class="c2"
986
- color="grey4"
987
- cursor="inherit"
988
- title=""
989
- >
990
- Telephone number
991
-  
992
- </label>
993
- </div>
994
- <div
995
- class="c3"
996
- value=""
997
- >
998
- <span
999
- class="c4 c5"
1000
- color="blue7"
1001
- cursor="inherit"
1002
- title=""
1003
- >
1004
- +44
1005
- </span>
1006
- <input
1007
- class="c6"
1008
- id="tel"
1009
- name="telephoneNumber"
1010
- placeholder="07446875876"
1011
- type="tel"
1012
- value=""
1013
- />
1014
- </div>
1015
- </div>
1016
- `;
1017
-
1018
- exports[`renders - with suffix 1`] = `
1019
- .c1 {
1020
- margin-bottom: 0px;
1021
- }
1022
-
1023
- .c5 {
1024
- padding-right: 8px;
1025
- }
1026
-
1027
- .c2 {
1028
- font-size: 8px;
1029
- line-height: 100%;
1030
- font-weight: 700;
1031
- text-transform: uppercase;
1032
- -webkit-letter-spacing: 0.75px;
1033
- -moz-letter-spacing: 0.75px;
1034
- -ms-letter-spacing: 0.75px;
1035
- letter-spacing: 0.75px;
1036
- margin: 0;
1037
- padding: 0;
1038
- color: #D2D2D2;
1039
- text-align: left;
1040
- cursor: inherit;
1041
- -webkit-letter-spacing: 0.15px;
1042
- -moz-letter-spacing: 0.15px;
1043
- -ms-letter-spacing: 0.15px;
1044
- letter-spacing: 0.15px;
1045
- }
1046
-
1047
- .c6 {
1048
- font-size: 14px;
1049
- line-height: 23px;
1050
- font-weight: 400;
1051
- margin: 0;
1052
- padding: 0;
1053
- color: #112035;
1054
- text-align: left;
1055
- cursor: inherit;
1056
- -webkit-letter-spacing: 0.15px;
1057
- -moz-letter-spacing: 0.15px;
1058
- -ms-letter-spacing: 0.15px;
1059
- letter-spacing: 0.15px;
1060
- }
1061
-
1062
- .c0 {
1063
- font-family: 'Gordita',san-serif;
1064
- display: -webkit-box;
1065
- display: -webkit-flex;
1066
- display: -ms-flexbox;
1067
- display: flex;
1068
- -webkit-flex-direction: column;
1069
- -ms-flex-direction: column;
1070
- flex-direction: column;
1071
- height: auto;
1072
- }
1073
-
1074
- .c3 {
1075
- border-bottom: 1px solid;
1076
- border-color: #D2D2D2;
1077
- display: -webkit-box;
1078
- display: -webkit-flex;
1079
- display: -ms-flexbox;
1080
- display: flex;
1081
- -webkit-align-items: center;
1082
- -webkit-box-align: center;
1083
- -ms-flex-align: center;
1084
- align-items: center;
1085
- height: 32px;
1086
- cursor: pointer;
1087
- opacity: 1;
1088
- }
1089
-
1090
- .c3:hover,
1091
- .c3:focus-within {
1092
- border-color: #9E9E9E;
1093
- }
1094
-
1095
- .c4 {
1096
- font-family: 'Gordita',san-serif;
1097
- border: none;
1098
- color: #000000;
1099
- font-size: 16px;
1100
- width: 100%;
1101
- outline: none;
1102
- cursor: pointer;
1103
- -moz-appearance: textfield;
1104
- }
1105
-
1106
- .c4::-webkit-input-placeholder {
1107
- color: #D2D2D2;
1108
- }
1109
-
1110
- .c4::-moz-placeholder {
1111
- color: #D2D2D2;
1112
- }
1113
-
1114
- .c4:-ms-input-placeholder {
1115
- color: #D2D2D2;
1116
- }
1117
-
1118
- .c4::placeholder {
1119
- color: #D2D2D2;
1120
- }
1121
-
1122
- .c4::-webkit-outer-spin-button,
1123
- .c4::-webkit-inner-spin-button {
1124
- -webkit-appearance: none;
1125
- margin: 0;
1126
- }
1127
-
1128
- .c7 {
1129
- font-family: 'Gordita',san-serif;
1130
- font-size: 16px;
1131
- line-height: 19px;
1132
- }
1133
-
1134
- @media (min-width:768px) {
1135
- .c2 {
1136
- font-size: 10px;
1137
- }
1138
- }
1139
-
1140
- @media (min-width:768px) {
1141
- .c6 {
1142
- font-size: 16px;
1143
- line-height: 26px;
1144
- }
1145
- }
1146
-
1147
- <div
1148
- class="c0"
1149
- >
1150
- <div
1151
- class="c1"
1152
- >
1153
- <label
1154
- class="c2"
1155
- color="grey4"
1156
- cursor="inherit"
1157
- title=""
1158
- >
1159
- Currency
1160
-  
1161
- </label>
1162
- </div>
1163
- <div
1164
- class="c3"
1165
- value=""
1166
- >
1167
- <input
1168
- class="c4"
1169
- id="currencyInput"
1170
- name="currencyInput"
1171
- placeholder="100.00"
1172
- type="number"
1173
- value=""
1174
- />
1175
- <div
1176
- class="c5"
1177
- >
1178
- <span
1179
- class="c6 c7"
1180
- color="blue7"
1181
- cursor="inherit"
1182
- title=""
1183
- >
1184
- miles
1185
- </span>
1186
- </div>
1187
- </div>
1188
- </div>
1189
- `;
1190
-
1191
- exports[`renders - with trailing icon 1`] = `
1192
- .c1 {
1193
- margin-bottom: 0px;
1194
- }
1195
-
1196
- .c2 {
1197
- font-size: 8px;
1198
- line-height: 100%;
1199
- font-weight: 700;
1200
- text-transform: uppercase;
1201
- -webkit-letter-spacing: 0.75px;
1202
- -moz-letter-spacing: 0.75px;
1203
- -ms-letter-spacing: 0.75px;
1204
- letter-spacing: 0.75px;
1205
- margin: 0;
1206
- padding: 0;
1207
- color: #D2D2D2;
1208
- text-align: left;
1209
- cursor: inherit;
1210
- -webkit-letter-spacing: 0.15px;
1211
- -moz-letter-spacing: 0.15px;
1212
- -ms-letter-spacing: 0.15px;
1213
- letter-spacing: 0.15px;
1214
- }
1215
-
1216
- .c4 {
1217
- font-size: 14px;
1218
- line-height: 23px;
1219
- font-weight: 400;
1220
- margin: 0;
1221
- padding: 0;
1222
- color: #112035;
1223
- text-align: left;
1224
- cursor: inherit;
1225
- -webkit-letter-spacing: 0.15px;
1226
- -moz-letter-spacing: 0.15px;
1227
- -ms-letter-spacing: 0.15px;
1228
- letter-spacing: 0.15px;
1229
- }
1230
-
1231
- .c7 {
1232
- display: -webkit-box;
1233
- display: -webkit-flex;
1234
- display: -ms-flexbox;
1235
- display: flex;
1236
- -webkit-align-items: center;
1237
- -webkit-box-align: center;
1238
- -ms-flex-align: center;
1239
- align-items: center;
1240
- -webkit-box-pack: center;
1241
- -webkit-justify-content: center;
1242
- -ms-flex-pack: center;
1243
- justify-content: center;
1244
- width: 100%;
1245
- max-width: 24px;
1246
- height: 24px;
1247
- -webkit-transform: rotate(0deg);
1248
- -ms-transform: rotate(0deg);
1249
- transform: rotate(0deg);
1250
- margin-top: 0;
1251
- margin-right: 0;
1252
- margin-bottom: 0;
1253
- margin-left: 0;
1254
- }
1255
-
1256
- .c0 {
1257
- font-family: 'Gordita',san-serif;
1258
- display: -webkit-box;
1259
- display: -webkit-flex;
1260
- display: -ms-flexbox;
1261
- display: flex;
1262
- -webkit-flex-direction: column;
1263
- -ms-flex-direction: column;
1264
- flex-direction: column;
1265
- height: auto;
1266
- }
1267
-
1268
- .c3 {
1269
- border-bottom: 1px solid;
1270
- border-color: #D2D2D2;
1271
- display: -webkit-box;
1272
- display: -webkit-flex;
1273
- display: -ms-flexbox;
1274
- display: flex;
1275
- -webkit-align-items: center;
1276
- -webkit-box-align: center;
1277
- -ms-flex-align: center;
1278
- align-items: center;
1279
- height: 32px;
1280
- cursor: pointer;
1281
- opacity: 1;
1282
- }
1283
-
1284
- .c3:hover,
1285
- .c3:focus-within {
1286
- border-color: #9E9E9E;
1287
- }
1288
-
1289
- .c6 {
1290
- font-family: 'Gordita',san-serif;
1291
- border: none;
1292
- color: #000000;
1293
- font-size: 16px;
1294
- width: 100%;
1295
- outline: none;
1296
- cursor: pointer;
1297
- -moz-appearance: textfield;
1298
- }
1299
-
1300
- .c6::-webkit-input-placeholder {
1301
- color: #D2D2D2;
1302
- }
1303
-
1304
- .c6::-moz-placeholder {
1305
- color: #D2D2D2;
1306
- }
1307
-
1308
- .c6:-ms-input-placeholder {
1309
- color: #D2D2D2;
1310
- }
1311
-
1312
- .c6::placeholder {
1313
- color: #D2D2D2;
1314
- }
1315
-
1316
- .c6::-webkit-outer-spin-button,
1317
- .c6::-webkit-inner-spin-button {
1318
- -webkit-appearance: none;
1319
- margin: 0;
1320
- }
1321
-
1322
- .c5 {
1323
- font-family: 'Gordita',san-serif;
1324
- font-size: 16px;
1325
- line-height: 19px;
1326
- }
1327
-
1328
- @media (min-width:768px) {
1329
- .c2 {
1330
- font-size: 10px;
1331
- }
1332
- }
1333
-
1334
- @media (min-width:768px) {
1335
- .c4 {
1336
- font-size: 16px;
1337
- line-height: 26px;
1338
- }
1339
- }
1340
-
1341
- <div
1342
- class="c0"
1343
- >
1344
- <div
1345
- class="c1"
1346
- >
1347
- <label
1348
- class="c2"
1349
- color="grey4"
1350
- cursor="inherit"
1351
- title=""
1352
- >
1353
- Currency
1354
-  
1355
- </label>
1356
- </div>
1357
- <div
1358
- class="c3"
1359
- value=""
1360
- >
1361
- <span
1362
- class="c4 c5"
1363
- color="blue7"
1364
- cursor="inherit"
1365
- title=""
1366
- >
1367
- $
1368
- </span>
1369
- <input
1370
- class="c6"
1371
- id="currencyInput"
1372
- name="currencyInput"
1373
- placeholder="100.00"
1374
- type="number"
1375
- value=""
1376
- />
1377
- <span
1378
- class="c7"
1379
- color="grey4"
1380
- rotate="0"
1381
- size="24"
1382
- >
1383
- <svg
1384
- fill="none"
1385
- height="100%"
1386
- viewBox="0 0 24 24"
1387
- width="100%"
1388
- xmlns="http://www.w3.org/2000/svg"
1389
- >
1390
- <path
1391
- d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10a1 1 0 100-2c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8c0 1.103-.897 2-2 2s-2-.897-2-2c0-2.206-1.794-4-4-4s-4 1.794-4 4 1.794 4 4 4c1.2 0 2.266-.542 3-1.382.734.84 1.8 1.382 3 1.382 2.206 0 4-1.794 4-4 0-5.514-4.486-10-10-10zm0 12c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"
1392
- fill="#D2D2D2"
1393
- />
1394
- </svg>
1395
- </span>
1396
- </div>
1397
- </div>
1398
- `;