@nypl/design-system-react-components 2.1.5-rc2 → 2.1.5-rc3

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 (6) hide show
  1. package/dist/design-system-react-components.cjs +46 -46
  2. package/dist/design-system-react-components.js +1723 -1685
  3. package/dist/src/theme/components/heading.d.ts +101 -15
  4. package/dist/src/theme/components/structuredContent.d.ts +30 -5
  5. package/dist/src/theme/components/text.d.ts +16 -4
  6. package/package.json +1 -1
package/dist/src/theme/components/heading.d.ts CHANGED
@@ -1,13 +1,29 @@
1
+ /**
2
+ * Heading Styles
3
+ *
4
+ * Chakra's standard responsive style method is not working for the fontSize
5
+ * attribute. Because of the, we are including our own @media queries to set
6
+ * fontSize.
7
+ *
8
+ * For the deprecated variants, the base and 600px breakpoints use the same
9
+ * values. This was needed for consistency and necessary to override the styles
10
+ * set later in the file for the new heading variants.
11
+ */
1
12
  export declare const headings: {
2
13
  one: {
3
14
  width: string;
4
15
  a: {
5
16
  textUnderlineOffset: string;
6
17
  };
18
+ "@media (min-width: 0px)": {
19
+ fontSize: string;
20
+ };
21
+ "@media (min-width: 600px)": {
22
+ fontSize: string;
23
+ };
7
24
  marginTop: string;
8
25
  marginStart: string;
9
26
  marginEnd: string;
10
- fontSize: string;
11
27
  fontWeight: string;
12
28
  letterSpacing: string;
13
29
  lineHeight: string;
@@ -17,37 +33,57 @@ export declare const headings: {
17
33
  a: {
18
34
  textUnderlineOffset: string;
19
35
  };
36
+ "@media (min-width: 0px)": {
37
+ fontSize: string;
38
+ };
39
+ "@media (min-width: 600px)": {
40
+ fontSize: string;
41
+ };
20
42
  marginTop: string;
21
43
  marginStart: string;
22
44
  marginEnd: string;
23
- fontSize: string;
24
45
  fontWeight: string;
25
46
  lineHeight: string;
26
47
  };
27
48
  three: {
28
49
  width: string;
50
+ "@media (min-width: 0px)": {
51
+ fontSize: string;
52
+ };
53
+ "@media (min-width: 600px)": {
54
+ fontSize: string;
55
+ };
29
56
  marginTop: string;
30
57
  marginStart: string;
31
58
  marginEnd: string;
32
- fontSize: string;
33
59
  fontWeight: string;
34
60
  lineHeight: string;
35
61
  };
36
62
  four: {
37
63
  width: string;
64
+ "@media (min-width: 0px)": {
65
+ fontSize: string;
66
+ };
67
+ "@media (min-width: 600px)": {
68
+ fontSize: string;
69
+ };
38
70
  marginTop: string;
39
71
  marginStart: string;
40
72
  marginEnd: string;
41
- fontSize: string;
42
73
  fontWeight: string;
43
74
  lineHeight: string;
44
75
  };
45
76
  fallback: {
46
77
  width: string;
78
+ "@media (min-width: 0px)": {
79
+ fontSize: string;
80
+ };
81
+ "@media (min-width: 600px)": {
82
+ fontSize: string;
83
+ };
47
84
  marginTop: string;
48
85
  marginStart: string;
49
86
  marginEnd: string;
50
- fontSize: string;
51
87
  fontWeight: string;
52
88
  lineHeight: string;
53
89
  };
@@ -280,10 +316,15 @@ declare const Heading: {
280
316
  a: {
281
317
  textUnderlineOffset: string;
282
318
  };
319
+ "@media (min-width: 0px)": {
320
+ fontSize: string;
321
+ };
322
+ "@media (min-width: 600px)": {
323
+ fontSize: string;
324
+ };
283
325
  marginTop: string;
284
326
  marginStart: string;
285
327
  marginEnd: string;
286
- fontSize: string;
287
328
  fontWeight: string;
288
329
  letterSpacing: string;
289
330
  lineHeight: string;
@@ -293,46 +334,71 @@ declare const Heading: {
293
334
  a: {
294
335
  textUnderlineOffset: string;
295
336
  };
337
+ "@media (min-width: 0px)": {
338
+ fontSize: string;
339
+ };
340
+ "@media (min-width: 600px)": {
341
+ fontSize: string;
342
+ };
296
343
  marginTop: string;
297
344
  marginStart: string;
298
345
  marginEnd: string;
299
- fontSize: string;
300
346
  fontWeight: string;
301
347
  lineHeight: string;
302
348
  };
303
349
  three: {
304
350
  width: string;
351
+ "@media (min-width: 0px)": {
352
+ fontSize: string;
353
+ };
354
+ "@media (min-width: 600px)": {
355
+ fontSize: string;
356
+ };
305
357
  marginTop: string;
306
358
  marginStart: string;
307
359
  marginEnd: string;
308
- fontSize: string;
309
360
  fontWeight: string;
310
361
  lineHeight: string;
311
362
  };
312
363
  four: {
313
364
  width: string;
365
+ "@media (min-width: 0px)": {
366
+ fontSize: string;
367
+ };
368
+ "@media (min-width: 600px)": {
369
+ fontSize: string;
370
+ };
314
371
  marginTop: string;
315
372
  marginStart: string;
316
373
  marginEnd: string;
317
- fontSize: string;
318
374
  fontWeight: string;
319
375
  lineHeight: string;
320
376
  };
321
377
  five: {
322
378
  width: string;
379
+ "@media (min-width: 0px)": {
380
+ fontSize: string;
381
+ };
382
+ "@media (min-width: 600px)": {
383
+ fontSize: string;
384
+ };
323
385
  marginTop: string;
324
386
  marginStart: string;
325
387
  marginEnd: string;
326
- fontSize: string;
327
388
  fontWeight: string;
328
389
  lineHeight: string;
329
390
  };
330
391
  six: {
331
392
  width: string;
393
+ "@media (min-width: 0px)": {
394
+ fontSize: string;
395
+ };
396
+ "@media (min-width: 600px)": {
397
+ fontSize: string;
398
+ };
332
399
  marginTop: string;
333
400
  marginStart: string;
334
401
  marginEnd: string;
335
- fontSize: string;
336
402
  fontWeight: string;
337
403
  lineHeight: string;
338
404
  };
@@ -440,10 +506,15 @@ declare const Heading: {
440
506
  a: {
441
507
  textUnderlineOffset: string;
442
508
  };
509
+ "@media (min-width: 0px)": {
510
+ fontSize: string;
511
+ };
512
+ "@media (min-width: 600px)": {
513
+ fontSize: string;
514
+ };
443
515
  marginTop: string;
444
516
  marginStart: string;
445
517
  marginEnd: string;
446
- fontSize: string;
447
518
  fontWeight: string;
448
519
  letterSpacing: string;
449
520
  lineHeight: string;
@@ -453,28 +524,43 @@ declare const Heading: {
453
524
  a: {
454
525
  textUnderlineOffset: string;
455
526
  };
527
+ "@media (min-width: 0px)": {
528
+ fontSize: string;
529
+ };
530
+ "@media (min-width: 600px)": {
531
+ fontSize: string;
532
+ };
456
533
  marginTop: string;
457
534
  marginStart: string;
458
535
  marginEnd: string;
459
- fontSize: string;
460
536
  fontWeight: string;
461
537
  lineHeight: string;
462
538
  };
463
539
  tertiary: {
464
540
  width: string;
541
+ "@media (min-width: 0px)": {
542
+ fontSize: string;
543
+ };
544
+ "@media (min-width: 600px)": {
545
+ fontSize: string;
546
+ };
465
547
  marginTop: string;
466
548
  marginStart: string;
467
549
  marginEnd: string;
468
- fontSize: string;
469
550
  fontWeight: string;
470
551
  lineHeight: string;
471
552
  };
472
553
  callout: {
473
554
  width: string;
555
+ "@media (min-width: 0px)": {
556
+ fontSize: string;
557
+ };
558
+ "@media (min-width: 600px)": {
559
+ fontSize: string;
560
+ };
474
561
  marginTop: string;
475
562
  marginStart: string;
476
563
  marginEnd: string;
477
- fontSize: string;
478
564
  fontWeight: string;
479
565
  lineHeight: string;
480
566
  };
package/dist/src/theme/components/structuredContent.d.ts CHANGED
@@ -11,10 +11,15 @@ declare const StructuredContent: {
11
11
  a: {
12
12
  textUnderlineOffset: string;
13
13
  };
14
+ "@media (min-width: 0px)": {
15
+ fontSize: string;
16
+ };
17
+ "@media (min-width: 600px)": {
18
+ fontSize: string;
19
+ };
14
20
  marginTop: string;
15
21
  marginStart: string;
16
22
  marginEnd: string;
17
- fontSize: string;
18
23
  fontWeight: string;
19
24
  letterSpacing: string;
20
25
  lineHeight: string;
@@ -24,37 +29,57 @@ declare const StructuredContent: {
24
29
  a: {
25
30
  textUnderlineOffset: string;
26
31
  };
32
+ "@media (min-width: 0px)": {
33
+ fontSize: string;
34
+ };
35
+ "@media (min-width: 600px)": {
36
+ fontSize: string;
37
+ };
27
38
  marginTop: string;
28
39
  marginStart: string;
29
40
  marginEnd: string;
30
- fontSize: string;
31
41
  fontWeight: string;
32
42
  lineHeight: string;
33
43
  };
34
44
  three: {
35
45
  width: string;
46
+ "@media (min-width: 0px)": {
47
+ fontSize: string;
48
+ };
49
+ "@media (min-width: 600px)": {
50
+ fontSize: string;
51
+ };
36
52
  marginTop: string;
37
53
  marginStart: string;
38
54
  marginEnd: string;
39
- fontSize: string;
40
55
  fontWeight: string;
41
56
  lineHeight: string;
42
57
  };
43
58
  four: {
44
59
  width: string;
60
+ "@media (min-width: 0px)": {
61
+ fontSize: string;
62
+ };
63
+ "@media (min-width: 600px)": {
64
+ fontSize: string;
65
+ };
45
66
  marginTop: string;
46
67
  marginStart: string;
47
68
  marginEnd: string;
48
- fontSize: string;
49
69
  fontWeight: string;
50
70
  lineHeight: string;
51
71
  };
52
72
  fallback: {
53
73
  width: string;
74
+ "@media (min-width: 0px)": {
75
+ fontSize: string;
76
+ };
77
+ "@media (min-width: 600px)": {
78
+ fontSize: string;
79
+ };
54
80
  marginTop: string;
55
81
  marginStart: string;
56
82
  marginEnd: string;
57
- fontSize: string;
58
83
  fontWeight: string;
59
84
  lineHeight: string;
60
85
  };
package/dist/src/theme/components/text.d.ts CHANGED
@@ -25,24 +25,36 @@ declare const Text: {
25
25
  fontWeight: string;
26
26
  };
27
27
  overline1: {
28
- fontSize: string;
28
+ fontSize: {
29
+ base: string;
30
+ md: string;
31
+ };
29
32
  fontWeight: string;
30
33
  lineHeight: number;
31
34
  textTransform: string;
32
35
  };
33
36
  overline2: {
34
- fontSize: string;
37
+ fontSize: {
38
+ base: string;
39
+ md: string;
40
+ };
35
41
  fontWeight: string;
36
42
  lineHeight: number;
37
43
  textTransform: string;
38
44
  };
39
45
  subtitle1: {
40
- fontSize: string;
46
+ fontSize: {
47
+ base: string;
48
+ md: string;
49
+ };
41
50
  fontWeight: string;
42
51
  lineHeight: number;
43
52
  };
44
53
  subtitle2: {
45
- fontSize: string;
54
+ fontSize: {
55
+ base: string;
56
+ md: string;
57
+ };
46
58
  fontWeight: string;
47
59
  lineHeight: number;
48
60
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "2.1.5-rc2",
3
+ "version": "2.1.5-rc3",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",