@storybook/components 5.1.6 → 5.1.10

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,3971 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Storyshots Basics|SyntaxHighlighter bash 1`] = `
4
- .emotion-2 {
5
- overflow-y: auto;
6
- height: 100%;
7
- overflow-x: auto;
8
- width: 100%;
9
- position: relative;
10
- }
11
-
12
- .emotion-2 code {
13
- padding-right: 10px;
14
- }
15
-
16
- .emotion-2 * .token {
17
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
18
- -webkit-font-smoothing: antialiased;
19
- }
20
-
21
- .emotion-2 * .token.comment {
22
- color: #008000;
23
- font-style: italic;
24
- }
25
-
26
- .emotion-2 * .token.prolog {
27
- color: #008000;
28
- font-style: italic;
29
- }
30
-
31
- .emotion-2 * .token.doctype {
32
- color: #008000;
33
- font-style: italic;
34
- }
35
-
36
- .emotion-2 * .token.cdata {
37
- color: #008000;
38
- font-style: italic;
39
- }
40
-
41
- .emotion-2 * .token.string {
42
- color: #A31515;
43
- }
44
-
45
- .emotion-2 * .token.punctuation {
46
- color: #393A34;
47
- }
48
-
49
- .emotion-2 * .token.operator {
50
- color: #393A34;
51
- }
52
-
53
- .emotion-2 * .token.url {
54
- color: #36acaa;
55
- }
56
-
57
- .emotion-2 * .token.symbol {
58
- color: #36acaa;
59
- }
60
-
61
- .emotion-2 * .token.number {
62
- color: #36acaa;
63
- }
64
-
65
- .emotion-2 * .token.boolean {
66
- color: #36acaa;
67
- }
68
-
69
- .emotion-2 * .token.variable {
70
- color: #36acaa;
71
- }
72
-
73
- .emotion-2 * .token.constant {
74
- color: #36acaa;
75
- }
76
-
77
- .emotion-2 * .token.inserted {
78
- color: #36acaa;
79
- }
80
-
81
- .emotion-2 * .token.atrule {
82
- color: #0000ff;
83
- }
84
-
85
- .emotion-2 * .token.keyword {
86
- color: #0000ff;
87
- }
88
-
89
- .emotion-2 * .token.attr-value {
90
- color: #0000ff;
91
- }
92
-
93
- .emotion-2 * .token.function {
94
- color: #393A34;
95
- }
96
-
97
- .emotion-2 * .token.deleted {
98
- color: #9a050f;
99
- }
100
-
101
- .emotion-2 * .token.important {
102
- font-weight: bold;
103
- }
104
-
105
- .emotion-2 * .token.bold {
106
- font-weight: bold;
107
- }
108
-
109
- .emotion-2 * .token.italic {
110
- font-style: italic;
111
- }
112
-
113
- .emotion-2 * .token.class-name {
114
- color: #2B91AF;
115
- }
116
-
117
- .emotion-2 * .token.tag {
118
- color: #800000;
119
- }
120
-
121
- .emotion-2 * .token.selector {
122
- color: #800000;
123
- }
124
-
125
- .emotion-2 * .token.attr-name {
126
- color: #ff0000;
127
- }
128
-
129
- .emotion-2 * .token.property {
130
- color: #ff0000;
131
- }
132
-
133
- .emotion-2 * .token.regex {
134
- color: #ff0000;
135
- }
136
-
137
- .emotion-2 * .token.entity {
138
- color: #ff0000;
139
- }
140
-
141
- .emotion-2 * .token.directive.tag .tag {
142
- background: #ffff00;
143
- color: #393A34;
144
- }
145
-
146
- .emotion-2 * .language-json .token.boolean {
147
- color: #0000ff;
148
- }
149
-
150
- .emotion-2 * .language-json .token.number {
151
- color: #0000ff;
152
- }
153
-
154
- .emotion-2 * .language-json .token.property {
155
- color: #2B91AF;
156
- }
157
-
158
- .emotion-2 * .namespace {
159
- opacity: 0.7;
160
- }
161
-
162
- .emotion-0 {
163
- -webkit-flex: 1;
164
- -ms-flex: 1;
165
- flex: 1;
166
- padding-right: 0;
167
- opacity: 1;
168
- }
169
-
170
- .emotion-3 {
171
- position: relative;
172
- overflow: hidden;
173
- color: #333333;
174
- }
175
-
176
- .emotion-1 {
177
- display: -webkit-box;
178
- display: -webkit-flex;
179
- display: -ms-flexbox;
180
- display: flex;
181
- -webkit-box-pack: start;
182
- -webkit-justify-content: flex-start;
183
- -ms-flex-pack: start;
184
- justify-content: flex-start;
185
- margin: 0;
186
- padding: 0;
187
- }
188
-
189
- <div
190
- class="emotion-3"
191
- >
192
- <div
193
- class="emotion-2"
194
- data-simplebar="true"
195
- >
196
- <div
197
- class="simplebar-wrapper"
198
- >
199
- <div
200
- class="simplebar-height-auto-observer-wrapper"
201
- >
202
- <div
203
- class="simplebar-height-auto-observer"
204
- />
205
- </div>
206
- <div
207
- class="simplebar-mask"
208
- >
209
- <div
210
- class="simplebar-offset"
211
- >
212
- <div
213
- class="simplebar-content-wrapper"
214
- >
215
- <div
216
- class="simplebar-content"
217
- >
218
- <pre
219
- class="hljs emotion-1"
220
- >
221
- <code
222
- class="emotion-0"
223
- >
224
- npx npm-check-updates
225
- <span
226
- class="token string"
227
- >
228
- '/storybook/'
229
- </span>
230
- -u
231
- <span
232
- class="token operator"
233
- >
234
- &&
235
- </span>
236
-
237
- <span
238
- class="token function"
239
- >
240
- npm
241
- </span>
242
-
243
- <span
244
- class="token function"
245
- >
246
- install
247
- </span>
248
- </code>
249
- </pre>
250
- </div>
251
- </div>
252
- </div>
253
- </div>
254
- <div
255
- class="simplebar-placeholder"
256
- />
257
- </div>
258
- <div
259
- class="simplebar-track simplebar-horizontal"
260
- >
261
- <div
262
- class="simplebar-scrollbar"
263
- />
264
- </div>
265
- <div
266
- class="simplebar-track simplebar-vertical"
267
- >
268
- <div
269
- class="simplebar-scrollbar"
270
- />
271
- </div>
272
- </div>
273
- </div>
274
- `;
275
-
276
- exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
277
- .emotion-5 {
278
- position: relative;
279
- overflow: hidden;
280
- color: #333333;
281
- border: 1px solid rgba(0,0,0,.1);
282
- background: #FFFFFF;
283
- }
284
-
285
- .emotion-2 {
286
- overflow-y: auto;
287
- height: 100%;
288
- overflow-x: auto;
289
- width: 100%;
290
- position: relative;
291
- }
292
-
293
- .emotion-2 code {
294
- padding-right: 10px;
295
- }
296
-
297
- .emotion-2 * .token {
298
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
299
- -webkit-font-smoothing: antialiased;
300
- }
301
-
302
- .emotion-2 * .token.comment {
303
- color: #008000;
304
- font-style: italic;
305
- }
306
-
307
- .emotion-2 * .token.prolog {
308
- color: #008000;
309
- font-style: italic;
310
- }
311
-
312
- .emotion-2 * .token.doctype {
313
- color: #008000;
314
- font-style: italic;
315
- }
316
-
317
- .emotion-2 * .token.cdata {
318
- color: #008000;
319
- font-style: italic;
320
- }
321
-
322
- .emotion-2 * .token.string {
323
- color: #A31515;
324
- }
325
-
326
- .emotion-2 * .token.punctuation {
327
- color: #393A34;
328
- }
329
-
330
- .emotion-2 * .token.operator {
331
- color: #393A34;
332
- }
333
-
334
- .emotion-2 * .token.url {
335
- color: #36acaa;
336
- }
337
-
338
- .emotion-2 * .token.symbol {
339
- color: #36acaa;
340
- }
341
-
342
- .emotion-2 * .token.number {
343
- color: #36acaa;
344
- }
345
-
346
- .emotion-2 * .token.boolean {
347
- color: #36acaa;
348
- }
349
-
350
- .emotion-2 * .token.variable {
351
- color: #36acaa;
352
- }
353
-
354
- .emotion-2 * .token.constant {
355
- color: #36acaa;
356
- }
357
-
358
- .emotion-2 * .token.inserted {
359
- color: #36acaa;
360
- }
361
-
362
- .emotion-2 * .token.atrule {
363
- color: #0000ff;
364
- }
365
-
366
- .emotion-2 * .token.keyword {
367
- color: #0000ff;
368
- }
369
-
370
- .emotion-2 * .token.attr-value {
371
- color: #0000ff;
372
- }
373
-
374
- .emotion-2 * .token.function {
375
- color: #393A34;
376
- }
377
-
378
- .emotion-2 * .token.deleted {
379
- color: #9a050f;
380
- }
381
-
382
- .emotion-2 * .token.important {
383
- font-weight: bold;
384
- }
385
-
386
- .emotion-2 * .token.bold {
387
- font-weight: bold;
388
- }
389
-
390
- .emotion-2 * .token.italic {
391
- font-style: italic;
392
- }
393
-
394
- .emotion-2 * .token.class-name {
395
- color: #2B91AF;
396
- }
397
-
398
- .emotion-2 * .token.tag {
399
- color: #800000;
400
- }
401
-
402
- .emotion-2 * .token.selector {
403
- color: #800000;
404
- }
405
-
406
- .emotion-2 * .token.attr-name {
407
- color: #ff0000;
408
- }
409
-
410
- .emotion-2 * .token.property {
411
- color: #ff0000;
412
- }
413
-
414
- .emotion-2 * .token.regex {
415
- color: #ff0000;
416
- }
417
-
418
- .emotion-2 * .token.entity {
419
- color: #ff0000;
420
- }
421
-
422
- .emotion-2 * .token.directive.tag .tag {
423
- background: #ffff00;
424
- color: #393A34;
425
- }
426
-
427
- .emotion-2 * .language-json .token.boolean {
428
- color: #0000ff;
429
- }
430
-
431
- .emotion-2 * .language-json .token.number {
432
- color: #0000ff;
433
- }
434
-
435
- .emotion-2 * .language-json .token.property {
436
- color: #2B91AF;
437
- }
438
-
439
- .emotion-2 * .namespace {
440
- opacity: 0.7;
441
- }
442
-
443
- .emotion-1 {
444
- display: -webkit-box;
445
- display: -webkit-flex;
446
- display: -ms-flexbox;
447
- display: flex;
448
- -webkit-box-pack: start;
449
- -webkit-justify-content: flex-start;
450
- -ms-flex-pack: start;
451
- justify-content: flex-start;
452
- margin: 0;
453
- padding: 10px;
454
- }
455
-
456
- .emotion-0 {
457
- -webkit-flex: 1;
458
- -ms-flex: 1;
459
- flex: 1;
460
- padding-right: 0;
461
- opacity: 1;
462
- }
463
-
464
- .emotion-4 {
465
- position: absolute;
466
- bottom: 0;
467
- right: 0;
468
- max-width: 100%;
469
- display: -webkit-box;
470
- display: -webkit-flex;
471
- display: -ms-flexbox;
472
- display: flex;
473
- background: #FFFFFF;
474
- }
475
-
476
- .emotion-3 {
477
- border: 0 none;
478
- padding: 4px 10px;
479
- cursor: pointer;
480
- display: -webkit-box;
481
- display: -webkit-flex;
482
- display: -ms-flexbox;
483
- display: flex;
484
- -webkit-align-items: center;
485
- -webkit-box-align: center;
486
- -ms-flex-align: center;
487
- align-items: center;
488
- color: #333333;
489
- background: #FFFFFF;
490
- font-size: 12px;
491
- line-height: 16px;
492
- font-weight: 700;
493
- border-top: 1px solid rgba(0,0,0,.1);
494
- border-left: 1px solid rgba(0,0,0,.1);
495
- margin-left: -1px;
496
- border-radius: 4px 0 0 0;
497
- }
498
-
499
- .emotion-3:not(:last-child) {
500
- border-right: 1px solid rgba(0,0,0,.1);
501
- }
502
-
503
- .emotion-3 + * {
504
- border-left: 1px solid rgba(0,0,0,.1);
505
- border-radius: 0;
506
- }
507
-
508
- .emotion-3:focus {
509
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
510
- outline: 0 none;
511
- }
512
-
513
- <div
514
- class="emotion-5"
515
- >
516
- <div
517
- class="emotion-2"
518
- data-simplebar="true"
519
- >
520
- <div
521
- class="simplebar-wrapper"
522
- >
523
- <div
524
- class="simplebar-height-auto-observer-wrapper"
525
- >
526
- <div
527
- class="simplebar-height-auto-observer"
528
- />
529
- </div>
530
- <div
531
- class="simplebar-mask"
532
- >
533
- <div
534
- class="simplebar-offset"
535
- >
536
- <div
537
- class="simplebar-content-wrapper"
538
- >
539
- <div
540
- class="simplebar-content"
541
- >
542
- <pre
543
- class="hljs emotion-1"
544
- >
545
- <code
546
- class="emotion-0"
547
- >
548
- <span
549
- class="token keyword"
550
- >
551
- import
552
- </span>
553
-
554
- <span
555
- class="token punctuation"
556
- >
557
- {
558
- </span>
559
- Good
560
- <span
561
- class="token punctuation"
562
- >
563
- ,
564
- </span>
565
- Things
566
- <span
567
- class="token punctuation"
568
- >
569
- }
570
- </span>
571
-
572
- <span
573
- class="token keyword"
574
- >
575
- from
576
- </span>
577
-
578
- <span
579
- class="token string"
580
- >
581
- 'life'
582
- </span>
583
- <span
584
- class="token punctuation"
585
- >
586
- ;
587
- </span>
588
-
589
-
590
-
591
- <span
592
- class="token keyword"
593
- >
594
- const
595
- </span>
596
-
597
- <span
598
- class="token function-variable function"
599
- >
600
- result
601
- </span>
602
-
603
- <span
604
- class="token operator"
605
- >
606
- =
607
- </span>
608
-
609
- <span
610
- class="token punctuation"
611
- >
612
- (
613
- </span>
614
- <span
615
- class="token punctuation"
616
- >
617
- )
618
- </span>
619
-
620
- <span
621
- class="token operator"
622
- >
623
- =&gt;
624
- </span>
625
-
626
- <span
627
- class="token tag"
628
- >
629
- <span
630
- class="token tag"
631
- >
632
- <span
633
- class="token punctuation"
634
- >
635
- &lt;
636
- </span>
637
- <span
638
- class="token class-name"
639
- >
640
- Good
641
- </span>
642
- </span>
643
- <span
644
- class="token punctuation"
645
- >
646
- &gt;
647
- </span>
648
- </span>
649
- <span
650
- class="token tag"
651
- >
652
- <span
653
- class="token tag"
654
- >
655
- <span
656
- class="token punctuation"
657
- >
658
- &lt;
659
- </span>
660
- <span
661
- class="token class-name"
662
- >
663
- Things
664
- </span>
665
- </span>
666
-
667
- <span
668
- class="token punctuation"
669
- >
670
- /&gt;
671
- </span>
672
- </span>
673
- <span
674
- class="token tag"
675
- >
676
- <span
677
- class="token tag"
678
- >
679
- <span
680
- class="token punctuation"
681
- >
682
- &lt;/
683
- </span>
684
- <span
685
- class="token class-name"
686
- >
687
- Good
688
- </span>
689
- </span>
690
- <span
691
- class="token punctuation"
692
- >
693
- &gt;
694
- </span>
695
- </span>
696
- <span
697
- class="token punctuation"
698
- >
699
- ;
700
- </span>
701
-
702
-
703
-
704
- <span
705
- class="token keyword"
706
- >
707
- export
708
- </span>
709
-
710
- <span
711
- class="token punctuation"
712
- >
713
- {
714
- </span>
715
- result
716
- <span
717
- class="token keyword"
718
- >
719
- as
720
- </span>
721
-
722
- <span
723
- class="token keyword"
724
- >
725
- default
726
- </span>
727
-
728
- <span
729
- class="token punctuation"
730
- >
731
- }
732
- </span>
733
- <span
734
- class="token punctuation"
735
- >
736
- ;
737
- </span>
738
- </code>
739
- </pre>
740
- </div>
741
- </div>
742
- </div>
743
- </div>
744
- <div
745
- class="simplebar-placeholder"
746
- />
747
- </div>
748
- <div
749
- class="simplebar-track simplebar-horizontal"
750
- >
751
- <div
752
- class="simplebar-scrollbar"
753
- />
754
- </div>
755
- <div
756
- class="simplebar-track simplebar-vertical"
757
- >
758
- <div
759
- class="simplebar-scrollbar"
760
- />
761
- </div>
762
- </div>
763
- <div
764
- class="emotion-4"
765
- >
766
- <button
767
- class="emotion-3"
768
- >
769
- Copy
770
- </button>
771
- </div>
772
- </div>
773
- `;
774
-
775
- exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = `
776
- .emotion-1 {
777
- display: -webkit-box;
778
- display: -webkit-flex;
779
- display: -ms-flexbox;
780
- display: flex;
781
- -webkit-box-pack: start;
782
- -webkit-justify-content: flex-start;
783
- -ms-flex-pack: start;
784
- justify-content: flex-start;
785
- margin: 0;
786
- padding: 10px;
787
- }
788
-
789
- .emotion-0 {
790
- -webkit-flex: 1;
791
- -ms-flex: 1;
792
- flex: 1;
793
- padding-right: 0;
794
- opacity: 1;
795
- }
796
-
797
- .emotion-5 {
798
- position: relative;
799
- overflow: hidden;
800
- color: #FFFFFF;
801
- border: 1px solid rgba(255,255,255,.1);
802
- background: #333333;
803
- }
804
-
805
- .emotion-2 {
806
- overflow-y: auto;
807
- height: 100%;
808
- overflow-x: auto;
809
- width: 100%;
810
- position: relative;
811
- }
812
-
813
- .emotion-2 code {
814
- padding-right: 10px;
815
- }
816
-
817
- .emotion-2 * .token {
818
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
819
- -webkit-font-smoothing: antialiased;
820
- }
821
-
822
- .emotion-2 * .token.comment {
823
- color: #7C7C7C;
824
- font-style: italic;
825
- }
826
-
827
- .emotion-2 * .token.prolog {
828
- color: #7C7C7C;
829
- font-style: italic;
830
- }
831
-
832
- .emotion-2 * .token.doctype {
833
- color: #7C7C7C;
834
- font-style: italic;
835
- }
836
-
837
- .emotion-2 * .token.cdata {
838
- color: #7C7C7C;
839
- font-style: italic;
840
- }
841
-
842
- .emotion-2 * .token.string {
843
- color: #92C379;
844
- }
845
-
846
- .emotion-2 * .token.punctuation {
847
- color: #EDEDED;
848
- }
849
-
850
- .emotion-2 * .token.operator {
851
- color: #EDEDED;
852
- }
853
-
854
- .emotion-2 * .token.url {
855
- color: #C6C5FE;
856
- }
857
-
858
- .emotion-2 * .token.symbol {
859
- color: #C6C5FE;
860
- }
861
-
862
- .emotion-2 * .token.number {
863
- color: #C6C5FE;
864
- }
865
-
866
- .emotion-2 * .token.boolean {
867
- color: #C6C5FE;
868
- }
869
-
870
- .emotion-2 * .token.variable {
871
- color: #C6C5FE;
872
- }
873
-
874
- .emotion-2 * .token.constant {
875
- color: #C6C5FE;
876
- }
877
-
878
- .emotion-2 * .token.inserted {
879
- color: #C6C5FE;
880
- }
881
-
882
- .emotion-2 * .token.atrule {
883
- color: #B474DD;
884
- }
885
-
886
- .emotion-2 * .token.keyword {
887
- color: #B474DD;
888
- }
889
-
890
- .emotion-2 * .token.attr-value {
891
- color: #B474DD;
892
- }
893
-
894
- .emotion-2 * .token.function {
895
- color: #EDEDED;
896
- }
897
-
898
- .emotion-2 * .token.deleted {
899
- color: #9a050f;
900
- }
901
-
902
- .emotion-2 * .token.important {
903
- font-weight: bold;
904
- }
905
-
906
- .emotion-2 * .token.bold {
907
- font-weight: bold;
908
- }
909
-
910
- .emotion-2 * .token.italic {
911
- font-style: italic;
912
- }
913
-
914
- .emotion-2 * .token.class-name {
915
- color: #FFFFB6;
916
- }
917
-
918
- .emotion-2 * .token.tag {
919
- color: #A8FF60;
920
- }
921
-
922
- .emotion-2 * .token.selector {
923
- color: #A8FF60;
924
- }
925
-
926
- .emotion-2 * .token.attr-name {
927
- color: #96CBFE;
928
- }
929
-
930
- .emotion-2 * .token.property {
931
- color: #96CBFE;
932
- }
933
-
934
- .emotion-2 * .token.regex {
935
- color: #96CBFE;
936
- }
937
-
938
- .emotion-2 * .token.entity {
939
- color: #96CBFE;
940
- }
941
-
942
- .emotion-2 * .token.directive.tag .tag {
943
- background: #ffff00;
944
- color: #EDEDED;
945
- }
946
-
947
- .emotion-2 * .language-json .token.boolean {
948
- color: #B474DD;
949
- }
950
-
951
- .emotion-2 * .language-json .token.number {
952
- color: #B474DD;
953
- }
954
-
955
- .emotion-2 * .language-json .token.property {
956
- color: #FFFFB6;
957
- }
958
-
959
- .emotion-2 * .namespace {
960
- opacity: 0.7;
961
- }
962
-
963
- .emotion-4 {
964
- position: absolute;
965
- bottom: 0;
966
- right: 0;
967
- max-width: 100%;
968
- display: -webkit-box;
969
- display: -webkit-flex;
970
- display: -ms-flexbox;
971
- display: flex;
972
- background: #333;
973
- }
974
-
975
- .emotion-3 {
976
- border: 0 none;
977
- padding: 4px 10px;
978
- cursor: pointer;
979
- display: -webkit-box;
980
- display: -webkit-flex;
981
- display: -ms-flexbox;
982
- display: flex;
983
- -webkit-align-items: center;
984
- -webkit-box-align: center;
985
- -ms-flex-align: center;
986
- align-items: center;
987
- color: #FFFFFF;
988
- background: #333;
989
- font-size: 12px;
990
- line-height: 16px;
991
- font-weight: 700;
992
- border-top: 1px solid rgba(255,255,255,.1);
993
- border-left: 1px solid rgba(255,255,255,.1);
994
- margin-left: -1px;
995
- border-radius: 4px 0 0 0;
996
- }
997
-
998
- .emotion-3:not(:last-child) {
999
- border-right: 1px solid rgba(255,255,255,.1);
1000
- }
1001
-
1002
- .emotion-3 + * {
1003
- border-left: 1px solid rgba(255,255,255,.1);
1004
- border-radius: 0;
1005
- }
1006
-
1007
- .emotion-3:focus {
1008
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
1009
- outline: 0 none;
1010
- }
1011
-
1012
- <div
1013
- class="emotion-5"
1014
- >
1015
- <div
1016
- class="emotion-2"
1017
- data-simplebar="true"
1018
- >
1019
- <div
1020
- class="simplebar-wrapper"
1021
- >
1022
- <div
1023
- class="simplebar-height-auto-observer-wrapper"
1024
- >
1025
- <div
1026
- class="simplebar-height-auto-observer"
1027
- />
1028
- </div>
1029
- <div
1030
- class="simplebar-mask"
1031
- >
1032
- <div
1033
- class="simplebar-offset"
1034
- >
1035
- <div
1036
- class="simplebar-content-wrapper"
1037
- >
1038
- <div
1039
- class="simplebar-content"
1040
- >
1041
- <pre
1042
- class="hljs emotion-1"
1043
- >
1044
- <code
1045
- class="emotion-0"
1046
- >
1047
- // A Hello World! program in C#.
1048
- using System;
1049
- namespace HelloWorld
1050
- {
1051
- class Hello
1052
- {
1053
- static void Main()
1054
- {
1055
- Console.WriteLine("Hello World!");
1056
-
1057
- // Keep the console window open in debug mode.
1058
- Console.WriteLine("Press any key to exit.");
1059
- Console.ReadKey();
1060
- }
1061
- }
1062
- }
1063
- </code>
1064
- </pre>
1065
- </div>
1066
- </div>
1067
- </div>
1068
- </div>
1069
- <div
1070
- class="simplebar-placeholder"
1071
- />
1072
- </div>
1073
- <div
1074
- class="simplebar-track simplebar-horizontal"
1075
- >
1076
- <div
1077
- class="simplebar-scrollbar"
1078
- />
1079
- </div>
1080
- <div
1081
- class="simplebar-track simplebar-vertical"
1082
- >
1083
- <div
1084
- class="simplebar-scrollbar"
1085
- />
1086
- </div>
1087
- </div>
1088
- <div
1089
- class="emotion-4"
1090
- >
1091
- <button
1092
- class="emotion-3"
1093
- >
1094
- Copy
1095
- </button>
1096
- </div>
1097
- </div>
1098
- `;
1099
-
1100
- exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = `
1101
- .emotion-2 {
1102
- overflow-y: auto;
1103
- height: 100%;
1104
- overflow-x: auto;
1105
- width: 100%;
1106
- position: relative;
1107
- }
1108
-
1109
- .emotion-2 code {
1110
- padding-right: 10px;
1111
- }
1112
-
1113
- .emotion-2 * .token {
1114
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
1115
- -webkit-font-smoothing: antialiased;
1116
- }
1117
-
1118
- .emotion-2 * .token.comment {
1119
- color: #008000;
1120
- font-style: italic;
1121
- }
1122
-
1123
- .emotion-2 * .token.prolog {
1124
- color: #008000;
1125
- font-style: italic;
1126
- }
1127
-
1128
- .emotion-2 * .token.doctype {
1129
- color: #008000;
1130
- font-style: italic;
1131
- }
1132
-
1133
- .emotion-2 * .token.cdata {
1134
- color: #008000;
1135
- font-style: italic;
1136
- }
1137
-
1138
- .emotion-2 * .token.string {
1139
- color: #A31515;
1140
- }
1141
-
1142
- .emotion-2 * .token.punctuation {
1143
- color: #393A34;
1144
- }
1145
-
1146
- .emotion-2 * .token.operator {
1147
- color: #393A34;
1148
- }
1149
-
1150
- .emotion-2 * .token.url {
1151
- color: #36acaa;
1152
- }
1153
-
1154
- .emotion-2 * .token.symbol {
1155
- color: #36acaa;
1156
- }
1157
-
1158
- .emotion-2 * .token.number {
1159
- color: #36acaa;
1160
- }
1161
-
1162
- .emotion-2 * .token.boolean {
1163
- color: #36acaa;
1164
- }
1165
-
1166
- .emotion-2 * .token.variable {
1167
- color: #36acaa;
1168
- }
1169
-
1170
- .emotion-2 * .token.constant {
1171
- color: #36acaa;
1172
- }
1173
-
1174
- .emotion-2 * .token.inserted {
1175
- color: #36acaa;
1176
- }
1177
-
1178
- .emotion-2 * .token.atrule {
1179
- color: #0000ff;
1180
- }
1181
-
1182
- .emotion-2 * .token.keyword {
1183
- color: #0000ff;
1184
- }
1185
-
1186
- .emotion-2 * .token.attr-value {
1187
- color: #0000ff;
1188
- }
1189
-
1190
- .emotion-2 * .token.function {
1191
- color: #393A34;
1192
- }
1193
-
1194
- .emotion-2 * .token.deleted {
1195
- color: #9a050f;
1196
- }
1197
-
1198
- .emotion-2 * .token.important {
1199
- font-weight: bold;
1200
- }
1201
-
1202
- .emotion-2 * .token.bold {
1203
- font-weight: bold;
1204
- }
1205
-
1206
- .emotion-2 * .token.italic {
1207
- font-style: italic;
1208
- }
1209
-
1210
- .emotion-2 * .token.class-name {
1211
- color: #2B91AF;
1212
- }
1213
-
1214
- .emotion-2 * .token.tag {
1215
- color: #800000;
1216
- }
1217
-
1218
- .emotion-2 * .token.selector {
1219
- color: #800000;
1220
- }
1221
-
1222
- .emotion-2 * .token.attr-name {
1223
- color: #ff0000;
1224
- }
1225
-
1226
- .emotion-2 * .token.property {
1227
- color: #ff0000;
1228
- }
1229
-
1230
- .emotion-2 * .token.regex {
1231
- color: #ff0000;
1232
- }
1233
-
1234
- .emotion-2 * .token.entity {
1235
- color: #ff0000;
1236
- }
1237
-
1238
- .emotion-2 * .token.directive.tag .tag {
1239
- background: #ffff00;
1240
- color: #393A34;
1241
- }
1242
-
1243
- .emotion-2 * .language-json .token.boolean {
1244
- color: #0000ff;
1245
- }
1246
-
1247
- .emotion-2 * .language-json .token.number {
1248
- color: #0000ff;
1249
- }
1250
-
1251
- .emotion-2 * .language-json .token.property {
1252
- color: #2B91AF;
1253
- }
1254
-
1255
- .emotion-2 * .namespace {
1256
- opacity: 0.7;
1257
- }
1258
-
1259
- .emotion-0 {
1260
- -webkit-flex: 1;
1261
- -ms-flex: 1;
1262
- flex: 1;
1263
- padding-right: 0;
1264
- opacity: 1;
1265
- }
1266
-
1267
- .emotion-3 {
1268
- position: relative;
1269
- overflow: hidden;
1270
- color: #333333;
1271
- }
1272
-
1273
- .emotion-1 {
1274
- display: -webkit-box;
1275
- display: -webkit-flex;
1276
- display: -ms-flexbox;
1277
- display: flex;
1278
- -webkit-box-pack: start;
1279
- -webkit-justify-content: flex-start;
1280
- -ms-flex-pack: start;
1281
- justify-content: flex-start;
1282
- margin: 0;
1283
- padding: 0;
1284
- }
1285
-
1286
- <div
1287
- class="emotion-3"
1288
- >
1289
- <div
1290
- class="emotion-2"
1291
- data-simplebar="true"
1292
- >
1293
- <div
1294
- class="simplebar-wrapper"
1295
- >
1296
- <div
1297
- class="simplebar-height-auto-observer-wrapper"
1298
- >
1299
- <div
1300
- class="simplebar-height-auto-observer"
1301
- />
1302
- </div>
1303
- <div
1304
- class="simplebar-mask"
1305
- >
1306
- <div
1307
- class="simplebar-offset"
1308
- >
1309
- <div
1310
- class="simplebar-content-wrapper"
1311
- >
1312
- <div
1313
- class="simplebar-content"
1314
- >
1315
- <pre
1316
- class="hljs emotion-1"
1317
- >
1318
- <code
1319
- class="emotion-0"
1320
- >
1321
- <span
1322
- class="token keyword"
1323
- >
1324
- import
1325
- </span>
1326
-
1327
- <span
1328
- class="token punctuation"
1329
- >
1330
- {
1331
- </span>
1332
- Good
1333
- <span
1334
- class="token punctuation"
1335
- >
1336
- ,
1337
- </span>
1338
- Things
1339
- <span
1340
- class="token punctuation"
1341
- >
1342
- }
1343
- </span>
1344
-
1345
- <span
1346
- class="token keyword"
1347
- >
1348
- from
1349
- </span>
1350
-
1351
- <span
1352
- class="token string"
1353
- >
1354
- 'life'
1355
- </span>
1356
- <span
1357
- class="token punctuation"
1358
- >
1359
- ;
1360
- </span>
1361
-
1362
-
1363
-
1364
- <span
1365
- class="token keyword"
1366
- >
1367
- const
1368
- </span>
1369
-
1370
- <span
1371
- class="token function-variable function"
1372
- >
1373
- result
1374
- </span>
1375
-
1376
- <span
1377
- class="token operator"
1378
- >
1379
- =
1380
- </span>
1381
-
1382
- <span
1383
- class="token punctuation"
1384
- >
1385
- (
1386
- </span>
1387
- <span
1388
- class="token punctuation"
1389
- >
1390
- )
1391
- </span>
1392
-
1393
- <span
1394
- class="token operator"
1395
- >
1396
- =&gt;
1397
- </span>
1398
-
1399
- <span
1400
- class="token tag"
1401
- >
1402
- <span
1403
- class="token tag"
1404
- >
1405
- <span
1406
- class="token punctuation"
1407
- >
1408
- &lt;
1409
- </span>
1410
- <span
1411
- class="token class-name"
1412
- >
1413
- Good
1414
- </span>
1415
- </span>
1416
- <span
1417
- class="token punctuation"
1418
- >
1419
- &gt;
1420
- </span>
1421
- </span>
1422
- <span
1423
- class="token tag"
1424
- >
1425
- <span
1426
- class="token tag"
1427
- >
1428
- <span
1429
- class="token punctuation"
1430
- >
1431
- &lt;
1432
- </span>
1433
- <span
1434
- class="token class-name"
1435
- >
1436
- Things
1437
- </span>
1438
- </span>
1439
-
1440
- <span
1441
- class="token attr-name"
1442
- >
1443
- all
1444
- </span>
1445
- <span
1446
- class="token script language-javascript"
1447
- >
1448
- <span
1449
- class="token script-punctuation punctuation"
1450
- >
1451
- =
1452
- </span>
1453
- <span
1454
- class="token punctuation"
1455
- >
1456
- {
1457
- </span>
1458
- <span
1459
- class="token boolean"
1460
- >
1461
- true
1462
- </span>
1463
- <span
1464
- class="token punctuation"
1465
- >
1466
- }
1467
- </span>
1468
- </span>
1469
-
1470
- <span
1471
- class="token punctuation"
1472
- >
1473
- /&gt;
1474
- </span>
1475
- </span>
1476
- <span
1477
- class="token tag"
1478
- >
1479
- <span
1480
- class="token tag"
1481
- >
1482
- <span
1483
- class="token punctuation"
1484
- >
1485
- &lt;/
1486
- </span>
1487
- <span
1488
- class="token class-name"
1489
- >
1490
- Good
1491
- </span>
1492
- </span>
1493
- <span
1494
- class="token punctuation"
1495
- >
1496
- &gt;
1497
- </span>
1498
- </span>
1499
- <span
1500
- class="token punctuation"
1501
- >
1502
- ;
1503
- </span>
1504
-
1505
-
1506
-
1507
- <span
1508
- class="token keyword"
1509
- >
1510
- export
1511
- </span>
1512
-
1513
- <span
1514
- class="token punctuation"
1515
- >
1516
- {
1517
- </span>
1518
- result
1519
- <span
1520
- class="token keyword"
1521
- >
1522
- as
1523
- </span>
1524
-
1525
- <span
1526
- class="token keyword"
1527
- >
1528
- default
1529
- </span>
1530
-
1531
- <span
1532
- class="token punctuation"
1533
- >
1534
- }
1535
- </span>
1536
- <span
1537
- class="token punctuation"
1538
- >
1539
- ;
1540
- </span>
1541
- </code>
1542
- </pre>
1543
- </div>
1544
- </div>
1545
- </div>
1546
- </div>
1547
- <div
1548
- class="simplebar-placeholder"
1549
- />
1550
- </div>
1551
- <div
1552
- class="simplebar-track simplebar-horizontal"
1553
- >
1554
- <div
1555
- class="simplebar-scrollbar"
1556
- />
1557
- </div>
1558
- <div
1559
- class="simplebar-track simplebar-vertical"
1560
- >
1561
- <div
1562
- class="simplebar-scrollbar"
1563
- />
1564
- </div>
1565
- </div>
1566
- </div>
1567
- `;
1568
-
1569
- exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = `
1570
- .emotion-2 {
1571
- overflow-y: auto;
1572
- height: 100%;
1573
- overflow-x: auto;
1574
- width: 100%;
1575
- position: relative;
1576
- }
1577
-
1578
- .emotion-2 code {
1579
- padding-right: 10px;
1580
- }
1581
-
1582
- .emotion-2 * .token {
1583
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
1584
- -webkit-font-smoothing: antialiased;
1585
- }
1586
-
1587
- .emotion-2 * .token.comment {
1588
- color: #008000;
1589
- font-style: italic;
1590
- }
1591
-
1592
- .emotion-2 * .token.prolog {
1593
- color: #008000;
1594
- font-style: italic;
1595
- }
1596
-
1597
- .emotion-2 * .token.doctype {
1598
- color: #008000;
1599
- font-style: italic;
1600
- }
1601
-
1602
- .emotion-2 * .token.cdata {
1603
- color: #008000;
1604
- font-style: italic;
1605
- }
1606
-
1607
- .emotion-2 * .token.string {
1608
- color: #A31515;
1609
- }
1610
-
1611
- .emotion-2 * .token.punctuation {
1612
- color: #393A34;
1613
- }
1614
-
1615
- .emotion-2 * .token.operator {
1616
- color: #393A34;
1617
- }
1618
-
1619
- .emotion-2 * .token.url {
1620
- color: #36acaa;
1621
- }
1622
-
1623
- .emotion-2 * .token.symbol {
1624
- color: #36acaa;
1625
- }
1626
-
1627
- .emotion-2 * .token.number {
1628
- color: #36acaa;
1629
- }
1630
-
1631
- .emotion-2 * .token.boolean {
1632
- color: #36acaa;
1633
- }
1634
-
1635
- .emotion-2 * .token.variable {
1636
- color: #36acaa;
1637
- }
1638
-
1639
- .emotion-2 * .token.constant {
1640
- color: #36acaa;
1641
- }
1642
-
1643
- .emotion-2 * .token.inserted {
1644
- color: #36acaa;
1645
- }
1646
-
1647
- .emotion-2 * .token.atrule {
1648
- color: #0000ff;
1649
- }
1650
-
1651
- .emotion-2 * .token.keyword {
1652
- color: #0000ff;
1653
- }
1654
-
1655
- .emotion-2 * .token.attr-value {
1656
- color: #0000ff;
1657
- }
1658
-
1659
- .emotion-2 * .token.function {
1660
- color: #393A34;
1661
- }
1662
-
1663
- .emotion-2 * .token.deleted {
1664
- color: #9a050f;
1665
- }
1666
-
1667
- .emotion-2 * .token.important {
1668
- font-weight: bold;
1669
- }
1670
-
1671
- .emotion-2 * .token.bold {
1672
- font-weight: bold;
1673
- }
1674
-
1675
- .emotion-2 * .token.italic {
1676
- font-style: italic;
1677
- }
1678
-
1679
- .emotion-2 * .token.class-name {
1680
- color: #2B91AF;
1681
- }
1682
-
1683
- .emotion-2 * .token.tag {
1684
- color: #800000;
1685
- }
1686
-
1687
- .emotion-2 * .token.selector {
1688
- color: #800000;
1689
- }
1690
-
1691
- .emotion-2 * .token.attr-name {
1692
- color: #ff0000;
1693
- }
1694
-
1695
- .emotion-2 * .token.property {
1696
- color: #ff0000;
1697
- }
1698
-
1699
- .emotion-2 * .token.regex {
1700
- color: #ff0000;
1701
- }
1702
-
1703
- .emotion-2 * .token.entity {
1704
- color: #ff0000;
1705
- }
1706
-
1707
- .emotion-2 * .token.directive.tag .tag {
1708
- background: #ffff00;
1709
- color: #393A34;
1710
- }
1711
-
1712
- .emotion-2 * .language-json .token.boolean {
1713
- color: #0000ff;
1714
- }
1715
-
1716
- .emotion-2 * .language-json .token.number {
1717
- color: #0000ff;
1718
- }
1719
-
1720
- .emotion-2 * .language-json .token.property {
1721
- color: #2B91AF;
1722
- }
1723
-
1724
- .emotion-2 * .namespace {
1725
- opacity: 0.7;
1726
- }
1727
-
1728
- .emotion-1 {
1729
- display: -webkit-box;
1730
- display: -webkit-flex;
1731
- display: -ms-flexbox;
1732
- display: flex;
1733
- -webkit-box-pack: start;
1734
- -webkit-justify-content: flex-start;
1735
- -ms-flex-pack: start;
1736
- justify-content: flex-start;
1737
- margin: 0;
1738
- padding: 10px;
1739
- }
1740
-
1741
- .emotion-0 {
1742
- -webkit-flex: 1;
1743
- -ms-flex: 1;
1744
- flex: 1;
1745
- padding-right: 0;
1746
- opacity: 1;
1747
- }
1748
-
1749
- .emotion-3 {
1750
- position: relative;
1751
- overflow: hidden;
1752
- color: #333333;
1753
- }
1754
-
1755
- <div
1756
- class="emotion-3"
1757
- >
1758
- <div
1759
- class="emotion-2"
1760
- data-simplebar="true"
1761
- >
1762
- <div
1763
- class="simplebar-wrapper"
1764
- >
1765
- <div
1766
- class="simplebar-height-auto-observer-wrapper"
1767
- >
1768
- <div
1769
- class="simplebar-height-auto-observer"
1770
- />
1771
- </div>
1772
- <div
1773
- class="simplebar-mask"
1774
- >
1775
- <div
1776
- class="simplebar-offset"
1777
- >
1778
- <div
1779
- class="simplebar-content-wrapper"
1780
- >
1781
- <div
1782
- class="simplebar-content"
1783
- >
1784
- <pre
1785
- class="hljs emotion-1"
1786
- >
1787
- <code
1788
- class="emotion-0"
1789
- >
1790
- <span
1791
- class="token keyword"
1792
- >
1793
- import
1794
- </span>
1795
-
1796
- <span
1797
- class="token punctuation"
1798
- >
1799
- {
1800
- </span>
1801
- Good
1802
- <span
1803
- class="token punctuation"
1804
- >
1805
- ,
1806
- </span>
1807
- Things
1808
- <span
1809
- class="token punctuation"
1810
- >
1811
- }
1812
- </span>
1813
-
1814
- <span
1815
- class="token keyword"
1816
- >
1817
- from
1818
- </span>
1819
-
1820
- <span
1821
- class="token string"
1822
- >
1823
- 'life'
1824
- </span>
1825
- <span
1826
- class="token punctuation"
1827
- >
1828
- ;
1829
- </span>
1830
-
1831
-
1832
-
1833
- <span
1834
- class="token keyword"
1835
- >
1836
- const
1837
- </span>
1838
-
1839
- <span
1840
- class="token function-variable function"
1841
- >
1842
- result
1843
- </span>
1844
-
1845
- <span
1846
- class="token operator"
1847
- >
1848
- =
1849
- </span>
1850
-
1851
- <span
1852
- class="token punctuation"
1853
- >
1854
- (
1855
- </span>
1856
- <span
1857
- class="token punctuation"
1858
- >
1859
- )
1860
- </span>
1861
-
1862
- <span
1863
- class="token operator"
1864
- >
1865
- =&gt;
1866
- </span>
1867
-
1868
- <span
1869
- class="token tag"
1870
- >
1871
- <span
1872
- class="token tag"
1873
- >
1874
- <span
1875
- class="token punctuation"
1876
- >
1877
- &lt;
1878
- </span>
1879
- <span
1880
- class="token class-name"
1881
- >
1882
- Good
1883
- </span>
1884
- </span>
1885
- <span
1886
- class="token punctuation"
1887
- >
1888
- &gt;
1889
- </span>
1890
- </span>
1891
- <span
1892
- class="token tag"
1893
- >
1894
- <span
1895
- class="token tag"
1896
- >
1897
- <span
1898
- class="token punctuation"
1899
- >
1900
- &lt;
1901
- </span>
1902
- <span
1903
- class="token class-name"
1904
- >
1905
- Things
1906
- </span>
1907
- </span>
1908
-
1909
- <span
1910
- class="token punctuation"
1911
- >
1912
- /&gt;
1913
- </span>
1914
- </span>
1915
- <span
1916
- class="token tag"
1917
- >
1918
- <span
1919
- class="token tag"
1920
- >
1921
- <span
1922
- class="token punctuation"
1923
- >
1924
- &lt;/
1925
- </span>
1926
- <span
1927
- class="token class-name"
1928
- >
1929
- Good
1930
- </span>
1931
- </span>
1932
- <span
1933
- class="token punctuation"
1934
- >
1935
- &gt;
1936
- </span>
1937
- </span>
1938
- <span
1939
- class="token punctuation"
1940
- >
1941
- ;
1942
- </span>
1943
-
1944
-
1945
-
1946
- <span
1947
- class="token keyword"
1948
- >
1949
- export
1950
- </span>
1951
-
1952
- <span
1953
- class="token punctuation"
1954
- >
1955
- {
1956
- </span>
1957
- result
1958
- <span
1959
- class="token keyword"
1960
- >
1961
- as
1962
- </span>
1963
-
1964
- <span
1965
- class="token keyword"
1966
- >
1967
- default
1968
- </span>
1969
-
1970
- <span
1971
- class="token punctuation"
1972
- >
1973
- }
1974
- </span>
1975
- <span
1976
- class="token punctuation"
1977
- >
1978
- ;
1979
- </span>
1980
- </code>
1981
- </pre>
1982
- </div>
1983
- </div>
1984
- </div>
1985
- </div>
1986
- <div
1987
- class="simplebar-placeholder"
1988
- />
1989
- </div>
1990
- <div
1991
- class="simplebar-track simplebar-horizontal"
1992
- >
1993
- <div
1994
- class="simplebar-scrollbar"
1995
- />
1996
- </div>
1997
- <div
1998
- class="simplebar-track simplebar-vertical"
1999
- >
2000
- <div
2001
- class="simplebar-scrollbar"
2002
- />
2003
- </div>
2004
- </div>
2005
- </div>
2006
- `;
2007
-
2008
- exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = `
2009
- .emotion-2 {
2010
- overflow-y: auto;
2011
- height: 100%;
2012
- overflow-x: auto;
2013
- width: 100%;
2014
- position: relative;
2015
- }
2016
-
2017
- .emotion-2 code {
2018
- padding-right: 10px;
2019
- }
2020
-
2021
- .emotion-2 * .token {
2022
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
2023
- -webkit-font-smoothing: antialiased;
2024
- }
2025
-
2026
- .emotion-2 * .token.comment {
2027
- color: #008000;
2028
- font-style: italic;
2029
- }
2030
-
2031
- .emotion-2 * .token.prolog {
2032
- color: #008000;
2033
- font-style: italic;
2034
- }
2035
-
2036
- .emotion-2 * .token.doctype {
2037
- color: #008000;
2038
- font-style: italic;
2039
- }
2040
-
2041
- .emotion-2 * .token.cdata {
2042
- color: #008000;
2043
- font-style: italic;
2044
- }
2045
-
2046
- .emotion-2 * .token.string {
2047
- color: #A31515;
2048
- }
2049
-
2050
- .emotion-2 * .token.punctuation {
2051
- color: #393A34;
2052
- }
2053
-
2054
- .emotion-2 * .token.operator {
2055
- color: #393A34;
2056
- }
2057
-
2058
- .emotion-2 * .token.url {
2059
- color: #36acaa;
2060
- }
2061
-
2062
- .emotion-2 * .token.symbol {
2063
- color: #36acaa;
2064
- }
2065
-
2066
- .emotion-2 * .token.number {
2067
- color: #36acaa;
2068
- }
2069
-
2070
- .emotion-2 * .token.boolean {
2071
- color: #36acaa;
2072
- }
2073
-
2074
- .emotion-2 * .token.variable {
2075
- color: #36acaa;
2076
- }
2077
-
2078
- .emotion-2 * .token.constant {
2079
- color: #36acaa;
2080
- }
2081
-
2082
- .emotion-2 * .token.inserted {
2083
- color: #36acaa;
2084
- }
2085
-
2086
- .emotion-2 * .token.atrule {
2087
- color: #0000ff;
2088
- }
2089
-
2090
- .emotion-2 * .token.keyword {
2091
- color: #0000ff;
2092
- }
2093
-
2094
- .emotion-2 * .token.attr-value {
2095
- color: #0000ff;
2096
- }
2097
-
2098
- .emotion-2 * .token.function {
2099
- color: #393A34;
2100
- }
2101
-
2102
- .emotion-2 * .token.deleted {
2103
- color: #9a050f;
2104
- }
2105
-
2106
- .emotion-2 * .token.important {
2107
- font-weight: bold;
2108
- }
2109
-
2110
- .emotion-2 * .token.bold {
2111
- font-weight: bold;
2112
- }
2113
-
2114
- .emotion-2 * .token.italic {
2115
- font-style: italic;
2116
- }
2117
-
2118
- .emotion-2 * .token.class-name {
2119
- color: #2B91AF;
2120
- }
2121
-
2122
- .emotion-2 * .token.tag {
2123
- color: #800000;
2124
- }
2125
-
2126
- .emotion-2 * .token.selector {
2127
- color: #800000;
2128
- }
2129
-
2130
- .emotion-2 * .token.attr-name {
2131
- color: #ff0000;
2132
- }
2133
-
2134
- .emotion-2 * .token.property {
2135
- color: #ff0000;
2136
- }
2137
-
2138
- .emotion-2 * .token.regex {
2139
- color: #ff0000;
2140
- }
2141
-
2142
- .emotion-2 * .token.entity {
2143
- color: #ff0000;
2144
- }
2145
-
2146
- .emotion-2 * .token.directive.tag .tag {
2147
- background: #ffff00;
2148
- color: #393A34;
2149
- }
2150
-
2151
- .emotion-2 * .language-json .token.boolean {
2152
- color: #0000ff;
2153
- }
2154
-
2155
- .emotion-2 * .language-json .token.number {
2156
- color: #0000ff;
2157
- }
2158
-
2159
- .emotion-2 * .language-json .token.property {
2160
- color: #2B91AF;
2161
- }
2162
-
2163
- .emotion-2 * .namespace {
2164
- opacity: 0.7;
2165
- }
2166
-
2167
- .emotion-0 {
2168
- -webkit-flex: 1;
2169
- -ms-flex: 1;
2170
- flex: 1;
2171
- padding-right: 0;
2172
- opacity: 1;
2173
- }
2174
-
2175
- .emotion-3 {
2176
- position: relative;
2177
- overflow: hidden;
2178
- color: #333333;
2179
- }
2180
-
2181
- .emotion-1 {
2182
- display: -webkit-box;
2183
- display: -webkit-flex;
2184
- display: -ms-flexbox;
2185
- display: flex;
2186
- -webkit-box-pack: start;
2187
- -webkit-justify-content: flex-start;
2188
- -ms-flex-pack: start;
2189
- justify-content: flex-start;
2190
- margin: 0;
2191
- padding: 0;
2192
- }
2193
-
2194
- <div
2195
- class="emotion-3"
2196
- >
2197
- <div
2198
- class="emotion-2"
2199
- data-simplebar="true"
2200
- >
2201
- <div
2202
- class="simplebar-wrapper"
2203
- >
2204
- <div
2205
- class="simplebar-height-auto-observer-wrapper"
2206
- >
2207
- <div
2208
- class="simplebar-height-auto-observer"
2209
- />
2210
- </div>
2211
- <div
2212
- class="simplebar-mask"
2213
- >
2214
- <div
2215
- class="simplebar-offset"
2216
- >
2217
- <div
2218
- class="simplebar-content-wrapper"
2219
- >
2220
- <div
2221
- class="simplebar-content"
2222
- >
2223
- <pre
2224
- class="hljs emotion-1"
2225
- >
2226
- <code>
2227
- <span
2228
- class="react-syntax-highlighter-line-number"
2229
- >
2230
- 1
2231
-
2232
- </span>
2233
- <span
2234
- class="react-syntax-highlighter-line-number"
2235
- >
2236
- 2
2237
-
2238
- </span>
2239
- <span
2240
- class="react-syntax-highlighter-line-number"
2241
- >
2242
- 3
2243
-
2244
- </span>
2245
- <span
2246
- class="react-syntax-highlighter-line-number"
2247
- >
2248
- 4
2249
-
2250
- </span>
2251
- <span
2252
- class="react-syntax-highlighter-line-number"
2253
- >
2254
- 5
2255
-
2256
- </span>
2257
- </code>
2258
- <code
2259
- class="emotion-0"
2260
- >
2261
- <span
2262
- class="token keyword"
2263
- >
2264
- import
2265
- </span>
2266
-
2267
- <span
2268
- class="token punctuation"
2269
- >
2270
- {
2271
- </span>
2272
- Good
2273
- <span
2274
- class="token punctuation"
2275
- >
2276
- ,
2277
- </span>
2278
- Things
2279
- <span
2280
- class="token punctuation"
2281
- >
2282
- }
2283
- </span>
2284
-
2285
- <span
2286
- class="token keyword"
2287
- >
2288
- from
2289
- </span>
2290
-
2291
- <span
2292
- class="token string"
2293
- >
2294
- 'life'
2295
- </span>
2296
- <span
2297
- class="token punctuation"
2298
- >
2299
- ;
2300
- </span>
2301
-
2302
-
2303
-
2304
- <span
2305
- class="token keyword"
2306
- >
2307
- const
2308
- </span>
2309
-
2310
- <span
2311
- class="token function-variable function"
2312
- >
2313
- result
2314
- </span>
2315
-
2316
- <span
2317
- class="token operator"
2318
- >
2319
- =
2320
- </span>
2321
-
2322
- <span
2323
- class="token punctuation"
2324
- >
2325
- (
2326
- </span>
2327
- <span
2328
- class="token punctuation"
2329
- >
2330
- )
2331
- </span>
2332
-
2333
- <span
2334
- class="token operator"
2335
- >
2336
- =&gt;
2337
- </span>
2338
-
2339
- <span
2340
- class="token tag"
2341
- >
2342
- <span
2343
- class="token tag"
2344
- >
2345
- <span
2346
- class="token punctuation"
2347
- >
2348
- &lt;
2349
- </span>
2350
- <span
2351
- class="token class-name"
2352
- >
2353
- Good
2354
- </span>
2355
- </span>
2356
- <span
2357
- class="token punctuation"
2358
- >
2359
- &gt;
2360
- </span>
2361
- </span>
2362
- <span
2363
- class="token tag"
2364
- >
2365
- <span
2366
- class="token tag"
2367
- >
2368
- <span
2369
- class="token punctuation"
2370
- >
2371
- &lt;
2372
- </span>
2373
- <span
2374
- class="token class-name"
2375
- >
2376
- Things
2377
- </span>
2378
- </span>
2379
-
2380
- <span
2381
- class="token punctuation"
2382
- >
2383
- /&gt;
2384
- </span>
2385
- </span>
2386
- <span
2387
- class="token tag"
2388
- >
2389
- <span
2390
- class="token tag"
2391
- >
2392
- <span
2393
- class="token punctuation"
2394
- >
2395
- &lt;/
2396
- </span>
2397
- <span
2398
- class="token class-name"
2399
- >
2400
- Good
2401
- </span>
2402
- </span>
2403
- <span
2404
- class="token punctuation"
2405
- >
2406
- &gt;
2407
- </span>
2408
- </span>
2409
- <span
2410
- class="token punctuation"
2411
- >
2412
- ;
2413
- </span>
2414
-
2415
-
2416
-
2417
- <span
2418
- class="token keyword"
2419
- >
2420
- export
2421
- </span>
2422
-
2423
- <span
2424
- class="token punctuation"
2425
- >
2426
- {
2427
- </span>
2428
- result
2429
- <span
2430
- class="token keyword"
2431
- >
2432
- as
2433
- </span>
2434
-
2435
- <span
2436
- class="token keyword"
2437
- >
2438
- default
2439
- </span>
2440
-
2441
- <span
2442
- class="token punctuation"
2443
- >
2444
- }
2445
- </span>
2446
- <span
2447
- class="token punctuation"
2448
- >
2449
- ;
2450
- </span>
2451
- </code>
2452
- </pre>
2453
- </div>
2454
- </div>
2455
- </div>
2456
- </div>
2457
- <div
2458
- class="simplebar-placeholder"
2459
- />
2460
- </div>
2461
- <div
2462
- class="simplebar-track simplebar-horizontal"
2463
- >
2464
- <div
2465
- class="simplebar-scrollbar"
2466
- />
2467
- </div>
2468
- <div
2469
- class="simplebar-track simplebar-vertical"
2470
- >
2471
- <div
2472
- class="simplebar-scrollbar"
2473
- />
2474
- </div>
2475
- </div>
2476
- </div>
2477
- `;
2478
-
2479
- exports[`Storyshots Basics|SyntaxHighlighter story 1`] = `
2480
- .emotion-2 {
2481
- overflow-y: auto;
2482
- height: 100%;
2483
- overflow-x: auto;
2484
- width: 100%;
2485
- position: relative;
2486
- }
2487
-
2488
- .emotion-2 code {
2489
- padding-right: 10px;
2490
- }
2491
-
2492
- .emotion-2 * .token {
2493
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
2494
- -webkit-font-smoothing: antialiased;
2495
- }
2496
-
2497
- .emotion-2 * .token.comment {
2498
- color: #008000;
2499
- font-style: italic;
2500
- }
2501
-
2502
- .emotion-2 * .token.prolog {
2503
- color: #008000;
2504
- font-style: italic;
2505
- }
2506
-
2507
- .emotion-2 * .token.doctype {
2508
- color: #008000;
2509
- font-style: italic;
2510
- }
2511
-
2512
- .emotion-2 * .token.cdata {
2513
- color: #008000;
2514
- font-style: italic;
2515
- }
2516
-
2517
- .emotion-2 * .token.string {
2518
- color: #A31515;
2519
- }
2520
-
2521
- .emotion-2 * .token.punctuation {
2522
- color: #393A34;
2523
- }
2524
-
2525
- .emotion-2 * .token.operator {
2526
- color: #393A34;
2527
- }
2528
-
2529
- .emotion-2 * .token.url {
2530
- color: #36acaa;
2531
- }
2532
-
2533
- .emotion-2 * .token.symbol {
2534
- color: #36acaa;
2535
- }
2536
-
2537
- .emotion-2 * .token.number {
2538
- color: #36acaa;
2539
- }
2540
-
2541
- .emotion-2 * .token.boolean {
2542
- color: #36acaa;
2543
- }
2544
-
2545
- .emotion-2 * .token.variable {
2546
- color: #36acaa;
2547
- }
2548
-
2549
- .emotion-2 * .token.constant {
2550
- color: #36acaa;
2551
- }
2552
-
2553
- .emotion-2 * .token.inserted {
2554
- color: #36acaa;
2555
- }
2556
-
2557
- .emotion-2 * .token.atrule {
2558
- color: #0000ff;
2559
- }
2560
-
2561
- .emotion-2 * .token.keyword {
2562
- color: #0000ff;
2563
- }
2564
-
2565
- .emotion-2 * .token.attr-value {
2566
- color: #0000ff;
2567
- }
2568
-
2569
- .emotion-2 * .token.function {
2570
- color: #393A34;
2571
- }
2572
-
2573
- .emotion-2 * .token.deleted {
2574
- color: #9a050f;
2575
- }
2576
-
2577
- .emotion-2 * .token.important {
2578
- font-weight: bold;
2579
- }
2580
-
2581
- .emotion-2 * .token.bold {
2582
- font-weight: bold;
2583
- }
2584
-
2585
- .emotion-2 * .token.italic {
2586
- font-style: italic;
2587
- }
2588
-
2589
- .emotion-2 * .token.class-name {
2590
- color: #2B91AF;
2591
- }
2592
-
2593
- .emotion-2 * .token.tag {
2594
- color: #800000;
2595
- }
2596
-
2597
- .emotion-2 * .token.selector {
2598
- color: #800000;
2599
- }
2600
-
2601
- .emotion-2 * .token.attr-name {
2602
- color: #ff0000;
2603
- }
2604
-
2605
- .emotion-2 * .token.property {
2606
- color: #ff0000;
2607
- }
2608
-
2609
- .emotion-2 * .token.regex {
2610
- color: #ff0000;
2611
- }
2612
-
2613
- .emotion-2 * .token.entity {
2614
- color: #ff0000;
2615
- }
2616
-
2617
- .emotion-2 * .token.directive.tag .tag {
2618
- background: #ffff00;
2619
- color: #393A34;
2620
- }
2621
-
2622
- .emotion-2 * .language-json .token.boolean {
2623
- color: #0000ff;
2624
- }
2625
-
2626
- .emotion-2 * .language-json .token.number {
2627
- color: #0000ff;
2628
- }
2629
-
2630
- .emotion-2 * .language-json .token.property {
2631
- color: #2B91AF;
2632
- }
2633
-
2634
- .emotion-2 * .namespace {
2635
- opacity: 0.7;
2636
- }
2637
-
2638
- .emotion-0 {
2639
- -webkit-flex: 1;
2640
- -ms-flex: 1;
2641
- flex: 1;
2642
- padding-right: 0;
2643
- opacity: 1;
2644
- }
2645
-
2646
- .emotion-3 {
2647
- position: relative;
2648
- overflow: hidden;
2649
- color: #333333;
2650
- }
2651
-
2652
- .emotion-1 {
2653
- display: -webkit-box;
2654
- display: -webkit-flex;
2655
- display: -ms-flexbox;
2656
- display: flex;
2657
- -webkit-box-pack: start;
2658
- -webkit-justify-content: flex-start;
2659
- -ms-flex-pack: start;
2660
- justify-content: flex-start;
2661
- margin: 0;
2662
- padding: 0;
2663
- }
2664
-
2665
- <div
2666
- class="emotion-3"
2667
- >
2668
- <div
2669
- class="emotion-2"
2670
- data-simplebar="true"
2671
- >
2672
- <div
2673
- class="simplebar-wrapper"
2674
- >
2675
- <div
2676
- class="simplebar-height-auto-observer-wrapper"
2677
- >
2678
- <div
2679
- class="simplebar-height-auto-observer"
2680
- />
2681
- </div>
2682
- <div
2683
- class="simplebar-mask"
2684
- >
2685
- <div
2686
- class="simplebar-offset"
2687
- >
2688
- <div
2689
- class="simplebar-content-wrapper"
2690
- >
2691
- <div
2692
- class="simplebar-content"
2693
- >
2694
- <pre
2695
- class="hljs emotion-1"
2696
- >
2697
- <code
2698
- class="emotion-0"
2699
- >
2700
- <span
2701
- class="token keyword"
2702
- >
2703
- import
2704
- </span>
2705
- React
2706
- <span
2707
- class="token keyword"
2708
- >
2709
- from
2710
- </span>
2711
-
2712
- <span
2713
- class="token string"
2714
- >
2715
- 'react'
2716
- </span>
2717
- <span
2718
- class="token punctuation"
2719
- >
2720
- ;
2721
- </span>
2722
-
2723
-
2724
- <span
2725
- class="token keyword"
2726
- >
2727
- import
2728
- </span>
2729
-
2730
- <span
2731
- class="token punctuation"
2732
- >
2733
- {
2734
- </span>
2735
- storiesOf
2736
- <span
2737
- class="token punctuation"
2738
- >
2739
- }
2740
- </span>
2741
-
2742
- <span
2743
- class="token keyword"
2744
- >
2745
- from
2746
- </span>
2747
-
2748
- <span
2749
- class="token string"
2750
- >
2751
- '@storybook/react'
2752
- </span>
2753
- <span
2754
- class="token punctuation"
2755
- >
2756
- ;
2757
- </span>
2758
-
2759
-
2760
- <span
2761
- class="token keyword"
2762
- >
2763
- import
2764
- </span>
2765
-
2766
- <span
2767
- class="token punctuation"
2768
- >
2769
- {
2770
- </span>
2771
- styled
2772
- <span
2773
- class="token punctuation"
2774
- >
2775
- }
2776
- </span>
2777
-
2778
- <span
2779
- class="token keyword"
2780
- >
2781
- from
2782
- </span>
2783
-
2784
- <span
2785
- class="token string"
2786
- >
2787
- '@storybook/theming'
2788
- </span>
2789
- <span
2790
- class="token punctuation"
2791
- >
2792
- ;
2793
- </span>
2794
-
2795
-
2796
-
2797
- <span
2798
- class="token keyword"
2799
- >
2800
- import
2801
- </span>
2802
- Heading
2803
- <span
2804
- class="token keyword"
2805
- >
2806
- from
2807
- </span>
2808
-
2809
- <span
2810
- class="token string"
2811
- >
2812
- './heading'
2813
- </span>
2814
- <span
2815
- class="token punctuation"
2816
- >
2817
- ;
2818
- </span>
2819
-
2820
-
2821
-
2822
- <span
2823
- class="token keyword"
2824
- >
2825
- const
2826
- </span>
2827
- Holder
2828
- <span
2829
- class="token operator"
2830
- >
2831
- =
2832
- </span>
2833
- styled
2834
- <span
2835
- class="token punctuation"
2836
- >
2837
- .
2838
- </span>
2839
- <span
2840
- class="token function"
2841
- >
2842
- div
2843
- </span>
2844
- <span
2845
- class="token punctuation"
2846
- >
2847
- (
2848
- </span>
2849
- <span
2850
- class="token punctuation"
2851
- >
2852
- {
2853
- </span>
2854
-
2855
- margin
2856
- <span
2857
- class="token punctuation"
2858
- >
2859
- :
2860
- </span>
2861
-
2862
- <span
2863
- class="token number"
2864
- >
2865
- 10
2866
- </span>
2867
- <span
2868
- class="token punctuation"
2869
- >
2870
- ,
2871
- </span>
2872
-
2873
- border
2874
- <span
2875
- class="token punctuation"
2876
- >
2877
- :
2878
- </span>
2879
-
2880
- <span
2881
- class="token string"
2882
- >
2883
- '1px dashed deepskyblue'
2884
- </span>
2885
- <span
2886
- class="token punctuation"
2887
- >
2888
- ,
2889
- </span>
2890
-
2891
-
2892
- <span
2893
- class="token comment"
2894
- >
2895
- // overflow: 'hidden',
2896
- </span>
2897
-
2898
-
2899
- <span
2900
- class="token punctuation"
2901
- >
2902
- }
2903
- </span>
2904
- <span
2905
- class="token punctuation"
2906
- >
2907
- )
2908
- </span>
2909
- <span
2910
- class="token punctuation"
2911
- >
2912
- ;
2913
- </span>
2914
-
2915
-
2916
-
2917
- <span
2918
- class="token function"
2919
- >
2920
- storiesOf
2921
- </span>
2922
- <span
2923
- class="token punctuation"
2924
- >
2925
- (
2926
- </span>
2927
- <span
2928
- class="token string"
2929
- >
2930
- 'Basics|Heading'
2931
- </span>
2932
- <span
2933
- class="token punctuation"
2934
- >
2935
- ,
2936
- </span>
2937
- module
2938
- <span
2939
- class="token punctuation"
2940
- >
2941
- )
2942
- </span>
2943
- <span
2944
- class="token punctuation"
2945
- >
2946
- .
2947
- </span>
2948
- <span
2949
- class="token function"
2950
- >
2951
- add
2952
- </span>
2953
- <span
2954
- class="token punctuation"
2955
- >
2956
- (
2957
- </span>
2958
- <span
2959
- class="token string"
2960
- >
2961
- 'types'
2962
- </span>
2963
- <span
2964
- class="token punctuation"
2965
- >
2966
- ,
2967
- </span>
2968
-
2969
- <span
2970
- class="token punctuation"
2971
- >
2972
- (
2973
- </span>
2974
- <span
2975
- class="token punctuation"
2976
- >
2977
- )
2978
- </span>
2979
-
2980
- <span
2981
- class="token operator"
2982
- >
2983
- =&gt;
2984
- </span>
2985
-
2986
- <span
2987
- class="token punctuation"
2988
- >
2989
- (
2990
- </span>
2991
-
2992
-
2993
- <span
2994
- class="token tag"
2995
- >
2996
- <span
2997
- class="token tag"
2998
- >
2999
- <span
3000
- class="token punctuation"
3001
- >
3002
- &lt;
3003
- </span>
3004
- div
3005
- </span>
3006
- <span
3007
- class="token punctuation"
3008
- >
3009
- &gt;
3010
- </span>
3011
- </span>
3012
- <span
3013
- class="token plain-text"
3014
- >
3015
-
3016
-
3017
- </span>
3018
- <span
3019
- class="token tag"
3020
- >
3021
- <span
3022
- class="token tag"
3023
- >
3024
- <span
3025
- class="token punctuation"
3026
- >
3027
- &lt;
3028
- </span>
3029
- <span
3030
- class="token class-name"
3031
- >
3032
- Holder
3033
- </span>
3034
- </span>
3035
- <span
3036
- class="token punctuation"
3037
- >
3038
- &gt;
3039
- </span>
3040
- </span>
3041
- <span
3042
- class="token plain-text"
3043
- >
3044
-
3045
-
3046
- </span>
3047
- <span
3048
- class="token tag"
3049
- >
3050
- <span
3051
- class="token tag"
3052
- >
3053
- <span
3054
- class="token punctuation"
3055
- >
3056
- &lt;
3057
- </span>
3058
- <span
3059
- class="token class-name"
3060
- >
3061
- Heading
3062
- </span>
3063
- </span>
3064
- <span
3065
- class="token punctuation"
3066
- >
3067
- &gt;
3068
- </span>
3069
- </span>
3070
- <span
3071
- class="token plain-text"
3072
- >
3073
- DEFAULT WITH ALL CAPS
3074
- </span>
3075
- <span
3076
- class="token tag"
3077
- >
3078
- <span
3079
- class="token tag"
3080
- >
3081
- <span
3082
- class="token punctuation"
3083
- >
3084
- &lt;/
3085
- </span>
3086
- <span
3087
- class="token class-name"
3088
- >
3089
- Heading
3090
- </span>
3091
- </span>
3092
- <span
3093
- class="token punctuation"
3094
- >
3095
- &gt;
3096
- </span>
3097
- </span>
3098
- <span
3099
- class="token plain-text"
3100
- >
3101
-
3102
-
3103
- </span>
3104
- <span
3105
- class="token tag"
3106
- >
3107
- <span
3108
- class="token tag"
3109
- >
3110
- <span
3111
- class="token punctuation"
3112
- >
3113
- &lt;/
3114
- </span>
3115
- <span
3116
- class="token class-name"
3117
- >
3118
- Holder
3119
- </span>
3120
- </span>
3121
- <span
3122
- class="token punctuation"
3123
- >
3124
- &gt;
3125
- </span>
3126
- </span>
3127
- <span
3128
- class="token plain-text"
3129
- >
3130
-
3131
-
3132
- </span>
3133
- <span
3134
- class="token tag"
3135
- >
3136
- <span
3137
- class="token tag"
3138
- >
3139
- <span
3140
- class="token punctuation"
3141
- >
3142
- &lt;
3143
- </span>
3144
- <span
3145
- class="token class-name"
3146
- >
3147
- Holder
3148
- </span>
3149
- </span>
3150
- <span
3151
- class="token punctuation"
3152
- >
3153
- &gt;
3154
- </span>
3155
- </span>
3156
- <span
3157
- class="token plain-text"
3158
- >
3159
-
3160
-
3161
- </span>
3162
- <span
3163
- class="token tag"
3164
- >
3165
- <span
3166
- class="token tag"
3167
- >
3168
- <span
3169
- class="token punctuation"
3170
- >
3171
- &lt;
3172
- </span>
3173
- <span
3174
- class="token class-name"
3175
- >
3176
- Heading
3177
- </span>
3178
- </span>
3179
-
3180
- <span
3181
- class="token attr-name"
3182
- >
3183
- sub
3184
- </span>
3185
- <span
3186
- class="token attr-value"
3187
- >
3188
- <span
3189
- class="token punctuation"
3190
- >
3191
- =
3192
- </span>
3193
- <span
3194
- class="token punctuation"
3195
- >
3196
- "
3197
- </span>
3198
- With a great sub
3199
- <span
3200
- class="token punctuation"
3201
- >
3202
- "
3203
- </span>
3204
- </span>
3205
- <span
3206
- class="token punctuation"
3207
- >
3208
- &gt;
3209
- </span>
3210
- </span>
3211
- <span
3212
- class="token plain-text"
3213
- >
3214
- THIS LONG DEFAULT WITH ALL CAPS & SUB
3215
- </span>
3216
- <span
3217
- class="token tag"
3218
- >
3219
- <span
3220
- class="token tag"
3221
- >
3222
- <span
3223
- class="token punctuation"
3224
- >
3225
- &lt;/
3226
- </span>
3227
- <span
3228
- class="token class-name"
3229
- >
3230
- Heading
3231
- </span>
3232
- </span>
3233
- <span
3234
- class="token punctuation"
3235
- >
3236
- &gt;
3237
- </span>
3238
- </span>
3239
- <span
3240
- class="token plain-text"
3241
- >
3242
-
3243
-
3244
- </span>
3245
- <span
3246
- class="token tag"
3247
- >
3248
- <span
3249
- class="token tag"
3250
- >
3251
- <span
3252
- class="token punctuation"
3253
- >
3254
- &lt;/
3255
- </span>
3256
- <span
3257
- class="token class-name"
3258
- >
3259
- Holder
3260
- </span>
3261
- </span>
3262
- <span
3263
- class="token punctuation"
3264
- >
3265
- &gt;
3266
- </span>
3267
- </span>
3268
- <span
3269
- class="token plain-text"
3270
- >
3271
-
3272
-
3273
- </span>
3274
- <span
3275
- class="token tag"
3276
- >
3277
- <span
3278
- class="token tag"
3279
- >
3280
- <span
3281
- class="token punctuation"
3282
- >
3283
- &lt;
3284
- </span>
3285
- <span
3286
- class="token class-name"
3287
- >
3288
- Holder
3289
- </span>
3290
- </span>
3291
- <span
3292
- class="token punctuation"
3293
- >
3294
- &gt;
3295
- </span>
3296
- </span>
3297
- <span
3298
- class="token plain-text"
3299
- >
3300
-
3301
-
3302
- </span>
3303
- <span
3304
- class="token tag"
3305
- >
3306
- <span
3307
- class="token tag"
3308
- >
3309
- <span
3310
- class="token punctuation"
3311
- >
3312
- &lt;
3313
- </span>
3314
- <span
3315
- class="token class-name"
3316
- >
3317
- Heading
3318
- </span>
3319
- </span>
3320
-
3321
- <span
3322
- class="token attr-name"
3323
- >
3324
- type
3325
- </span>
3326
- <span
3327
- class="token attr-value"
3328
- >
3329
- <span
3330
- class="token punctuation"
3331
- >
3332
- =
3333
- </span>
3334
- <span
3335
- class="token punctuation"
3336
- >
3337
- "
3338
- </span>
3339
- page
3340
- <span
3341
- class="token punctuation"
3342
- >
3343
- "
3344
- </span>
3345
- </span>
3346
- <span
3347
- class="token punctuation"
3348
- >
3349
- &gt;
3350
- </span>
3351
- </span>
3352
- <span
3353
- class="token plain-text"
3354
- >
3355
- page type
3356
- </span>
3357
- <span
3358
- class="token tag"
3359
- >
3360
- <span
3361
- class="token tag"
3362
- >
3363
- <span
3364
- class="token punctuation"
3365
- >
3366
- &lt;/
3367
- </span>
3368
- <span
3369
- class="token class-name"
3370
- >
3371
- Heading
3372
- </span>
3373
- </span>
3374
- <span
3375
- class="token punctuation"
3376
- >
3377
- &gt;
3378
- </span>
3379
- </span>
3380
- <span
3381
- class="token plain-text"
3382
- >
3383
-
3384
-
3385
- </span>
3386
- <span
3387
- class="token tag"
3388
- >
3389
- <span
3390
- class="token tag"
3391
- >
3392
- <span
3393
- class="token punctuation"
3394
- >
3395
- &lt;/
3396
- </span>
3397
- <span
3398
- class="token class-name"
3399
- >
3400
- Holder
3401
- </span>
3402
- </span>
3403
- <span
3404
- class="token punctuation"
3405
- >
3406
- &gt;
3407
- </span>
3408
- </span>
3409
- <span
3410
- class="token plain-text"
3411
- >
3412
-
3413
-
3414
- </span>
3415
- <span
3416
- class="token tag"
3417
- >
3418
- <span
3419
- class="token tag"
3420
- >
3421
- <span
3422
- class="token punctuation"
3423
- >
3424
- &lt;
3425
- </span>
3426
- <span
3427
- class="token class-name"
3428
- >
3429
- Holder
3430
- </span>
3431
- </span>
3432
- <span
3433
- class="token punctuation"
3434
- >
3435
- &gt;
3436
- </span>
3437
- </span>
3438
- <span
3439
- class="token plain-text"
3440
- >
3441
-
3442
-
3443
- </span>
3444
- <span
3445
- class="token tag"
3446
- >
3447
- <span
3448
- class="token tag"
3449
- >
3450
- <span
3451
- class="token punctuation"
3452
- >
3453
- &lt;
3454
- </span>
3455
- <span
3456
- class="token class-name"
3457
- >
3458
- Heading
3459
- </span>
3460
- </span>
3461
-
3462
- <span
3463
- class="token attr-name"
3464
- >
3465
- type
3466
- </span>
3467
- <span
3468
- class="token attr-value"
3469
- >
3470
- <span
3471
- class="token punctuation"
3472
- >
3473
- =
3474
- </span>
3475
- <span
3476
- class="token punctuation"
3477
- >
3478
- "
3479
- </span>
3480
- page
3481
- <span
3482
- class="token punctuation"
3483
- >
3484
- "
3485
- </span>
3486
- </span>
3487
-
3488
- <span
3489
- class="token attr-name"
3490
- >
3491
- sub
3492
- </span>
3493
- <span
3494
- class="token attr-value"
3495
- >
3496
- <span
3497
- class="token punctuation"
3498
- >
3499
- =
3500
- </span>
3501
- <span
3502
- class="token punctuation"
3503
- >
3504
- "
3505
- </span>
3506
- With a sub
3507
- <span
3508
- class="token punctuation"
3509
- >
3510
- "
3511
- </span>
3512
- </span>
3513
- <span
3514
- class="token punctuation"
3515
- >
3516
- &gt;
3517
- </span>
3518
- </span>
3519
- <span
3520
- class="token plain-text"
3521
- >
3522
-
3523
- page type
3524
-
3525
- </span>
3526
- <span
3527
- class="token tag"
3528
- >
3529
- <span
3530
- class="token tag"
3531
- >
3532
- <span
3533
- class="token punctuation"
3534
- >
3535
- &lt;/
3536
- </span>
3537
- <span
3538
- class="token class-name"
3539
- >
3540
- Heading
3541
- </span>
3542
- </span>
3543
- <span
3544
- class="token punctuation"
3545
- >
3546
- &gt;
3547
- </span>
3548
- </span>
3549
- <span
3550
- class="token plain-text"
3551
- >
3552
-
3553
-
3554
- </span>
3555
- <span
3556
- class="token tag"
3557
- >
3558
- <span
3559
- class="token tag"
3560
- >
3561
- <span
3562
- class="token punctuation"
3563
- >
3564
- &lt;/
3565
- </span>
3566
- <span
3567
- class="token class-name"
3568
- >
3569
- Holder
3570
- </span>
3571
- </span>
3572
- <span
3573
- class="token punctuation"
3574
- >
3575
- &gt;
3576
- </span>
3577
- </span>
3578
- <span
3579
- class="token plain-text"
3580
- >
3581
-
3582
-
3583
- </span>
3584
- <span
3585
- class="token tag"
3586
- >
3587
- <span
3588
- class="token tag"
3589
- >
3590
- <span
3591
- class="token punctuation"
3592
- >
3593
- &lt;/
3594
- </span>
3595
- div
3596
- </span>
3597
- <span
3598
- class="token punctuation"
3599
- >
3600
- &gt;
3601
- </span>
3602
- </span>
3603
-
3604
-
3605
- <span
3606
- class="token punctuation"
3607
- >
3608
- )
3609
- </span>
3610
- <span
3611
- class="token punctuation"
3612
- >
3613
- )
3614
- </span>
3615
- <span
3616
- class="token punctuation"
3617
- >
3618
- ;
3619
- </span>
3620
- </code>
3621
- </pre>
3622
- </div>
3623
- </div>
3624
- </div>
3625
- </div>
3626
- <div
3627
- class="simplebar-placeholder"
3628
- />
3629
- </div>
3630
- <div
3631
- class="simplebar-track simplebar-horizontal"
3632
- >
3633
- <div
3634
- class="simplebar-scrollbar"
3635
- />
3636
- </div>
3637
- <div
3638
- class="simplebar-track simplebar-vertical"
3639
- >
3640
- <div
3641
- class="simplebar-scrollbar"
3642
- />
3643
- </div>
3644
- </div>
3645
- </div>
3646
- `;
3647
-
3648
- exports[`Storyshots Basics|SyntaxHighlighter unsupported 1`] = `
3649
- .emotion-5 {
3650
- position: relative;
3651
- overflow: hidden;
3652
- color: #333333;
3653
- border: 1px solid rgba(0,0,0,.1);
3654
- background: #FFFFFF;
3655
- }
3656
-
3657
- .emotion-2 {
3658
- overflow-y: auto;
3659
- height: 100%;
3660
- overflow-x: auto;
3661
- width: 100%;
3662
- position: relative;
3663
- }
3664
-
3665
- .emotion-2 code {
3666
- padding-right: 10px;
3667
- }
3668
-
3669
- .emotion-2 * .token {
3670
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
3671
- -webkit-font-smoothing: antialiased;
3672
- }
3673
-
3674
- .emotion-2 * .token.comment {
3675
- color: #008000;
3676
- font-style: italic;
3677
- }
3678
-
3679
- .emotion-2 * .token.prolog {
3680
- color: #008000;
3681
- font-style: italic;
3682
- }
3683
-
3684
- .emotion-2 * .token.doctype {
3685
- color: #008000;
3686
- font-style: italic;
3687
- }
3688
-
3689
- .emotion-2 * .token.cdata {
3690
- color: #008000;
3691
- font-style: italic;
3692
- }
3693
-
3694
- .emotion-2 * .token.string {
3695
- color: #A31515;
3696
- }
3697
-
3698
- .emotion-2 * .token.punctuation {
3699
- color: #393A34;
3700
- }
3701
-
3702
- .emotion-2 * .token.operator {
3703
- color: #393A34;
3704
- }
3705
-
3706
- .emotion-2 * .token.url {
3707
- color: #36acaa;
3708
- }
3709
-
3710
- .emotion-2 * .token.symbol {
3711
- color: #36acaa;
3712
- }
3713
-
3714
- .emotion-2 * .token.number {
3715
- color: #36acaa;
3716
- }
3717
-
3718
- .emotion-2 * .token.boolean {
3719
- color: #36acaa;
3720
- }
3721
-
3722
- .emotion-2 * .token.variable {
3723
- color: #36acaa;
3724
- }
3725
-
3726
- .emotion-2 * .token.constant {
3727
- color: #36acaa;
3728
- }
3729
-
3730
- .emotion-2 * .token.inserted {
3731
- color: #36acaa;
3732
- }
3733
-
3734
- .emotion-2 * .token.atrule {
3735
- color: #0000ff;
3736
- }
3737
-
3738
- .emotion-2 * .token.keyword {
3739
- color: #0000ff;
3740
- }
3741
-
3742
- .emotion-2 * .token.attr-value {
3743
- color: #0000ff;
3744
- }
3745
-
3746
- .emotion-2 * .token.function {
3747
- color: #393A34;
3748
- }
3749
-
3750
- .emotion-2 * .token.deleted {
3751
- color: #9a050f;
3752
- }
3753
-
3754
- .emotion-2 * .token.important {
3755
- font-weight: bold;
3756
- }
3757
-
3758
- .emotion-2 * .token.bold {
3759
- font-weight: bold;
3760
- }
3761
-
3762
- .emotion-2 * .token.italic {
3763
- font-style: italic;
3764
- }
3765
-
3766
- .emotion-2 * .token.class-name {
3767
- color: #2B91AF;
3768
- }
3769
-
3770
- .emotion-2 * .token.tag {
3771
- color: #800000;
3772
- }
3773
-
3774
- .emotion-2 * .token.selector {
3775
- color: #800000;
3776
- }
3777
-
3778
- .emotion-2 * .token.attr-name {
3779
- color: #ff0000;
3780
- }
3781
-
3782
- .emotion-2 * .token.property {
3783
- color: #ff0000;
3784
- }
3785
-
3786
- .emotion-2 * .token.regex {
3787
- color: #ff0000;
3788
- }
3789
-
3790
- .emotion-2 * .token.entity {
3791
- color: #ff0000;
3792
- }
3793
-
3794
- .emotion-2 * .token.directive.tag .tag {
3795
- background: #ffff00;
3796
- color: #393A34;
3797
- }
3798
-
3799
- .emotion-2 * .language-json .token.boolean {
3800
- color: #0000ff;
3801
- }
3802
-
3803
- .emotion-2 * .language-json .token.number {
3804
- color: #0000ff;
3805
- }
3806
-
3807
- .emotion-2 * .language-json .token.property {
3808
- color: #2B91AF;
3809
- }
3810
-
3811
- .emotion-2 * .namespace {
3812
- opacity: 0.7;
3813
- }
3814
-
3815
- .emotion-1 {
3816
- display: -webkit-box;
3817
- display: -webkit-flex;
3818
- display: -ms-flexbox;
3819
- display: flex;
3820
- -webkit-box-pack: start;
3821
- -webkit-justify-content: flex-start;
3822
- -ms-flex-pack: start;
3823
- justify-content: flex-start;
3824
- margin: 0;
3825
- padding: 10px;
3826
- }
3827
-
3828
- .emotion-0 {
3829
- -webkit-flex: 1;
3830
- -ms-flex: 1;
3831
- flex: 1;
3832
- padding-right: 0;
3833
- opacity: 1;
3834
- }
3835
-
3836
- .emotion-4 {
3837
- position: absolute;
3838
- bottom: 0;
3839
- right: 0;
3840
- max-width: 100%;
3841
- display: -webkit-box;
3842
- display: -webkit-flex;
3843
- display: -ms-flexbox;
3844
- display: flex;
3845
- background: #FFFFFF;
3846
- }
3847
-
3848
- .emotion-3 {
3849
- border: 0 none;
3850
- padding: 4px 10px;
3851
- cursor: pointer;
3852
- display: -webkit-box;
3853
- display: -webkit-flex;
3854
- display: -ms-flexbox;
3855
- display: flex;
3856
- -webkit-align-items: center;
3857
- -webkit-box-align: center;
3858
- -ms-flex-align: center;
3859
- align-items: center;
3860
- color: #333333;
3861
- background: #FFFFFF;
3862
- font-size: 12px;
3863
- line-height: 16px;
3864
- font-weight: 700;
3865
- border-top: 1px solid rgba(0,0,0,.1);
3866
- border-left: 1px solid rgba(0,0,0,.1);
3867
- margin-left: -1px;
3868
- border-radius: 4px 0 0 0;
3869
- }
3870
-
3871
- .emotion-3:not(:last-child) {
3872
- border-right: 1px solid rgba(0,0,0,.1);
3873
- }
3874
-
3875
- .emotion-3 + * {
3876
- border-left: 1px solid rgba(0,0,0,.1);
3877
- border-radius: 0;
3878
- }
3879
-
3880
- .emotion-3:focus {
3881
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
3882
- outline: 0 none;
3883
- }
3884
-
3885
- <div
3886
- class="emotion-5"
3887
- >
3888
- <div
3889
- class="emotion-2"
3890
- data-simplebar="true"
3891
- >
3892
- <div
3893
- class="simplebar-wrapper"
3894
- >
3895
- <div
3896
- class="simplebar-height-auto-observer-wrapper"
3897
- >
3898
- <div
3899
- class="simplebar-height-auto-observer"
3900
- />
3901
- </div>
3902
- <div
3903
- class="simplebar-mask"
3904
- >
3905
- <div
3906
- class="simplebar-offset"
3907
- >
3908
- <div
3909
- class="simplebar-content-wrapper"
3910
- >
3911
- <div
3912
- class="simplebar-content"
3913
- >
3914
- <pre
3915
- class="hljs emotion-1"
3916
- >
3917
- <code
3918
- class="emotion-0"
3919
- >
3920
- // A Hello World! program in C#.
3921
- using System;
3922
- namespace HelloWorld
3923
- {
3924
- class Hello
3925
- {
3926
- static void Main()
3927
- {
3928
- Console.WriteLine("Hello World!");
3929
-
3930
- // Keep the console window open in debug mode.
3931
- Console.WriteLine("Press any key to exit.");
3932
- Console.ReadKey();
3933
- }
3934
- }
3935
- }
3936
- </code>
3937
- </pre>
3938
- </div>
3939
- </div>
3940
- </div>
3941
- </div>
3942
- <div
3943
- class="simplebar-placeholder"
3944
- />
3945
- </div>
3946
- <div
3947
- class="simplebar-track simplebar-horizontal"
3948
- >
3949
- <div
3950
- class="simplebar-scrollbar"
3951
- />
3952
- </div>
3953
- <div
3954
- class="simplebar-track simplebar-vertical"
3955
- >
3956
- <div
3957
- class="simplebar-scrollbar"
3958
- />
3959
- </div>
3960
- </div>
3961
- <div
3962
- class="emotion-4"
3963
- >
3964
- <button
3965
- class="emotion-3"
3966
- >
3967
- Copy
3968
- </button>
3969
- </div>
3970
- </div>
3971
- `;