@nypl/design-system-react-components 3.5.4 → 3.5.5-rc2

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 (14) hide show
  1. package/dist/design-system-react-components.cjs +40 -40
  2. package/dist/design-system-react-components.js +6439 -6268
  3. package/dist/src/components/Image/Image.d.ts +1 -1
  4. package/dist/src/components/TextInput/TextInput.d.ts +1 -1
  5. package/dist/src/theme/components/card.d.ts +17 -71
  6. package/dist/src/theme/components/featuredContent.d.ts +1 -32
  7. package/dist/src/theme/components/fieldset.d.ts +3 -3
  8. package/dist/src/theme/components/image.d.ts +254 -0
  9. package/dist/src/theme/components/label.d.ts +3 -3
  10. package/dist/src/theme/components/modal.d.ts +21 -0
  11. package/dist/src/theme/components/searchBar.d.ts +4 -46
  12. package/dist/src/utils/setContainerStyles.d.ts +11 -0
  13. package/dist/src/utils/utils.d.ts +2 -0
  14. package/package.json +1 -1
package/dist/src/components/Image/Image.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ChakraComponent } from "@chakra-ui/react";
2
2
  import React, { ImgHTMLAttributes } from "react";
3
3
  import { DimensionTypes } from "../../helpers/types";
4
- export declare const imageRatiosArray: readonly ["fourByThree", "oneByTwo", "original", "sixteenByNine", "square", "threeByFour", "threeByTwo", "twoByOne"];
4
+ export declare const imageRatiosArray: readonly ["fourByThree", "fourByOne", "twoByThree", "oneByTwo", "original", "sixteenByNine", "square", "threeByFour", "threeByTwo", "twoByOne"];
5
5
  export declare const imageSizesArray: readonly ["default", "xxxsmall", "xxsmall", "xsmall", "small", "medium", "large"];
6
6
  export declare const imageTypesArray: readonly ["default", "circle"];
7
7
  export type ImageRatios = typeof imageRatiosArray[number];
package/dist/src/components/TextInput/TextInput.d.ts CHANGED
@@ -45,7 +45,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
45
45
  isRequired?: boolean;
46
46
  /** Provides text for a `Label` component if `showLabel` is set to true;
47
47
  * populates an `aria-label` attribute if `showLabel` is set to false. */
48
- labelText: string;
48
+ labelText: string | JSX.Element;
49
49
  /** The max number for a `number` TextInput type. */
50
50
  max?: number;
