@nypl/design-system-react-components 1.7.2 → 2.0.0-rc2
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.
- package/dist/design-system-react-components.cjs +55 -55
- package/dist/design-system-react-components.js +7990 -7815
- package/dist/src/components/Link/Link.d.ts +7 -2
- package/dist/src/components/StyledList/StyledList.d.ts +2 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/theme/components/accordion.d.ts +1 -1
- package/dist/src/theme/components/alphabetFilter.d.ts +11 -4
- package/dist/src/theme/components/breadcrumb.d.ts +1 -0
- package/dist/src/theme/components/card.d.ts +76 -12
- package/dist/src/theme/components/customTable.d.ts +15 -9
- package/dist/src/theme/components/feedbackBox.d.ts +8 -0
- package/dist/src/theme/components/fieldset.d.ts +4 -3
- package/dist/src/theme/components/global.d.ts +1 -0
- package/dist/src/theme/components/heading.d.ts +84 -2
- package/dist/src/theme/components/hero.d.ts +20 -9
- package/dist/src/theme/components/image.d.ts +0 -4
- package/dist/src/theme/components/label.d.ts +1 -0
- package/dist/src/theme/components/link.d.ts +48 -2
- package/dist/src/theme/components/list.d.ts +2 -0
- package/dist/src/theme/components/modal.d.ts +6 -0
- package/dist/src/theme/components/multiSelectMenuButton.d.ts +4 -0
- package/dist/src/theme/components/notification.d.ts +1 -0
- package/dist/src/theme/components/pagination.d.ts +3 -0
- package/dist/src/theme/components/progressIndicator.d.ts +1 -0
- package/dist/src/theme/components/structuredContent.d.ts +44 -14
- package/dist/src/theme/components/tabs.d.ts +3 -3
- package/dist/src/theme/components/tooltip.d.ts +2 -0
- package/dist/src/utils/utils.d.ts +2 -0
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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;
|
|
@@ -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: {
|
|
@@ -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
|
-
|
|
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;
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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,37 +63,55 @@ 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;
|
|
99
|
+
letterSpacing: string;
|
|
81
100
|
lineHeight: string;
|
|
82
101
|
width: string;
|
|
102
|
+
a: {
|
|
103
|
+
textUnderlineOffset: string;
|
|
104
|
+
};
|
|
83
105
|
};
|
|
84
106
|
heading5: {
|
|
85
107
|
fontWeight: string;
|
|
108
|
+
letterSpacing: string;
|
|
86
109
|
lineHeight: string;
|
|
87
110
|
width: string;
|
|
88
111
|
};
|
|
89
112
|
heading6: {
|
|
90
113
|
fontWeight: string;
|
|
114
|
+
letterSpacing: string;
|
|
91
115
|
lineHeight: string;
|
|
92
116
|
width: string;
|
|
93
117
|
};
|
|
@@ -127,10 +151,21 @@ declare const StructuredContent: {
|
|
|
127
151
|
a: {
|
|
128
152
|
color: string;
|
|
129
153
|
textDecoration: string;
|
|
154
|
+
textDecorationStyle: string;
|
|
155
|
+
textDecorationThickness: string;
|
|
156
|
+
textUnderlineOffset: string;
|
|
130
157
|
_dark: {
|
|
131
158
|
color: string;
|
|
132
159
|
};
|
|
133
160
|
_hover: {
|
|
161
|
+
color: string;
|
|
162
|
+
textDecorationStyle: string;
|
|
163
|
+
textDecorationThickness: string;
|
|
164
|
+
_dark: {
|
|
165
|
+
color: string;
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
_visited: {
|
|
134
169
|
color: string;
|
|
135
170
|
_dark: {
|
|
136
171
|
color: string;
|
|
@@ -208,6 +243,7 @@ declare const StructuredContent: {
|
|
|
208
243
|
dt: {
|
|
209
244
|
borderTop: string;
|
|
210
245
|
borderColor: string;
|
|
246
|
+
color: string;
|
|
211
247
|
fontWeight: string;
|
|
212
248
|
paddingBottom: {
|
|
213
249
|
base: string;
|
|
@@ -271,7 +307,7 @@ declare const StructuredContent: {
|
|
|
271
307
|
};
|
|
272
308
|
fontSize: {
|
|
273
309
|
base: string;
|
|
274
|
-
|
|
310
|
+
md: string;
|
|
275
311
|
};
|
|
276
312
|
gap: string;
|
|
277
313
|
letterSpacing: string;
|
|
@@ -311,15 +347,12 @@ declare const StructuredContent: {
|
|
|
311
347
|
};
|
|
312
348
|
paddingEnd: string;
|
|
313
349
|
paddingTop: {
|
|
314
|
-
base: string;
|
|
315
|
-
md: string; /** The following styles are meant to target HTML elements that are
|
|
350
|
+
base: string; /** The following styles are meant to target HTML elements that are
|
|
316
351
|
* not rendered from the Reservoir DS. Typically, these HTML elements
|
|
317
352
|
* are added from an API response.
|
|
318
353
|
*/
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
* are added from an API response.
|
|
322
|
-
*/
|
|
354
|
+
md: string;
|
|
355
|
+
};
|
|
323
356
|
_first: {
|
|
324
357
|
bg: string;
|
|
325
358
|
color: string;
|
|
@@ -369,7 +402,7 @@ declare const StructuredContent: {
|
|
|
369
402
|
};
|
|
370
403
|
fontSize: {
|
|
371
404
|
base: string;
|
|
372
|
-
|
|
405
|
+
md: string;
|
|
373
406
|
};
|
|
374
407
|
gap: string;
|
|
375
408
|
letterSpacing: string;
|
|
@@ -395,15 +428,12 @@ declare const StructuredContent: {
|
|
|
395
428
|
};
|
|
396
429
|
paddingEnd: string;
|
|
397
430
|
paddingTop: {
|
|
398
|
-
base: string;
|
|
399
|
-
md: string; /** The following styles are meant to target HTML elements that are
|
|
431
|
+
base: string; /** The following styles are meant to target HTML elements that are
|
|
400
432
|
* not rendered from the Reservoir DS. Typically, these HTML elements
|
|
401
433
|
* are added from an API response.
|
|
402
434
|
*/
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
* are added from an API response.
|
|
406
|
-
*/
|
|
435
|
+
md: string;
|
|
436
|
+
};
|
|
407
437
|
_first: {
|
|
408
438
|
bg: string;
|
|
409
439
|
color: string;
|
|
@@ -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
|
-
|
|
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;
|
|
@@ -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
|
};
|
|
@@ -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 {};
|