@nypl/design-system-react-components 1.0.3-beta → 1.0.3

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 (16) hide show
  1. package/CHANGELOG.md +1454 -0
  2. package/dist/components/Card/Card.d.ts +8 -6
  3. package/dist/components/Logo/Logo.d.ts +1 -1
  4. package/dist/components/Logo/LogoSvgs.d.ts +2 -0
  5. package/dist/components/Table/Table.d.ts +3 -2
  6. package/dist/design-system-react-components.cjs.development.js +771 -451
  7. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  8. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  9. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  10. package/dist/design-system-react-components.esm.js +771 -451
  11. package/dist/design-system-react-components.esm.js.map +1 -1
  12. package/dist/theme/components/customTable.d.ts +522 -34
  13. package/dist/theme/components/select.d.ts +0 -5
  14. package/dist/theme/components/structuredContent.d.ts +117 -17
  15. package/dist/theme/components/toggle.d.ts +1 -0
  16. package/package.json +3 -3
package/dist/theme/components/customTable.d.ts CHANGED
@@ -1,72 +1,418 @@
1
1
  interface BaseStyleProps {
2
+ columnHeadersBackgroundColor?: string;
2
3
  columnHeadersTextColor?: string;
3
4
  showRowDividers?: boolean;
4
5
  useRowHeaders?: boolean;
5
6
  }
6
- export declare const baseTHStyles: (showRowDividers?: boolean, columnHeadersTextColor?: string) => {
7
+ export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
8
+ borderBottom: {
9
+ base: string;
10
+ md: number;
11
+ };
12
+ borderColor: string;
13
+ display: {
14
+ base: string;
15
+ md: string;
16
+ };
17
+ paddingBottom: number | {
18
+ base: string;
19
+ md: string;
20
+ };
21
+ paddingTop: number | {
22
+ base: string;
23
+ md: string;
24
+ };
25
+ _first: {
26
+ borderTop: {
27
+ base: string;
28
+ md: string;
29
+ };
30
+ borderColor: string;
31
+ };
32
+ };
33
+ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
7
34
  border: string;
8
35
  borderBottom: string;
9
- color: string;
10
- fontSize: string;
11
- fontWeight: string;
36
+ borderColor: {
37
+ base: string;
38
+ md: string;
39
+ };
40
+ display: {
41
+ base: string;
42
+ md: string;
43
+ };
44
+ fontSize: {
45
+ base: string;
46
+ lg: string;
47
+ };
48
+ gap: string;
12
49
  letterSpacing: string;
50
+ lineHeight: number;
51
+ paddingBottom: {
52
+ base: string;
53
+ md: string;
54
+ };
13
55
  paddingLeft: number;
14
- paddingRight: string;
15
- textTransform: string;
56
+ paddingRight: {
57
+ base: string;
58
+ md: string;
59
+ };
60
+ paddingTop: {
61
+ base: string;
62
+ md: string;
63
+ };
16
64
  _first: {
17
- paddingLeft: string;
65
+ paddingLeft: {
66
+ base: string;
67
+ md: string;
68
+ };
69
+ borderBottom: string | {
70
+ base: string;
71
+ md: string;
72
+ };
18
73
  };
19
74
  _last: {
75
+ paddingRight: {
76
+ base: string;
77
+ md: string;
78
+ };
79
+ borderBottom: string;
80
+ borderColor: {
81
+ base: string;
82
+ md: string;
83
+ };
84
+ };
85
+ "> span": {
86
+ flexBasis: string;
87
+ paddingBottom: {
88
+ base: string;
89
+ md: string;
90
+ };
20
91
  paddingRight: string;
92
+ paddingTop: {
93
+ base: string;
94
+ md: string;
95
+ };
96
+ _first: {
97
+ bg: string;
98
+ color: string;
99
+ fontWeight: string;
100
+ paddingLeft: string;
101
+ };
21
102
  };
22
103
  };