51
51
  /** The max length of the input field. This prop is for all input types
package/dist/src/theme/components/card.d.ts CHANGED
@@ -7,6 +7,7 @@ interface CardBaseStyleProps extends StyleFunctionProps {
7
7
  isCentered: boolean;
8
8
  layout: string;
9
9
  mainActionLink: boolean;
10
+ imageSize: keyof typeof imageSizes;
10
11
  }
11
12
  interface CardImageBaseStyleProps extends StyleFunctionProps {
12
13
  imageIsAtEnd: boolean;
@@ -51,13 +52,13 @@ declare const imageSizes: {
51
52
  };
52
53
  declare const _default: {
53
54
  ReservoirCard: {
54
- baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
55
+ baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, imageSize, }: CardBaseStyleProps) => {
55
56
  base: {
57
+ width: string;
58
+ containerType: string;
59
+ };
60
+ wrapper: {
56
61
  display: string;
57
- flexFlow: {
58
- base: string;
59
- md: string;
60
- };
61
62
  maxWidth: string;
62
63
  textAlign: string;
63
64
  alignItems: string;
@@ -66,9 +67,9 @@ declare const _default: {
66
67
  _dark: {
67
68
  borderColor: string;
68
69
  };
70
+ flexFlow: string;
69
71
  } | {
70
72
  display: string;
71
- flexFlow: string;
72
73
  maxWidth?: undefined;
73
74
  textAlign: string;
74
75
  alignItems: string;
@@ -77,63 +78,32 @@ declare const _default: {
77
78
  _dark: {
78
79
  borderColor: string;
79
80
  };
81
+ flexFlow: string;
80
82
  } | {
81
83
  display: string;
82
- flexFlow: {
83
- base: string;
84
- md: string;
85
- };
86
84
  maxWidth: string;
87
85
  textAlign: string;
88
86
  alignItems: string;
89
87
  border?: undefined;
90
88
  borderColor?: undefined;
91
89
  _dark?: undefined;
90
+ flexFlow: string;
92
91
  } | {
93
92
  display: string;
94
- flexFlow: string;
95
93
  maxWidth?: undefined;
96
94
  textAlign: string;
97
95
  alignItems: string;
98
96
  border?: undefined;
99
97
  borderColor?: undefined;
100
98
  _dark?: undefined;
99
+ flexFlow: string;
101
100
  };
102
101
  actions: {
103
- flexShrink: {
104
- base: string;
105
- md: string;
106
- };
107
- marginStart: {
108
- base: string;
109
- md: string;
110
- };
111
- marginTop: {
112
- base: string;
113
- md: string;
114
- };
115
- maxWidth: {
116
- base: string;
117
- md: string;
118
- };
119
102
  width: string;
120
103
  };
121
104
  body: {
122
- display: {
123
- md: "block";
124
- };
125
- flexBasis: {
126
- sm: string;
127
- };
128
- flexFlow: {
129
- md: "row nowrap";
130
- };
131
105
  margin: any;
132
106
  padding: any;
133
- width: {
134
- base: "100%";
135
- md: "auto";
136
- };
137
107
  };
138
108
  heading: {
139
109
  marginBottom: string;
@@ -273,56 +243,32 @@ declare const _default: {
273
243
  };
274
244
  };
275
245
  CardImage: {
276
- baseStyle?: ({ imageIsAtEnd, isCentered, layout, size }: CardImageBaseStyleProps) => {
277
- flex: {
278
- md: string;
279
- };
280
- maxWidth: {
281
- base: string;
282
- md: string;
283
- };
246
+ baseStyle?: ({ imageIsAtEnd, isCentered, layout }: CardImageBaseStyleProps) => {
284
247
  textAlign: string;
285
248
  alignItems: string;
286
- margin: {
287
- base: string;
288
- md: string;
289
- };
290
- width: {
291
- base: string;
292
- md: any;
293
- };
294
249
  marginBottom: string[];
250
+ width?: undefined;
295
251
  marginTop: string;
296
252
  order: string;
297
253
  } | {
298
254
  marginBottom: string;
299
255
  width: string;
256
+ textAlign?: undefined;
257
+ alignItems?: undefined;
300
258
  marginTop: string;
301
259
  order: string;
302
260
  } | {
303
- flex: {
304
- md: string;
305
- };
306
- maxWidth: {
307
- base: string;
308
- md: string;
309
- };
310
261
  textAlign: string;
311
262
  alignItems: string;
312
- margin: {
313
- base: string;
314
- md: string;
315
- };
316
- width: {
317
- base: string;
318
- md: any;
319
- };
320
263
  marginBottom: string[];
264
+ width?: undefined;
321
265
  marginTop?: undefined;
322
266
  order?: undefined;
323
267
  } | {
324
268
  marginBottom: string;
325
269
  width: string;
270
+ textAlign?: undefined;
271
+ alignItems?: undefined;
326
272
  marginTop?: undefined;
327
273
  order?: undefined;
328
274
  };
package/dist/src/theme/components/featuredContent.d.ts CHANGED
@@ -34,27 +34,13 @@ declare const FeaturedContent: {
34
34
  };
35
35
  wordWrap: string;
36
36
  };
37
+ containerType: string;
37
38
  };
38
39
  wrapper: {
39
40
  alignItems: string;
40
41
  display: string;
41
- flexDirection: {
42
- base: "column-reverse";
43
- md: "row-reverse";
44
- } | {
45
- base: "column";
46
- md: "row";
47
- };
48
42
  maxWidth: string;
49
43
  minHeight: string;
50
- paddingLeft: {
51
- base: any;
52
- md: "s";
53
- };
54
- paddingRight: {
55
- base: any;
56
- md: "s";
57
- };
58
44
  marginY: string;
59
45
  marginX: string;
60
46
  padding: string;
@@ -66,27 +52,10 @@ declare const FeaturedContent: {
66
52
  flexDirection: string;
67
53
  justifyContent: string;
68
54
  padding: string;
69
- /** The `paddingLeft` attribute is used to adjust the spacing around the
70
- * text when the image is positioned at the end. For aesthetic reasons,
71
- * we opted to not adjust the spacing around the text when the image is
72
- * positioned at the start.
73
- * */
74
- paddingStart: {
75
- base: any;
76
- md: number;
77
- };
78
55
  };
