@nypl/design-system-react-components 2.1.5-rc → 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 +42 -42
  2. package/dist/design-system-react-components.js +2110 -2032
  3. package/dist/src/theme/components/heading.d.ts +221 -15
  4. package/dist/src/theme/components/structuredContent.d.ts +72 -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
  };
@@ -59,6 +95,12 @@ export declare const headings: {
59
95
  a: {
60
96
  textUnderlineOffset: string;
61
97
  };
98
+ "@media (min-width: 0px)": {
99
+ fontSize: string;
100
+ };
101
+ "@media (min-width: 600px)": {
102
+ fontSize: string;
103
+ };
62
104
  };
63
105
  heading1: {
64
106
  fontWeight: string;
@@ -68,6 +110,12 @@ export declare const headings: {
68
110
  a: {
69
111
  textUnderlineOffset: string;
70
112
  };
113
+ "@media (min-width: 0px)": {
114
+ fontSize: string;
115
+ };
116
+ "@media (min-width: 600px)": {
117
+ fontSize: string;
118
+ };
71
119
  };
72
120
  heading2: {
73
121
  fontWeight: string;
@@ -77,6 +125,12 @@ export declare const headings: {
77
125
  a: {
78
126
  textUnderlineOffset: string;
79
127
  };
128
+ "@media (min-width: 0px)": {
129
+ fontSize: string;
130
+ };
131
+ "@media (min-width: 600px)": {
132
+ fontSize: string;
133
+ };
80
134
  };
81
135
  heading3: {
82
136
  fontWeight: string;
@@ -86,6 +140,12 @@ export declare const headings: {
86
140
  a: {
87
141
  textUnderlineOffset: string;
88
142
  };
143
+ "@media (min-width: 0px)": {
144
+ fontSize: string;
145
+ };
146
+ "@media (min-width: 600px)": {
147
+ fontSize: string;
148
+ };
89
149
  };
90
150
  heading4: {
91
151
  fontWeight: string;
@@ -95,18 +155,36 @@ export declare const headings: {
95
155
  a: {
96
156
  textUnderlineOffset: string;
97
157
  };
158
+ "@media (min-width: 0px)": {
159
+ fontSize: string;
160
+ };
161
+ "@media (min-width: 600px)": {
162
+ fontSize: string;
163
+ };
98
164
  };
99
165
  heading5: {
100
166
  fontWeight: string;
101
167
  letterSpacing: string;
102
168
  lineHeight: string;
103
169
  width: string;
170
+ "@media (min-width: 0px)": {
171
+ fontSize: string;
172
+ };
173
+ "@media (min-width: 600px)": {
174
+ fontSize: string;
175
+ };
104
176
  };
105
177
  heading6: {
106
178
  fontWeight: string;
107
179
  letterSpacing: string;
108
180
  lineHeight: string;
109
181
  width: string;
182
+ "@media (min-width: 0px)": {
183
+ fontSize: string;
184
+ };
185
+ "@media (min-width: 600px)": {
186
+ fontSize: string;
187
+ };
110
188
  };
111
189
  };
112
190
  declare const Heading: {
@@ -157,6 +235,12 @@ declare const Heading: {
157
235
  a: {
158
236
  textUnderlineOffset: string;
159
237
  };
238
+ "@media (min-width: 0px)": {
239
+ fontSize: string;
240
+ };
241
+ "@media (min-width: 600px)": {
242
+ fontSize: string;
243
+ };
160
244
  };
161
245
  h2: {
162
246
  fontWeight: string;
@@ -166,6 +250,12 @@ declare const Heading: {
166
250
  a: {
167
251
  textUnderlineOffset: string;
168
252
  };
253
+ "@media (min-width: 0px)": {
254
+ fontSize: string;
255
+ };
256
+ "@media (min-width: 600px)": {
257
+ fontSize: string;
258
+ };
169
259
  };
170
260
  h3: {
171
261
  fontWeight: string;
@@ -175,6 +265,12 @@ declare const Heading: {
175
265
  a: {
176
266
  textUnderlineOffset: string;
177
267
  };
268
+ "@media (min-width: 0px)": {
269
+ fontSize: string;
270
+ };
271
+ "@media (min-width: 600px)": {
272
+ fontSize: string;
273
+ };
178
274
  };
179
275
  h4: {
180
276
  fontWeight: string;
@@ -184,28 +280,51 @@ declare const Heading: {
184
280
  a: {
185
281
  textUnderlineOffset: string;
186
282
  };
283
+ "@media (min-width: 0px)": {
284
+ fontSize: string;
285
+ };
286
+ "@media (min-width: 600px)": {
287
+ fontSize: string;
288
+ };
187
289
  };
188
290
  h5: {
189
291
  fontWeight: string;
190
292
  letterSpacing: string;
191
293
  lineHeight: string;
192
294
  width: string;
295
+ "@media (min-width: 0px)": {
296
+ fontSize: string;
297
+ };
298
+ "@media (min-width: 600px)": {
299
+ fontSize: string;
300
+ };
193
301
  };
194
302
  h6: {
195
303
  fontWeight: string;
196
304
  letterSpacing: string;
197
305
  lineHeight: string;
198
306
  width: string;
307
+ "@media (min-width: 0px)": {
308
+ fontSize: string;
309
+ };
310
+ "@media (min-width: 600px)": {
311
+ fontSize: string;
312
+ };
199
313
  };
200
314
  one: {
201
315
  width: string;
202
316
  a: {
203
317
  textUnderlineOffset: string;
204
318
  };
319
+ "@media (min-width: 0px)": {
320
+ fontSize: string;
321
+ };
322
+ "@media (min-width: 600px)": {
323
+ fontSize: string;
324
+ };
205
325
  marginTop: string;
206
326
  marginStart: string;
207
327
  marginEnd: string;
208
- fontSize: string;
209
328
  fontWeight: string;
210
329
  letterSpacing: string;
211
330
  lineHeight: string;
@@ -215,46 +334,71 @@ declare const Heading: {
215
334
  a: {
216
335
  textUnderlineOffset: string;
217
336
  };
337
+ "@media (min-width: 0px)": {
338
+ fontSize: string;
339
+ };
340
+ "@media (min-width: 600px)": {
341
+ fontSize: string;
342
+ };
218
343
  marginTop: string;
219
344
  marginStart: string;
220
345
  marginEnd: string;
221
- fontSize: string;
222
346
  fontWeight: string;
223
347
  lineHeight: string;
224
348
  };
225
349
  three: {
226
350
  width: string;
351
+ "@media (min-width: 0px)": {
352
+ fontSize: string;
353
+ };
354
+ "@media (min-width: 600px)": {
355
+ fontSize: string;
356
+ };
227
357
  marginTop: string;
228
358
  marginStart: string;
229
359
  marginEnd: string;
230
- fontSize: string;
231
360
  fontWeight: string;
232
361
  lineHeight: string;
233
362
  };
234
363
  four: {
235
364
  width: string;
365
+ "@media (min-width: 0px)": {
366
+ fontSize: string;
367
+ };
368
+ "@media (min-width: 600px)": {
369
+ fontSize: string;
370
+ };
236
371
  marginTop: string;
237
372
  marginStart: string;
238
373
  marginEnd: string;
239
- fontSize: string;
240
374
  fontWeight: string;
241
375
  lineHeight: string;
242
376
  };
243
377
  five: {
244
378
  width: string;
379
+ "@media (min-width: 0px)": {
380
+ fontSize: string;
381
+ };
382
+ "@media (min-width: 600px)": {
383
+ fontSize: string;
384
+ };
245
385
  marginTop: string;
246
386
  marginStart: string;
247
387
  marginEnd: string;
248
- fontSize: string;
249
388
  fontWeight: string;
250
389
  lineHeight: string;
251
390
  };
252
391
  six: {
253
392
  width: string;
393
+ "@media (min-width: 0px)": {
394
+ fontSize: string;
395
+ };
396
+ "@media (min-width: 600px)": {
397
+ fontSize: string;
398
+ };
254
399
  marginTop: string;
255
400
  marginStart: string;
256
401
  marginEnd: string;
257
- fontSize: string;
258
402
  fontWeight: string;
259
403
  lineHeight: string;
260
404
  };
@@ -266,6 +410,12 @@ declare const Heading: {
266
410
  a: {
267
411
  textUnderlineOffset: string;
268
412
  };
413
+ "@media (min-width: 0px)": {
414
+ fontSize: string;
415
+ };
416
+ "@media (min-width: 600px)": {
417
+ fontSize: string;
418
+ };
269
419
  };
270
420
  heading1: {
271
421
  fontWeight: string;
@@ -275,6 +425,12 @@ declare const Heading: {
275
425
  a: {
276
426
  textUnderlineOffset: string;
277
427
  };
428
+ "@media (min-width: 0px)": {
429
+ fontSize: string;
430
+ };
431
+ "@media (min-width: 600px)": {
432
+ fontSize: string;
433
+ };
278
434
  };
279
435
  heading2: {
280
436
  fontWeight: string;
@@ -284,6 +440,12 @@ declare const Heading: {
284
440
  a: {
285
441
  textUnderlineOffset: string;
286
442
  };
443
+ "@media (min-width: 0px)": {
444
+ fontSize: string;
445
+ };
446
+ "@media (min-width: 600px)": {
447
+ fontSize: string;
448
+ };
287
449
  };
288
450
  heading3: {
289
451
  fontWeight: string;
@@ -293,6 +455,12 @@ declare const Heading: {
293
455
  a: {
294
456
  textUnderlineOffset: string;
295
457
  };
458
+ "@media (min-width: 0px)": {
459
+ fontSize: string;
460
+ };
461
+ "@media (min-width: 600px)": {
462
+ fontSize: string;
463
+ };
296
464
  };
297
465
  heading4: {
298
466
  fontWeight: string;
@@ -302,28 +470,51 @@ declare const Heading: {
302
470
  a: {
303
471
  textUnderlineOffset: string;
304
472
  };
473
+ "@media (min-width: 0px)": {
474
+ fontSize: string;
475
+ };
476
+ "@media (min-width: 600px)": {
477
+ fontSize: string;
478
+ };
305
479
  };
306
480
  heading5: {
307
481
  fontWeight: string;
308
482
  letterSpacing: string;
309
483
  lineHeight: string;
310
484
  width: string;
485
+ "@media (min-width: 0px)": {
486
+ fontSize: string;
487
+ };
488
+ "@media (min-width: 600px)": {
489
+ fontSize: string;
490
+ };
311
491
  };
312
492
  heading6: {
313
493
  fontWeight: string;
314
494
  letterSpacing: string;
315
495
  lineHeight: string;
316
496
  width: string;
497
+ "@media (min-width: 0px)": {
498
+ fontSize: string;
499
+ };
500
+ "@media (min-width: 600px)": {
501
+ fontSize: string;
502
+ };
317
503
  };
318
504
  primary: {
319
505
  width: string;
320
506
  a: {
321
507
  textUnderlineOffset: string;
322
508
  };
509
+ "@media (min-width: 0px)": {
510
+ fontSize: string;
511
+ };
512
+ "@media (min-width: 600px)": {
513
+ fontSize: string;
514
+ };
323
515
  marginTop: string;
324
516
  marginStart: string;
325
517
  marginEnd: string;
326
- fontSize: string;
327
518
  fontWeight: string;
328
519
  letterSpacing: string;
329
520
  lineHeight: string;
@@ -333,28 +524,43 @@ declare const Heading: {
333
524
  a: {
334
525
  textUnderlineOffset: string;
335
526
  };
527
+ "@media (min-width: 0px)": {
528
+ fontSize: string;
529
+ };
530
+ "@media (min-width: 600px)": {
531
+ fontSize: string;
532
+ };
336
533
  marginTop: string;
337
534
  marginStart: string;
338
535
  marginEnd: string;
339
- fontSize: string;
340
536
  fontWeight: string;
341
537
  lineHeight: string;
342
538
  };
343
539
  tertiary: {
344
540
  width: string;
541
+ "@media (min-width: 0px)": {
542
+ fontSize: string;
543
+ };
544
+ "@media (min-width: 600px)": {
545
+ fontSize: string;
546
+ };
345
547
  marginTop: string;
346
548
  marginStart: string;
347
549
  marginEnd: string;
348
- fontSize: string;
349
550
  fontWeight: string;
350
551
  lineHeight: string;
351
552
  };
352
553
  callout: {
353
554
  width: string;
555
+ "@media (min-width: 0px)": {
556
+ fontSize: string;
557
+ };
558
+ "@media (min-width: 600px)": {
559
+ fontSize: string;
560
+ };
354
561
  marginTop: string;
355
562
  marginStart: string;
356
563
  marginEnd: string;
357
- fontSize: string;
358
564
  fontWeight: string;
359
565
  lineHeight: string;
360
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
  };
@@ -66,6 +91,12 @@ declare const StructuredContent: {
66
91
  a: {
67
92
  textUnderlineOffset: string;
68
93
  };
94
+ "@media (min-width: 0px)": {
95
+ fontSize: string;
96
+ };
97
+ "@media (min-width: 600px)": {
98
+ fontSize: string;
99
+ };
69
100
  };
70
101
  heading1: {
71
102
  fontWeight: string;
@@ -75,6 +106,12 @@ declare const StructuredContent: {
75
106
  a: {
76
107
  textUnderlineOffset: string;
77
108
  };
109
+ "@media (min-width: 0px)": {
110
+ fontSize: string;
111
+ };
112
+ "@media (min-width: 600px)": {
113
+ fontSize: string;
114
+ };
78
115
  };
79
116
  heading2: {
80
117
  fontWeight: string;
@@ -84,6 +121,12 @@ declare const StructuredContent: {
84
121
  a: {
85
122
  textUnderlineOffset: string;
86
123
  };
124
+ "@media (min-width: 0px)": {
125
+ fontSize: string;
126
+ };
127
+ "@media (min-width: 600px)": {
128
+ fontSize: string;
129
+ };
87
130
  };
88
131
  heading3: {
89
132
  fontWeight: string;
@@ -93,6 +136,12 @@ declare const StructuredContent: {
93
136
  a: {
94
137
  textUnderlineOffset: string;
95
138
  };
139
+ "@media (min-width: 0px)": {
140
+ fontSize: string;
141
+ };
142
+ "@media (min-width: 600px)": {
143
+ fontSize: string;
144
+ };
96
145
  };
97
146
  heading4: {
98
147
  fontWeight: string;
@@ -102,18 +151,36 @@ declare const StructuredContent: {
102
151
  a: {
103
152
  textUnderlineOffset: string;
104
153
  };
154
+ "@media (min-width: 0px)": {
155
+ fontSize: string;
156
+ };
157
+ "@media (min-width: 600px)": {
158
+ fontSize: string;
159
+ };
105
160
  };
106
161
  heading5: {
107
162
  fontWeight: string;
108
163
  letterSpacing: string;
109
164
  lineHeight: string;
110
165
  width: string;
166
+ "@media (min-width: 0px)": {
167
+ fontSize: string;
168
+ };
169
+ "@media (min-width: 600px)": {
170
+ fontSize: string;
171
+ };
111
172
  };
112
173
  heading6: {
113
174
  fontWeight: string;
114
175
  letterSpacing: string;
115
176
  lineHeight: string;
116
177
  width: string;
178
+ "@media (min-width: 0px)": {
179
+ fontSize: string;
180
+ };
181
+ "@media (min-width: 600px)": {
182
+ fontSize: string;
183
+ };
117
184
  };
118
185
  imageFigure: {
119
186
  marginBottom: string;
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-rc",
3
+ "version": "2.1.5-rc3",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",