23
- export declare const baseTDStyles: (showRowDividers?: boolean, useRowHeaders?: boolean) => {
104
+ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
105
+ color: string;
106
+ fontWeight: string;
107
+ textTransform: string;
108
+ _first: {
109
+ paddingLeft: {
110
+ base: string;
111
+ md: string;
112
+ };
113
+ };
24
114
  border: string;
25
115
  borderBottom: string;
116
+ borderColor: {
117
+ base: string;
118
+ md: string;
119
+ };
120
+ display: {
121
+ base: string;
122
+ md: string;
123
+ };
124
+ fontSize: {
125
+ base: string;
126
+ lg: string;
127
+ };
128
+ gap: string;
26
129
  letterSpacing: string;
130
+ lineHeight: number;
131
+ paddingBottom: {
132
+ base: string;
133
+ md: string;
134
+ };
27
135
  paddingLeft: number;
28
- paddingRight: string;
136
+ paddingRight: {
137
+ base: string;
138
+ md: string;
139
+ };
140
+ paddingTop: {
141
+ base: string;
142
+ md: string;
143
+ };
144
+ _last: {
145
+ paddingRight: {
146
+ base: string;
147
+ md: string;
148
+ };
149
+ borderBottom: string;
150
+ borderColor: {
151
+ base: string;
152
+ md: string;
153
+ };
154
+ };
155
+ "> span": {
156
+ flexBasis: string;
157
+ paddingBottom: {
158
+ base: string;
159
+ md: string;
160
+ };
161
+ paddingRight: string;
162
+ paddingTop: {
163
+ base: string;
164
+ md: string;
165
+ };
166
+ _first: {
167
+ bg: string;
168
+ color: string;
169
+ fontWeight: string;
170
+ paddingLeft: string;
171
+ };
172
+ };
173
+ };
174
+ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
29
175
  _first: {
30
- paddingLeft: string;
176
+ paddingLeft: {
177
+ base: string;
178
+ md: string;
179
+ };
31
180
  };
32
181
  _last: {
182
+ borderBottom: {
183
+ base: number;
184
+ md: string;
185
+ };
186
+ borderColor: {
187
+ base: string;
188
+ md: string;
189
+ };
190
+ };
191
+ border: string;
192
+ borderBottom: string;
193
+ borderColor: {
194
+ base: string;
195
+ md: string;
196
+ };
197
+ display: {
198
+ base: string;
199
+ md: string;
200
+ };
201
+ fontSize: {
202
+ base: string;
203
+ lg: string;
204
+ };
205
+ gap: string;
206
+ letterSpacing: string;
207
+ lineHeight: number;
208
+ paddingBottom: {
209
+ base: string;
210
+ md: string;
211
+ };
212
+ paddingLeft: number;
213
+ paddingRight: {
214
+ base: string;
215
+ md: string;
216
+ };
217
+ paddingTop: {
218
+ base: string;
219
+ md: string;
220
+ };
221
+ "> span": {
222
+ flexBasis: string;
223
+ paddingBottom: {
224
+ base: string;
225
+ md: string;
226
+ };
33
227
  paddingRight: string;
228
+ paddingTop: {
229
+ base: string;
230
+ md: string;
231
+ };
232
+ _first: {
233
+ bg: string;
234
+ color: string;
235
+ fontWeight: string;
236
+ paddingLeft: string;
237
+ };
34
238
  };
35
239
  };
36
- export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
240
+ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
37
241
  tbody: {
38
242
  th: {
39
243
  color: string;
244
+ backgroundColor: {
245
+ base: string;
246
+ md: string;
247
+ };
248
+ };
249
+ };
250
+ thead: {
251
+ display: {
252
+ base: string;
253
+ md: string;
254
+ };
255
+ };
256
+ tr: {
257
+ borderBottom: {
258
+ base: string;
259
+ md: number;
260
+ };
261
+ borderColor: string;
262
+ display: {
263
+ base: string;
264
+ md: string;
265
+ };
266
+ paddingBottom: number | {
267
+ base: string;
268
+ md: string;
269
+ };
270
+ paddingTop: number | {
271
+ base: string;
272
+ md: string;
273
+ };
274
+ _first: {
275
+ borderTop: {
276
+ base: string;
277
+ md: string;
278
+ };
279
+ borderColor: string;
40
280
  };
41
281
  };