79
56
  imgWrapper: {
80
57
  backgroundPosition: string;
81
58
  backgroundSize: string;
82
- height: {
83
- base: "320px";
84
- md: "auto";
85
- };
86
- width: {
87
- base: "100%";
88
- md: string;
89
- };
90
59
  };
91
60
  };
92
61
  sizes?: {
package/dist/src/theme/components/fieldset.d.ts CHANGED
@@ -7,6 +7,9 @@ declare const Fieldset: {
7
7
  border: number;
8
8
  padding: number;
9
9
  legend: {
10
+ span: {
11
+ fontWeight: string;
12
+ };
10
13
  _dark: {
11
14
  color: string;
12
15
  };
@@ -16,9 +19,6 @@ declare const Fieldset: {
16
19
  fontWeight: string;
17
20
  marginBottom: string;
18
21
  width: string;
19
- span: {
20
- fontWeight: string;
21
- };
22
22
  };
23
23
  };
24
24
  sizes?: {
package/dist/src/theme/components/image.d.ts CHANGED
@@ -75,6 +75,12 @@ declare const imageRatios: {
75
75
  fourByThree: {
76
76
  paddingBottom: string;
77
77
  };
78
+ fourByOne: {
79
+ paddingBottom: string;
80
+ };
81
+ twoByThree: {
82
+ paddingBottom: string;
83
+ };
78
84
  oneByTwo: {
79
85
  paddingBottom: string;
80
86
  };
@@ -418,6 +424,145 @@ declare const ReservoirImageWrapper: {
418
424
  height: string;
419
425
  overflow: string;
420
426
  } | {
427
+ maxWidth: string;
428
+ paddingBottom: string;
429
+ position: string;
430
+ width: string;
431
+ height: string;
432
+ overflow: string;
433
+ } | {
434
+ maxWidth: string;
435
+ paddingBottom: string;
436
+ position: string;
437
+ width: string;
438
+ height: string;
439
+ overflow: string;
440
+ } | {
441
+ paddingBottom: string;
442
+ position: string;
443
+ width: string;
444
+ height: string;
445
+ overflow: string;
446
+ } | {
447
+ maxWidth: string;
448
+ paddingBottom: string;
449
+ position: string;
450
+ width: string;
451
+ height: string;
452
+ overflow: string;
453
+ } | {
454
+ maxWidth: string;
455
+ paddingBottom: string;
456
+ position: string;
457
+ width: string;
458
+ height: string;
459
+ overflow: string;
460
+ } | {
461
+ maxWidth: string;
462
+ paddingBottom: string;
463
+ position: string;
464
+ width: string;
465
+ height: string;
466
+ overflow: string;
467
+ } | {
468
+ maxWidth: string;
469
+ paddingBottom: string;
470
+ position: string;
471
+ width: string;
472
+ height: string;
473
+ overflow: string;
474
+ } | {
475
+ maxWidth: string;
476
+ paddingBottom: string;
477
+ position: string;
478
+ width: string;
479
+ height: string;
480
+ overflow: string;
481
+ } | {
482
+ maxWidth: string;
483
+ paddingBottom: string;
484
+ position: string;
485
+ width: string;
486
+ height: string;
487
+ overflow: string;
488
+ } | {
489
+ maxWidth: string;
490
+ paddingBottom: string;
491
+ position: string;
492
+ width: string;
493
+ height: string;
494
+ overflow: string;
495
+ } | {
496
+ maxWidth: string;
497
+ paddingBottom: string;
498
+ position: string;
499
+ width: string;
500
+ height: string;
501
+ overflow: string;
502
+ } | {
503
+ maxWidth: string;
504
+ paddingBottom: string;
505
+ position: string;
506
+ width: string;
507
+ height: string;
508
+ overflow: string;
509
+ } | {
510
+ paddingBottom: string;
511
+ position: string;
512
+ width: string;
513
+ height: string;
514
+ overflow: string;
515
+ } | {
516
+ maxWidth: string;
517
+ paddingBottom: string;
518
+ position: string;
519
+ width: string;
520
+ height: string;
521
+ overflow: string;
522
+ } | {
523
+ maxWidth: string;
524
+ paddingBottom: string;
525
+ position: string;
526
+ width: string;
527
+ height: string;
528
+ overflow: string;
529
+ } | {
530
+ maxWidth: string;
531
+ paddingBottom: string;
532
+ position: string;
533
+ width: string;
534
+ height: string;
535
+ overflow: string;
536
+ } | {
537
+ maxWidth: string;
538
+ paddingBottom: string;
539
+ position: string;
540
+ width: string;
541
+ height: string;
542
+ overflow: string;
543
+ } | {
544
+ maxWidth: string;
545
+ paddingBottom: string;
546
+ position: string;
547
+ width: string;
548
+ height: string;
549
+ overflow: string;
550
+ } | {
551
+ maxWidth: string;
552
+ paddingBottom: string;
553
+ position: string;
554
+ width: string;
555
+ height: string;
556
+ overflow: string;
557
+ } | {
558
+ maxWidth: string;
559
+ paddingBottom: string;
560
+ position: string;
561
+ width: string;
562
+ height: string;
563
+ overflow: string;
564
+ } | {
565
+ maxWidth: string;
421
566
  paddingBottom: string;
422
567
  position: string;
423
568
  width: string;
@@ -430,6 +575,12 @@ declare const ReservoirImageWrapper: {
430
575
  width: string;
431
576
  height: string;
432
577
  overflow: string;
578
+ } | {
579
+ paddingBottom: string;
580
+ position: string;
581
+ width: string;
582
+ height: string;
583
+ overflow: string;
433
584
  } | {
434
585
  maxWidth: string;
435
586
  paddingBottom: string;
@@ -473,6 +624,7 @@ declare const ReservoirImageWrapper: {
473
624
  height: string;
474
625
  overflow: string;
475
626
  } | {
627
+ maxWidth: string;
476
628
  paddingBottom: string;
477
629
  position: string;
478
630
  width: string;
@@ -492,6 +644,12 @@ declare const ReservoirImageWrapper: {
492
644
  width: string;
493
645
  height: string;
494
646
  overflow: string;
647
+ } | {
648
+ paddingBottom: string;
649
+ position: string;
650
+ width: string;
651
+ height: string;
652
+ overflow: string;
495
653
  } | {
496
654
  maxWidth: string;
497
655
  paddingBottom: string;
@@ -513,6 +671,49 @@ declare const ReservoirImageWrapper: {
513
671
  width: string;
514
672
  height: string;
515
673
  overflow: string;
674
+ } | {
675
+ maxWidth: string;
676
+ paddingBottom: string;
677
+ position: string;
678
+ width: string;
679
+ height: string;
680
+ overflow: string;
681
+ } | {
682
+ maxWidth: string;
683
+ paddingBottom: string;
684
+ position: string;
685
+ width: string;
686
+ height: string;
687
+ overflow: string;
688
+ } | {
689
+ maxWidth: string;
690
+ position: string;
691
+ width: string;
692
+ height: string;
693
+ overflow: string;
694
+ } | {
695
+ maxWidth: string;
696
+ position: string;
697
+ width: string;
698
+ height: string;
699
+ overflow: string;
700
+ } | {
701
+ maxWidth: string;
702
+ position: string;
703
+ width: string;
704
+ height: string;
705
+ overflow: string;
706
+ } | {
707
+ maxWidth: string;
708
+ position: string;
709
+ width: string;
710
+ height: string;
711
+ overflow: string;
712
+ } | {
713
+ position: string;
714
+ width: string;
715
+ height: string;
716
+ overflow: string;
516
717
  } | {
517
718
  maxWidth: string;
518
719
  position: string;
@@ -526,6 +727,7 @@ declare const ReservoirImageWrapper: {
526
727
  height: string;
527
728
  overflow: string;
528
729
  } | {
730
+ maxWidth: string;
529
731
  position: string;
530
732
  width: string;
531
733
  height: string;
@@ -544,18 +746,21 @@ declare const ReservoirImageWrapper: {
544
746
  overflow: string;
545
747
  } | {
546
748
  maxWidth: string;
749
+ paddingBottom: string;
547
750
  position: string;
548
751
  width: string;
549
752
  height: string;
550
753
  overflow: string;
551
754
  } | {
552
755
  maxWidth: string;
756
+ paddingBottom: string;
553
757
  position: string;
554
758
  width: string;
555
759
  height: string;
556
760
  overflow: string;
557
761
  } | {
558
762
  maxWidth: string;
763
+ paddingBottom: string;
559
764
  position: string;
560
765
  width: string;
561
766
  height: string;
@@ -567,6 +772,12 @@ declare const ReservoirImageWrapper: {
567
772
  width: string;
568
773
  height: string;
569
774
  overflow: string;
775
+ } | {
776
+ paddingBottom: string;
777
+ position: string;
778
+ width: string;
779
+ height: string;
780
+ overflow: string;
570
781
  } | {
571
782
  maxWidth: string;
572
783
  paddingBottom: string;
@@ -575,6 +786,7 @@ declare const ReservoirImageWrapper: {
575
786
  height: string;
576
787
  overflow: string;
577
788
  } | {
789
+ maxWidth: string;
578
790
  paddingBottom: string;
579
791
  position: string;
580
792
  width: string;
@@ -685,6 +897,7 @@ declare const ReservoirImageWrapper: {
685
897
  height: string;
686
898
  overflow: string;
687
899
  } | {
900
+ maxWidth: string;
688
901
  paddingBottom: string;
689
902
  position: string;
690
903
  width: string;
@@ -697,6 +910,12 @@ declare const ReservoirImageWrapper: {
697
910
  width: string;
698
911
  height: string;
699
912
  overflow: string;
913
+ } | {
914
+ paddingBottom: string;
915
+ position: string;
916
+ width: string;
917
+ height: string;
918
+ overflow: string;
700
919
  } | {
701
920
  maxWidth: string;
702
921
  paddingBottom: string;
@@ -740,6 +959,41 @@ declare const ReservoirImageWrapper: {
740
959
  height: string;
741
960
  overflow: string;
742
961
  } | {
962
+ maxWidth: string;
963
+ paddingBottom: string;
964
+ position: string;
965
+ width: string;
966
+ height: string;
967
+ overflow: string;
968
+ } | {
969
+ maxWidth: string;
970
+ paddingBottom: string;
971
+ position: string;
972
+ width: string;
973
+ height: string;
974
+ overflow: string;
975
+ } | {
976
+ maxWidth: string;
977
+ paddingBottom: string;
978
+ position: string;
979
+ width: string;
980
+ height: string;
981
+ overflow: string;
982
+ } | {
983
+ paddingBottom: string;
984
+ position: string;
985
+ width: string;
986
+ height: string;
987
+ overflow: string;
988
+ } | {
989
+ maxWidth: string;
990
+ paddingBottom: string;
991
+ position: string;
992
+ width: string;
993
+ height: string;
994
+ overflow: string;
995
+ } | {
996
+ maxWidth: string;
743
997
  paddingBottom: string;
744
998
  position: string;
745
999
  width: string;
package/dist/src/theme/components/label.d.ts CHANGED
@@ -6,15 +6,15 @@ declare const Label: {
6
6
  baseStyle?: (props: LabelBaseStyle) => {
7
7
  flex: string;
8
8
  whiteSpace: string;
9
+ span: {
10
+ fontWeight: string;
11
+ };
9
12
  color: string;
10
13
  display: string;
11
14
  fontSize: string;
12
15
  fontWeight: string;
13
16
  marginBottom: string;
14
17
  width: string;
15
- span: {
16
- fontWeight: string;
17
- };
18
18
  _dark: {
19
19
  color: string;
20
20
  };
package/dist/src/theme/components/modal.d.ts CHANGED
@@ -4,6 +4,7 @@ declare const Modal: {
4
4
  _dark: {
5
5
  bg: string;
6
6
  };
7
+ borderRadius: string;
7
8
  };
8
9
  header: {
9
10
  color: string;
@@ -11,11 +12,31 @@ declare const Modal: {
11
12
  _dark: {
12
13
  color: string;
13
14
  };
15
+ paddingTop: string;
16
+ paddingLeft: string;
17
+ paddingRight: string;
18
+ paddingBottom: string;
19
+ "h2, h3, h4, h5, h6": {
20
+ marginBottom: number;
21
+ };
14
22
  };
15
23
  body: {
16
24
  _dark: {
17
25
  color: string;
18
26
  };
27
+ paddingTop: number;
28
+ paddingLeft: string;
29
+ paddingRight: string;
30
+ paddingBottom: string;
31
+ };
32
+ footer: {
33
+ paddingTop: number;
34
+ paddingBottom: string;
35
+ paddingLeft: string;
36
+ paddingRight: string;
37
+ };
38
+ closeButton: {
39
+ marginRight: string;
19
40
  };
20
41
  };
21
42
  sizes?: {