@nypl/design-system-react-components 1.7.1 → 2.0.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 (32) hide show
  1. package/dist/design-system-react-components.cjs +59 -59
  2. package/dist/design-system-react-components.js +12190 -11989
  3. package/dist/src/components/Icons/Icon.d.ts +4 -3
  4. package/dist/src/components/Icons/IconSvgs.d.ts +18 -0
  5. package/dist/src/components/Icons/iconVariables.d.ts +2 -2
  6. package/dist/src/components/Link/Link.d.ts +7 -2
  7. package/dist/src/index.d.ts +1 -1
  8. package/dist/src/theme/components/accordion.d.ts +1 -1
  9. package/dist/src/theme/components/alphabetFilter.d.ts +11 -4
  10. package/dist/src/theme/components/breadcrumb.d.ts +1 -0
  11. package/dist/src/theme/components/card.d.ts +76 -12
  12. package/dist/src/theme/components/customTable.d.ts +15 -9
  13. package/dist/src/theme/components/feedbackBox.d.ts +8 -0
  14. package/dist/src/theme/components/fieldset.d.ts +4 -3
  15. package/dist/src/theme/components/global.d.ts +1 -0
  16. package/dist/src/theme/components/heading.d.ts +75 -2
  17. package/dist/src/theme/components/hero.d.ts +20 -9
  18. package/dist/src/theme/components/image.d.ts +0 -4
  19. package/dist/src/theme/components/label.d.ts +1 -0
  20. package/dist/src/theme/components/link.d.ts +48 -2
  21. package/dist/src/theme/components/list.d.ts +2 -0
  22. package/dist/src/theme/components/modal.d.ts +6 -0
  23. package/dist/src/theme/components/multiSelectMenuButton.d.ts +4 -0
  24. package/dist/src/theme/components/notification.d.ts +1 -0
  25. package/dist/src/theme/components/pagination.d.ts +3 -0
  26. package/dist/src/theme/components/progressIndicator.d.ts +1 -0
  27. package/dist/src/theme/components/structuredContent.d.ts +41 -14
  28. package/dist/src/theme/components/tabs.d.ts +3 -3
  29. package/dist/src/theme/components/tooltip.d.ts +2 -0
  30. package/dist/src/utils/utils.d.ts +2 -0
  31. package/dist/styles.css +1 -1
  32. package/package.json +1 -1
package/dist/src/theme/components/hero.d.ts CHANGED
@@ -35,9 +35,6 @@ declare const Hero: {
35
35
  color: string;
36
36
  display: string;
37
37
  };
38
- heading: {
39
- marginBottom: string;
40
- };
41
38
  bodyText: {
42
39
  marginBottom: string;
43
40
  };
@@ -46,9 +43,13 @@ declare const Hero: {
46
43
  color: string;
47
44
  };
48
45
  };
46
+ heading: {
47
+ color: string;
48
+ };
49
49
  };
