@nypl/design-system-react-components 2.1.1 → 2.1.3

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 (33) hide show
  1. package/dist/design-system-react-components.cjs +62 -62
  2. package/dist/design-system-react-components.js +10020 -9803
  3. package/dist/src/components/AlphabetFilter/AlphabetFilter.d.ts +4 -2
  4. package/dist/src/components/AudioPlayer/AudioPlayer.d.ts +4 -2
  5. package/dist/src/components/ComponentWrapper/ComponentWrapper.d.ts +4 -2
  6. package/dist/src/components/Hero/Hero.d.ts +4 -0
  7. package/dist/src/components/Image/Image.d.ts +3 -0
  8. package/dist/src/components/Link/Link.d.ts +2 -0
  9. package/dist/src/components/List/List.d.ts +4 -3
  10. package/dist/src/components/Logo/Logo.d.ts +3 -0
  11. package/dist/src/components/NewsletterSignup/NewsletterSignup.d.ts +4 -2
  12. package/dist/src/components/Notification/Notification.d.ts +6 -3
  13. package/dist/src/components/SearchBar/SearchBar.d.ts +4 -2
  14. package/dist/src/components/StructuredContent/StructuredContent.d.ts +5 -3
  15. package/dist/src/components/TextInput/TextInput.d.ts +4 -0
  16. package/dist/src/components/VideoPlayer/VideoPlayer.d.ts +4 -2
  17. package/dist/src/helpers/types.d.ts +3 -1
  18. package/dist/src/hooks/useDSHeading.d.ts +16 -0
  19. package/dist/src/hooks/useStateWithDependencies.d.ts +4 -2
  20. package/dist/src/theme/components/card.d.ts +0 -24
  21. package/dist/src/theme/components/featuredContent.d.ts +27 -10
  22. package/dist/src/theme/components/heading.d.ts +0 -6
  23. package/dist/src/theme/components/hero.d.ts +1 -8
  24. package/dist/src/theme/components/image.d.ts +2008 -201
  25. package/dist/src/theme/components/link.d.ts +58 -48
  26. package/dist/src/theme/components/list.d.ts +10 -0
  27. package/dist/src/theme/components/logo.d.ts +35 -383
  28. package/dist/src/theme/components/searchBar.d.ts +3 -0
  29. package/dist/src/theme/components/structuredContent.d.ts +0 -6
  30. package/dist/src/utils/getSectionColors.d.ts +13 -0
  31. package/dist/styles.css +1 -1
  32. package/package.json +3 -3
  33. package/dist/src/helpers/getSectionColors.d.ts +0 -8
package/dist/src/theme/components/link.d.ts CHANGED
@@ -15,18 +15,22 @@ export declare const baseLinkStyles: {
15
15
  color: string;
16
16
  };
17
17
  };
18
- _visited: {
19
- color: string;
20
- _dark: {
21
- color: string;
22
- };
23
- };
24
18
  };
