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

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 (86) hide show
  1. package/CHANGELOG.md +64 -0
  2. package/README.md +171 -133
  3. package/dist/__tests__/mediaMatchMock.d.ts +79 -0
  4. package/dist/components/Accordion/Accordion.d.ts +2 -2
  5. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +2 -2
  6. package/dist/components/Button/Button.d.ts +4 -2
  7. package/dist/components/ButtonGroup/ButtonGroup.d.ts +4 -2
  8. package/dist/components/Card/Card.d.ts +7 -3
  9. package/dist/components/Checkbox/Checkbox.d.ts +1 -1
  10. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +2 -2
  11. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +4 -2
  12. package/dist/components/Fieldset/Fieldset.d.ts +3 -1
  13. package/dist/components/Form/Form.d.ts +4 -2
  14. package/dist/components/Grid/SimpleGrid.d.ts +4 -2
  15. package/dist/components/Heading/Heading.d.ts +10 -2
  16. package/dist/components/HelperErrorText/HelperErrorText.d.ts +2 -2
  17. package/dist/components/Hero/Hero.d.ts +4 -2
  18. package/dist/components/HorizontalRule/HorizontalRule.d.ts +2 -2
  19. package/dist/components/Icons/Icon.d.ts +5 -3
  20. package/dist/components/Icons/IconSvgs.d.ts +23 -0
  21. package/dist/components/Image/Image.d.ts +6 -2
  22. package/dist/components/Label/Label.d.ts +4 -2
  23. package/dist/components/Link/Link.d.ts +2 -2
  24. package/dist/components/List/List.d.ts +4 -2
  25. package/dist/components/Logo/Logo.d.ts +5 -3
  26. package/dist/components/Logo/LogoSvgs.d.ts +1 -0
  27. package/dist/components/Modal/Modal.d.ts +4 -2
  28. package/dist/components/Notification/Notification.d.ts +1 -1
  29. package/dist/components/Pagination/Pagination.d.ts +2 -2
  30. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +2 -2
  31. package/dist/components/Radio/Radio.d.ts +1 -1
  32. package/dist/components/RadioGroup/RadioGroup.d.ts +2 -2
  33. package/dist/components/SearchBar/SearchBar.d.ts +2 -2
  34. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +4 -2
  35. package/dist/components/SkipNavigation/SkipNavigation.d.ts +4 -2
  36. package/dist/components/Slider/Slider.d.ts +4 -2
  37. package/dist/components/StatusBadge/StatusBadge.d.ts +4 -2
  38. package/dist/components/StructuredContent/StructuredContent.d.ts +4 -2
  39. package/dist/components/StyleGuide/ColorCard.d.ts +25 -7
  40. package/dist/components/Table/Table.d.ts +4 -2
  41. package/dist/components/Tabs/Tabs.d.ts +4 -2
  42. package/dist/components/Template/Template.d.ts +7 -3
  43. package/dist/components/Text/Text.d.ts +10 -2
  44. package/dist/components/TextInput/TextInput.d.ts +1 -1
  45. package/dist/components/Toggle/Toggle.d.ts +1 -1
  46. package/dist/components/VideoPlayer/VideoPlayer.d.ts +4 -2
  47. package/dist/design-system-react-components.cjs.development.js +2929 -1863
  48. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  49. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  50. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  51. package/dist/design-system-react-components.esm.js +2839 -1805
  52. package/dist/design-system-react-components.esm.js.map +1 -1
  53. package/dist/hooks/__tests__/useNYPLBreakpoints.test.d.ts +1 -0
  54. package/dist/hooks/useCarouselStyles.d.ts +1 -1
  55. package/dist/hooks/useNYPLBreakpoints.d.ts +13 -0
  56. package/dist/index.d.ts +3 -1
  57. package/dist/resources.scss +0 -4
  58. package/dist/styles.css +3 -2
  59. package/dist/theme/components/breadcrumb.d.ts +3 -3
  60. package/dist/theme/components/button.d.ts +7 -2
  61. package/dist/theme/components/card.d.ts +4 -4
  62. package/dist/theme/components/checkbox.d.ts +3 -3
  63. package/dist/theme/components/customTable.d.ts +43 -43
  64. package/dist/theme/components/datePicker.d.ts +1 -0
  65. package/dist/theme/components/global.d.ts +6 -3
  66. package/dist/theme/components/globalMixins.d.ts +1 -4
  67. package/dist/theme/components/heading.d.ts +35 -31
  68. package/dist/theme/components/hero.d.ts +30 -40
  69. package/dist/theme/components/horizontalRule.d.ts +2 -2
  70. package/dist/theme/components/icon.d.ts +4762 -4762
  71. package/dist/theme/components/image.d.ts +60 -42
  72. package/dist/theme/components/list.d.ts +11 -11
  73. package/dist/theme/components/notification.d.ts +4 -4
  74. package/dist/theme/components/radio.d.ts +5 -2
  75. package/dist/theme/components/searchBar.d.ts +6 -0
  76. package/dist/theme/components/select.d.ts +6 -2
  77. package/dist/theme/components/skeletonLoader.d.ts +1 -1
  78. package/dist/theme/components/slider.d.ts +6 -6
  79. package/dist/theme/components/structuredContent.d.ts +33 -33
  80. package/dist/theme/components/tabs.d.ts +9 -9
  81. package/dist/theme/components/template.d.ts +7 -7
  82. package/dist/theme/components/text.d.ts +5 -1
  83. package/dist/theme/components/textInput.d.ts +4 -0
  84. package/dist/theme/components/toggle.d.ts +2 -2
  85. package/dist/theme/provider.d.ts +2 -1
  86. package/package.json +17 -17
