@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/heading.d.ts CHANGED
@@ -2,8 +2,8 @@ export declare const headings: {
2
2
  h1: {
3
3
  width: string;
4
4
  marginTop: string;
5
- marginLeft: string;
6
- marginRight: string;
5
+ marginStart: string;
6
+ marginEnd: string;
7
7
  fontSize: string;
8
8
  fontWeight: string;
9
9
  letterSpacing: string;
@@ -12,8 +12,8 @@ export declare const headings: {
12
12
  h2: {
13
13
  width: string;
14
14
  marginTop: string;
15
- marginLeft: string;
16
- marginRight: string;
15
+ marginStart: string;
16
+ marginEnd: string;
17
17
  fontSize: string;
18
18
  fontWeight: string;
19
19
  lineHeight: string;
@@ -21,8 +21,8 @@ export declare const headings: {
21
21
  h3: {
22
22
  width: string;
23
23
  marginTop: string;
24
- marginLeft: string;
25
- marginRight: string;
24
+ marginStart: string;
25
+ marginEnd: string;
26
26
  fontSize: string;
27
27
  fontWeight: string;
28
28
  lineHeight: string;
@@ -30,8 +30,8 @@ export declare const headings: {
30
30
  h4: {
31
31
  width: string;
32
32
  marginTop: string;
33
- marginLeft: string;
34
- marginRight: string;
33
+ marginStart: string;
34
+ marginEnd: string;
35
35
  fontSize: string;
36
36
  fontWeight: string;
37
37
  lineHeight: string;
@@ -39,15 +39,18 @@ export declare const headings: {
39
39
  fallback: {
40
40
  width: string;
41
41
  marginTop: string;
42
- marginLeft: string;
43
- marginRight: string;
42
+ marginStart: string;
43
+ marginEnd: string;
44
44
  fontSize: string;
45
45
  fontWeight: string;
46
46
  lineHeight: string;
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,13 +61,14 @@ declare const Heading: {
58
61
  };
59
62
  };
60
63
  marginBottom: string;
64
+ textTransform: string;
61
65
  };
62
66
  variants: {
63
67
  h1: {
64
68
  width: string;
65
69
  marginTop: string;
66
- marginLeft: string;
67
- marginRight: string;
70
+ marginStart: string;
71
+ marginEnd: string;
68
72
  fontSize: string;
69
73
  fontWeight: string;
70
74
  letterSpacing: string;
@@ -73,8 +77,8 @@ declare const Heading: {
73
77
  h2: {
74
78
  width: string;
75
79
  marginTop: string;
76
- marginLeft: string;
77
- marginRight: string;
80
+ marginStart: string;
81
+ marginEnd: string;
78
82
  fontSize: string;
79
83
  fontWeight: string;
80
84
  lineHeight: string;
@@ -82,8 +86,8 @@ declare const Heading: {
82
86
  h3: {
83
87
  width: string;
84
88
  marginTop: string;
85
- marginLeft: string;
86
- marginRight: string;
89
+ marginStart: string;
90
+ marginEnd: string;
87
91
  fontSize: string;
88
92
  fontWeight: string;
89
93
  lineHeight: string;
@@ -91,8 +95,8 @@ declare const Heading: {
91
95
  h4: {
92
96
  width: string;
93
97
  marginTop: string;
94
- marginLeft: string;
95
- marginRight: string;
98
+ marginStart: string;
99
+ marginEnd: string;
96
100
  fontSize: string;
97
101
  fontWeight: string;
98
102
  lineHeight: string;
@@ -100,8 +104,8 @@ declare const Heading: {
100
104
  h5: {
101
105
  width: string;
102
106
  marginTop: string;
103
- marginLeft: string;
104
- marginRight: string;
107
+ marginStart: string;
108
+ marginEnd: string;
105
109
  fontSize: string;
106
110
  fontWeight: string;
107
111
  lineHeight: string;
@@ -109,8 +113,8 @@ declare const Heading: {
109
113
  h6: {
110
114
  width: string;
111
115
  marginTop: string;
112
- marginLeft: string;
113
- marginRight: string;
116
+ marginStart: string;
117
+ marginEnd: string;
114
118
  fontSize: string;
115
119
  fontWeight: string;
116
120
  lineHeight: string;
@@ -118,8 +122,8 @@ declare const Heading: {
118
122
  primary: {
119
123
  width: string;
120
124
  marginTop: string;
121
- marginLeft: string;
122
- marginRight: string;
125
+ marginStart: string;
126
+ marginEnd: string;
123
127
  fontSize: string;
124
128
  fontWeight: string;
125
129
  letterSpacing: string;
@@ -128,8 +132,8 @@ declare const Heading: {
128
132
  secondary: {
129
133
  width: string;
130
134
  marginTop: string;
131
- marginLeft: string;
132
- marginRight: string;
135
+ marginStart: string;
136
+ marginEnd: string;
133
137
  fontSize: string;
134
138
  fontWeight: string;
135
139
  lineHeight: string;
@@ -137,8 +141,8 @@ declare const Heading: {
137
141
  tertiary: {
138
142
  width: string;
139
143
  marginTop: string;
140
- marginLeft: string;
141
- marginRight: string;
144
+ marginStart: string;
145
+ marginEnd: string;
142
146
  fontSize: string;
143
147
  fontWeight: string;
144
148
  lineHeight: string;
@@ -146,8 +150,8 @@ declare const Heading: {
146
150
  callout: {
147
151
  width: string;
148
152
  marginTop: string;
149
- marginLeft: string;
150
- marginRight: string;
153
+ marginStart: string;
154
+ marginEnd: string;
151
155
  fontSize: string;
152
156
  fontWeight: string;
153
157
  lineHeight: string;
package/dist/theme/components/hero.d.ts CHANGED
@@ -24,8 +24,8 @@ declare const Hero: {
24
24
  };
25
25
  paddingTop: string;
26
26
  paddingBottom: string;
27
- paddingRight: string;
28
- paddingLeft: string;
27
+ paddingEnd: string;
28
+ paddingStart: string;
29
29
  a: {
30
30
  color: string;
31
31
  display: string;
@@ -63,8 +63,8 @@ declare const Hero: {
63
63
  };
64
64
  overflowX: string;
65
65
  content: {
66
- paddingRight: string;
67
- paddingLeft: string;
66
+ paddingEnd: string;
67
+ paddingStart: string;
68
68
  display: string;
69
69
  flexFlow: {
70
70
  base: string;
@@ -86,16 +86,15 @@ declare const Hero: {
86
86
  marginY: string;
87
87
  marginX: string;
88
88
  maxWidth: string;
89
- paddingTop: string;
90
- paddingBottom: string;
89
+ padding: string;
91
90
  width: string;
92
91
  };
93
92
  bodyText: {
94
93
  paddingBottom: string;
95
- paddingTop: string;
96
- paddingRight: {
94
+ paddingEnd: {
97
95
  md: string;
98
96
  };
97
+ paddingTop: string;
99
98
  flex: {
100
99
  md: string;
101
100
  };
@@ -129,8 +128,8 @@ declare const Hero: {
129
128
  };
130
129
  overflowX: string;
131
130
  content: {
132
- paddingRight: string;
133
- paddingLeft: string;
131
+ paddingEnd: string;
132
+ paddingStart: string;
134
133
  display: string;
135
134
  flexFlow: {
136
135
  base: string;
@@ -152,16 +151,15 @@ declare const Hero: {
152
151
  marginY: string;
153
152
  marginX: string;
154
153
  maxWidth: string;
155
- paddingTop: string;
156
- paddingBottom: string;
154
+ padding: string;
157
155
  width: string;
158
156
  };
159
157
  bodyText: {
160
158
  paddingBottom: string;
161
- paddingTop: string;
162
- paddingRight: {
159
+ paddingEnd: {
163
160
  md: string;
164
161
  };
162
+ paddingTop: string;
165
163
  flex: {
166
164
  md: string;
167
165
  };
@@ -195,8 +193,8 @@ declare const Hero: {
195
193
  };
196
194
  overflowX: string;
197
195
  content: {
198
- paddingRight: string;
199
- paddingLeft: string;
196
+ paddingEnd: string;
197
+ paddingStart: string;
200
198
  display: string;
201
199
  flexFlow: {
202
200
  base: string;
@@ -218,16 +216,15 @@ declare const Hero: {
218
216
  marginY: string;
219
217
  marginX: string;
220
218
  maxWidth: string;
221
- paddingTop: string;
222
- paddingBottom: string;
219
+ padding: string;
223
220
  width: string;
224
221
  };
225
222
  bodyText: {
226
223
  paddingBottom: string;
227
- paddingTop: string;
228
- paddingRight: {
224
+ paddingEnd: {
229
225
  md: string;
230
226
  };
227
+ paddingTop: string;
231
228
  flex: {
232
229
  md: string;
233
230
  };
@@ -261,8 +258,8 @@ declare const Hero: {
261
258
  };
262
259
  overflowX: string;
263
260
  content: {
264
- paddingRight: string;
265
- paddingLeft: string;
261
+ paddingEnd: string;
262
+ paddingStart: string;
266
263
  display: string;
267
264
  flexFlow: {
268
265
  base: string;
@@ -284,16 +281,15 @@ declare const Hero: {
284
281
  marginY: string;
285
282
  marginX: string;
286
283
  maxWidth: string;
287
- paddingTop: string;
288
- paddingBottom: string;
284
+ padding: string;
289
285
  width: string;
290
286
  };
291
287
  bodyText: {
292
288
  paddingBottom: string;
293
- paddingTop: string;
294
- paddingRight: {
289
+ paddingEnd: {
295
290
  md: string;
296
291
  };
292
+ paddingTop: string;
297
293
  flex: {
298
294
  md: string;
299
295
  };
@@ -327,8 +323,8 @@ declare const Hero: {
327
323
  };
328
324
  overflowX: string;
329
325
  content: {
330
- paddingRight: string;
331
- paddingLeft: string;
326
+ paddingEnd: string;
327
+ paddingStart: string;
332
328
  display: string;
333
329
  flexFlow: {
334
330
  base: string;
@@ -350,16 +346,15 @@ declare const Hero: {
350
346
  marginY: string;
351
347
  marginX: string;
352
348
  maxWidth: string;
353
- paddingTop: string;
354
- paddingBottom: string;
349
+ padding: string;
355
350
  width: string;
356
351
  };
357
352
  bodyText: {
358
353
  paddingBottom: string;
359
- paddingTop: string;
360
- paddingRight: {
354
+ paddingEnd: {
361
355
  md: string;
362
356
  };
357
+ paddingTop: string;
363
358
  flex: {
364
359
  md: string;
365
360
  };
@@ -382,10 +377,6 @@ declare const Hero: {
382
377
  marginY: string;
383
378
  marginX: string;
384
379
  maxWidth: string;
385
- paddingTop: string;
386
- paddingBottom: string;
387
- paddingRight: string;
388
- paddingLeft: string;
389
380
  width: string;
390
381
  };
391
382
  heading: {
@@ -469,15 +460,14 @@ declare const Hero: {
469
460
  lg: string;
470
461
  };
471
462
  paddingBottom: string;
472
- paddingRight: string;
473
- paddingLeft: string;
463
+ paddingEnd: string;
464
+ paddingStart: string;
474
465
  padding: {
475
466
  lg: string;
476
467
  };
477
468
  marginY: string;
478
469
  marginX: string;
479
470
  maxWidth: string;
480
- paddingTop: string;
481
471
  width: string;
482
472
  };
483
473
  img: {
@@ -485,7 +475,7 @@ declare const Hero: {
485
475
  base: string;
486
476
  lg: string;
487
477
  };
488
- marginRight: {
478
+ marginEnd: {
489
479
  lg: string;
490
480
  };
491
481
  maxWidth: {
package/dist/theme/components/horizontalRule.d.ts CHANGED
@@ -8,8 +8,8 @@ declare const HorizontalRule: {
8
8
  height: string;
9
9
  marginBottom: string;
10
10
  marginTop: string;
11
- marginLeft: string | number;
12
- marginRight: string | number;
11
+ marginStart: string | number;
12
+ marginEnd: string | number;
13
13
  };
14
14
  };
15
15
  export default HorizontalRule;