25
19
  declare const Link: {
26
20
  parts: string[];
27
- baseStyle: ({ finalIsUnderlined }: {
21
+ baseStyle: ({ finalIsUnderlined, hasVisitedState }: {
28
22
  finalIsUnderlined?: boolean;
23
+ hasVisitedState: any;
29
24
  }) => {
25
+ _visited: {
26
+ color: string;
27
+ _dark: {
28
+ color: string;
29
+ };
30
+ } | {
31
+ color?: undefined;
32
+ _dark?: undefined;
33
+ };
30
34
  textDecoration: string;
31
35
  /** This is needed for custom anchor elements or link components
32
36
  * that are passed as children to the `Link` component. */
@@ -69,43 +73,8 @@ declare const Link: {
69
73
  color: string;
70
74
  };
71
75
  };
72
- _visited: {
73
- color: string;
74
- _dark: {
75
- color: string;
76
- };
77
- };
78
76
  };
79
77
  variants: {
80
- link: {};
81
- disabled: {
82
- color: string;
83
- pointerEvents: string;
84
- };
85
- moreLink: {
86
- alignItems: string;
87
- display: string;
88
- svg: {
89
- height: string;
90
- width: string;
91
- textDecoration: string;
92
- fill: string;
93
- };
94
- _hover: {
95
- color: string;
96
- textDecoration: string;
97
- };
98
- _visited: {
99
- svg: {
100
- fill: string;
101
- };
102
- _dark: {
103
- svg: {
104
- fill: string;
105
- };
106
- };
107
- };
108
- };
109
78
  button: {
110
79
  width: string;
111
80
  borderRadius: string;
@@ -141,12 +110,53 @@ declare const Link: {
141
110
  };
142
111
  };
143
112
  };
144
- buttonPrimary: any;
145
- buttonSecondary: any;
146
- buttonPill: any;
147
- buttonCallout: any;
148
- buttonNoBrand: any;
149
- buttonDisabled: any;
113
+ buttonCallout: ({ hasVisitedState }: {
114
+ hasVisitedState: any;
115
+ }) => any;
116
+ buttonDisabled: ({ hasVisitedState }: {
117
+ hasVisitedState: any;
118
+ }) => any;
119
+ buttonNoBrand: ({ hasVisitedState }: {
120
+ hasVisitedState: any;
121
+ }) => any;
122
+ buttonPill: ({ hasVisitedState }: {
123
+ hasVisitedState: any;
124
+ }) => any;
125
+ buttonPrimary: ({ hasVisitedState }: {
126
+ hasVisitedState: any;
127
+ }) => any;
128
+ buttonSecondary: ({ hasVisitedState }: {
129
+ hasVisitedState: any;
130
+ }) => any;
131
+ moreLink: ({ hasVisitedState }: {
132
+ hasVisitedState: any;
133
+ }) => {
134
+ alignItems: string;
135
+ display: string;
136
+ svg: {
137
+ height: string;
138
+ width: string;
139
+ textDecoration: string;
140
+ fill: string;
141
+ };
142
+ _hover: {
143
+ color: string;
144
+ textDecoration: string;
145
+ };
146
+ _visited: {
147
+ svg: {
148
+ fill: string;
149
+ };
150
+ _dark: {
151
+ svg: {
152
+ fill: string;
153
+ };
154
+ };
155
+ } | {
156
+ svg?: undefined;
157
+ _dark?: undefined;
158
+ };
159
+ };
150
160
  };
151
161
  };
152
162
  export default Link;
package/dist/src/theme/components/list.d.ts CHANGED
@@ -120,7 +120,17 @@ export declare const baseDescriptionStyles: {
120
120
  };
121
121
  };
