@nypl/design-system-react-components 1.4.1 → 1.5.0-rc

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 (66) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/README.md +62 -2
  3. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
  4. package/dist/components/Header/components/HeaderSearchButton.d.ts +2 -2
  5. package/dist/components/Logo/Logo.d.ts +1 -1
  6. package/dist/components/Logo/LogoSvgs.d.ts +2 -0
  7. package/dist/components/Notification/Notification.d.ts +8 -7
  8. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +1 -1
  9. package/dist/design-system-react-components.cjs.development.js +1764 -670
  10. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  11. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  12. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  13. package/dist/design-system-react-components.esm.js +1767 -673
  14. package/dist/design-system-react-components.esm.js.map +1 -1
  15. package/dist/styles.css +1 -1
  16. package/dist/theme/components/accordion.d.ts +14 -0
  17. package/dist/theme/components/audioPlayer.d.ts +7 -0
  18. package/dist/theme/components/breadcrumb.d.ts +28 -0
  19. package/dist/theme/components/button.d.ts +12 -0
  20. package/dist/theme/components/card.d.ts +40 -0
  21. package/dist/theme/components/checkbox.d.ts +67 -0
  22. package/dist/theme/components/customTable.d.ts +103 -2
  23. package/dist/theme/components/feedbackBox.d.ts +22 -0
  24. package/dist/theme/components/fieldset.d.ts +3 -0
  25. package/dist/theme/components/filterBar.d.ts +16 -0
  26. package/dist/theme/components/footer.d.ts +18 -0
  27. package/dist/theme/components/global.d.ts +46 -0
  28. package/dist/theme/components/header/header.d.ts +7 -0
  29. package/dist/theme/components/header/headerLogin.d.ts +18 -0
  30. package/dist/theme/components/header/headerLoginButton.d.ts +15 -0
  31. package/dist/theme/components/header/headerLowerNav.d.ts +32 -0
  32. package/dist/theme/components/header/headerMobileIconNav.d.ts +5 -0
  33. package/dist/theme/components/header/headerMobileNavButton.d.ts +6 -0
  34. package/dist/theme/components/header/headerSearchButton.d.ts +26 -0
  35. package/dist/theme/components/header/headerSearchForm.d.ts +9 -0
  36. package/dist/theme/components/header/headerSitewideAlerts.d.ts +12 -0
  37. package/dist/theme/components/header/headerUpperNav.d.ts +12 -0
  38. package/dist/theme/components/heading.d.ts +9 -0
  39. package/dist/theme/components/helperErrorText.d.ts +3 -0
  40. package/dist/theme/components/hero.d.ts +42 -5
  41. package/dist/theme/components/horizontalRule.d.ts +3 -0
  42. package/dist/theme/components/image.d.ts +54 -0
  43. package/dist/theme/components/label.d.ts +3 -0
  44. package/dist/theme/components/link.d.ts +20 -4
  45. package/dist/theme/components/list.d.ts +46 -0
  46. package/dist/theme/components/modal.d.ts +21 -0
  47. package/dist/theme/components/multiSelectMenuButton.d.ts +23 -0
  48. package/dist/theme/components/notification.d.ts +62 -21
  49. package/dist/theme/components/progressIndicator.d.ts +16 -0
  50. package/dist/theme/components/radio.d.ts +63 -0
  51. package/dist/theme/components/searchBar.d.ts +11 -1
  52. package/dist/theme/components/select.d.ts +39 -0
  53. package/dist/theme/components/skeletonLoader.d.ts +4 -1
  54. package/dist/theme/components/slider.d.ts +21 -2
  55. package/dist/theme/components/statusBadge.d.ts +12 -0
  56. package/dist/theme/components/structuredContent.d.ts +63 -4
  57. package/dist/theme/components/styledList.d.ts +10 -0
  58. package/dist/theme/components/tabs.d.ts +37 -1
  59. package/dist/theme/components/tagSet.d.ts +39 -0
  60. package/dist/theme/components/template.d.ts +3 -0
  61. package/dist/theme/components/textInput.d.ts +194 -0
  62. package/dist/theme/components/toggle.d.ts +39 -3
  63. package/dist/theme/components/tooltip.d.ts +6 -1
  64. package/dist/theme/components/videoPlayer.d.ts +7 -0
  65. package/dist/theme/foundations/global.d.ts +10 -0
  66. package/package.json +2 -2
