@storybook/components 5.1.7 → 5.1.11

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 (25) hide show
  1. package/dist/syntaxhighlighter/syntaxhighlighter.js +1 -1
  2. package/dist/typings.d.js +1 -0
  3. package/package.json +4 -4
  4. package/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot +1 -1
  5. package/src/syntaxhighlighter/syntaxhighlighter.tsx +1 -1
  6. package/dist/Badge/__snapshots__/Badge.stories.storyshot +0 -96
  7. package/dist/Button/__snapshots__/Button.stories.storyshot +0 -1028
  8. package/dist/brand/__snapshots__/StorybookIcon.stories.storyshot +0 -36
  9. package/dist/form/__snapshots__/form.stories.storyshot +0 -2756
  10. package/dist/icon/__snapshots__/icon.stories.storyshot +0 -4960
  11. package/dist/spaced/__snapshots__/Spaced.stories.storyshot +0 -249
  12. package/dist/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot +0 -3971
  13. package/dist/syntaxhighlighter/formatter.test.js +0 -59
  14. package/dist/tabs/__snapshots__/tabs.stories.storyshot +0 -2029
  15. package/dist/tooltip/__snapshots__/ListItem.stories.storyshot +0 -1212
  16. package/dist/tooltip/__snapshots__/Tooltip.stories.storyshot +0 -269
  17. package/dist/tooltip/__snapshots__/TooltipLinkList.stories.storyshot +0 -326
  18. package/dist/tooltip/__snapshots__/TooltipMessage.stories.storyshot +0 -514
  19. package/dist/tooltip/__snapshots__/TooltipNote.stories.storyshot +0 -54
  20. package/dist/tooltip/__snapshots__/WithTooltip.stories.storyshot +0 -448
  21. package/dist/typings.d.ts +0 -4
  22. package/dist/typography/__snapshots__/typography.stories.storyshot +0 -186
  23. package/dist/typography/link/__snapshots__/link.stories.storyshot +0 -664
  24. package/dist/typography/link/link.test.d.ts +0 -1
  25. package/dist/typography/link/link.test.js +0 -162
