@khanacademy/wonder-blocks-typography 1.1.25

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 (28) hide show
  1. package/LICENSE +21 -0
  2. package/dist/es/index.js +460 -0
  3. package/dist/index.js +759 -0
  4. package/dist/index.js.flow +2 -0
  5. package/docs.md +254 -0
  6. package/package.json +29 -0
  7. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +1462 -0
  8. package/src/__tests__/generated-snapshot.test.js +332 -0
  9. package/src/components/body-monospace.js +26 -0
  10. package/src/components/body-monospace.md +14 -0
  11. package/src/components/body-serif-block.js +26 -0
  12. package/src/components/body-serif.js +26 -0
  13. package/src/components/body.js +26 -0
  14. package/src/components/caption.js +26 -0
  15. package/src/components/footnote.js +26 -0
  16. package/src/components/heading-large.js +26 -0
  17. package/src/components/heading-medium.js +26 -0
  18. package/src/components/heading-small.js +26 -0
  19. package/src/components/heading-xsmall.js +26 -0
  20. package/src/components/label-large.js +26 -0
  21. package/src/components/label-medium.js +26 -0
  22. package/src/components/label-small.js +26 -0
  23. package/src/components/label-xsmall.js +26 -0
  24. package/src/components/tagline.js +26 -0
  25. package/src/components/title.js +28 -0
  26. package/src/index.js +78 -0
  27. package/src/util/styles.js +156 -0
  28. package/src/util/types.js +6 -0
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap ADDED
@@ -0,0 +1,1462 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`wonder-blocks-typography example 1 1`] = `
4
+ <div
5
+ className=""
6
+ style={
7
+ Object {
8
+ "alignItems": "stretch",
9
+ "borderStyle": "solid",
10
+ "borderWidth": 0,
11
+ "boxSizing": "border-box",
12
+ "display": "flex",
13
+ "flexDirection": "column",
14
+ "margin": 0,
15
+ "minHeight": 0,
16
+ "minWidth": 0,
17
+ "padding": 0,
18
+ "position": "relative",
19
+ "zIndex": 0,
20
+ }
21
+ }
22
+ >
23
+ <h1
24
+ className=""
25
+ id="example-Title"
26
+ style={
27
+ Object {
28
+ "@media (maxWidth: 1023px)": Object {
29
+ "fontSize": 28,
30
+ "lineHeight": "32px",
31
+ },
32
+ "@media (minWidth: 1024px)": Object {
33
+ "fontSize": 36,
34
+ "lineHeight": "40px",
35
+ },
36
+ "MozOsxFontSmoothing": "grayscale",
37
+ "WebkitFontSmoothing": "antialiased",
38
+ "display": "block",
39
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
40
+ "fontWeight": 900,
41
+ "marginBottom": 0,
42
+ "marginTop": 0,
43
+ }
44
+ }
45
+ >
46
+ Title
47
+ </h1>
48
+ <h2
49
+ className=""
50
+ id="example-HeadingLarge"
51
+ style={
52
+ Object {
53
+ "@media (maxWidth: 1023px)": Object {
54
+ "fontSize": 24,
55
+ "lineHeight": "28px",
56
+ },
57
+ "@media (minWidth: 1024px)": Object {
58
+ "fontSize": 28,
59
+ "lineHeight": "32px",
60
+ },
61
+ "MozOsxFontSmoothing": "grayscale",
62
+ "WebkitFontSmoothing": "antialiased",
63
+ "display": "block",
64
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
65
+ "fontWeight": 700,
66
+ "marginBottom": 0,
67
+ "marginTop": 0,
68
+ }
69
+ }
70
+ >
71
+ HeadingLarge
72
+ </h2>
73
+ <h3
74
+ className=""
75
+ id="example-HeadingMedium"
76
+ style={
77
+ Object {
78
+ "@media (maxWidth: 1023px)": Object {
79
+ "fontSize": 22,
80
+ "lineHeight": "26px",
81
+ },
82
+ "@media (minWidth: 1024px)": Object {
83
+ "fontSize": 24,
84
+ "lineHeight": "28px",
85
+ },
86
+ "MozOsxFontSmoothing": "grayscale",
87
+ "WebkitFontSmoothing": "antialiased",
88
+ "display": "block",
89
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
90
+ "fontWeight": 700,
91
+ "marginBottom": 0,
92
+ "marginTop": 0,
93
+ }
94
+ }
95
+ >
96
+ HeadingMedium
97
+ </h3>
98
+ <h4
99
+ className=""
100
+ id="example-HeadingSmall"
101
+ style={
102
+ Object {
103
+ "MozOsxFontSmoothing": "grayscale",
104
+ "WebkitFontSmoothing": "antialiased",
105
+ "display": "block",
106
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
107
+ "fontSize": 20,
108
+ "fontWeight": 700,
109
+ "lineHeight": "24px",
110
+ "marginBottom": 0,
111
+ "marginTop": 0,
112
+ }
113
+ }
114
+ >
115
+ HeadingSmall
116
+ </h4>
117
+ <h4
118
+ className=""
119
+ id="example-HeadingXSmall"
120
+ style={
121
+ Object {
122
+ "MozOsxFontSmoothing": "grayscale",
123
+ "WebkitFontSmoothing": "antialiased",
124
+ "display": "block",
125
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
126
+ "fontSize": 12,
127
+ "fontWeight": 700,
128
+ "letterSpacing": 0.6,
129
+ "lineHeight": "16px",
130
+ "marginBottom": 0,
131
+ "marginTop": 0,
132
+ "textTransform": "uppercase",
133
+ }
134
+ }
135
+ >
136
+ HeadingXSmall
137
+ </h4>
138
+ <span
139
+ className=""
140
+ id="example-BodySerifBlock"
141
+ style={
142
+ Object {
143
+ "MozOsxFontSmoothing": "grayscale",
144
+ "WebkitFontSmoothing": "antialiased",
145
+ "display": "block",
146
+ "fontFamily": "\\"Noto Serif\\", serif",
147
+ "fontSize": 22,
148
+ "fontWeight": 400,
149
+ "lineHeight": "28px",
150
+ }
151
+ }
152
+ >
153
+ BodySerifBlock
154
+ </span>
155
+ <span
156
+ className=""
157
+ id="example-BodySerif"
158
+ style={
159
+ Object {
160
+ "MozOsxFontSmoothing": "grayscale",
161
+ "WebkitFontSmoothing": "antialiased",
162
+ "display": "block",
163
+ "fontFamily": "\\"Noto Serif\\", serif",
164
+ "fontSize": 18,
165
+ "fontWeight": 400,
166
+ "lineHeight": "22px",
167
+ }
168
+ }
169
+ >
170
+ BodySerif
171
+ </span>
172
+ <span
173
+ className=""
174
+ id="example-BodyMonospace"
175
+ style={
176
+ Object {
177
+ "MozOsxFontSmoothing": "grayscale",
178
+ "WebkitFontSmoothing": "antialiased",
179
+ "display": "block",
180
+ "fontFamily": "Inconsolata, monospace",
181
+ "fontSize": 17,
182
+ "fontWeight": 400,
183
+ "lineHeight": "22px",
184
+ }
185
+ }
186
+ >
187
+ BodyMonospace
188
+ </span>
189
+ <span
190
+ className=""
191
+ id="example-Body"
192
+ style={
193
+ Object {
194
+ "MozOsxFontSmoothing": "grayscale",
195
+ "WebkitFontSmoothing": "antialiased",
196
+ "display": "block",
197
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
198
+ "fontSize": 16,
199
+ "fontWeight": 400,
200
+ "lineHeight": "22px",
201
+ }
202
+ }
203
+ >
204
+ Body
205
+ </span>
206
+ <span
207
+ className=""
208
+ id="example-LabelLarge"
209
+ style={
210
+ Object {
211
+ "MozOsxFontSmoothing": "grayscale",
212
+ "WebkitFontSmoothing": "antialiased",
213
+ "display": "block",
214
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
215
+ "fontSize": 16,
216
+ "fontWeight": 700,
217
+ "lineHeight": "20px",
218
+ }
219
+ }
220
+ >
221
+ LabelLarge
222
+ </span>
223
+ <span
224
+ className=""
225
+ id="example-LabelMedium"
226
+ style={
227
+ Object {
228
+ "MozOsxFontSmoothing": "grayscale",
229
+ "WebkitFontSmoothing": "antialiased",
230
+ "display": "block",
231
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
232
+ "fontSize": 16,
233
+ "fontWeight": 400,
234
+ "lineHeight": "20px",
235
+ }
236
+ }
237
+ >
238
+ LabelMedium
239
+ </span>
240
+ <span
241
+ className=""
242
+ id="example-LabelSmall"
243
+ style={
244
+ Object {
245
+ "MozOsxFontSmoothing": "grayscale",
246
+ "WebkitFontSmoothing": "antialiased",
247
+ "display": "block",
248
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
249
+ "fontSize": 14,
250
+ "fontWeight": 400,
251
+ "lineHeight": "18px",
252
+ }
253
+ }
254
+ >
255
+ LabelSmall
256
+ </span>
257
+ <span
258
+ className=""
259
+ id="example-LabelXSmall"
260
+ style={
261
+ Object {
262
+ "MozOsxFontSmoothing": "grayscale",
263
+ "WebkitFontSmoothing": "antialiased",
264
+ "display": "block",
265
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
266
+ "fontSize": 12,
267
+ "fontWeight": 400,
268
+ "lineHeight": "16px",
269
+ }
270
+ }
271
+ >
272
+ LabelXSmall
273
+ </span>
274
+ <span
275
+ className=""
276
+ id="example-Tagline"
277
+ style={
278
+ Object {
279
+ "MozOsxFontSmoothing": "grayscale",
280
+ "WebkitFontSmoothing": "antialiased",
281
+ "display": "block",
282
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
283
+ "fontSize": 20,
284
+ "fontWeight": 400,
285
+ "lineHeight": "24px",
286
+ }
287
+ }
288
+ >
289
+ Tagline
290
+ </span>
291
+ <span
292
+ className=""
293
+ id="example-Caption"
294
+ style={
295
+ Object {
296
+ "MozOsxFontSmoothing": "grayscale",
297
+ "WebkitFontSmoothing": "antialiased",
298
+ "display": "block",
299
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
300
+ "fontSize": 14,
301
+ "fontWeight": 400,
302
+ "lineHeight": "20px",
303
+ }
304
+ }
305
+ >
306
+ Caption
307
+ </span>
308
+ <span
309
+ className=""
310
+ id="example-Footnote"
311
+ style={
312
+ Object {
313
+ "MozOsxFontSmoothing": "grayscale",
314
+ "WebkitFontSmoothing": "antialiased",
315
+ "display": "block",
316
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
317
+ "fontSize": 12,
318
+ "fontWeight": 400,
319
+ "lineHeight": "18px",
320
+ }
321
+ }
322
+ >
323
+ Footnote
324
+ </span>
325
+ </div>
326
+ `;
327
+
328
+ exports[`wonder-blocks-typography example 2 1`] = `
329
+ <h1
330
+ className=""
331
+ style={
332
+ Object {
333
+ "@media (maxWidth: 1023px)": Object {
334
+ "fontSize": 28,
335
+ "lineHeight": "32px",
336
+ },
337
+ "@media (minWidth: 1024px)": Object {
338
+ "fontSize": 36,
339
+ "lineHeight": "40px",
340
+ },
341
+ "MozOsxFontSmoothing": "grayscale",
342
+ "WebkitFontSmoothing": "antialiased",
343
+ "color": "#1865f2",
344
+ "display": "block",
345
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
346
+ "fontWeight": 900,
347
+ "marginBottom": 0,
348
+ "marginTop": 0,
349
+ }
350
+ }
351
+ >
352
+ Blue Title
353
+ </h1>
354
+ `;
355
+
356
+ exports[`wonder-blocks-typography example 3 1`] = `
357
+ <h1
358
+ aria-label="Accessible Title"
359
+ className=""
360
+ style={
361
+ Object {
362
+ "@media (maxWidth: 1023px)": Object {
363
+ "fontSize": 28,
364
+ "lineHeight": "32px",
365
+ },
366
+ "@media (minWidth: 1024px)": Object {
367
+ "fontSize": 36,
368
+ "lineHeight": "40px",
369
+ },
370
+ "MozOsxFontSmoothing": "grayscale",
371
+ "WebkitFontSmoothing": "antialiased",
372
+ "display": "block",
373
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
374
+ "fontWeight": 900,
375
+ "marginBottom": 0,
376
+ "marginTop": 0,
377
+ }
378
+ }
379
+ >
380
+ Title
381
+ </h1>
382
+ `;
383
+
384
+ exports[`wonder-blocks-typography example 4 1`] = `
385
+ <div
386
+ className=""
387
+ style={
388
+ Object {
389
+ "alignItems": "stretch",
390
+ "borderStyle": "solid",
391
+ "borderWidth": 0,
392
+ "boxSizing": "border-box",
393
+ "display": "flex",
394
+ "flexDirection": "column",
395
+ "margin": 0,
396
+ "minHeight": 0,
397
+ "minWidth": 0,
398
+ "padding": 0,
399
+ "position": "relative",
400
+ "zIndex": 0,
401
+ }
402
+ }
403
+ >
404
+ <h1
405
+ className=""
406
+ style={
407
+ Object {
408
+ "@media (maxWidth: 1023px)": Object {
409
+ "fontSize": 28,
410
+ "lineHeight": "32px",
411
+ },
412
+ "@media (minWidth: 1024px)": Object {
413
+ "fontSize": 36,
414
+ "lineHeight": "40px",
415
+ },
416
+ "MozOsxFontSmoothing": "grayscale",
417
+ "WebkitFontSmoothing": "antialiased",
418
+ "display": "block",
419
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
420
+ "fontWeight": 900,
421
+ "marginBottom": 0,
422
+ "marginTop": 0,
423
+ }
424
+ }
425
+ >
426
+ Для каждого ученика, независимо от возраста. Реальные результаты!
427
+ </h1>
428
+ <h2
429
+ className=""
430
+ style={
431
+ Object {
432
+ "@media (maxWidth: 1023px)": Object {
433
+ "fontSize": 24,
434
+ "lineHeight": "28px",
435
+ },
436
+ "@media (minWidth: 1024px)": Object {
437
+ "fontSize": 28,
438
+ "lineHeight": "32px",
439
+ },
440
+ "MozOsxFontSmoothing": "grayscale",
441
+ "WebkitFontSmoothing": "antialiased",
442
+ "display": "block",
443
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
444
+ "fontWeight": 700,
445
+ "marginBottom": 0,
446
+ "marginTop": 0,
447
+ }
448
+ }
449
+ >
450
+ Для каждого ученика, независимо от возраста. Реальные результаты!
451
+ </h2>
452
+ <h3
453
+ className=""
454
+ style={
455
+ Object {
456
+ "@media (maxWidth: 1023px)": Object {
457
+ "fontSize": 22,
458
+ "lineHeight": "26px",
459
+ },
460
+ "@media (minWidth: 1024px)": Object {
461
+ "fontSize": 24,
462
+ "lineHeight": "28px",
463
+ },
464
+ "MozOsxFontSmoothing": "grayscale",
465
+ "WebkitFontSmoothing": "antialiased",
466
+ "display": "block",
467
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
468
+ "fontWeight": 700,
469
+ "marginBottom": 0,
470
+ "marginTop": 0,
471
+ }
472
+ }
473
+ >
474
+ Для каждого ученика, независимо от возраста. Реальные результаты!
475
+ </h3>
476
+ <h4
477
+ className=""
478
+ style={
479
+ Object {
480
+ "MozOsxFontSmoothing": "grayscale",
481
+ "WebkitFontSmoothing": "antialiased",
482
+ "display": "block",
483
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
484
+ "fontSize": 20,
485
+ "fontWeight": 700,
486
+ "lineHeight": "24px",
487
+ "marginBottom": 0,
488
+ "marginTop": 0,
489
+ }
490
+ }
491
+ >
492
+ Для каждого ученика, независимо от возраста. Реальные результаты!
493
+ </h4>
494
+ <h4
495
+ className=""
496
+ style={
497
+ Object {
498
+ "MozOsxFontSmoothing": "grayscale",
499
+ "WebkitFontSmoothing": "antialiased",
500
+ "display": "block",
501
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
502
+ "fontSize": 12,
503
+ "fontWeight": 700,
504
+ "letterSpacing": 0.6,
505
+ "lineHeight": "16px",
506
+ "marginBottom": 0,
507
+ "marginTop": 0,
508
+ "textTransform": "uppercase",
509
+ }
510
+ }
511
+ >
512
+ Для каждого ученика, независимо от возраста. Реальные результаты!
513
+ </h4>
514
+ <span
515
+ className=""
516
+ style={
517
+ Object {
518
+ "MozOsxFontSmoothing": "grayscale",
519
+ "WebkitFontSmoothing": "antialiased",
520
+ "display": "block",
521
+ "fontFamily": "\\"Noto Serif\\", serif",
522
+ "fontSize": 22,
523
+ "fontWeight": 400,
524
+ "lineHeight": "28px",
525
+ }
526
+ }
527
+ >
528
+ Для каждого ученика, независимо от возраста. Реальные результаты!
529
+ </span>
530
+ <span
531
+ className=""
532
+ style={
533
+ Object {
534
+ "MozOsxFontSmoothing": "grayscale",
535
+ "WebkitFontSmoothing": "antialiased",
536
+ "display": "block",
537
+ "fontFamily": "\\"Noto Serif\\", serif",
538
+ "fontSize": 18,
539
+ "fontWeight": 400,
540
+ "lineHeight": "22px",
541
+ }
542
+ }
543
+ >
544
+ Для каждого ученика, независимо от возраста. Реальные результаты!
545
+ </span>
546
+ <span
547
+ className=""
548
+ style={
549
+ Object {
550
+ "MozOsxFontSmoothing": "grayscale",
551
+ "WebkitFontSmoothing": "antialiased",
552
+ "display": "block",
553
+ "fontFamily": "Inconsolata, monospace",
554
+ "fontSize": 17,
555
+ "fontWeight": 400,
556
+ "lineHeight": "22px",
557
+ }
558
+ }
559
+ >
560
+ Для каждого ученика, независимо от возраста. Реальные результаты!
561
+ </span>
562
+ <span
563
+ className=""
564
+ style={
565
+ Object {
566
+ "MozOsxFontSmoothing": "grayscale",
567
+ "WebkitFontSmoothing": "antialiased",
568
+ "display": "block",
569
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
570
+ "fontSize": 16,
571
+ "fontWeight": 400,
572
+ "lineHeight": "22px",
573
+ }
574
+ }
575
+ >
576
+ Для каждого ученика, независимо от возраста. Реальные результаты!
577
+ </span>
578
+ <span
579
+ className=""
580
+ style={
581
+ Object {
582
+ "MozOsxFontSmoothing": "grayscale",
583
+ "WebkitFontSmoothing": "antialiased",
584
+ "display": "block",
585
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
586
+ "fontSize": 16,
587
+ "fontWeight": 700,
588
+ "lineHeight": "20px",
589
+ }
590
+ }
591
+ >
592
+ Для каждого ученика, независимо от возраста. Реальные результаты!
593
+ </span>
594
+ <span
595
+ className=""
596
+ style={
597
+ Object {
598
+ "MozOsxFontSmoothing": "grayscale",
599
+ "WebkitFontSmoothing": "antialiased",
600
+ "display": "block",
601
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
602
+ "fontSize": 16,
603
+ "fontWeight": 400,
604
+ "lineHeight": "20px",
605
+ }
606
+ }
607
+ >
608
+ Для каждого ученика, независимо от возраста. Реальные результаты!
609
+ </span>
610
+ <span
611
+ className=""
612
+ style={
613
+ Object {
614
+ "MozOsxFontSmoothing": "grayscale",
615
+ "WebkitFontSmoothing": "antialiased",
616
+ "display": "block",
617
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
618
+ "fontSize": 14,
619
+ "fontWeight": 400,
620
+ "lineHeight": "18px",
621
+ }
622
+ }
623
+ >
624
+ Для каждого ученика, независимо от возраста. Реальные результаты!
625
+ </span>
626
+ <span
627
+ className=""
628
+ style={
629
+ Object {
630
+ "MozOsxFontSmoothing": "grayscale",
631
+ "WebkitFontSmoothing": "antialiased",
632
+ "display": "block",
633
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
634
+ "fontSize": 12,
635
+ "fontWeight": 400,
636
+ "lineHeight": "16px",
637
+ }
638
+ }
639
+ >
640
+ Для каждого ученика, независимо от возраста. Реальные результаты!
641
+ </span>
642
+ <span
643
+ className=""
644
+ style={
645
+ Object {
646
+ "MozOsxFontSmoothing": "grayscale",
647
+ "WebkitFontSmoothing": "antialiased",
648
+ "display": "block",
649
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
650
+ "fontSize": 20,
651
+ "fontWeight": 400,
652
+ "lineHeight": "24px",
653
+ }
654
+ }
655
+ >
656
+ Для каждого ученика, независимо от возраста. Реальные результаты!
657
+ </span>
658
+ <span
659
+ className=""
660
+ style={
661
+ Object {
662
+ "MozOsxFontSmoothing": "grayscale",
663
+ "WebkitFontSmoothing": "antialiased",
664
+ "display": "block",
665
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
666
+ "fontSize": 14,
667
+ "fontWeight": 400,
668
+ "lineHeight": "20px",
669
+ }
670
+ }
671
+ >
672
+ Для каждого ученика, независимо от возраста. Реальные результаты!
673
+ </span>
674
+ <span
675
+ className=""
676
+ style={
677
+ Object {
678
+ "MozOsxFontSmoothing": "grayscale",
679
+ "WebkitFontSmoothing": "antialiased",
680
+ "display": "block",
681
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
682
+ "fontSize": 12,
683
+ "fontWeight": 400,
684
+ "lineHeight": "18px",
685
+ }
686
+ }
687
+ >
688
+ Для каждого ученика, независимо от возраста. Реальные результаты!
689
+ </span>
690
+ </div>
691
+ `;
692
+
693
+ exports[`wonder-blocks-typography example 5 1`] = `
694
+ <div
695
+ className=""
696
+ style={
697
+ Object {
698
+ "alignItems": "stretch",
699
+ "borderStyle": "solid",
700
+ "borderWidth": 0,
701
+ "boxSizing": "border-box",
702
+ "display": "flex",
703
+ "flexDirection": "column",
704
+ "margin": 0,
705
+ "minHeight": 0,
706
+ "minWidth": 0,
707
+ "padding": 0,
708
+ "position": "relative",
709
+ "zIndex": 0,
710
+ }
711
+ }
712
+ >
713
+ <h1
714
+ className=""
715
+ style={
716
+ Object {
717
+ "@media (maxWidth: 1023px)": Object {
718
+ "fontSize": 28,
719
+ "lineHeight": "32px",
720
+ },
721
+ "@media (minWidth: 1024px)": Object {
722
+ "fontSize": 36,
723
+ "lineHeight": "40px",
724
+ },
725
+ "MozOsxFontSmoothing": "grayscale",
726
+ "WebkitFontSmoothing": "antialiased",
727
+ "display": "block",
728
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
729
+ "fontWeight": 900,
730
+ "marginBottom": 0,
731
+ "marginTop": 0,
732
+ }
733
+ }
734
+ >
735
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
736
+ </h1>
737
+ <h2
738
+ className=""
739
+ style={
740
+ Object {
741
+ "@media (maxWidth: 1023px)": Object {
742
+ "fontSize": 24,
743
+ "lineHeight": "28px",
744
+ },
745
+ "@media (minWidth: 1024px)": Object {
746
+ "fontSize": 28,
747
+ "lineHeight": "32px",
748
+ },
749
+ "MozOsxFontSmoothing": "grayscale",
750
+ "WebkitFontSmoothing": "antialiased",
751
+ "display": "block",
752
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
753
+ "fontWeight": 700,
754
+ "marginBottom": 0,
755
+ "marginTop": 0,
756
+ }
757
+ }
758
+ >
759
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
760
+ </h2>
761
+ <h3
762
+ className=""
763
+ style={
764
+ Object {
765
+ "@media (maxWidth: 1023px)": Object {
766
+ "fontSize": 22,
767
+ "lineHeight": "26px",
768
+ },
769
+ "@media (minWidth: 1024px)": Object {
770
+ "fontSize": 24,
771
+ "lineHeight": "28px",
772
+ },
773
+ "MozOsxFontSmoothing": "grayscale",
774
+ "WebkitFontSmoothing": "antialiased",
775
+ "display": "block",
776
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
777
+ "fontWeight": 700,
778
+ "marginBottom": 0,
779
+ "marginTop": 0,
780
+ }
781
+ }
782
+ >
783
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
784
+ </h3>
785
+ <h4
786
+ className=""
787
+ style={
788
+ Object {
789
+ "MozOsxFontSmoothing": "grayscale",
790
+ "WebkitFontSmoothing": "antialiased",
791
+ "display": "block",
792
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
793
+ "fontSize": 20,
794
+ "fontWeight": 700,
795
+ "lineHeight": "24px",
796
+ "marginBottom": 0,
797
+ "marginTop": 0,
798
+ }
799
+ }
800
+ >
801
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
802
+ </h4>
803
+ <h4
804
+ className=""
805
+ style={
806
+ Object {
807
+ "MozOsxFontSmoothing": "grayscale",
808
+ "WebkitFontSmoothing": "antialiased",
809
+ "display": "block",
810
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
811
+ "fontSize": 12,
812
+ "fontWeight": 700,
813
+ "letterSpacing": 0.6,
814
+ "lineHeight": "16px",
815
+ "marginBottom": 0,
816
+ "marginTop": 0,
817
+ "textTransform": "uppercase",
818
+ }
819
+ }
820
+ >
821
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
822
+ </h4>
823
+ <span
824
+ className=""
825
+ style={
826
+ Object {
827
+ "MozOsxFontSmoothing": "grayscale",
828
+ "WebkitFontSmoothing": "antialiased",
829
+ "display": "block",
830
+ "fontFamily": "\\"Noto Serif\\", serif",
831
+ "fontSize": 22,
832
+ "fontWeight": 400,
833
+ "lineHeight": "28px",
834
+ }
835
+ }
836
+ >
837
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
838
+ </span>
839
+ <span
840
+ className=""
841
+ style={
842
+ Object {
843
+ "MozOsxFontSmoothing": "grayscale",
844
+ "WebkitFontSmoothing": "antialiased",
845
+ "display": "block",
846
+ "fontFamily": "\\"Noto Serif\\", serif",
847
+ "fontSize": 18,
848
+ "fontWeight": 400,
849
+ "lineHeight": "22px",
850
+ }
851
+ }
852
+ >
853
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
854
+ </span>
855
+ <span
856
+ className=""
857
+ style={
858
+ Object {
859
+ "MozOsxFontSmoothing": "grayscale",
860
+ "WebkitFontSmoothing": "antialiased",
861
+ "display": "block",
862
+ "fontFamily": "Inconsolata, monospace",
863
+ "fontSize": 17,
864
+ "fontWeight": 400,
865
+ "lineHeight": "22px",
866
+ }
867
+ }
868
+ >
869
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
870
+ </span>
871
+ <span
872
+ className=""
873
+ style={
874
+ Object {
875
+ "MozOsxFontSmoothing": "grayscale",
876
+ "WebkitFontSmoothing": "antialiased",
877
+ "display": "block",
878
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
879
+ "fontSize": 16,
880
+ "fontWeight": 400,
881
+ "lineHeight": "22px",
882
+ }
883
+ }
884
+ >
885
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
886
+ </span>
887
+ <span
888
+ className=""
889
+ style={
890
+ Object {
891
+ "MozOsxFontSmoothing": "grayscale",
892
+ "WebkitFontSmoothing": "antialiased",
893
+ "display": "block",
894
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
895
+ "fontSize": 16,
896
+ "fontWeight": 700,
897
+ "lineHeight": "20px",
898
+ }
899
+ }
900
+ >
901
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
902
+ </span>
903
+ <span
904
+ className=""
905
+ style={
906
+ Object {
907
+ "MozOsxFontSmoothing": "grayscale",
908
+ "WebkitFontSmoothing": "antialiased",
909
+ "display": "block",
910
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
911
+ "fontSize": 16,
912
+ "fontWeight": 400,
913
+ "lineHeight": "20px",
914
+ }
915
+ }
916
+ >
917
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
918
+ </span>
919
+ <span
920
+ className=""
921
+ style={
922
+ Object {
923
+ "MozOsxFontSmoothing": "grayscale",
924
+ "WebkitFontSmoothing": "antialiased",
925
+ "display": "block",
926
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
927
+ "fontSize": 14,
928
+ "fontWeight": 400,
929
+ "lineHeight": "18px",
930
+ }
931
+ }
932
+ >
933
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
934
+ </span>
935
+ <span
936
+ className=""
937
+ style={
938
+ Object {
939
+ "MozOsxFontSmoothing": "grayscale",
940
+ "WebkitFontSmoothing": "antialiased",
941
+ "display": "block",
942
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
943
+ "fontSize": 12,
944
+ "fontWeight": 400,
945
+ "lineHeight": "16px",
946
+ }
947
+ }
948
+ >
949
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
950
+ </span>
951
+ <span
952
+ className=""
953
+ style={
954
+ Object {
955
+ "MozOsxFontSmoothing": "grayscale",
956
+ "WebkitFontSmoothing": "antialiased",
957
+ "display": "block",
958
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
959
+ "fontSize": 20,
960
+ "fontWeight": 400,
961
+ "lineHeight": "24px",
962
+ }
963
+ }
964
+ >
965
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
966
+ </span>
967
+ <span
968
+ className=""
969
+ style={
970
+ Object {
971
+ "MozOsxFontSmoothing": "grayscale",
972
+ "WebkitFontSmoothing": "antialiased",
973
+ "display": "block",
974
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
975
+ "fontSize": 14,
976
+ "fontWeight": 400,
977
+ "lineHeight": "20px",
978
+ }
979
+ }
980
+ >
981
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
982
+ </span>
983
+ <span
984
+ className=""
985
+ style={
986
+ Object {
987
+ "MozOsxFontSmoothing": "grayscale",
988
+ "WebkitFontSmoothing": "antialiased",
989
+ "display": "block",
990
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
991
+ "fontSize": 12,
992
+ "fontWeight": 400,
993
+ "lineHeight": "18px",
994
+ }
995
+ }
996
+ >
997
+ Dành cho mọi học sinh, mọi lớp học. Kết quả thực tế.
998
+ </span>
999
+ </div>
1000
+ `;
1001
+
1002
+ exports[`wonder-blocks-typography example 6 1`] = `
1003
+ <div
1004
+ className=""
1005
+ style={
1006
+ Object {
1007
+ "alignItems": "stretch",
1008
+ "borderStyle": "solid",
1009
+ "borderWidth": 0,
1010
+ "boxSizing": "border-box",
1011
+ "display": "flex",
1012
+ "flexDirection": "column",
1013
+ "margin": 0,
1014
+ "minHeight": 0,
1015
+ "minWidth": 0,
1016
+ "padding": 0,
1017
+ "position": "relative",
1018
+ "zIndex": 0,
1019
+ }
1020
+ }
1021
+ >
1022
+ <div
1023
+ className=""
1024
+ onKeyDown={[Function]}
1025
+ onKeyUp={[Function]}
1026
+ style={
1027
+ Object {
1028
+ "alignItems": "stretch",
1029
+ "borderStyle": "solid",
1030
+ "borderWidth": 0,
1031
+ "boxSizing": "border-box",
1032
+ "display": "flex",
1033
+ "flexDirection": "column",
1034
+ "margin": 0,
1035
+ "minHeight": 0,
1036
+ "minWidth": 0,
1037
+ "padding": 0,
1038
+ "position": "relative",
1039
+ "width": "fit-content",
1040
+ "zIndex": 0,
1041
+ }
1042
+ }
1043
+ >
1044
+ <button
1045
+ aria-expanded="false"
1046
+ aria-haspopup="listbox"
1047
+ aria-labelledby="language-selector"
1048
+ className=""
1049
+ disabled={false}
1050
+ id="unique-language-selector"
1051
+ onBlur={[Function]}
1052
+ onClick={[Function]}
1053
+ onDragStart={[Function]}
1054
+ onFocus={[Function]}
1055
+ onKeyDown={[Function]}
1056
+ onKeyUp={[Function]}
1057
+ onMouseDown={[Function]}
1058
+ onMouseEnter={[Function]}
1059
+ onMouseLeave={[Function]}
1060
+ onMouseUp={[Function]}
1061
+ onTouchCancel={[Function]}
1062
+ onTouchEnd={[Function]}
1063
+ onTouchStart={[Function]}
1064
+ style={
1065
+ Object {
1066
+ "::MozFocusInner": Object {
1067
+ "border": 0,
1068
+ },
1069
+ "alignItems": "center",
1070
+ "backgroundColor": "#ffffff",
1071
+ "borderColor": "rgba(33,36,44,0.16)",
1072
+ "borderRadius": 4,
1073
+ "borderStyle": "solid",
1074
+ "borderWidth": 1,
1075
+ "boxSizing": "border-box",
1076
+ "color": "#21242c",
1077
+ "display": "inline-flex",
1078
+ "height": 40,
1079
+ "justifyContent": "space-between",
1080
+ "margin": 0,
1081
+ "outline": "none",
1082
+ "paddingLeft": 16,
1083
+ "paddingRight": 12,
1084
+ "position": "relative",
1085
+ "textDecoration": "none",
1086
+ "touchAction": "manipulation",
1087
+ "whiteSpace": "nowrap",
1088
+ }
1089
+ }
1090
+ tabIndex={0}
1091
+ type="button"
1092
+ >
1093
+ <span
1094
+ className=""
1095
+ style={
1096
+ Object {
1097
+ "MozOsxFontSmoothing": "grayscale",
1098
+ "WebkitFontSmoothing": "antialiased",
1099
+ "display": "block",
1100
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1101
+ "fontSize": 16,
1102
+ "fontWeight": 400,
1103
+ "lineHeight": "20px",
1104
+ "marginRight": 8,
1105
+ "overflow": "hidden",
1106
+ "textOverflow": "ellipsis",
1107
+ "userSelect": "none",
1108
+ "whiteSpace": "nowrap",
1109
+ }
1110
+ }
1111
+ >
1112
+ arabic
1113
+ </span>
1114
+ <svg
1115
+ aria-hidden="true"
1116
+ className=""
1117
+ height={16}
1118
+ style={
1119
+ Object {
1120
+ "display": "inline-block",
1121
+ "flexGrow": 0,
1122
+ "flexShrink": 0,
1123
+ "minWidth": 16,
1124
+ "verticalAlign": "text-bottom",
1125
+ }
1126
+ }
1127
+ viewBox="0 0 16 16"
1128
+ width={16}
1129
+ >
1130
+ <path
1131
+ d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
1132
+ fill="rgba(33,36,44,0.64)"
1133
+ />
1134
+ </svg>
1135
+ </button>
1136
+ </div>
1137
+ <h1
1138
+ className=""
1139
+ dir="rtl"
1140
+ style={
1141
+ Object {
1142
+ "@media (maxWidth: 1023px)": Object {
1143
+ "fontSize": 28,
1144
+ "lineHeight": "32px",
1145
+ },
1146
+ "@media (minWidth: 1024px)": Object {
1147
+ "fontSize": 36,
1148
+ "lineHeight": "40px",
1149
+ },
1150
+ "MozOsxFontSmoothing": "grayscale",
1151
+ "WebkitFontSmoothing": "antialiased",
1152
+ "display": "block",
1153
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1154
+ "fontWeight": 900,
1155
+ "marginBottom": 0,
1156
+ "marginTop": 0,
1157
+ }
1158
+ }
1159
+ >
1160
+ مرحبا
1161
+ </h1>
1162
+ <h2
1163
+ className=""
1164
+ dir="rtl"
1165
+ style={
1166
+ Object {
1167
+ "@media (maxWidth: 1023px)": Object {
1168
+ "fontSize": 24,
1169
+ "lineHeight": "28px",
1170
+ },
1171
+ "@media (minWidth: 1024px)": Object {
1172
+ "fontSize": 28,
1173
+ "lineHeight": "32px",
1174
+ },
1175
+ "MozOsxFontSmoothing": "grayscale",
1176
+ "WebkitFontSmoothing": "antialiased",
1177
+ "display": "block",
1178
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1179
+ "fontWeight": 700,
1180
+ "marginBottom": 0,
1181
+ "marginTop": 0,
1182
+ }
1183
+ }
1184
+ >
1185
+ مرحبا
1186
+ </h2>
1187
+ <h3
1188
+ className=""
1189
+ dir="rtl"
1190
+ style={
1191
+ Object {
1192
+ "@media (maxWidth: 1023px)": Object {
1193
+ "fontSize": 22,
1194
+ "lineHeight": "26px",
1195
+ },
1196
+ "@media (minWidth: 1024px)": Object {
1197
+ "fontSize": 24,
1198
+ "lineHeight": "28px",
1199
+ },
1200
+ "MozOsxFontSmoothing": "grayscale",
1201
+ "WebkitFontSmoothing": "antialiased",
1202
+ "display": "block",
1203
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1204
+ "fontWeight": 700,
1205
+ "marginBottom": 0,
1206
+ "marginTop": 0,
1207
+ }
1208
+ }
1209
+ >
1210
+ مرحبا
1211
+ </h3>
1212
+ <h4
1213
+ className=""
1214
+ dir="rtl"
1215
+ style={
1216
+ Object {
1217
+ "MozOsxFontSmoothing": "grayscale",
1218
+ "WebkitFontSmoothing": "antialiased",
1219
+ "display": "block",
1220
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1221
+ "fontSize": 20,
1222
+ "fontWeight": 700,
1223
+ "lineHeight": "24px",
1224
+ "marginBottom": 0,
1225
+ "marginTop": 0,
1226
+ }
1227
+ }
1228
+ >
1229
+ مرحبا
1230
+ </h4>
1231
+ <h4
1232
+ className=""
1233
+ dir="rtl"
1234
+ style={
1235
+ Object {
1236
+ "MozOsxFontSmoothing": "grayscale",
1237
+ "WebkitFontSmoothing": "antialiased",
1238
+ "display": "block",
1239
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1240
+ "fontSize": 12,
1241
+ "fontWeight": 700,
1242
+ "letterSpacing": 0.6,
1243
+ "lineHeight": "16px",
1244
+ "marginBottom": 0,
1245
+ "marginTop": 0,
1246
+ "textTransform": "uppercase",
1247
+ }
1248
+ }
1249
+ >
1250
+ مرحبا
1251
+ </h4>
1252
+ <span
1253
+ className=""
1254
+ dir="rtl"
1255
+ style={
1256
+ Object {
1257
+ "MozOsxFontSmoothing": "grayscale",
1258
+ "WebkitFontSmoothing": "antialiased",
1259
+ "display": "block",
1260
+ "fontFamily": "\\"Noto Serif\\", serif",
1261
+ "fontSize": 22,
1262
+ "fontWeight": 400,
1263
+ "lineHeight": "28px",
1264
+ }
1265
+ }
1266
+ >
1267
+ مرحبا
1268
+ </span>
1269
+ <span
1270
+ className=""
1271
+ dir="rtl"
1272
+ style={
1273
+ Object {
1274
+ "MozOsxFontSmoothing": "grayscale",
1275
+ "WebkitFontSmoothing": "antialiased",
1276
+ "display": "block",
1277
+ "fontFamily": "\\"Noto Serif\\", serif",
1278
+ "fontSize": 18,
1279
+ "fontWeight": 400,
1280
+ "lineHeight": "22px",
1281
+ }
1282
+ }
1283
+ >
1284
+ مرحبا
1285
+ </span>
1286
+ <span
1287
+ className=""
1288
+ dir="rtl"
1289
+ style={
1290
+ Object {
1291
+ "MozOsxFontSmoothing": "grayscale",
1292
+ "WebkitFontSmoothing": "antialiased",
1293
+ "display": "block",
1294
+ "fontFamily": "Inconsolata, monospace",
1295
+ "fontSize": 17,
1296
+ "fontWeight": 400,
1297
+ "lineHeight": "22px",
1298
+ }
1299
+ }
1300
+ >
1301
+ مرحبا
1302
+ </span>
1303
+ <span
1304
+ className=""
1305
+ dir="rtl"
1306
+ style={
1307
+ Object {
1308
+ "MozOsxFontSmoothing": "grayscale",
1309
+ "WebkitFontSmoothing": "antialiased",
1310
+ "display": "block",
1311
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1312
+ "fontSize": 16,
1313
+ "fontWeight": 400,
1314
+ "lineHeight": "22px",
1315
+ }
1316
+ }
1317
+ >
1318
+ مرحبا
1319
+ </span>
1320
+ <span
1321
+ className=""
1322
+ dir="rtl"
1323
+ style={
1324
+ Object {
1325
+ "MozOsxFontSmoothing": "grayscale",
1326
+ "WebkitFontSmoothing": "antialiased",
1327
+ "display": "block",
1328
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1329
+ "fontSize": 16,
1330
+ "fontWeight": 700,
1331
+ "lineHeight": "20px",
1332
+ }
1333
+ }
1334
+ >
1335
+ مرحبا
1336
+ </span>
1337
+ <span
1338
+ className=""
1339
+ dir="rtl"
1340
+ style={
1341
+ Object {
1342
+ "MozOsxFontSmoothing": "grayscale",
1343
+ "WebkitFontSmoothing": "antialiased",
1344
+ "display": "block",
1345
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1346
+ "fontSize": 16,
1347
+ "fontWeight": 400,
1348
+ "lineHeight": "20px",
1349
+ }
1350
+ }
1351
+ >
1352
+ مرحبا
1353
+ </span>
1354
+ <span
1355
+ className=""
1356
+ dir="rtl"
1357
+ style={
1358
+ Object {
1359
+ "MozOsxFontSmoothing": "grayscale",
1360
+ "WebkitFontSmoothing": "antialiased",
1361
+ "display": "block",
1362
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1363
+ "fontSize": 14,
1364
+ "fontWeight": 400,
1365
+ "lineHeight": "18px",
1366
+ }
1367
+ }
1368
+ >
1369
+ مرحبا
1370
+ </span>
1371
+ <span
1372
+ className=""
1373
+ dir="rtl"
1374
+ style={
1375
+ Object {
1376
+ "MozOsxFontSmoothing": "grayscale",
1377
+ "WebkitFontSmoothing": "antialiased",
1378
+ "display": "block",
1379
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1380
+ "fontSize": 12,
1381
+ "fontWeight": 400,
1382
+ "lineHeight": "16px",
1383
+ }
1384
+ }
1385
+ >
1386
+ مرحبا
1387
+ </span>
1388
+ <span
1389
+ className=""
1390
+ dir="rtl"
1391
+ style={
1392
+ Object {
1393
+ "MozOsxFontSmoothing": "grayscale",
1394
+ "WebkitFontSmoothing": "antialiased",
1395
+ "display": "block",
1396
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1397
+ "fontSize": 20,
1398
+ "fontWeight": 400,
1399
+ "lineHeight": "24px",
1400
+ }
1401
+ }
1402
+ >
1403
+ مرحبا
1404
+ </span>
1405
+ <span
1406
+ className=""
1407
+ dir="rtl"
1408
+ style={
1409
+ Object {
1410
+ "MozOsxFontSmoothing": "grayscale",
1411
+ "WebkitFontSmoothing": "antialiased",
1412
+ "display": "block",
1413
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1414
+ "fontSize": 14,
1415
+ "fontWeight": 400,
1416
+ "lineHeight": "20px",
1417
+ }
1418
+ }
1419
+ >
1420
+ مرحبا
1421
+ </span>
1422
+ <span
1423
+ className=""
1424
+ dir="rtl"
1425
+ style={
1426
+ Object {
1427
+ "MozOsxFontSmoothing": "grayscale",
1428
+ "WebkitFontSmoothing": "antialiased",
1429
+ "display": "block",
1430
+ "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
1431
+ "fontSize": 12,
1432
+ "fontWeight": 400,
1433
+ "lineHeight": "18px",
1434
+ }
1435
+ }
1436
+ >
1437
+ مرحبا
1438
+ </span>
1439
+ </div>
1440
+ `;
1441
+
1442
+ exports[`wonder-blocks-typography example 7 1`] = `
1443
+ <span
1444
+ className=""
1445
+ style={
1446
+ Object {
1447
+ "MozOsxFontSmoothing": "grayscale",
1448
+ "WebkitFontSmoothing": "antialiased",
1449
+ "display": "block",
1450
+ "fontFamily": "Inconsolata, monospace",
1451
+ "fontSize": 17,
1452
+ "fontWeight": 400,
1453
+ "lineHeight": "22px",
1454
+ "whiteSpace": "pre",
1455
+ }
1456
+ }
1457
+ >
1458
+ const things = {
1459
+ areTested: "This is my new Code element with my code.",
1460
+ };
1461
+ </span>
1462
+ `;