package/dist/theme/components/tabs.d.ts CHANGED
@@ -5,7 +5,6 @@ declare const CustomTabs: {
5
5
  borderColor: string;
6
6
  };
7
7
  tab: {
8
- color: string;
9
8
  paddingInlineStart: string;
10
9
  paddingStart: string;
11
10
  background: string;
@@ -43,8 +42,25 @@ declare const CustomTabs: {
43
42
  _focus: {
44
43
  boxShadow: string;
45
44
  };
45
+ _dark: {
46
+ color: string;
47
+ border: string;
48
+ borderBottom: string;
49
+ borderBottomColor: string;
50
+ _hover: {
51
+ bg: string;
52
+ };
53
+ _selected: {
54
+ color: string;
55
+ border: string;
56
+ bg: string;
57
+ borderBottom: string;
58
+ };
59
+ };
46
60
  };
47
61
  buttonArrows: {
62
+ bg: string;
63
+ color: string;
48
64
  border: string;
49
65
  borderRadius: string;
50
66
  display: {
@@ -58,6 +74,20 @@ declare const CustomTabs: {
58
74
  pos: string;
59
75
  transition: string;
60
76
  zIndex: string;
77
+ _hover: {
78
+ bg: string;
79
+ color: string;
80
+ borderColor: string;
81
+ };
82
+ _disabled: {
83
+ color: string;
84
+ };
85
+ _dark: {
86
+ color: string;
87
+ _disabled: {
88
+ color: string;
89
+ };
90
+ };
61
91
  };
62
92
  tablistWrapper: {
63
93
  display: string;
@@ -92,6 +122,9 @@ declare const CustomTabs: {
92
122
  md: string;
93
123
  };
94
124
  position: string;
125
+ _dark: {
126
+ borderColor: string;
127
+ };
95
128
  };
96
129
  tabpanels: {
97
130
  paddingTop: string;
@@ -132,5 +165,8 @@ declare const CustomTabs: {
132
165
  };
133
166
  };
134
167
  };
168
+ defaultProps: {
169
+ colorScheme: string;
170
+ };
135
171
  };
136
172
  export default CustomTabs;
package/dist/theme/components/tagSet.d.ts CHANGED
@@ -34,6 +34,9 @@ declare const _default: {
34
34
  outlineOffset: string;
35
35
  outlineColor: string;
36
36
  zIndex: string;
37
+ _dark: {
38
+ outlineColor: string;
39
+ };
37
40
  };
38
41
  a: {
39
42
  border: string;
@@ -62,6 +65,29 @@ declare const _default: {
62
65
  color: string;
63
66
  };
64
67
  };
68
+ _dark: {
69
+ bg: string;
70
+ borderColor: string;
71
+ color: string;
72
+ a: {
73
+ color: string;
74
+ };
75
+ svg: {
76
+ fill: string;
77
+ };
78
+ _hover: {
79
+ bg: string;
80
+ a: {
81
+ color: string;
82
+ };
83
+ svg: {
84
+ fill: string;
85
+ };
86
+ "> span": {
87
+ color: string;
88
+ };
89
+ };
90
+ };
65
91
  };
66
92
  };