42
282
  th: {
43
- border: string;
44
- borderBottom: string;
45
283
  color: string;
46
- fontSize: string;
47
284
  fontWeight: string;
48
- letterSpacing: string;
49
- paddingLeft: number;
50
- paddingRight: string;
51
285
  textTransform: string;
52
286
  _first: {
53
- paddingLeft: string;
287
+ paddingLeft: {
288
+ base: string;
289
+ md: string;
290
+ };
291
+ };
292
+ border: string;
293
+ borderBottom: string;
294
+ borderColor: {
295
+ base: string;
296
+ md: string;
297
+ };
298
+ display: {
299
+ base: string;
300
+ md: string;
301
+ };
302
+ fontSize: {
303
+ base: string;
304
+ lg: string;
305
+ };
306
+ gap: string;
307
+ letterSpacing: string;
308
+ lineHeight: number;
309
+ paddingBottom: {
310
+ base: string;
311
+ md: string;
312
+ };
313
+ paddingLeft: number;
314
+ paddingRight: {
315
+ base: string;
316
+ md: string;
317
+ };
318
+ paddingTop: {
319
+ base: string;
320
+ md: string;
54
321
  };
55
322
  _last: {
323
+ paddingRight: {
324
+ base: string;
325
+ md: string;
326
+ };
327
+ borderBottom: string;
328
+ borderColor: {
329
+ base: string;
330
+ md: string;
331
+ };
332
+ };
333
+ "> span": {
334
+ flexBasis: string;
335
+ paddingBottom: {
336
+ base: string;
337
+ md: string;
338
+ };
56
339
  paddingRight: string;
340
+ paddingTop: {
341
+ base: string;
342
+ md: string;
343
+ };
344
+ _first: {
345
+ bg: string;
346
+ color: string;
347
+ fontWeight: string;
348
+ paddingLeft: string;
349
+ };
57
350
  };
58
351
  };
