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

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 (39) hide show
  1. package/CHANGELOG.md +1499 -0
  2. package/README.md +171 -133
  3. package/dist/__tests__/mediaMatchMock.d.ts +79 -0
  4. package/dist/components/Card/Card.d.ts +8 -6
  5. package/dist/components/Heading/Heading.d.ts +6 -0
  6. package/dist/components/Icons/Icon.d.ts +1 -1
  7. package/dist/components/Icons/IconSvgs.d.ts +15 -0
  8. package/dist/components/Logo/Logo.d.ts +1 -1
  9. package/dist/components/Logo/LogoSvgs.d.ts +3 -0
  10. package/dist/components/StyleGuide/ColorCard.d.ts +25 -7
  11. package/dist/components/Table/Table.d.ts +3 -2
  12. package/dist/components/Text/Text.d.ts +6 -0
  13. package/dist/design-system-react-components.cjs.development.js +2086 -1019
  14. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  15. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  16. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  17. package/dist/design-system-react-components.esm.js +2064 -1029
  18. package/dist/design-system-react-components.esm.js.map +1 -1
  19. package/dist/hooks/__tests__/useNYPLBreakpoints.test.d.ts +1 -0
  20. package/dist/hooks/useNYPLBreakpoints.d.ts +13 -0
  21. package/dist/index.d.ts +3 -1
  22. package/dist/resources.scss +0 -4
  23. package/dist/styles.css +3 -2
  24. package/dist/theme/components/button.d.ts +7 -2
  25. package/dist/theme/components/checkbox.d.ts +1 -1
  26. package/dist/theme/components/customTable.d.ts +522 -34
  27. package/dist/theme/components/datePicker.d.ts +1 -0
  28. package/dist/theme/components/global.d.ts +4 -1
  29. package/dist/theme/components/heading.d.ts +5 -1
  30. package/dist/theme/components/image.d.ts +18 -0
  31. package/dist/theme/components/radio.d.ts +3 -0
  32. package/dist/theme/components/searchBar.d.ts +6 -0
  33. package/dist/theme/components/select.d.ts +4 -5
  34. package/dist/theme/components/structuredContent.d.ts +117 -17
  35. package/dist/theme/components/text.d.ts +5 -1
  36. package/dist/theme/components/textInput.d.ts +4 -0
  37. package/dist/theme/components/toggle.d.ts +1 -0
  38. package/dist/theme/provider.d.ts +2 -1
  39. package/package.json +15 -14
@@ -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: {
@@ -8,6 +8,7 @@ declare const DatePicker: {
8
8
  subLabels: {
9
9
  label: {
10
10
  fontSize: string;
11
+ fontWeight: string;
11
12
  marginBottom: string;
12
13
  };
13
14
  };
@@ -42,6 +42,9 @@ declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
42
42
  width: string;
43
43
  };
44
44
  };
45
+ declare const defaultElementSizes: {
46
+ mobileFieldHeight: string;
47
+ };
45
48
  declare const labelLegendText: {
46
49
  display: string;
47
50
  fontSize: string;
@@ -70,4 +73,4 @@ declare const textMargin: {
70
73
  margin: string;
71
74
  marginBottom: string;
72
75
  };
73
- export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioLabelStyles, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };
76
+ export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioLabelStyles, defaultElementSizes, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };
@@ -47,7 +47,10 @@ export declare const headings: {
47
47
  };
48
48
  };
49
49
  declare const Heading: {
50
- baseStyle: ({ noSpace }: {
50
+ baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace }: {
51
+ isCapitalized: any;
52
+ isUppercase: any;
53
+ isLowercase: any;
51
54
  noSpace: any;
52
55
  }) => {
53
56
  a: {
@@ -58,6 +61,7 @@ declare const Heading: {
58
61
  };
59
62
  };
60
63
  marginBottom: string;
64
+ textTransform: string;
61
65
  };
62
66
  variants: {
63
67
  h1: {