67
93
  TagSetFilter: {
@@ -99,6 +125,16 @@ declare const _default: {
99
125
  };
100
126
  _hover: {
101
127
  bg: string;
128
+ borderColor: string;
129
+ };
130
+ _dark: {
131
+ bg: string;
132
+ borderColor: string;
133
+ color: string;
134
+ _hover: {
135
+ bg: string;
136
+ borderColor: string;
137
+ };
102
138
  };
103
139
  clearAll: {
104
140
  color: string;
@@ -108,6 +144,9 @@ declare const _default: {
108
144
  };
109
145
  fontSize: string;
110
146
  minHeight: string;
147
+ _dark: {
148
+ color: string;
149
+ };
111
150
  };
112
151
  };
113
152
  };
package/dist/theme/components/template.d.ts CHANGED
@@ -9,6 +9,9 @@ declare const _default: {
9
9
  display: string;
10
10
  gridTemplateColumns: string;
11
11
  rowGap: string;
12
+ _dark: {
13
+ color: string;
14
+ };
12
15
  };
13
16
  sizes: {};
14
17
  defaultProps: {};
package/dist/theme/components/textInput.d.ts CHANGED
@@ -27,9 +27,25 @@ declare const TextInput: {
27
27
  borderColor: string;
28
28
  color: string;
29
29
  opacity: string;
30
+ _dark: {
31
+ bg: string;
32
+ borderColor: string;
33
+ color: string;
34
+ };
30
35
  };