122
122
  declare const List: {
123
+ parts: string[];
123
124
  baseStyle: ({ inline, noStyling }: ListBaseStyle) => {
125
+ heading: {
126
+ borderTop: string;
127
+ borderColor: string;
128
+ margin: string;
129
+ padding: string;
130
+ _dark: {
131
+ borderColor: string;
132
+ };
133
+ };
124
134
  margin: string;
125
135
  listStyle: string;
126
136
  marginInlineStart: string;
package/dist/src/theme/components/logo.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  interface LogoBaseStyle {
2
- size: keyof typeof size;
2
+ size: keyof typeof size | keyof typeof sizeBasedOnHeight;
3
+ sizeBasedOn: "height" | "width";
3
4
  }
4
5
  declare const size: {
5
6
  default: {
@@ -32,247 +33,53 @@ declare const size: {
32
33
  width: string;
33
34
  };
34
35
  };
35
- declare const Logo: {
36
- baseStyle: (props: LogoBaseStyle) => {
37
- svg: {
38
- maxWidth: string;
39
- display: string;
40
- height: string;
41
- width: string;
42
- } | {
43
- maxWidth: string;
44
- display: string;
45
- height: string;
46
- width: string;
47
- } | {
48
- maxWidth: string;
49
- display: string;
50
- height: string;
51
- width: string;
52
- } | {
53
- maxWidth: string;
54
- display: string;
55
- height: string;
56
- width: string;
57
- } | {
58
- maxWidth: string;
59
- display: string;
60
- height: string;
61
- width: string;
62
- } | {
63
- maxWidth: string;
64
- display: string;
65
- height: string;
66
- width: string;
67
- } | {
68
- maxWidth: string;
69
- display: string;
70
- height: string;
71
- width: string;
72
- } | {
73
- height: string;
74
- width: string;
75
- display: string;
76
- } | {
77
- height: string;
78
- width: string;
79
- display: string;
80
- };
81
- maxWidth: string;
82
- display: string;
83
- height: string;
84
- width: string;
85
- } | {
86
- svg: {
87
- maxWidth: string;
88
- display: string;
89
- height: string;
90
- width: string;
91
- } | {
92
- maxWidth: string;
93
- display: string;
94
- height: string;
95
- width: string;
96
- } | {
97
- maxWidth: string;
98
- display: string;
99
- height: string;
100
- width: string;
101
- } | {
102
- maxWidth: string;
103
- display: string;
104
- height: string;
105
- width: string;
106
- } | {
107
- maxWidth: string;
108
- display: string;
109
- height: string;
110
- width: string;
111
- } | {
112
- maxWidth: string;
113
- display: string;
114
- height: string;
115
- width: string;
116
- } | {
117
- maxWidth: string;
118
- display: string;
119
- height: string;
120
- width: string;
121
- } | {
122
- height: string;
123
- width: string;
124
- display: string;
125
- } | {
126
- height: string;
127
- width: string;
128
- display: string;
129
- };
130
- maxWidth: string;
131
- display: string;
132
- height: string;
133
- width: string;
134
- } | {
135
- svg: {
136
- maxWidth: string;
137
- display: string;
138
- height: string;
139
- width: string;
140
- } | {
141
- maxWidth: string;
142
- display: string;
143
- height: string;
144
- width: string;
145
- } | {
146
- maxWidth: string;
147
- display: string;
148
- height: string;
149
- width: string;
150
- } | {
151
- maxWidth: string;
152
- display: string;
153
- height: string;
154
- width: string;
155
- } | {
156
- maxWidth: string;
157
- display: string;
158
- height: string;
159
- width: string;
160
- } | {
161
- maxWidth: string;
162
- display: string;
163
- height: string;
164
- width: string;
165
- } | {
166
- maxWidth: string;
167
- display: string;
168
- height: string;
169
- width: string;
170
- } | {
171
- height: string;
172
- width: string;
173
- display: string;
174
- } | {
175
- height: string;
176
- width: string;
177
- display: string;
178
- };
179
- maxWidth: string;
180
- display: string;
36
+ declare const sizeBasedOnHeight: {
37
+ default: {
38
+ maxHeight: string;
39
+ };
40
+ xxsmall: {
41
+ maxHeight: string;
42
+ };
43
+ xsmall: {
44
+ maxHeight: string;
45
+ };
46
+ small: {
47
+ maxHeight: string;
48
+ };
49
+ medium: {
50
+ maxHeight: string;
51
+ };
52
+ large: {
53
+ maxHeight: string;
54
+ };
55
+ xlarge: {
56
+ maxHeight: string;
57
+ };
58
+ xxlarge: {
181
59
  height: string;
182
60
  width: string;
183
- } | {
184
- svg: {
185
- maxWidth: string;
186
- display: string;
187
- height: string;
188
- width: string;
189
- } | {
190
- maxWidth: string;
191
- display: string;
192
- height: string;
193
- width: string;
194
- } | {
195
- maxWidth: string;
196
- display: string;
197
- height: string;
198
- width: string;
199
- } | {
200
- maxWidth: string;
201
- display: string;
202
- height: string;
203
- width: string;
204
- } | {
205
- maxWidth: string;
206
- display: string;
207
- height: string;
208
- width: string;
209
- } | {
210
- maxWidth: string;
211
- display: string;
212
- height: string;
213
- width: string;
214
- } | {
215
- maxWidth: string;
216
- display: string;
217
- height: string;
218
- width: string;
219
- } | {
220
- height: string;
221
- width: string;
222
- display: string;
223
- } | {
224
- height: string;
225
- width: string;
226
- display: string;
227
- };
228
- maxWidth: string;
229
- display: string;
61
+ };
62
+ xxxlarge: {
230
63
  height: string;
231
64
  width: string;
232
- } | {
65
+ };
66
+ };
67
+ declare const Logo: {
68
+ baseStyle: (props: LogoBaseStyle) => {
233
69
  svg: {
234
70
  maxWidth: string;
235
71
  display: string;
236
72
  height: string;
237
73
  width: string;
238
74
  } | {
239
- maxWidth: string;
240
- display: string;
241
75
  height: string;
242
76
  width: string;
243
- } | {
244
- maxWidth: string;
245
77
  display: string;
246
- height: string;
247
- width: string;
248
78
  } | {
249
- maxWidth: string;
79
+ maxHeight: string;
250
80
  display: string;
251
81
  height: string;
252
82
  width: string;
253
- } | {
254
- maxWidth: string;
255
- display: string;
256
- height: string;
257
- width: string;
258
- } | {
259
- maxWidth: string;
260
- display: string;
261
- height: string;
262
- width: string;
263
- } | {
264
- maxWidth: string;
265
- display: string;
266
- height: string;
267
- width: string;
268
- } | {
269
- height: string;
270
- width: string;
271
- display: string;
272
- } | {
273
- height: string;
274
- width: string;
275
- display: string;
276
83
  };
277
84
  maxWidth: string;
278
85
  display: string;
@@ -285,97 +92,18 @@ declare const Logo: {
285
92
  height: string;
286
93
  width: string;
287
94
  } | {
288
- maxWidth: string;
289
- display: string;
290
95
  height: string;
291
96
  width: string;
292
- } | {
293
- maxWidth: string;
294
97
  display: string;
295
- height: string;
296
- width: string;
297
98
  } | {
298
- maxWidth: string;
99
+ maxHeight: string;
299
100
  display: string;
300
101
  height: string;
301
102
  width: string;
302
- } | {
303
- maxWidth: string;
304
- display: string;
305
- height: string;
306
- width: string;
307
- } | {
308
- maxWidth: string;
309
- display: string;
310
- height: string;
311
- width: string;
312
- } | {
313
- maxWidth: string;
314
- display: string;
315
- height: string;
316
- width: string;
317
- } | {
318
- height: string;
319
- width: string;
320
- display: string;
321
- } | {
322
- height: string;
323
- width: string;
324
- display: string;
325
103
  };
326
- maxWidth: string;
327
- display: string;
328
104
  height: string;
329
105
  width: string;
330
- } | {
331
- svg: {
332
- maxWidth: string;
333
- display: string;
334
- height: string;
335
- width: string;
336
- } | {
337
- maxWidth: string;
338
- display: string;
339
- height: string;
340
- width: string;
341
- } | {
342
- maxWidth: string;
343
- display: string;
344
- height: string;
345
- width: string;
346
- } | {
347
- maxWidth: string;
348
- display: string;
349
- height: string;
350
- width: string;
351
- } | {
352
- maxWidth: string;
353
- display: string;
354
- height: string;
355
- width: string;
356
- } | {
357
- maxWidth: string;
358
- display: string;
359
- height: string;
360
- width: string;
361
- } | {
362
- maxWidth: string;
363
- display: string;
364
- height: string;
365
- width: string;
366
- } | {
367
- height: string;
368
- width: string;
369
- display: string;
370
- } | {
371
- height: string;
372
- width: string;
373
- display: string;
374
- };
375
- maxWidth: string;
376
106
  display: string;
377
- height: string;
378
- width: string;
379
107
  } | {
380
108
  svg: {
381
109
  maxWidth: string;
@@ -383,95 +111,19 @@ declare const Logo: {
383
111
  height: string;
384
112
  width: string;
385
113
  } | {
386
- maxWidth: string;
387
- display: string;
388
- height: string;
389
- width: string;
390
- } | {
391
- maxWidth: string;
392
- display: string;
393
114
  height: string;
394
115
  width: string;
395
- } | {
396
- maxWidth: string;
397
116
  display: string;
398
- height: string;
399
- width: string;
400
- } | {
401
- maxWidth: string;
402
- display: string;
403
- height: string;
404
- width: string;
405
117
  } | {
406
- maxWidth: string;
407
- display: string;
408
- height: string;
409
- width: string;
410
- } | {
411
- maxWidth: string;
412
- display: string;
413
- height: string;
414
- width: string;
415
- } | {
416
- height: string;
417
- width: string;
118
+ maxHeight: string;
418
119
  display: string;
419
- } | {
420
120
  height: string;
421
121
  width: string;
422
- display: string;
423
122
  };
424
- height: string;
425
- width: string;
123
+ maxHeight: string;
426
124
  display: string;
427
- } | {
428
- svg: {
429
- maxWidth: string;
430
- display: string;
431
- height: string;
432
- width: string;
433
- } | {
434
- maxWidth: string;
435
- display: string;
436
- height: string;
437
- width: string;
438
- } | {
439
- maxWidth: string;
440
- display: string;
441
- height: string;
442
- width: string;
443
- } | {
444
- maxWidth: string;
445
- display: string;
446
- height: string;
447
- width: string;
448
- } | {
449
- maxWidth: string;
450
- display: string;
451
- height: string;
452
- width: string;
453
- } | {
454
- maxWidth: string;
455
- display: string;
456
- height: string;
457
- width: string;
458
- } | {
459
- maxWidth: string;
460
- display: string;
461
- height: string;
462
- width: string;
463
- } | {
464
- height: string;
465
- width: string;
466
- display: string;
467
- } | {
468
- height: string;
469
- width: string;
470
- display: string;
471
- };
472
125
  height: string;
473
126
  width: string;
474
- display: string;
475
127
  };
476
128
  };
477
129
  export default Logo;
package/dist/src/theme/components/searchBar.d.ts CHANGED
@@ -27,6 +27,9 @@ declare const SearchBar: {
27
27
  };
28
28
  _hover: {
29
29
  zIndex: string;
30
+ "+ .chakra-select__icon-wrapper": {
31
+ zIndex: string;
32
+ };
30
33
  };
31
34
  };
32
35
  };
package/dist/src/theme/components/structuredContent.d.ts CHANGED
@@ -165,12 +165,6 @@ declare const StructuredContent: {
165
165
  color: string;
166
166
  };
167
167
  };
168
- _visited: {
169
- color: string;
170
- _dark: {
171
- color: string;
172
- };
173
- };
174
168
  };
175
169
  ul: {
176
170
  listStyle: string;
package/dist/src/utils/getSectionColors.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { SectionTypes } from "../helpers/types";
2
+ type ColorSection = {
3
+ primary: string;
4
+ secondary: string | null;
5
+ };
6
+ type ColorValue = string;
7
+ interface GetSectionColorsProps {
8
+ type: SectionTypes;
9
+ colorValue?: "primary" | "secondary";
10
+ isDark?: boolean;
11
+ }
12
+ export declare function getSectionColors({ type, colorValue, isDark, }: GetSectionColorsProps): ColorSection | ColorValue;
13
+ export {};