59
352
  td: {
353
+ _first: {
354
+ paddingLeft: {
355
+ base: string;
356
+ md: string;
357
+ };
358
+ };
359
+ _last: {
360
+ borderBottom: {
361
+ base: number;
362
+ md: string;
363
+ };
364
+ borderColor: {
365
+ base: string;
366
+ md: string;
367
+ };
368
+ };
60
369
  border: string;
61
370
  borderBottom: string;
371
+ borderColor: {
372
+ base: string;
373
+ md: string;
374
+ };
375
+ display: {
376
+ base: string;
377
+ md: string;
378
+ };
379
+ fontSize: {
380
+ base: string;
381
+ lg: string;
382
+ };
383
+ gap: string;
62
384
  letterSpacing: string;
385
+ lineHeight: number;
386
+ paddingBottom: {
387
+ base: string;
388
+ md: string;
389
+ };
63
390
  paddingLeft: number;
64
- paddingRight: string;
65
- _first: {
66
- paddingLeft: string;
391
+ paddingRight: {
392
+ base: string;
393
+ md: string;
67
394
  };
68
- _last: {
395
+ paddingTop: {
396
+ base: string;
397
+ md: string;
398
+ };
399
+ "> span": {
400
+ flexBasis: string;
401
+ paddingBottom: {
402
+ base: string;
403
+ md: string;
404
+ };
69
405
  paddingRight: string;
406
+ paddingTop: {
407
+ base: string;
408
+ md: string;
409
+ };
410
+ _first: {
411
+ bg: string;
412
+ color: string;
413
+ fontWeight: string;
414
+ paddingLeft: string;
415
+ };
70
416
  };
71
417
  };
72
418
  caption: {
@@ -83,40 +429,182 @@ export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useR
83
429
  };
84
430
  };
85
431
  declare const CustomTable: {
86
- baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
432
+ baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
87
433
  tbody: {
88
434
  th: {
89
435
  color: string;
436
+ backgroundColor: {
437
+ base: string;
438
+ md: string;
439
+ };
440
+ };
441
+ };
442
+ thead: {
443
+ display: {
444
+ base: string;
445
+ md: string;
446
+ };
447
+ };
448
+ tr: {
449
+ borderBottom: {
450
+ base: string;
451
+ md: number;
452
+ };
453
+ borderColor: string;
454
+ display: {
455
+ base: string;
456
+ md: string;
457
+ };
458
+ paddingBottom: number | {
459
+ base: string;
460
+ md: string;
461
+ };
462
+ paddingTop: number | {
463
+ base: string;
464
+ md: string;
465
+ };
466
+ _first: {
467
+ borderTop: {
468
+ base: string;
469
+ md: string;
470
+ };
471
+ borderColor: string;
90
472
  };
91
473
  };
92
474
  th: {
93
- border: string;
94
- borderBottom: string;
95
475
  color: string;
96
- fontSize: string;
97
476
  fontWeight: string;
98
- letterSpacing: string;
99
- paddingLeft: number;
100
- paddingRight: string;
101
477
  textTransform: string;
102
478
  _first: {
103
- paddingLeft: string;
479
+ paddingLeft: {
480
+ base: string;
481
+ md: string;
482
+ };
483
+ };
484
+ border: string;
485
+ borderBottom: string;
486
+ borderColor: {
487
+ base: string;
488
+ md: string;
489
+ };
490
+ display: {
491
+ base: string;
492
+ md: string;
493
+ };
494
+ fontSize: {
495
+ base: string;
496
+ lg: string;
497
+ };
498
+ gap: string;
499
+ letterSpacing: string;
500
+ lineHeight: number;
501
+ paddingBottom: {
502
+ base: string;
503
+ md: string;
504
+ };
505
+ paddingLeft: number;
506
+ paddingRight: {
507
+ base: string;
508
+ md: string;
509
+ };
510
+ paddingTop: {
511
+ base: string;
512
+ md: string;
104
513
  };
105
514
  _last: {
515
+ paddingRight: {
516
+ base: string;
517
+ md: string;
518
+ };
519
+ borderBottom: string;
520
+ borderColor: {
521
+ base: string;
522
+ md: string;
523
+ };
524
+ };
525
+ "> span": {
526
+ flexBasis: string;
527
+ paddingBottom: {
528
+ base: string;
529
+ md: string;
530
+ };
106
531
  paddingRight: string;
532
+ paddingTop: {
533
+ base: string;
534
+ md: string;
535
+ };
536
+ _first: {
537
+ bg: string;
538
+ color: string;
539
+ fontWeight: string;
540
+ paddingLeft: string;
541
+ };
107
542
  };
108
543
  };
109
544
  td: {
545
+ _first: {
546
+ paddingLeft: {
547
+ base: string;
548
+ md: string;
549
+ };
550
+ };
551
+ _last: {
552
+ borderBottom: {
553
+ base: number;
554
+ md: string;
555
+ };
556
+ borderColor: {
557
+ base: string;
558
+ md: string;
559
+ };
560
+ };
110
561
  border: string;
111
562
  borderBottom: string;
563
+ borderColor: {
564
+ base: string;
565
+ md: string;
566
+ };
567
+ display: {
568
+ base: string;
569
+ md: string;
570
+ };
571
+ fontSize: {
572
+ base: string;
573
+ lg: string;
574
+ };
575
+ gap: string;
112
576
  letterSpacing: string;
577
+ lineHeight: number;
578
+ paddingBottom: {
579
+ base: string;
580
+ md: string;
581
+ };
113
582
  paddingLeft: number;
114
- paddingRight: string;
115
- _first: {
116
- paddingLeft: string;
583
+ paddingRight: {
584
+ base: string;
585
+ md: string;
117
586
  };
118
- _last: {
587
+ paddingTop: {
588
+ base: string;
589
+ md: string;
590
+ };
591
+ "> span": {
592
+ flexBasis: string;
593
+ paddingBottom: {
594
+ base: string;
595
+ md: string;
596
+ };
119
597
  paddingRight: string;
598
+ paddingTop: {
599
+ base: string;
600
+ md: string;
601
+ };
602
+ _first: {
603
+ bg: string;
604
+ color: string;
605
+ fontWeight: string;
606
+ paddingLeft: string;
607
+ };
120
608
  };
121
609
  };
122
610
  caption: {
package/dist/theme/components/select.d.ts CHANGED
@@ -72,11 +72,6 @@ declare const Select: {
72
72
  borderRightRadius: {
73
73
  md: string;
74
74
  };
75
- _hover: {
76
- borderRightColor: {
77
- md: string;
78
- };
79
- };
80
75
  };
81
76
  };
82
77
  };