31
36
  _active: {
32
37
  borderColor: string;
38
+ _dark: {
39
+ borderColor: string;
40
+ boxShadow: string;
41
+ outline: string;
42
+ outlineOffset: string;
43
+ outlineColor: string;
44
+ zIndex: string;
45
+ _dark: {
46
+ outlineColor: string;
47
+ };
48
+ };
33
49
  boxShadow: string;
34
50
  outline: string;
35
51
  outlineOffset: string;
@@ -38,6 +54,17 @@ declare const TextInput: {
38
54
  };
39
55
  _focus: {
40
56
  borderColor: string;
57
+ _dark: {
58
+ borderColor: string;
59
+ boxShadow: string;
60
+ outline: string;
61
+ outlineOffset: string;
62
+ outlineColor: string;
63
+ zIndex: string;
64
+ _dark: {
65
+ outlineColor: string;
66
+ };
67
+ };
41
68
  boxShadow: string;
42
69
  outline: string;
43
70
  outlineOffset: string;
@@ -53,6 +80,76 @@ declare const TextInput: {
53
80
  border: string;
54
81
  borderColor: string;
55
82
  boxShadow: string;
83
+ color: string;
84
+ _focus: {
85
+ borderColor: string;
86
+ };
87
+ };
88
+ _dark: {
89
+ bgColor: string;
90
+ borderColor: string;
91
+ _hover: {
92
+ borderColor: string;
93
+ };
94
+ _disabled: {
95
+ _placeholder: {
96
+ color: string;
97
+ };
98
+ bg: string;
99
+ borderColor: string;
100
+ color: string;
101
+ opacity: string;
102
+ _dark: {
103
+ bg: string;
104
+ borderColor: string;
105
+ color: string;
106
+ };
107
+ };
108
+ _active: {
109
+ borderColor: string;
110
+ _dark: {
111
+ borderColor: string;
112
+ boxShadow: string;
113
+ outline: string;
114
+ outlineOffset: string;
115
+ outlineColor: string;
116
+ zIndex: string;
117
+ _dark: {
118
+ outlineColor: string;
119
+ };
120
+ };
121
+ boxShadow: string;
122
+ outline: string;
123
+ outlineOffset: string;
124
+ outlineColor: string;
125
+ zIndex: string;
126
+ };
127
+ _focus: {
128
+ borderColor: string;
129
+ _dark: {
130
+ borderColor: string;
131
+ boxShadow: string;
132
+ outline: string;
133
+ outlineOffset: string;
134
+ outlineColor: string;
135
+ zIndex: string;
136
+ _dark: {
137
+ outlineColor: string;
138
+ };
139
+ };
140
+ boxShadow: string;
141
+ outline: string;
142
+ outlineOffset: string;
143
+ outlineColor: string;
144
+ zIndex: string;
145
+ };
146
+ _placeholder: {
147
+ color: string;
148
+ };
149
+ _invalid: {
150
+ borderColor: string;
151
+ color: string;
152
+ };
56
153
  };
57
154
  };
58
155
  textarea: {
@@ -76,9 +173,25 @@ declare const TextInput: {
76
173
  borderColor: string;
77
174
  color: string;
78
175
  opacity: string;
176
+ _dark: {
177
+ bg: string;
178
+ borderColor: string;
179
+ color: string;
180
+ };
79
181
  };
80
182
  _active: {
81
183
  borderColor: string;
184
+ _dark: {
185
+ borderColor: string;
186
+ boxShadow: string;
187
+ outline: string;
188
+ outlineOffset: string;
189
+ outlineColor: string;
190
+ zIndex: string;
191
+ _dark: {
192
+ outlineColor: string;
193
+ };
194
+ };
82
195
  boxShadow: string;
83
196
  outline: string;
84
197
  outlineOffset: string;
@@ -87,6 +200,17 @@ declare const TextInput: {
87
200
  };
88
201
  _focus: {
89
202
  borderColor: string;
203
+ _dark: {
204
+ borderColor: string;
205
+ boxShadow: string;
206
+ outline: string;
207
+ outlineOffset: string;
208
+ outlineColor: string;
209
+ zIndex: string;
210
+ _dark: {
211
+ outlineColor: string;
212
+ };
213
+ };
90
214
  boxShadow: string;
91
215
  outline: string;
92
216
  outlineOffset: string;
@@ -102,6 +226,76 @@ declare const TextInput: {
102
226
  border: string;
103
227
  borderColor: string;
104
228
  boxShadow: string;
229
+ color: string;
230
+ _focus: {
231
+ borderColor: string;
232
+ };
233
+ };
234
+ _dark: {
235
+ bgColor: string;
236
+ borderColor: string;
237
+ _hover: {
238
+ borderColor: string;
239
+ };
240
+ _disabled: {
241
+ _placeholder: {
242
+ color: string;
243
+ };
244
+ bg: string;
245
+ borderColor: string;
246
+ color: string;
247
+ opacity: string;
248
+ _dark: {
249
+ bg: string;
250
+ borderColor: string;
251
+ color: string;
252
+ };
253
+ };
254
+ _active: {
255
+ borderColor: string;
256
+ _dark: {
257
+ borderColor: string;
258
+ boxShadow: string;
259
+ outline: string;
260
+ outlineOffset: string;
261
+ outlineColor: string;
262
+ zIndex: string;
263
+ _dark: {
264
+ outlineColor: string;
265
+ };
266
+ };
267
+ boxShadow: string;
268
+ outline: string;
269
+ outlineOffset: string;
270
+ outlineColor: string;
271
+ zIndex: string;
272
+ };
273
+ _focus: {
274
+ borderColor: string;
275
+ _dark: {
276
+ borderColor: string;
277
+ boxShadow: string;
278
+ outline: string;
279
+ outlineOffset: string;
280
+ outlineColor: string;
281
+ zIndex: string;
282
+ _dark: {
283
+ outlineColor: string;
284
+ };
285
+ };
286
+ boxShadow: string;
287
+ outline: string;
288
+ outlineOffset: string;
289
+ outlineColor: string;
290
+ zIndex: string;
291
+ };
292
+ _placeholder: {
293
+ color: string;
294
+ };
295
+ _invalid: {
296
+ borderColor: string;
297
+ color: string;
298
+ };
105
299
  };
106
300
  };
107
301
  clearButton: {
package/dist/theme/components/toggle.d.ts CHANGED
@@ -26,7 +26,6 @@ declare const _default: {
26
26
  size: string;
27
27
  }) => {
28
28
  alignItems: string;
29
- opacity: number;
30
29
  track: {
31
30
  backgroundColor: string;
32
31
  border: string;
@@ -57,6 +56,32 @@ declare const _default: {
57
56
  outlineOffset: string;
58
57
  zIndex: string;
59
58
  };
59
+ _dark: {
60
+ bgColor: string;
61
+ borderColor: string;
62
+ _checked: {
63
+ bg: string;
64
+ borderColor: string;
65
+ };
66
+ _invalid: {
67
+ bg: string;
68
+ borderColor: string;
69
+ "> span": {
70
+ bg: string;
71
+ };
72
+ };
73
+ _disabled: {
74
+ bg: string;
75
+ borderColor: string;
76
+ opacity: number;
77
+ ".chakra-switch__thumb": {
78
+ bgColor: string;
79
+ };
80
+ };
81
+ _focus: {
82
+ outlineColor: string;
83
+ };
84
+ };
60
85
  };
61
86
  label: {
62
87
  fontSize: string;
@@ -66,10 +91,21 @@ declare const _default: {
66
91
  color: string;
67
92
  fontStyle: string;
68
93
  };
94
+ _invalid: {
95
+ color: string;
96
+ };
97
+ _dark: {
98
+ _disabled: {
99
+ color: string;
100
+ };
101
+ _invalid: {
102
+ color: string;
103
+ };
104
+ };
69
105
  };
70
106
  thumb: {
71
- _disabled: {
72
- bg: string;
107
+ _dark: {
108
+ bgColor: string;
73
109
  };
74
110
  };
75
111
  };
package/dist/theme/components/tooltip.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  declare const Tooltip: {
2
2
  baseStyle: {
3
- [x: string]: string;
3
+ [x: string]: string | {
4
+ [x: string]: string;
5
+ };
4
6
  borderRadius: string;
5
7
  boxShadow: string;
6
8
  color: string;
@@ -9,6 +11,9 @@ declare const Tooltip: {
9
11
  maxWidth: string;
10
12
  px: string;
11
13
  py: string;
14
+ _dark: {
15
+ [x: string]: string;
16
+ };
12
17
  };
13
18
  };
14
19
  export default Tooltip;
package/dist/theme/components/videoPlayer.d.ts CHANGED
@@ -27,8 +27,15 @@ declare const VideoPlayer: {
27
27
  };
28
28
  invalid: {
29
29
  backgroundColor: string;
30
+ border: string;
31
+ borderColor: string;
30
32
  height: string;
31
33
  padding: string;
34
+ _dark: {
35
+ bg: string;
36
+ border: string;
37
+ borderColor: string;
38
+ };
32
39
  };
33
40
  square: {
34
41
  inside: {
package/dist/theme/foundations/global.d.ts CHANGED
@@ -12,6 +12,10 @@ declare const global: {
12
12
  fontWeight: string;
13
13
  lineHeight: string;
14
14
  overflowX: string;
15
+ _dark: {
16
+ bg: string;
17
+ color: string;
18
+ };
15
19
  };
16
20
  a: {
17
21
  color: string;
@@ -27,6 +31,9 @@ declare const global: {
27
31
  outlineOffset: string;
28
32
  outlineColor: string;
29
33
  zIndex: string;
34
+ _dark: {
35
+ outlineColor: string;
36
+ };
30
37
  };
31
38
  };
32
39
  };
@@ -37,6 +44,9 @@ declare const global: {
37
44
  outlineOffset: string;
38
45
  outlineColor: string;
39
46
  zIndex: string;
47
+ _dark: {
48
+ outlineColor: string;
49
+ };
40
50
  };
41
51
  };
42
52
  p: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "1.4.1",
3
+ "version": "1.5.0-rc",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,7 +32,7 @@
32
32
  "analyze": "size-limit --why",
33
33
  "generate-sass-resources": "gulp",
34
34
  "storybook": "start-storybook -p 6006 -s ./.storybook/public",
35
- "build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",
35
+ "build-storybook:v1": "npm run prebuild:storybook && NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o ./reservoir/v1",
36
36
  "prebuild:storybook": "npm run test:generate-output"
37
37
  },
38
38
  "lint-staged": {