package/dist/theme/components/image.d.ts CHANGED
@@ -11,28 +11,28 @@ declare const imageSizes: {
11
11
  };
12
12
  xxsmall: {
13
13
  maxWidth: string;
14
- marginLeft: string;
15
- marginRight: string;
14
+ marginStart: string;
15
+ marginEnd: string;
16
16
  };
17
17
  xsmall: {
18
18
  maxWidth: string;
19
- marginLeft: string;
20
- marginRight: string;
19
+ marginStart: string;
20
+ marginEnd: string;
21
21
  };
22
22
  small: {
23
23
  maxWidth: string;
24
- marginLeft: string;
25
- marginRight: string;
24
+ marginStart: string;
25
+ marginEnd: string;
26
26
  };
27
27
  medium: {
28
28
  maxWidth: string;
29
- marginLeft: string;
30
- marginRight: string;
29
+ marginStart: string;
30
+ marginEnd: string;
31
31
  };
32
32
  large: {
33
33
  maxWidth: string;
34
- marginLeft: string;
35
- marginRight: string;
34
+ marginStart: string;
35
+ marginEnd: string;
36
36
  };
37
37
  };
38
38
  declare const imageRatios: {
@@ -104,6 +104,7 @@ declare const CustomImage: {
104
104
  baseStyle: ({ size }: CustomImageBaseStyle) => {
105
105
  figure: {
106
106
  img: {
107
+ backgroundColor: string;
107
108
  marginBottom: string;
108
109
  };
109
110
  maxWidth: string;
@@ -111,47 +112,52 @@ declare const CustomImage: {
111
112
  width: string;
112
113
  } | {
113
114
  img: {
115
+ backgroundColor: string;
114
116
  marginBottom: string;
115
117
  };
116
118
  maxWidth: string;
117
- marginLeft: string;
118
- marginRight: string;
119
+ marginStart: string;
120
+ marginEnd: string;
119
121
  margin: string;
120
122
  width: string;
121
123
  } | {
122
124
  img: {
125
+ backgroundColor: string;
123
126
  marginBottom: string;
124
127
  };
125
128
  maxWidth: string;
126
- marginLeft: string;
127
- marginRight: string;
129
+ marginStart: string;
130
+ marginEnd: string;
128
131
  margin: string;
129
132
  width: string;
130
133
  } | {
131
134
  img: {
135
+ backgroundColor: string;
132
136
  marginBottom: string;
133
137
  };
134
138
  maxWidth: string;
135
- marginLeft: string;
136
- marginRight: string;
139
+ marginStart: string;
140
+ marginEnd: string;
137
141
  margin: string;
138
142
  width: string;
139
143
  } | {
140
144
  img: {
145
+ backgroundColor: string;
141
146
  marginBottom: string;
142
147
  };
143
148
  maxWidth: string;
144
- marginLeft: string;
145
- marginRight: string;
149
+ marginStart: string;
150
+ marginEnd: string;
146
151
  margin: string;
147
152
  width: string;
148
153
  } | {
149
154
  img: {
155
+ backgroundColor: string;
150
156
  marginBottom: string;
151
157
  };
152
158
  maxWidth: string;
153
- marginLeft: string;
154
- marginRight: string;
159
+ marginStart: string;
160
+ marginEnd: string;
155
161
  margin: string;
156
162
  width: string;
157
163
  };
@@ -162,51 +168,57 @@ declare const CustomImage: {
162
168
  img: {
163
169
  maxWidth: string;
164
170
  display: string;
171
+ backgroundColor: string;
165
172
  boxSizing: string;
166
173
  objectFit: string;
167
174
  position: string;
168
175
  width: string;
169
176
  } | {
170
177
  maxWidth: string;
171
- marginLeft: string;
172
- marginRight: string;
178
+ marginStart: string;
179
+ marginEnd: string;
173
180
  display: string;
181
+ backgroundColor: string;
174
182
  boxSizing: string;
175
183
  objectFit: string;
176
184
  position: string;
177
185
  width: string;
178
186
  } | {
179
187
  maxWidth: string;
180
- marginLeft: string;
181
- marginRight: string;
188
+ marginStart: string;
189
+ marginEnd: string;
182
190
  display: string;
191
+ backgroundColor: string;
183
192
  boxSizing: string;
184
193
  objectFit: string;
185
194
  position: string;
186
195
  width: string;
187
196
  } | {
188
197
  maxWidth: string;
189
- marginLeft: string;
190
- marginRight: string;
198
+ marginStart: string;
199
+ marginEnd: string;
191
200
  display: string;
201
+ backgroundColor: string;
192
202
  boxSizing: string;
193
203
  objectFit: string;
194
204
  position: string;
195
205
  width: string;
196
206
  } | {
197
207
  maxWidth: string;
198
- marginLeft: string;
199
- marginRight: string;
208
+ marginStart: string;
209
+ marginEnd: string;
200
210
  display: string;
211
+ backgroundColor: string;
201
212
  boxSizing: string;
202
213
  objectFit: string;
203
214
  position: string;
204
215
  width: string;
205
216
  } | {
206
217
  maxWidth: string;
207
- marginLeft: string;
208
- marginRight: string;
218
+ marginStart: string;
219
+ marginEnd: string;
209
220
  display: string;
221
+ backgroundColor: string;
210
222
  boxSizing: string;
211
223
  objectFit: string;
212
224
  position: string;
@@ -269,6 +281,7 @@ declare const CustomImageWrapper: {
269
281
  overflow: string;
270
282
  };
271
283
  img: {
284
+ backgroundColor: string;
272
285
  height: string;
273
286
  left: string;
274
287
  maxWidth: string;
@@ -277,8 +290,8 @@ declare const CustomImageWrapper: {
277
290
  width: string;
278
291
  };
279
292
  maxWidth: string;
280
- marginLeft: string;
281
- marginRight: string;
293
+ marginStart: string;
294
+ marginEnd: string;
282
295
  width: string;
283
296
  } | {
284
297
  crop: {
@@ -330,6 +343,7 @@ declare const CustomImageWrapper: {
330
343
  overflow: string;
331
344
  };
332
345
  img: {
346
+ backgroundColor: string;
333
347
  height: string;
334
348
  left: string;
335
349
  maxWidth: string;
@@ -338,8 +352,8 @@ declare const CustomImageWrapper: {
338
352
  width: string;
339
353
  };
340
354
  maxWidth: string;
341
- marginLeft: string;
342
- marginRight: string;
355
+ marginStart: string;
356
+ marginEnd: string;
343
357
  width: string;
344
358
  } | {
345
359
  crop: {
@@ -391,6 +405,7 @@ declare const CustomImageWrapper: {
391
405
  overflow: string;
392
406
  };
393
407
  img: {
408
+ backgroundColor: string;
394
409
  height: string;
395
410
  left: string;
396
411
  maxWidth: string;
@@ -399,8 +414,8 @@ declare const CustomImageWrapper: {
399
414
  width: string;
400
415
  };
401
416
  maxWidth: string;
402
- marginLeft: string;
403
- marginRight: string;
417
+ marginStart: string;
418
+ marginEnd: string;
404
419
  width: string;
405
420
  } | {
406
421
  crop: {
@@ -452,6 +467,7 @@ declare const CustomImageWrapper: {
452
467
  overflow: string;
453
468
  };
454
469
  img: {
470
+ backgroundColor: string;
455
471
  height: string;
456
472
  left: string;
457
473
  maxWidth: string;
@@ -460,8 +476,8 @@ declare const CustomImageWrapper: {
460
476
  width: string;
461
477
  };
462
478
  maxWidth: string;
463
- marginLeft: string;
464
- marginRight: string;
479
+ marginStart: string;
480
+ marginEnd: string;
465
481
  width: string;
466
482
  } | {
467
483
  crop: {
@@ -513,6 +529,7 @@ declare const CustomImageWrapper: {
513
529
  overflow: string;
514
530
  };
515
531
  img: {
532
+ backgroundColor: string;
516
533
  height: string;
517
534
  left: string;
518
535
  maxWidth: string;
@@ -521,8 +538,8 @@ declare const CustomImageWrapper: {
521
538
  width: string;
522
539
  };
523
540
  maxWidth: string;
524
- marginLeft: string;
525
- marginRight: string;
541
+ marginStart: string;
542
+ marginEnd: string;
526
543
  width: string;
527
544
  } | {
528
545
  crop: {
@@ -574,6 +591,7 @@ declare const CustomImageWrapper: {
574
591
  overflow: string;
575
592
  };
576
593
  img: {
594
+ backgroundColor: string;
577
595
  height: string;
578
596
  left: string;
579
597
  maxWidth: string;
@@ -582,8 +600,8 @@ declare const CustomImageWrapper: {
582
600
  width: string;
583
601
  };
584
602
  maxWidth: string;
585
- marginLeft: string;
586
- marginRight: string;
603
+ marginStart: string;
604
+ marginEnd: string;
587
605
  width: string;
588
606
  };
589
607
  };
package/dist/theme/components/list.d.ts CHANGED
@@ -6,11 +6,11 @@ export declare const baseListStyles: (inline?: boolean, noStyling?: boolean) =>
6
6
  margin: string;
7
7
  listStyle: string;
8
8
  marginInlineStart: string;
9
- paddingLeft: string;
9
+ paddingStart: string;
10
10
  padding: string;
11
11
  display: string;
12
12
  li: {
13
- marginRight: string;
13
+ marginEnd: string;
14
14
  listStyleType: string;
15
15
  _notFirst: {
16
16
  marginTop: string;
@@ -27,7 +27,7 @@ export declare const baseUnorderedStyles: (noStyling?: boolean) => {
27
27
  fontWeight: string;
28
28
  fontSize: string;
29
29
  lineHeight: string;
30
- marginLeft: string;
30
+ marginStart: string;
31
31
  width: string;
32
32
  };
33
33
  };
@@ -37,7 +37,7 @@ export declare const baseUnorderedStyles: (noStyling?: boolean) => {
37
37
  export declare const baseSectionDefinitionStyles: {
38
38
  borderBottom: string;
39
39
  borderColor: string;
40
- paddingLeft: string;
40
+ paddingStart: string;
41
41
  h2: {
42
42
  borderTop: string;
43
43
  borderColor: string;
@@ -64,7 +64,7 @@ export declare const baseDefinitionStyles: {
64
64
  md: string;
65
65
  };
66
66
  paddingTop: string;
67
- paddingRight: {
67
+ paddingEnd: {
68
68
  md: string;
69
69
  };
70
70
  };
@@ -84,7 +84,7 @@ export declare const baseDefinitionStyles: {
84
84
  };
85
85
  borderBottom: string;
86
86
  borderColor: string;
87
- paddingLeft: string;
87
+ paddingStart: string;
88
88
  h2: {
89
89
  borderTop: string;
90
90
  borderColor: string;
@@ -97,11 +97,11 @@ declare const List: {
97
97
  margin: string;
98
98
  listStyle: string;
99
99
  marginInlineStart: string;
100
- paddingLeft: string;
100
+ paddingStart: string;
101
101
  padding: string;
102
102
  display: string;
103
103
  li: {
104
- marginRight: string;
104
+ marginEnd: string;
105
105
  listStyleType: string;
106
106
  _notFirst: {
107
107
  marginTop: string;
@@ -119,7 +119,7 @@ declare const List: {
119
119
  fontWeight: string;
120
120
  fontSize: string;
121
121
  lineHeight: string;
122
- marginLeft: string;
122
+ marginStart: string;
123
123
  width: string;
124
124
  };
125
125
  };
@@ -149,7 +149,7 @@ declare const List: {
149
149
  md: string;
150
150
  };
151
151
  paddingTop: string;
152
- paddingRight: {
152
+ paddingEnd: {
153
153
  md: string;
154
154
  };
155
155
  };
@@ -169,7 +169,7 @@ declare const List: {
169
169
  };
170
170
  borderBottom: string;
171
171
  borderColor: string;
172
- paddingLeft: string;
172
+ paddingStart: string;
173
173
  h2: {
174
174
  borderTop: string;
175
175
  borderColor: string;
package/dist/theme/components/notification.d.ts CHANGED
@@ -30,8 +30,8 @@ declare const _default: {
30
30
  margin: string;
31
31
  maxWidth: string;
32
32
  padding: string;
33
- paddingRight: string;
34
- paddingLeft: string;
33
+ paddingEnd: string;
34
+ paddingStart: string;
35
35
  width: string;
36
36
  };
37
37
  dismissibleButton: {
@@ -55,7 +55,7 @@ declare const _default: {
55
55
  };
56
56
  icon: {
57
57
  flexShrink: string;
58
- marginRight: string;
58
+ marginEnd: string;
59
59
  };
60
60
  };
61
61
  };
@@ -67,7 +67,7 @@ declare const _default: {
67
67
  content: {
68
68
  color: string;
69
69
  marginTop: string;
70
- paddingLeft: string;
70
+ paddingStart: string;
71
71
  width: string;
72
72
  a: {
73
73
  color: string;
package/dist/theme/components/radio.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  declare const Radio: {
2
2
  parts: string[];
3
3
  baseStyle: {
4
+ bg: string;
5
+ fontSize: string;
4
6
  control: {
5
7
  verticalAlign: string;
6
8
  transitionProperty: string;
@@ -8,6 +10,7 @@ declare const Radio: {
8
10
  border: string;
9
11
  borderRadius: string;
10
12
  borderColor: string;
13
+ backgroundColor: string;
11
14
  color: string;
12
15
  outline: string;
13
16
  _checked: {
@@ -62,7 +65,7 @@ declare const Radio: {
62
65
  userSelect: string;
63
66
  fontWeight: string;
64
67
  marginBottom: string;
65
- marginLeft: string;
68
+ marginStart: string;
66
69
  width: string;
67
70
  _disabled: {
68
71
  color: string;
@@ -74,7 +77,7 @@ declare const Radio: {
74
77
  };
75
78
  };
76
79
  helperErrorText: {
77
- marginLeft: string;
80
+ marginStart: string;
78
81
  _disabled: {
79
82
  color: string;
80
83
  fontStyle: string;
package/dist/theme/components/searchBar.d.ts CHANGED
@@ -11,7 +11,13 @@ declare const SearchBar: {
11
11
  md: string;
12
12
  };
13
13
  select: {
14
+ flexShrink: string;
14
15
  marginBottom: string;
16
+ maxWidth: {
17
+ base: any;
18
+ md: string;
19
+ };
20
+ textOverflow: string;
15
21
  };
16
22
  };
17
23
  };
package/dist/theme/components/select.d.ts CHANGED
@@ -26,10 +26,14 @@ declare const Select: {
26
26
  borderRadius: string;
27
27
  borderColor: string;
28
28
  fontSize: string;
29
+ minHeight: {
30
+ base: string;
31
+ md: string;
32
+ };
29
33
  paddingTop: string;
30
- paddingRight: string;
34
+ paddingEnd: string;
31
35
  paddingBottom: string;
32
- paddingLeft: string;
36
+ paddingStart: string;
33
37
  _hover: {
34
38
  borderColor: string;
35
39
  };
package/dist/theme/components/skeletonLoader.d.ts CHANGED
@@ -77,7 +77,7 @@ declare const SkeletonLoader: {
77
77
  };
78
78
  };
79
79
  container: {
80
- marginLeft: {
80
+ marginStart: {
81
81
  md: string;
82
82
  };
83
83
  marginTop: {
package/dist/theme/components/slider.d.ts CHANGED
@@ -15,12 +15,12 @@ declare const CustomSlider: {
15
15
  color: string;
16
16
  marginTop: string;
17
17
  marginBottom: string;
18
- marginRight: string;
19
- marginLeft: string;
18
+ marginEnd: string;
19
+ marginStart: string;
20
20
  };
21
21
  rightValue: {
22
- marginLeft: string;
23
- marginRight: string;
22
+ marginStart: string;
23
+ marginEnd: string;
24
24
  color: string;
25
25
  marginTop: string;
26
26
  marginBottom: string;
@@ -30,8 +30,8 @@ declare const CustomSlider: {
30
30
  color: string;
31
31
  };
32
32
  sliderContainer: {
33
- marginLeft: string;
34
- marginRight: string;
33
+ marginStart: string;
34
+ marginEnd: string;
35
35
  };
36
36
  filledTrack: {
37
37
  bgColor: string;