@@ -1,1212 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
4
- .emotion-3 {
5
- shape-rendering: inherit;
6
- -webkit-transform: translate3d(0,0,0);
7
- -ms-transform: translate3d(0,0,0);
8
- transform: translate3d(0,0,0);
9
- display: block;
10
- }
11
-
12
- .emotion-2 {
13
- fill: currentColor;
14
- }
15
-
16
- .emotion-5 {
17
- font-size: 12px;
18
- -webkit-transition: all 150ms ease-out;
19
- transition: all 150ms ease-out;
20
- color: rgba(51,51,51,0.5);
21
- -webkit-text-decoration: none;
22
- text-decoration: none;
23
- cursor: pointer;
24
- -webkit-box-pack: justify;
25
- -webkit-justify-content: space-between;
26
- -ms-flex-pack: justify;
27
- justify-content: space-between;
28
- line-height: 18px;
29
- padding: 7px 15px;
30
- display: -webkit-box;
31
- display: -webkit-flex;
32
- display: -ms-flexbox;
33
- display: flex;
34
- -webkit-align-items: center;
35
- -webkit-box-align: center;
36
- -ms-flex-align: center;
37
- align-items: center;
38
- }
39
-
40
- .emotion-5 > * + * {
41
- padding-left: 10px;
42
- }
43
-
44
- .emotion-5:hover {
45
- background: rgba(0,0,0,.05);
46
- }
47
-
48
- .emotion-5:hover svg {
49
- opacity: 1;
50
- }
51
-
52
- .emotion-1 {
53
- -webkit-flex: 1;
54
- -ms-flex: 1;
55
- flex: 1;
56
- text-align: left;
57
- display: -webkit-inline-box;
58
- display: -webkit-inline-flex;
59
- display: -ms-inline-flexbox;
60
- display: inline-flex;
61
- }
62
-
63
- .emotion-1 > * + * {
64
- padding-left: 10px;
65
- }
66
-
67
- .emotion-0 {
68
- color: #333333;
69
- font-weight: 400;
70
- color: #FF4785;
71
- font-weight: 700;
72
- }
73
-
74
- .emotion-4 svg {
75
- -webkit-transition: all 200ms ease-out;
76
- transition: all 200ms ease-out;
77
- opacity: 0;
78
- height: 12px;
79
- width: 12px;
80
- margin: 3px 0;
81
- vertical-align: top;
82
- }
83
-
84
- .emotion-4 path {
85
- fill: inherit;
86
- }
87
-
88
- .emotion-4 svg {
89
- opacity: 1;
90
- }
91
-
92
- .emotion-4 path {
93
- fill: #FF4785;
94
- }
95
-
96
- <a
97
- class="emotion-5"
98
- >
99
- <span
100
- class="emotion-1"
101
- >
102
- <span
103
- class="emotion-0"
104
- >
105
- active icon
106
- </span>
107
- </span>
108
- <span
109
- class="emotion-4"
110
- >
111
- <svg
112
- class="emotion-3"
113
- viewBox="0 0 1024 1024"
114
- >
115
- <path
116
- class="emotion-2"
117
- d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
118
- />
119
- </svg>
120
- </span>
121
- </a>
122
- `;
123
-
124
- exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
125
- @keyframes animation-0 {
126
- 0%, 100% {
127
- opacity: 1;
128
- }
129
-
130
- 50% {
131
- opacity: .4;
132
- }
133
- }
134
-
135
- @keyframes animation-0 {
136
- 0%, 100% {
137
- opacity: 1;
138
- }
139
-
140
- 50% {
141
- opacity: .4;
142
- }
143
- }
144
-
145
- @keyframes animation-0 {
146
- 0%, 100% {
147
- opacity: 1;
148
- }
149
-
150
- 50% {
151
- opacity: .4;
152
- }
153
- }
154
-
155
- @keyframes animation-0 {
156
- 0%, 100% {
157
- opacity: 1;
158
- }
159
-
160
- 50% {
161
- opacity: .4;
162
- }
163
- }
164
-
165
- @keyframes animation-0 {
166
- 0%, 100% {
167
- opacity: 1;
168
- }
169
-
170
- 50% {
171
- opacity: .4;
172
- }
173
- }
174
-
175
- .emotion-9 {
176
- shape-rendering: inherit;
177
- -webkit-transform: translate3d(0,0,0);
178
- -ms-transform: translate3d(0,0,0);
179
- transform: translate3d(0,0,0);
180
- display: block;
181
- }
182
-
183
- .emotion-8 {
184
- fill: currentColor;
185
- }
186
-
187
- .emotion-2 {
188
- font-size: 12px;
189
- -webkit-transition: all 150ms ease-out;
190
- transition: all 150ms ease-out;
191
- color: rgba(51,51,51,0.5);
192
- -webkit-text-decoration: none;
193
- text-decoration: none;
194
- cursor: pointer;
195
- -webkit-box-pack: justify;
196
- -webkit-justify-content: space-between;
197
- -ms-flex-pack: justify;
198
- justify-content: space-between;
199
- line-height: 18px;
200
- padding: 7px 15px;
201
- display: -webkit-box;
202
- display: -webkit-flex;
203
- display: -ms-flexbox;
204
- display: flex;
205
- -webkit-align-items: center;
206
- -webkit-box-align: center;
207
- -ms-flex-align: center;
208
- align-items: center;
209
- }
210
-
211
- .emotion-2 > * + * {
212
- padding-left: 10px;
213
- }
214
-
215
- .emotion-2:hover {
216
- background: rgba(0,0,0,.05);
217
- }
218
-
219
- .emotion-2:hover svg {
220
- opacity: 1;
221
- }
222
-
223
- .emotion-1 {
224
- -webkit-flex: 1;
225
- -ms-flex: 1;
226
- flex: 1;
227
- text-align: left;
228
- display: -webkit-inline-box;
229
- display: -webkit-inline-flex;
230
- display: -ms-inline-flexbox;
231
- display: inline-flex;
232
- }
233
-
234
- .emotion-1 > * + * {
235
- padding-left: 10px;
236
- }
237
-
238
- .emotion-3 {
239
- color: #333333;
240
- font-weight: 400;
241
- }
242
-
243
- .emotion-0 {
244
- color: #333333;
245
- font-weight: 400;
246
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
247
- animation: animation-0 1.5s ease-in-out infinite;
248
- color: transparent;
249
- cursor: progress;
250
- }
251
-
252
- .emotion-10 svg {
253
- -webkit-transition: all 200ms ease-out;
254
- transition: all 200ms ease-out;
255
- opacity: 0;
256
- height: 12px;
257
- width: 12px;
258
- margin: 3px 0;
259
- vertical-align: top;
260
- }
261
-
262
- .emotion-10 path {
263
- fill: inherit;
264
- }
265
-
266
- .emotion-14 {
267
- -webkit-flex: 1;
268
- -ms-flex: 1;
269
- flex: 1;
270
- text-align: center;
271
- }
272
-
273
- .emotion-18 svg {
274
- opacity: 1;
275
- }
276
-
277
- .emotion-18 path {
278
- fill: #FF4785;
279
- }
280
-
281
- .emotion-19 {
282
- color: #333333;
283
- font-weight: 400;
284
- color: #FF4785;
285
- font-weight: 700;
286
- }
287
-
288
- .emotion-20 {
289
- -webkit-flex: 1;
290
- -ms-flex: 1;
291
- flex: 1;
292
- text-align: center;
293
- color: #FF4785;
294
- }
295
-
296
- .emotion-22 svg {
297
- -webkit-transition: all 200ms ease-out;
298
- transition: all 200ms ease-out;
299
- opacity: 0;
300
- height: 12px;
301
- width: 12px;
302
- margin: 3px 0;
303
- vertical-align: top;
304
- }
305
-
306
- .emotion-22 path {
307
- fill: inherit;
308
- }
309
-
310
- .emotion-22 svg {
311
- opacity: 1;
312
- }
313
-
314
- .emotion-22 path {
315
- fill: #FF4785;
316
- }
317
-
318
- .emotion-37 {
319
- font-size: 12px;
320
- -webkit-transition: all 150ms ease-out;
321
- transition: all 150ms ease-out;
322
- color: rgba(51,51,51,0.5);
323
- -webkit-text-decoration: none;
324
- text-decoration: none;
325
- cursor: pointer;
326
- -webkit-box-pack: justify;
327
- -webkit-justify-content: space-between;
328
- -ms-flex-pack: justify;
329
- justify-content: space-between;
330
- line-height: 18px;
331
- padding: 7px 15px;
332
- display: -webkit-box;
333
- display: -webkit-flex;
334
- display: -ms-flexbox;
335
- display: flex;
336
- -webkit-align-items: center;
337
- -webkit-box-align: center;
338
- -ms-flex-align: center;
339
- align-items: center;
340
- cursor: not-allowed;
341
- }
342
-
343
- .emotion-37 > * + * {
344
- padding-left: 10px;
345
- }
346
-
347
- .emotion-37:hover {
348
- background: rgba(0,0,0,.05);
349
- }
350
-
351
- .emotion-37:hover svg {
352
- opacity: 1;
353
- }
354
-
355
- .emotion-33 {
356
- color: #333333;
357
- font-weight: 400;
358
- color: rgba(51,51,51,0.3);
359
- }
360
-
361
- .emotion-34 {
362
- -webkit-flex: 1;
363
- -ms-flex: 1;
364
- flex: 1;
365
- text-align: center;
366
- color: #999999;
367
- }
368
-
369
- <div>
370
- <a
371
- class="emotion-2"
372
- >
373
- <span
374
- class="emotion-1"
375
- >
376
- <span
377
- class="emotion-0"
378
- >
379
- <span>
380
- Loading state
381
- </span>
382
- </span>
383
- </span>
384
- </a>
385
- <a
386
- class="emotion-2"
387
- >
388
- <span
389
- class="emotion-1"
390
- >
391
- <span
392
- class="emotion-3"
393
- >
394
- Default
395
- </span>
396
- </span>
397
- </a>
398
- <a
399
- class="emotion-2"
400
- >
401
- <span
402
- class="emotion-1"
403
- >
404
- <span
405
- class="emotion-3"
406
- >
407
- Default icon
408
- </span>
409
- </span>
410
- <span
411
- class="emotion-10"
412
- >
413
- <svg
414
- class="emotion-9"
415
- viewBox="0 0 1024 1024"
416
- >
417
- <path
418
- class="emotion-8"
419
- d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
420
- />
421
- </svg>
422
- </span>
423
- </a>
424
- <a
425
- class="emotion-2"
426
- >
427
- <span
428
- class="emotion-12"
429
- >
430
- left
431
- </span>
432
- <span
433
- class="emotion-1"
434
- >
435
- <span
436
- class="emotion-3"
437
- >
438
- title
439
- </span>
440
- <span
441
- class="emotion-14"
442
- >
443
- center
444
- </span>
445
- </span>
446
- <span
447
- class="emotion-10"
448
- >
449
- right
450
- </span>
451
- </a>
452
- <a
453
- class="emotion-2"
454
- >
455
- <span
456
- class="emotion-18"
457
- >
458
- left
459
- </span>
460
- <span
461
- class="emotion-1"
462
- >
463
- <span
464
- class="emotion-19"
465
- >
466
- active
467
- </span>
468
- <span
469
- class="emotion-20"
470
- >
471
- center
472
- </span>
473
- </span>
474
- <span
475
- class="emotion-22"
476
- >
477
- right
478
- </span>
479
- </a>
480
- <a
481
- class="emotion-2"
482
- >
483
- <span
484
- class="emotion-18"
485
- >
486
- left
487
- </span>
488
- <span
489
- class="emotion-1"
490
- >
491
- <span
492
- class="emotion-19"
493
- >
494
- active icon
495
- </span>
496
- <span
497
- class="emotion-20"
498
- >
499
- center
500
- </span>
501
- </span>
502
- <span
503
- class="emotion-22"
504
- >
505
- <svg
506
- class="emotion-9"
507
- viewBox="0 0 1024 1024"
508
- >
509
- <path
510
- class="emotion-8"
511
- d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
512
- />
513
- </svg>
514
- </span>
515
- </a>
516
- <a
517
- class="emotion-37"
518
- disabled=""
519
- >
520
- <span
521
- class="emotion-12"
522
- disabled=""
523
- >
524
- left
525
- </span>
526
- <span
527
- class="emotion-1"
528
- >
529
- <span
530
- class="emotion-33"
531
- disabled=""
532
- >
533
- disabled
534
- </span>
535
- <span
536
- class="emotion-34"
537
- disabled=""
538
- >
539
- center
540
- </span>
541
- </span>
542
- <span
543
- class="emotion-10"
544
- disabled=""
545
- >
546
- right
547
- </span>
548
- </a>
549
- </div>
550
- `;
551
-
552
- exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
553
- .emotion-2 {
554
- font-size: 12px;
555
- -webkit-transition: all 150ms ease-out;
556
- transition: all 150ms ease-out;
557
- color: rgba(51,51,51,0.5);
558
- -webkit-text-decoration: none;
559
- text-decoration: none;
560
- cursor: pointer;
561
- -webkit-box-pack: justify;
562
- -webkit-justify-content: space-between;
563
- -ms-flex-pack: justify;
564
- justify-content: space-between;
565
- line-height: 18px;
566
- padding: 7px 15px;
567
- display: -webkit-box;
568
- display: -webkit-flex;
569
- display: -ms-flexbox;
570
- display: flex;
571
- -webkit-align-items: center;
572
- -webkit-box-align: center;
573
- -ms-flex-align: center;
574
- align-items: center;
575
- }
576
-
577
- .emotion-2 > * + * {
578
- padding-left: 10px;
579
- }
580
-
581
- .emotion-2:hover {
582
- background: rgba(0,0,0,.05);
583
- }
584
-
585
- .emotion-2:hover svg {
586
- opacity: 1;
587
- }
588
-
589
- .emotion-1 {
590
- -webkit-flex: 1;
591
- -ms-flex: 1;
592
- flex: 1;
593
- text-align: left;
594
- display: -webkit-inline-box;
595
- display: -webkit-inline-flex;
596
- display: -ms-inline-flexbox;
597
- display: inline-flex;
598
- }
599
-
600
- .emotion-1 > * + * {
601
- padding-left: 10px;
602
- }
603
-
604
- .emotion-0 {
605
- color: #333333;
606
- font-weight: 400;
607
- }
608
-
609
- <a
610
- class="emotion-2"
611
- >
612
- <span
613
- class="emotion-1"
614
- >
615
- <span
616
- class="emotion-0"
617
- >
618
- Default
619
- </span>
620
- </span>
621
- </a>
622
- `;
623
-
624
- exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
625
- .emotion-3 {
626
- shape-rendering: inherit;
627
- -webkit-transform: translate3d(0,0,0);
628
- -ms-transform: translate3d(0,0,0);
629
- transform: translate3d(0,0,0);
630
- display: block;
631
- }
632
-
633
- .emotion-2 {
634
- fill: currentColor;
635
- }
636
-
637
- .emotion-5 {
638
- font-size: 12px;
639
- -webkit-transition: all 150ms ease-out;
640
- transition: all 150ms ease-out;
641
- color: rgba(51,51,51,0.5);
642
- -webkit-text-decoration: none;
643
- text-decoration: none;
644
- cursor: pointer;
645
- -webkit-box-pack: justify;
646
- -webkit-justify-content: space-between;
647
- -ms-flex-pack: justify;
648
- justify-content: space-between;
649
- line-height: 18px;
650
- padding: 7px 15px;
651
- display: -webkit-box;
652
- display: -webkit-flex;
653
- display: -ms-flexbox;
654
- display: flex;
655
- -webkit-align-items: center;
656
- -webkit-box-align: center;
657
- -ms-flex-align: center;
658
- align-items: center;
659
- }
660
-
661
- .emotion-5 > * + * {
662
- padding-left: 10px;
663
- }
664
-
665
- .emotion-5:hover {
666
- background: rgba(0,0,0,.05);
667
- }
668
-
669
- .emotion-5:hover svg {
670
- opacity: 1;
671
- }
672
-
673
- .emotion-1 {
674
- -webkit-flex: 1;
675
- -ms-flex: 1;
676
- flex: 1;
677
- text-align: left;
678
- display: -webkit-inline-box;
679
- display: -webkit-inline-flex;
680
- display: -ms-inline-flexbox;
681
- display: inline-flex;
682
- }
683
-
684
- .emotion-1 > * + * {
685
- padding-left: 10px;
686
- }
687
-
688
- .emotion-0 {
689
- color: #333333;
690
- font-weight: 400;
691
- }
692
-
693
- .emotion-4 svg {
694
- -webkit-transition: all 200ms ease-out;
695
- transition: all 200ms ease-out;
696
- opacity: 0;
697
- height: 12px;
698
- width: 12px;
699
- margin: 3px 0;
700
- vertical-align: top;
701
- }
702
-
703
- .emotion-4 path {
704
- fill: inherit;
705
- }
706
-
707
- <a
708
- class="emotion-5"
709
- >
710
- <span
711
- class="emotion-1"
712
- >
713
- <span
714
- class="emotion-0"
715
- >
716
- Default icon
717
- </span>
718
- </span>
719
- <span
720
- class="emotion-4"
721
- >
722
- <svg
723
- class="emotion-3"
724
- viewBox="0 0 1024 1024"
725
- >
726
- <path
727
- class="emotion-2"
728
- d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
729
- />
730
- </svg>
731
- </span>
732
- </a>
733
- `;
734
-
735
- exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
736
- .emotion-3 {
737
- -webkit-flex: 1;
738
- -ms-flex: 1;
739
- flex: 1;
740
- text-align: left;
741
- display: -webkit-inline-box;
742
- display: -webkit-inline-flex;
743
- display: -ms-inline-flexbox;
744
- display: inline-flex;
745
- }
746
-
747
- .emotion-3 > * + * {
748
- padding-left: 10px;
749
- }
750
-
751
- .emotion-4 svg {
752
- -webkit-transition: all 200ms ease-out;
753
- transition: all 200ms ease-out;
754
- opacity: 0;
755
- height: 12px;
756
- width: 12px;
757
- margin: 3px 0;
758
- vertical-align: top;
759
- }
760
-
761
- .emotion-4 path {
762
- fill: inherit;
763
- }
764
-
765
- .emotion-5 {
766
- font-size: 12px;
767
- -webkit-transition: all 150ms ease-out;
768
- transition: all 150ms ease-out;
769
- color: rgba(51,51,51,0.5);
770
- -webkit-text-decoration: none;
771
- text-decoration: none;
772
- cursor: pointer;
773
- -webkit-box-pack: justify;
774
- -webkit-justify-content: space-between;
775
- -ms-flex-pack: justify;
776
- justify-content: space-between;
777
- line-height: 18px;
778
- padding: 7px 15px;
779
- display: -webkit-box;
780
- display: -webkit-flex;
781
- display: -ms-flexbox;
782
- display: flex;
783
- -webkit-align-items: center;
784
- -webkit-box-align: center;
785
- -ms-flex-align: center;
786
- align-items: center;
787
- cursor: not-allowed;
788
- }
789
-
790
- .emotion-5 > * + * {
791
- padding-left: 10px;
792
- }
793
-
794
- .emotion-5:hover {
795
- background: rgba(0,0,0,.05);
796
- }
797
-
798
- .emotion-5:hover svg {
799
- opacity: 1;
800
- }
801
-
802
- .emotion-1 {
803
- color: #333333;
804
- font-weight: 400;
805
- color: rgba(51,51,51,0.3);
806
- }
807
-
808
- .emotion-2 {
809
- -webkit-flex: 1;
810
- -ms-flex: 1;
811
- flex: 1;
812
- text-align: center;
813
- color: #999999;
814
- }
815
-
816
- <a
817
- class="emotion-5"
818
- disabled=""
819
- >
820
- <span
821
- class="emotion-0"
822
- disabled=""
823
- >
824
- left
825
- </span>
826
- <span
827
- class="emotion-3"
828
- >
829
- <span
830
- class="emotion-1"
831
- disabled=""
832
- >
833
- disabled
834
- </span>
835
- <span
836
- class="emotion-2"
837
- disabled=""
838
- >
839
- center
840
- </span>
841
- </span>
842
- <span
843
- class="emotion-4"
844
- disabled=""
845
- >
846
- right
847
- </span>
848
- </a>
849
- `;
850
-
851
- exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
852
- @keyframes animation-0 {
853
- 0%, 100% {
854
- opacity: 1;
855
- }
856
-
857
- 50% {
858
- opacity: .4;
859
- }
860
- }
861
-
862
- @keyframes animation-0 {
863
- 0%, 100% {
864
- opacity: 1;
865
- }
866
-
867
- 50% {
868
- opacity: .4;
869
- }
870
- }
871
-
872
- @keyframes animation-0 {
873
- 0%, 100% {
874
- opacity: 1;
875
- }
876
-
877
- 50% {
878
- opacity: .4;
879
- }
880
- }
881
-
882
- @keyframes animation-0 {
883
- 0%, 100% {
884
- opacity: 1;
885
- }
886
-
887
- 50% {
888
- opacity: .4;
889
- }
890
- }
891
-
892
- @keyframes animation-0 {
893
- 0%, 100% {
894
- opacity: 1;
895
- }
896
-
897
- 50% {
898
- opacity: .4;
899
- }
900
- }
901
-
902
- .emotion-2 {
903
- font-size: 12px;
904
- -webkit-transition: all 150ms ease-out;
905
- transition: all 150ms ease-out;
906
- color: rgba(51,51,51,0.5);
907
- -webkit-text-decoration: none;
908
- text-decoration: none;
909
- cursor: pointer;
910
- -webkit-box-pack: justify;
911
- -webkit-justify-content: space-between;
912
- -ms-flex-pack: justify;
913
- justify-content: space-between;
914
- line-height: 18px;
915
- padding: 7px 15px;
916
- display: -webkit-box;
917
- display: -webkit-flex;
918
- display: -ms-flexbox;
919
- display: flex;
920
- -webkit-align-items: center;
921
- -webkit-box-align: center;
922
- -ms-flex-align: center;
923
- align-items: center;
924
- }
925
-
926
- .emotion-2 > * + * {
927
- padding-left: 10px;
928
- }
929
-
930
- .emotion-2:hover {
931
- background: rgba(0,0,0,.05);
932
- }
933
-
934
- .emotion-2:hover svg {
935
- opacity: 1;
936
- }
937
-
938
- .emotion-1 {
939
- -webkit-flex: 1;
940
- -ms-flex: 1;
941
- flex: 1;
942
- text-align: left;
943
- display: -webkit-inline-box;
944
- display: -webkit-inline-flex;
945
- display: -ms-inline-flexbox;
946
- display: inline-flex;
947
- }
948
-
949
- .emotion-1 > * + * {
950
- padding-left: 10px;
951
- }
952
-
953
- .emotion-0 {
954
- color: #333333;
955
- font-weight: 400;
956
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
957
- animation: animation-0 1.5s ease-in-out infinite;
958
- color: transparent;
959
- cursor: progress;
960
- }
961
-
962
- <a
963
- class="emotion-2"
964
- >
965
- <span
966
- class="emotion-1"
967
- >
968
- <span
969
- class="emotion-0"
970
- >
971
- <span>
972
- Loading state
973
- </span>
974
- </span>
975
- </span>
976
- </a>
977
- `;
978
-
979
- exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
980
- .emotion-5 {
981
- font-size: 12px;
982
- -webkit-transition: all 150ms ease-out;
983
- transition: all 150ms ease-out;
984
- color: rgba(51,51,51,0.5);
985
- -webkit-text-decoration: none;
986
- text-decoration: none;
987
- cursor: pointer;
988
- -webkit-box-pack: justify;
989
- -webkit-justify-content: space-between;
990
- -ms-flex-pack: justify;
991
- justify-content: space-between;
992
- line-height: 18px;
993
- padding: 7px 15px;
994
- display: -webkit-box;
995
- display: -webkit-flex;
996
- display: -ms-flexbox;
997
- display: flex;
998
- -webkit-align-items: center;
999
- -webkit-box-align: center;
1000
- -ms-flex-align: center;
1001
- align-items: center;
1002
- }
1003
-
1004
- .emotion-5 > * + * {
1005
- padding-left: 10px;
1006
- }
1007
-
1008
- .emotion-5:hover {
1009
- background: rgba(0,0,0,.05);
1010
- }
1011
-
1012
- .emotion-5:hover svg {
1013
- opacity: 1;
1014
- }
1015
-
1016
- .emotion-3 {
1017
- -webkit-flex: 1;
1018
- -ms-flex: 1;
1019
- flex: 1;
1020
- text-align: left;
1021
- display: -webkit-inline-box;
1022
- display: -webkit-inline-flex;
1023
- display: -ms-inline-flexbox;
1024
- display: inline-flex;
1025
- }
1026
-
1027
- .emotion-3 > * + * {
1028
- padding-left: 10px;
1029
- }
1030
-
1031
- .emotion-1 {
1032
- color: #333333;
1033
- font-weight: 400;
1034
- }
1035
-
1036
- .emotion-4 svg {
1037
- -webkit-transition: all 200ms ease-out;
1038
- transition: all 200ms ease-out;
1039
- opacity: 0;
1040
- height: 12px;
1041
- width: 12px;
1042
- margin: 3px 0;
1043
- vertical-align: top;
1044
- }
1045
-
1046
- .emotion-4 path {
1047
- fill: inherit;
1048
- }
1049
-
1050
- .emotion-2 {
1051
- -webkit-flex: 1;
1052
- -ms-flex: 1;
1053
- flex: 1;
1054
- text-align: center;
1055
- }
1056
-
1057
- <a
1058
- class="emotion-5"
1059
- >
1060
- <span
1061
- class="emotion-0"
1062
- >
1063
- left
1064
- </span>
1065
- <span
1066
- class="emotion-3"
1067
- >
1068
- <span
1069
- class="emotion-1"
1070
- >
1071
- title
1072
- </span>
1073
- <span
1074
- class="emotion-2"
1075
- >
1076
- center
1077
- </span>
1078
- </span>
1079
- <span
1080
- class="emotion-4"
1081
- >
1082
- right
1083
- </span>
1084
- </a>
1085
- `;
1086
-
1087
- exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
1088
- .emotion-5 {
1089
- font-size: 12px;
1090
- -webkit-transition: all 150ms ease-out;
1091
- transition: all 150ms ease-out;
1092
- color: rgba(51,51,51,0.5);
1093
- -webkit-text-decoration: none;
1094
- text-decoration: none;
1095
- cursor: pointer;
1096
- -webkit-box-pack: justify;
1097
- -webkit-justify-content: space-between;
1098
- -ms-flex-pack: justify;
1099
- justify-content: space-between;
1100
- line-height: 18px;
1101
- padding: 7px 15px;
1102
- display: -webkit-box;
1103
- display: -webkit-flex;
1104
- display: -ms-flexbox;
1105
- display: flex;
1106
- -webkit-align-items: center;
1107
- -webkit-box-align: center;
1108
- -ms-flex-align: center;
1109
- align-items: center;
1110
- }
1111
-
1112
- .emotion-5 > * + * {
1113
- padding-left: 10px;
1114
- }
1115
-
1116
- .emotion-5:hover {
1117
- background: rgba(0,0,0,.05);
1118
- }
1119
-
1120
- .emotion-5:hover svg {
1121
- opacity: 1;
1122
- }
1123
-
1124
- .emotion-3 {
1125
- -webkit-flex: 1;
1126
- -ms-flex: 1;
1127
- flex: 1;
1128
- text-align: left;
1129
- display: -webkit-inline-box;
1130
- display: -webkit-inline-flex;
1131
- display: -ms-inline-flexbox;
1132
- display: inline-flex;
1133
- }
1134
-
1135
- .emotion-3 > * + * {
1136
- padding-left: 10px;
1137
- }
1138
-
1139
- .emotion-0 svg {
1140
- opacity: 1;
1141
- }
1142
-
1143
- .emotion-0 path {
1144
- fill: #FF4785;
1145
- }
1146
-
1147
- .emotion-1 {
1148
- color: #333333;
1149
- font-weight: 400;
1150
- color: #FF4785;
1151
- font-weight: 700;
1152
- }
1153
-
1154
- .emotion-2 {
1155
- -webkit-flex: 1;
1156
- -ms-flex: 1;
1157
- flex: 1;
1158
- text-align: center;
1159
- color: #FF4785;
1160
- }
1161
-
1162
- .emotion-4 svg {
1163
- -webkit-transition: all 200ms ease-out;
1164
- transition: all 200ms ease-out;
1165
- opacity: 0;
1166
- height: 12px;
1167
- width: 12px;
1168
- margin: 3px 0;
1169
- vertical-align: top;
1170
- }
1171
-
1172
- .emotion-4 path {
1173
- fill: inherit;
1174
- }
1175
-
1176
- .emotion-4 svg {
1177
- opacity: 1;
1178
- }
1179
-
1180
- .emotion-4 path {
1181
- fill: #FF4785;
1182
- }
1183
-
1184
- <a
1185
- class="emotion-5"
1186
- >
1187
- <span
1188
- class="emotion-0"
1189
- >
1190
- left
1191
- </span>
1192
- <span
1193
- class="emotion-3"
1194
- >
1195
- <span
1196
- class="emotion-1"
1197
- >
1198
- active
1199
- </span>
1200
- <span
1201
- class="emotion-2"
1202
- >
1203
- center
1204
- </span>
1205
- </span>
1206
- <span
1207
- class="emotion-4"
1208
- >
1209
- right
1210
- </span>
1211
- </a>
1212
- `;