50
50
  secondary: {
51
51
  heading: {
52
+ color: string;
52
53
  _before: {
53
54
  bg: string;
54
55
  content: string;
@@ -59,12 +60,12 @@ declare const Hero: {
59
60
  zIndex: string;
60
61
  };
61
62
  _dark: {
63
+ color: string;
62
64
  _before: {
63
65
  bg: string;
64
66
  };
65
67
  };
66
68
  marginBottom: string;
67
- color: string;
68
69
  flex: string;
69
70
  marginTop: string;
70
71
  paddingBottom: string;
@@ -128,6 +129,7 @@ declare const Hero: {
128
129
  };
129
130
  secondaryBooksAndMore: {
130
131
  heading: {
132
+ color: string;
131
133
  _before: {
132
134
  bg: string;
133
135
  content: string;
@@ -138,12 +140,12 @@ declare const Hero: {
138
140
  zIndex: string;
139
141
  };
140
142
  _dark: {
143
+ color: string;
141
144
  _before: {
142
145
  bg: string;
143
146
  };
144
147
  };
145
148
  marginBottom: string;
146
- color: string;
147
149
  flex: string;
148
150
  marginTop: string;
149
151
  paddingBottom: string;
@@ -207,6 +209,7 @@ declare const Hero: {
207
209
  };
208
210
  secondaryLocations: {
209
211
  heading: {
212
+ color: string;
210
213
  _before: {
211
214
  bg: string;
212
215
  content: string;
@@ -217,12 +220,12 @@ declare const Hero: {
217
220
  zIndex: string;
218
221
  };
219
222
  _dark: {
223
+ color: string;
220
224
  _before: {
221
225
  bg: string;
222
226
  };
223
227
  };
224
228
  marginBottom: string;
225
- color: string;
226
229
  flex: string;
227
230
  marginTop: string;
228
231
  paddingBottom: string;
@@ -286,6 +289,7 @@ declare const Hero: {
286
289
  };
287
290
  secondaryResearch: {
288
291
  heading: {
292
+ color: string;
289
293
  _before: {
290
294
  bg: string;
291
295
  content: string;
@@ -296,12 +300,12 @@ declare const Hero: {
296
300
  zIndex: string;
297
301
  };
298
302
  _dark: {
303
+ color: string;
299
304
  _before: {
300
305
  bg: string;
301
306
  };
302
307
  };
303
308
  marginBottom: string;
304
- color: string;
305
309
  flex: string;
306
310
  marginTop: string;
307
311
  paddingBottom: string;
@@ -365,6 +369,7 @@ declare const Hero: {
365
369
  };
366
370
  secondaryWhatsOn: {
367
371
  heading: {
372
+ color: string;
368
373
  _before: {
369
374
  bg: string;
370
375
  content: string;
@@ -375,12 +380,12 @@ declare const Hero: {
375
380
  zIndex: string;
376
381
  };
377
382
  _dark: {
383
+ color: string;
378
384
  _before: {
379
385
  bg: string;
380
386
  };
381
387
  };
382
388
  marginBottom: string;
383
- color: string;
384
389
  flex: string;
385
390
  marginTop: string;
386
391
  paddingBottom: string;
@@ -461,7 +466,9 @@ declare const Hero: {
461
466
  };
462
467
  };
463
468
  _dark: {
464
- color: string;
469
+ p: {
470
+ color: string;
471
+ };
465
472
  };
466
473
  marginY: string;
467
474
  marginX: string;
@@ -470,6 +477,7 @@ declare const Hero: {
470
477
  width: string;
471
478
  };
472
479
  heading: {
480
+ color: string;
473
481
  marginBottom: string;
474
482
  _lastChild: {
475
483
  marginBottom: string;
@@ -523,6 +531,9 @@ declare const Hero: {
523
531
  color: string;
524
532
  };
525
533
  };
534
+ heading: {
535
+ color: string;
536
+ };
526
537
  a: {
527
538
  color: string;
528
539
  display: string;
package/dist/src/theme/components/image.d.ts CHANGED
@@ -199,7 +199,6 @@ declare const CustomImage: {
199
199
  };
200
200
  figcaption: {
201
201
  fontStyle: string;
202
- fontSize: string;
203
202
  };
204
203
  img: {
205
204
  _dark: {
@@ -291,9 +290,6 @@ declare const CustomImage: {
291
290
  position: string;
292
291
  width: string;
293
292
  };
294
- captionWrappers: {
295
- marginTop: string;
296
- };
297
293
  };
298
294
  };
299
295
  declare const CustomImageWrapper: {
package/dist/src/theme/components/label.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const Label: {
5
5
  baseStyle: ({ isInlined }: LabelBaseStyle) => {
6
6
  flex: string;
7
7
  whiteSpace: string;
8
+ color: string;
8
9
  display: string;
9
10
  fontSize: string;
10
11
  fontWeight: string;
package/dist/src/theme/components/link.d.ts CHANGED
@@ -1,10 +1,21 @@
1
1
  export declare const baseLinkStyles: {
2
2
  color: string;
3
3
  textDecoration: string;
4
+ textDecorationStyle: string;
5
+ textDecorationThickness: string;
6
+ textUnderlineOffset: string;
4
7
  _dark: {
5
8
  color: string;
6
9
  };
7
10
  _hover: {
11
+ color: string;
12
+ textDecorationStyle: string;
13
+ textDecorationThickness: string;
14
+ _dark: {
15
+ color: string;
16
+ };
17
+ };
18
+ _visited: {
8
19
  color: string;
9
20
  _dark: {
10
21
  color: string;
@@ -13,7 +24,10 @@ export declare const baseLinkStyles: {
13
24
  };
14
25
  declare const Link: {
15
26
  parts: string[];
16
- baseStyle: {
27
+ baseStyle: ({ finalIsUnderlined }: {
28
+ finalIsUnderlined?: boolean;
29
+ }) => {
30
+ textDecoration: string;
17
31
  /** This is needed for custom anchor elements or link components
18
32
  * that are passed as children to the `Link` component. */
19
33
  a: {
@@ -41,11 +55,21 @@ declare const Link: {
41
55
  wordWrap: string;
42
56
  };
43
57
  color: string;
44
- textDecoration: string;
58
+ textDecorationStyle: string;
59
+ textDecorationThickness: string;
60
+ textUnderlineOffset: string;
45
61
  _dark: {
46
62
  color: string;
47
63
  };
48
64
  _hover: {
65
+ color: string;
66
+ textDecorationStyle: string;
67
+ textDecorationThickness: string;
68
+ _dark: {
69
+ color: string;
70
+ };
71
+ };
72
+ _visited: {
49
73
  color: string;
50
74
  _dark: {
51
75
  color: string;
@@ -67,6 +91,20 @@ declare const Link: {
67
91
  textDecoration: string;
68
92
  fill: string;
69
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
+ };
70
108
  };
71
109
  button: {
72
110
  width: string;
@@ -94,6 +132,14 @@ declare const Link: {
94
132
  bg: string;
95
133
  };
96
134
  };
135
+ _visited: {
136
+ color: string;
137
+ _dark: {
138
+ _visited: {
139
+ color: string;
140
+ };
141
+ };
142
+ };
97
143
  };
98
144
  buttonPrimary: any;
99
145
  buttonSecondary: any;
package/dist/src/theme/components/list.d.ts CHANGED
@@ -69,6 +69,7 @@ export declare const baseDescriptionStyles: {
69
69
  dt: {
70
70
  borderTop: string;
71
71
  borderColor: string;
72
+ color: string;
72
73
  fontWeight: string;
73
74
  paddingBottom: {
74
75
  base: string;
@@ -174,6 +175,7 @@ declare const List: {
174
175
  dt: {
175
176
  borderTop: string;
176
177
  borderColor: string;
178
+ color: string;
177
179
  fontWeight: string;
178
180
  paddingBottom: {
179
181
  base: string;
package/dist/src/theme/components/modal.d.ts CHANGED
@@ -7,6 +7,12 @@ declare const Modal: {
7
7
  };
8
8
  };
9
9
  header: {
10
+ color: string;
11
+ fontSize: {
12
+ base: string;
13
+ md: string;
14
+ };
15
+ fontWeight: string;
10
16
  _dark: {
11
17
  color: string;
12
18
  };
package/dist/src/theme/components/multiSelectMenuButton.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const MultiSelectMenuButton: {
5
5
  isOpen?: boolean;
6
6
  }) => {
7
7
  buttonLabel: {
8
+ color: string;
8
9
  justifyContent: string;
9
10
  overflow: string;
10
11
  marginLeft: string;
@@ -13,6 +14,9 @@ declare const MultiSelectMenuButton: {
13
14
  textOverflow: string;
14
15
  whiteSpace: string;
15
16
  transition: string;
17
+ _dark: {
18
+ color: string;
19
+ };
16
20
  };
17
21
  menuButton: {
18
22
  alignItems: string;
package/dist/src/theme/components/notification.d.ts CHANGED
@@ -129,6 +129,7 @@ declare const _default: {
129
129
  svg: {
130
130
  mx: string;
131
131
  mb: string;
132
+ mt: string;
132
133
  };
133
134
  };
134
135
  };
package/dist/src/theme/components/pagination.d.ts CHANGED
@@ -7,6 +7,9 @@ declare const Pagination: {
7
7
  link: {
8
8
  lineHeight: string;
9
9
  textDecoration: string;
10
+ _hover: {
11
+ textDecoration: string;
12
+ };
10
13
  };
11
14
  ul: {
12
15
  marginBottom: string;
package/dist/src/theme/components/progressIndicator.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const ProgressIndicator: {
7
7
  parts: string[];
8
8
  baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
9
9
  color: string;
10
+ fontSize: string;
10
11
  _dark: {
11
12
  color: string;
12
13
  };
package/dist/src/theme/components/structuredContent.d.ts CHANGED
@@ -8,6 +8,9 @@ declare const StructuredContent: {
8
8
  baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
9
9
  one: {
10
10
  width: string;
11
+ a: {
12
+ textUnderlineOffset: string;
13
+ };
11
14
  marginTop: string;
12
15
  marginStart: string;
13
16
  marginEnd: string;
@@ -18,6 +21,9 @@ declare const StructuredContent: {
18
21
  };
19
22
  two: {
20
23
  width: string;
24
+ a: {
25
+ textUnderlineOffset: string;
26
+ };
21
27
  marginTop: string;
22
28
  marginStart: string;
23
29
  marginEnd: string;
@@ -57,29 +63,44 @@ declare const StructuredContent: {
57
63
  letterSpacing: string;
58
64
  lineHeight: string;
59
65
  width: string;
66
+ a: {
67
+ textUnderlineOffset: string;
68
+ };
60
69
  };
61
70
  heading1: {
62
71
  fontWeight: string;
63
72
  letterSpacing: string;
64
73
  lineHeight: string;
65
74
  width: string;
75
+ a: {
76
+ textUnderlineOffset: string;
77
+ };
66
78
  };
67
79
  heading2: {
68
80
  fontWeight: string;
69
81
  letterSpacing: string;
70
82
  lineHeight: string;
71
83
  width: string;
84
+ a: {
85
+ textUnderlineOffset: string;
86
+ };
72
87
  };
73
88
  heading3: {
74
89
  fontWeight: string;
75
90
  letterSpacing: string;
76
91
  lineHeight: string;
77
92
  width: string;
93
+ a: {
94
+ textUnderlineOffset: string;
95
+ };
78
96
  };
79
97
  heading4: {
80
98
  fontWeight: string;
81
99
  lineHeight: string;
82
100
  width: string;
101
+ a: {
102
+ textUnderlineOffset: string;
103
+ };
83
104
  };
84
105
  heading5: {
85
106
  fontWeight: string;
@@ -127,10 +148,21 @@ declare const StructuredContent: {
127
148
  a: {
128
149
  color: string;
129
150
  textDecoration: string;
151
+ textDecorationStyle: string;
152
+ textDecorationThickness: string;
153
+ textUnderlineOffset: string;
130
154
  _dark: {
131
155
  color: string;
132
156
  };
133
157
  _hover: {
158
+ color: string;
159
+ textDecorationStyle: string;
160
+ textDecorationThickness: string;
161
+ _dark: {
162
+ color: string;
163
+ };
164
+ };
165
+ _visited: {
134
166
  color: string;
135
167
  _dark: {
136
168
  color: string;
@@ -208,6 +240,7 @@ declare const StructuredContent: {
208
240
  dt: {
209
241
  borderTop: string;
210
242
  borderColor: string;
243
+ color: string;
211
244
  fontWeight: string;
212
245
  paddingBottom: {
213
246
  base: string;
@@ -271,7 +304,7 @@ declare const StructuredContent: {
271
304
  };
272
305
  fontSize: {
273
306
  base: string;
274
- lg: string;
307
+ md: string;
275
308
  };
276
309
  gap: string;
277
310
  letterSpacing: string;
@@ -311,15 +344,12 @@ declare const StructuredContent: {
311
344
  };
312
345
  paddingEnd: string;
313
346
  paddingTop: {
314
- base: string;
315
- md: string; /** The following styles are meant to target HTML elements that are
347
+ base: string; /** The following styles are meant to target HTML elements that are
316
348
  * not rendered from the Reservoir DS. Typically, these HTML elements
317
349
  * are added from an API response.
318
350
  */
319
- }; /** The following styles are meant to target HTML elements that are
320
- * not rendered from the Reservoir DS. Typically, these HTML elements
321
- * are added from an API response.
322
- */
351
+ md: string;
352
+ };
323
353
  _first: {
324
354
  bg: string;
325
355
  color: string;
@@ -369,7 +399,7 @@ declare const StructuredContent: {
369
399
  };
370
400
  fontSize: {
371
401
  base: string;
372
- lg: string;
402
+ md: string;
373
403
  };
374
404
  gap: string;
375
405
  letterSpacing: string;
@@ -395,15 +425,12 @@ declare const StructuredContent: {
395
425
  };
396
426
  paddingEnd: string;
397
427
  paddingTop: {
398
- base: string;
399
- md: string; /** The following styles are meant to target HTML elements that are
428
+ base: string; /** The following styles are meant to target HTML elements that are
400
429
  * not rendered from the Reservoir DS. Typically, these HTML elements
401
430
  * are added from an API response.
402
431
  */
403
- }; /** The following styles are meant to target HTML elements that are
404
- * not rendered from the Reservoir DS. Typically, these HTML elements
405
- * are added from an API response.
406
- */
432
+ md: string;
433
+ };
407
434
  _first: {
408
435
  bg: string;
409
436
  color: string;
package/dist/src/theme/components/tabs.d.ts CHANGED
@@ -5,12 +5,10 @@ declare const CustomTabs: {
5
5
  borderColor: string;
6
6
  };
7
7
  tab: {
8
- paddingInlineStart: string;
9
- paddingStart: string;
10
8
  background: string;
11
9
  border: string;
12
10
  borderBottom: string;
13
- borderColor: string;
11
+ color: string;
14
12
  height: {
15
13
  base: string;
16
14
  };
@@ -23,6 +21,8 @@ declare const CustomTabs: {
23
21
  md: string;
24
22
  lg: string;
25
23
  };
24
+ paddingInlineStart: string;
25
+ paddingStart: string;
26
26
  whiteSpace: string;
27
27
  _hover: {
28
28
  bg: string;
package/dist/src/theme/components/tooltip.d.ts CHANGED
@@ -2,6 +2,7 @@ declare const Tooltip: {
2
2
  baseStyle: {
3
3
  [x: string]: string | {
4
4
  [x: string]: string;
5
+ color: string;
5
6
  };
6
7
  borderRadius: string;
7
8
  boxShadow: string;
@@ -13,6 +14,7 @@ declare const Tooltip: {
13
14
  py: string;
14
15
  _dark: {
15
16
  [x: string]: string;
17
+ color: string;
16
18
  };
17
19
  };
18
20
  };
package/dist/src/utils/utils.d.ts CHANGED
@@ -36,4 +36,6 @@ export declare const colorLuminance: (r: any, g: any, b: any) => number;
36
36
  export declare const contrastRatio: (hex1: string, hex2: string) => string;
37
37
  /** This method will truncate text by centain length. Default length is 60. */
38
38
  export declare const truncateText: (text: string, truncateTextLength?: number) => string;
39
+ /** Prepare a string for use in an ID or class attribute */
40
+ export declare const sanitizeStringForAttribute: (str: string) => string;
39
41
  export {};