@nypl/design-system-react-components 3.4.1 → 3.4.2
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 +39 -39
- package/dist/design-system-react-components.js +4474 -4412
- package/dist/src/components/Heading/Heading.d.ts +1 -1
- package/dist/src/components/Icons/IconSvgs.d.ts +2 -0
- package/dist/src/components/Icons/iconVariables.d.ts +1 -1
- package/dist/src/components/SocialMediaLinks/SocialMediaLinks.d.ts +1 -1
- package/dist/src/theme/components/customTable.d.ts +63 -71
- package/dist/src/theme/components/heading.d.ts +49 -1
- package/dist/src/theme/components/icon.d.ts +56 -0
- package/dist/src/theme/components/link.d.ts +1 -0
- package/dist/src/theme/components/structuredContent.d.ts +34 -17
- package/package.json +9 -9
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ChakraComponent, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
|
|
2
2
|
import React from "react";
|
|
3
|
-
export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "primary", "secondary", "tertiary", "callout"];
|
|
3
|
+
export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "heading7", "heading8", "primary", "secondary", "tertiary", "callout"];
|
|
4
4
|
export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "one", "two", "three", "four", "five", "six"];
|
|
5
5
|
export type HeadingSizes = typeof headingSizesArray[number];
|
|
6
6
|
export type HeadingLevels = typeof headingLevelsArray[number];
|
|
@@ -29,6 +29,7 @@ declare const _default: {
|
|
|
29
29
|
communicationCall: any;
|
|
30
30
|
communicationChatBubble: any;
|
|
31
31
|
communicationEmail: any;
|
|
32
|
+
contentFilterList: any;
|
|
32
33
|
decorativeBookBroken: any;
|
|
33
34
|
decorativeEnvelope: any;
|
|
34
35
|
decorativeLibraryCard: any;
|
|
@@ -67,6 +68,7 @@ declare const _default: {
|
|
|
67
68
|
socialTumblr: any;
|
|
68
69
|
socialTwitter: any;
|
|
69
70
|
socialVimeo: any;
|
|
71
|
+
socialX: any;
|
|
70
72
|
socialYoutube: any;
|
|
71
73
|
speakerNotes: any;
|
|
72
74
|
sunFull: any;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const iconAlignArray: readonly ["left", "right", "none"];
|
|
2
2
|
export declare const iconColorsArray: readonly ["transparent", "ui.black", "ui.white", "ui.disabled.primary", "ui.disabled.secondary", "ui.error.primary", "ui.error.secondary", "ui.focus", "ui.link.primary", "ui.link.primary-05", "ui.link.primary-10", "ui.link.secondary", "ui.link.tertiary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.test", "ui.warning.primary", "ui.warning.secondary", "ui.bg.default", "ui.bg.hover", "ui.bg.active", "ui.border.default", "ui.border.hover", "ui.typography.heading", "ui.typography.body", "ui.typography.inverse.heading", "ui.typography.inverse.body", "ui.gray.xxxx-dark", "ui.gray.xxx-dark", "ui.gray.xx-dark", "ui.gray.x-dark", "ui.gray.dark", "ui.gray.semi-dark", "ui.gray.medium", "ui.gray.semi-medium", "ui.gray.light-cool", "ui.gray.x-light-cool", "ui.gray.xx-light-cool", "ui.gray.light-warm", "ui.gray.x-light-warm", "brand.primary", "brand.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.connect.primary", "section.connect.secondary", "section.education.primary", "section.education.secondary", "section.locations.primary", "section.locations.secondary", "section.research.primary", "section.research.secondary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwarzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.brand.primary", "dark.brand.secondary", "dark.section.blogs.primary", "dark.section.blogs.secondary", "dark.section.books-and-more.primary", "dark.section.books-and-more.secondary", "dark.section.connect.primary", "dark.section.connect.secondary", "dark.section.education.primary", "dark.section.education.secondary", "dark.section.locations.primary", "dark.section.locations.secondary", "dark.section.research.primary", "dark.section.research.secondary", "dark.section.research-library.primary", "dark.section.research-library.secondary", "dark.section.whats-on.primary", "dark.section.whats-on.secondary", "dark.ui.disabled.primary", "dark.ui.disabled.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.focus", "dark.ui.link.primary", "dark.ui.link.primary-05", "dark.ui.link.primary-10", "dark.ui.link.secondary", "dark.ui.link.tertiary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.test", "dark.ui.warning.secondary", "dark.ui.warning.primary", "dark.ui.bg.page", "dark.ui.bg.default", "dark.ui.bg.hover", "dark.ui.bg.active", "dark.ui.border.default", "dark.ui.border.hover", "dark.ui.typography.heading", "dark.ui.typography.body", "dark.ui.typography.inverse.heading", "dark.ui.typography.inverse.body"];
|
|
3
|
-
export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
|
|
3
|
+
export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "contentFilterList", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialX", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
|
|
4
4
|
export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
|
|
5
5
|
export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge", "xxxxlarge", "xxxxxlarge", "2xlarge", "3xlarge", "4xlarge", "5xlarge"];
|
|
6
6
|
export declare const iconTypesArray: readonly ["default", "breadcrumbs"];
|
|
@@ -7,7 +7,7 @@ export declare const colorTypeArray: readonly ["link", "textDefault", "textInver
|
|
|
7
7
|
export type ColorType = typeof colorTypeArray[number];
|
|
8
8
|
export declare const sizeTypeArray: readonly ["small", "medium", "large"];
|
|
9
9
|
export type SizeType = typeof sizeTypeArray[number];
|
|
10
|
-
type IconNames = "fileTypeGenericDoc" | "socialFacebook" | "socialInstagram" | "socialPinterest" | "socialSoundCloud" | "socialTikTok" | "socialTumblr" | "socialTwitter" | "socialYoutube";
|
|
10
|
+
type IconNames = "fileTypeGenericDoc" | "socialFacebook" | "socialInstagram" | "socialPinterest" | "socialSoundCloud" | "socialTikTok" | "socialTumblr" | "socialTwitter" | "socialX" | "socialYoutube";
|
|
11
11
|
export interface SocialMediaLinkDataProps {
|
|
12
12
|
/** Required. Label rendered on page is showLabel is true */
|
|
13
13
|
labelText: string;
|
|
@@ -22,7 +22,10 @@ export declare const fixedColumnStyles: (isScrollable?: boolean, useRowHeaders?:
|
|
|
22
22
|
zIndex: string;
|
|
23
23
|
_dark: {
|
|
24
24
|
backgroundColor: string;
|
|
25
|
-
borderRight: string
|
|
25
|
+
borderRight: string | {
|
|
26
|
+
base: any;
|
|
27
|
+
md: string;
|
|
28
|
+
};
|
|
26
29
|
};
|
|
27
30
|
};
|
|
28
31
|
export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, isScrollable?: boolean, showRowDividers?: boolean, useRowHeaders?: boolean) => {
|
|
@@ -57,10 +60,7 @@ export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, isScr
|
|
|
57
60
|
export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, tableTextSize?: any, isScrollable?: boolean, showRowDividers?: boolean) => {
|
|
58
61
|
border: string;
|
|
59
62
|
borderBottom: string;
|
|
60
|
-
borderColor: string
|
|
61
|
-
base: string;
|
|
62
|
-
md: string;
|
|
63
|
-
};
|
|
63
|
+
borderColor: string;
|
|
64
64
|
display: {
|
|
65
65
|
base: string;
|
|
66
66
|
md: string;
|
|
@@ -83,17 +83,14 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
|
|
|
83
83
|
md: string;
|
|
84
84
|
};
|
|
85
85
|
_first: {
|
|
86
|
-
borderBottom: string
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
borderBottom: string;
|
|
87
|
+
_dark: {
|
|
88
|
+
borderBottom: string;
|
|
89
89
|
};
|
|
90
90
|
};
|
|
91
91
|
_last: {
|
|
92
92
|
borderBottom: string;
|
|
93
|
-
borderColor: string
|
|
94
|
-
base: string;
|
|
95
|
-
md: string;
|
|
96
|
-
};
|
|
93
|
+
borderColor: string;
|
|
97
94
|
};
|
|
98
95
|
"> span": {
|
|
99
96
|
flexBasis: string;
|
|
@@ -135,7 +132,10 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
|
|
|
135
132
|
zIndex: string;
|
|
136
133
|
_dark: {
|
|
137
134
|
backgroundColor: string;
|
|
138
|
-
borderRight: string
|
|
135
|
+
borderRight: string | {
|
|
136
|
+
base: any;
|
|
137
|
+
md: string;
|
|
138
|
+
};
|
|
139
139
|
};
|
|
140
140
|
};
|
|
141
141
|
_dark: {
|
|
@@ -143,10 +143,7 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
|
|
|
143
143
|
};
|
|
144
144
|
border: string;
|
|
145
145
|
borderBottom: string;
|
|
146
|
-
borderColor: string
|
|
147
|
-
base: string;
|
|
148
|
-
md: string;
|
|
149
|
-
};
|
|
146
|
+
borderColor: string;
|
|
150
147
|
display: {
|
|
151
148
|
base: string;
|
|
152
149
|
md: string;
|
|
@@ -169,10 +166,7 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
|
|
|
169
166
|
};
|
|
170
167
|
_last: {
|
|
171
168
|
borderBottom: string;
|
|
172
|
-
borderColor: string
|
|
173
|
-
base: string;
|
|
174
|
-
md: string;
|
|
175
|
-
};
|
|
169
|
+
borderColor: string;
|
|
176
170
|
};
|
|
177
171
|
"> span": {
|
|
178
172
|
flexBasis: string;
|
|
@@ -201,14 +195,10 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
|
|
|
201
195
|
base: number;
|
|
202
196
|
md: string;
|
|
203
197
|
};
|
|
204
|
-
borderColor: string;
|
|
205
198
|
};
|
|
206
199
|
border: string;
|
|
207
200
|
borderBottom: string;
|
|
208
|
-
borderColor: string
|
|
209
|
-
base: string;
|
|
210
|
-
md: string;
|
|
211
|
-
};
|
|
201
|
+
borderColor: string;
|
|
212
202
|
display: {
|
|
213
203
|
base: string;
|
|
214
204
|
md: string;
|
|
@@ -231,9 +221,9 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
|
|
|
231
221
|
md: string;
|
|
232
222
|
};
|
|
233
223
|
_first: {
|
|
234
|
-
borderBottom: string
|
|
235
|
-
|
|
236
|
-
|
|
224
|
+
borderBottom: string;
|
|
225
|
+
_dark: {
|
|
226
|
+
borderBottom: string;
|
|
237
227
|
};
|
|
238
228
|
};
|
|
239
229
|
"> span": {
|
|
@@ -269,6 +259,15 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
269
259
|
backgroundSize: string;
|
|
270
260
|
backgroundPosition: string;
|
|
271
261
|
backgroundAttachment: string;
|
|
262
|
+
_dark: {
|
|
263
|
+
/** Show shadow to scroll */
|
|
264
|
+
background: string;
|
|
265
|
+
backgroundRepeat: string;
|
|
266
|
+
backgroundColor: string;
|
|
267
|
+
backgroundSize: string;
|
|
268
|
+
backgroundPosition: string;
|
|
269
|
+
backgroundAttachment: string;
|
|
270
|
+
};
|
|
272
271
|
};
|
|
273
272
|
innerTable: {
|
|
274
273
|
borderCollapse: string;
|
|
@@ -285,10 +284,6 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
285
284
|
textTransform: string;
|
|
286
285
|
verticalAlign: string;
|
|
287
286
|
_dark: {
|
|
288
|
-
backgroundColor: {
|
|
289
|
-
base: "dark.ui.bg.default";
|
|
290
|
-
md: "unset";
|
|
291
|
-
};
|
|
292
287
|
color: string;
|
|
293
288
|
};
|
|
294
289
|
};
|
|
@@ -304,6 +299,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
304
299
|
th: {
|
|
305
300
|
_first: {
|
|
306
301
|
backgroundColor: string;
|
|
302
|
+
_dark: {
|
|
303
|
+
backgroundColor: string;
|
|
304
|
+
};
|
|
307
305
|
};
|
|
308
306
|
};
|
|
309
307
|
};
|
|
@@ -355,7 +353,10 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
355
353
|
zIndex: string;
|
|
356
354
|
_dark: {
|
|
357
355
|
backgroundColor: string;
|
|
358
|
-
borderRight: string
|
|
356
|
+
borderRight: string | {
|
|
357
|
+
base: any;
|
|
358
|
+
md: string;
|
|
359
|
+
};
|
|
359
360
|
};
|
|
360
361
|
};
|
|
361
362
|
_dark: {
|
|
@@ -363,10 +364,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
363
364
|
};
|
|
364
365
|
border: string;
|
|
365
366
|
borderBottom: string;
|
|
366
|
-
borderColor: string
|
|
367
|
-
base: string;
|
|
368
|
-
md: string;
|
|
369
|
-
};
|
|
367
|
+
borderColor: string;
|
|
370
368
|
display: {
|
|
371
369
|
base: string;
|
|
372
370
|
md: string;
|
|
@@ -389,10 +387,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
389
387
|
};
|
|
390
388
|
_last: {
|
|
391
389
|
borderBottom: string;
|
|
392
|
-
borderColor: string
|
|
393
|
-
base: string;
|
|
394
|
-
md: string;
|
|
395
|
-
};
|
|
390
|
+
borderColor: string;
|
|
396
391
|
};
|
|
397
392
|
"> span": {
|
|
398
393
|
flexBasis: string;
|
|
@@ -421,14 +416,10 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
421
416
|
base: number;
|
|
422
417
|
md: string;
|
|
423
418
|
};
|
|
424
|
-
borderColor: string;
|
|
425
419
|
};
|
|
426
420
|
border: string;
|
|
427
421
|
borderBottom: string;
|
|
428
|
-
borderColor: string
|
|
429
|
-
base: string;
|
|
430
|
-
md: string;
|
|
431
|
-
};
|
|
422
|
+
borderColor: string;
|
|
432
423
|
display: {
|
|
433
424
|
base: string;
|
|
434
425
|
md: string;
|
|
@@ -451,9 +442,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
|
|
|
451
442
|
md: string;
|
|
452
443
|
};
|
|
453
444
|
_first: {
|
|
454
|
-
borderBottom: string
|
|
455
|
-
|
|
456
|
-
|
|
445
|
+
borderBottom: string;
|
|
446
|
+
_dark: {
|
|
447
|
+
borderBottom: string;
|
|
457
448
|
};
|
|
458
449
|
};
|
|
459
450
|
"> span": {
|
|
@@ -510,6 +501,15 @@ declare const CustomTable: {
|
|
|
510
501
|
backgroundSize: string;
|
|
511
502
|
backgroundPosition: string;
|
|
512
503
|
backgroundAttachment: string;
|
|
504
|
+
_dark: {
|
|
505
|
+
/** Show shadow to scroll */
|
|
506
|
+
background: string;
|
|
507
|
+
backgroundRepeat: string;
|
|
508
|
+
backgroundColor: string;
|
|
509
|
+
backgroundSize: string;
|
|
510
|
+
backgroundPosition: string;
|
|
511
|
+
backgroundAttachment: string;
|
|
512
|
+
};
|
|
513
513
|
};
|
|
514
514
|
innerTable: {
|
|
515
515
|
borderCollapse: string;
|
|
@@ -526,10 +526,6 @@ declare const CustomTable: {
|
|
|
526
526
|
textTransform: string;
|
|
527
527
|
verticalAlign: string;
|
|
528
528
|
_dark: {
|
|
529
|
-
backgroundColor: {
|
|
530
|
-
base: "dark.ui.bg.default";
|
|
531
|
-
md: "unset";
|
|
532
|
-
};
|
|
533
529
|
color: string;
|
|
534
530
|
};
|
|
535
531
|
};
|
|
@@ -545,6 +541,9 @@ declare const CustomTable: {
|
|
|
545
541
|
th: {
|
|
546
542
|
_first: {
|
|
547
543
|
backgroundColor: string;
|
|
544
|
+
_dark: {
|
|
545
|
+
backgroundColor: string;
|
|
546
|
+
};
|
|
548
547
|
};
|
|
549
548
|
};
|
|
550
549
|
};
|
|
@@ -596,7 +595,10 @@ declare const CustomTable: {
|
|
|
596
595
|
zIndex: string;
|
|
597
596
|
_dark: {
|
|
598
597
|
backgroundColor: string;
|
|
599
|
-
borderRight: string
|
|
598
|
+
borderRight: string | {
|
|
599
|
+
base: any;
|
|
600
|
+
md: string;
|
|
601
|
+
};
|
|
600
602
|
};
|
|
601
603
|
};
|
|
602
604
|
_dark: {
|
|
@@ -604,10 +606,7 @@ declare const CustomTable: {
|
|
|
604
606
|
};
|
|
605
607
|
border: string;
|
|
606
608
|
borderBottom: string;
|
|
607
|
-
borderColor: string
|
|
608
|
-
base: string;
|
|
609
|
-
md: string;
|
|
610
|
-
};
|
|
609
|
+
borderColor: string;
|
|
611
610
|
display: {
|
|
612
611
|
base: string;
|
|
613
612
|
md: string;
|
|
@@ -630,10 +629,7 @@ declare const CustomTable: {
|
|
|
630
629
|
};
|
|
631
630
|
_last: {
|
|
632
631
|
borderBottom: string;
|
|
633
|
-
borderColor: string
|
|
634
|
-
base: string;
|
|
635
|
-
md: string;
|
|
636
|
-
};
|
|
632
|
+
borderColor: string;
|
|
637
633
|
};
|
|
638
634
|
"> span": {
|
|
639
635
|
flexBasis: string;
|
|
@@ -662,14 +658,10 @@ declare const CustomTable: {
|
|
|
662
658
|
base: number;
|
|
663
659
|
md: string;
|
|
664
660
|
};
|
|
665
|
-
borderColor: string;
|
|
666
661
|
};
|
|
667
662
|
border: string;
|
|
668
663
|
borderBottom: string;
|
|
669
|
-
borderColor: string
|
|
670
|
-
base: string;
|
|
671
|
-
md: string;
|
|
672
|
-
};
|
|
664
|
+
borderColor: string;
|
|
673
665
|
display: {
|
|
674
666
|
base: string;
|
|
675
667
|
md: string;
|
|
@@ -692,9 +684,9 @@ declare const CustomTable: {
|
|
|
692
684
|
md: string;
|
|
693
685
|
};
|
|
694
686
|
_first: {
|
|
695
|
-
borderBottom: string
|
|
696
|
-
|
|
697
|
-
|
|
687
|
+
borderBottom: string;
|
|
688
|
+
_dark: {
|
|
689
|
+
borderBottom: string;
|
|
698
690
|
};
|
|
699
691
|
};
|
|
700
692
|
"> span": {
|
|
@@ -160,6 +160,30 @@ export declare const headings: {
|
|
|
160
160
|
width: string;
|
|
161
161
|
};
|
|
162
162
|
};
|
|
163
|
+
heading7: {
|
|
164
|
+
base: {
|
|
165
|
+
fontSize: {
|
|
166
|
+
base: "mobile.heading.heading7";
|
|
167
|
+
md: "desktop.heading.heading7";
|
|
168
|
+
};
|
|
169
|
+
fontWeight: string;
|
|
170
|
+
letterSpacing: string;
|
|
171
|
+
lineHeight: string;
|
|
172
|
+
width: string;
|
|
173
|
+
};
|
|
174
|
+
};
|
|
175
|
+
heading8: {
|
|
176
|
+
base: {
|
|
177
|
+
fontSize: {
|
|
178
|
+
base: "mobile.heading.heading8";
|
|
179
|
+
md: "desktop.heading.heading8";
|
|
180
|
+
};
|
|
181
|
+
fontWeight: string;
|
|
182
|
+
letterSpacing: string;
|
|
183
|
+
lineHeight: string;
|
|
184
|
+
width: string;
|
|
185
|
+
};
|
|
186
|
+
};
|
|
163
187
|
};
|
|
164
188
|
declare const Heading: {
|
|
165
189
|
baseStyle?: ({ isCapitalized, isUppercase, isLowercase, noSpace }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
|
|
@@ -459,6 +483,30 @@ declare const Heading: {
|
|
|
459
483
|
width: string;
|
|
460
484
|
};
|
|
461
485
|
};
|
|
486
|
+
heading7: {
|
|
487
|
+
base: {
|
|
488
|
+
fontSize: {
|
|
489
|
+
base: "mobile.heading.heading7";
|
|
490
|
+
md: "desktop.heading.heading7";
|
|
491
|
+
};
|
|
492
|
+
fontWeight: string;
|
|
493
|
+
letterSpacing: string;
|
|
494
|
+
lineHeight: string;
|
|
495
|
+
width: string;
|
|
496
|
+
};
|
|
497
|
+
};
|
|
498
|
+
heading8: {
|
|
499
|
+
base: {
|
|
500
|
+
fontSize: {
|
|
501
|
+
base: "mobile.heading.heading8";
|
|
502
|
+
md: "desktop.heading.heading8";
|
|
503
|
+
};
|
|
504
|
+
fontWeight: string;
|
|
505
|
+
letterSpacing: string;
|
|
506
|
+
lineHeight: string;
|
|
507
|
+
width: string;
|
|
508
|
+
};
|
|
509
|
+
};
|
|
462
510
|
primary: {
|
|
463
511
|
base: {
|
|
464
512
|
width: string;
|
|
@@ -513,7 +561,7 @@ declare const Heading: {
|
|
|
513
561
|
};
|
|
514
562
|
defaultProps?: {
|
|
515
563
|
size?: string | number;
|
|
516
|
-
variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
|
|
564
|
+
variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
|
|
517
565
|
colorScheme?: string;
|
|
518
566
|
};
|
|
519
567
|
parts: ("base" | "headingWrapper")[];
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { StyleFunctionProps } from "@chakra-ui/system";
|
|
2
|
+
declare const align: Record<string, {
|
|
3
|
+
marginEnd?: string;
|
|
4
|
+
marginStart?: string;
|
|
5
|
+
}>;
|
|
6
|
+
declare const iconRotation: Record<string, {
|
|
7
|
+
transform: string;
|
|
8
|
+
}>;
|
|
9
|
+
declare const size: Record<string, {
|
|
10
|
+
height?: string;
|
|
11
|
+
width?: string;
|
|
12
|
+
}>;
|
|
13
|
+
interface IconBaseStyle extends StyleFunctionProps {
|
|
14
|
+
align: keyof typeof align;
|
|
15
|
+
color: string;
|
|
16
|
+
iconRotation: keyof typeof iconRotation;
|
|
17
|
+
size: keyof typeof size;
|
|
18
|
+
}
|
|
19
|
+
declare const Icon: {
|
|
20
|
+
baseStyle?: (props: IconBaseStyle) => {
|
|
21
|
+
svg: {
|
|
22
|
+
height: string;
|
|
23
|
+
width: string;
|
|
24
|
+
transform: string;
|
|
25
|
+
fill: string;
|
|
26
|
+
marginEnd?: string;
|
|
27
|
+
marginStart?: string;
|
|
28
|
+
display: string;
|
|
29
|
+
};
|
|
30
|
+
height: string;
|
|
31
|
+
width: string;
|
|
32
|
+
transform: string;
|
|
33
|
+
fill: string;
|
|
34
|
+
marginEnd?: string;
|
|
35
|
+
marginStart?: string;
|
|
36
|
+
display: string;
|
|
37
|
+
};
|
|
38
|
+
sizes?: {
|
|
39
|
+
[key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
|
|
40
|
+
};
|
|
41
|
+
variants?: {
|
|
42
|
+
default: {};
|
|
43
|
+
breadcrumbs: {
|
|
44
|
+
fill: string;
|
|
45
|
+
display: {
|
|
46
|
+
md: "none";
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
defaultProps?: {
|
|
51
|
+
size?: string | number;
|
|
52
|
+
variant?: "default" | "breadcrumbs";
|
|
53
|
+
colorScheme?: string;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
export default Icon;
|
|
@@ -167,6 +167,30 @@ declare const StructuredContent: {
|
|
|
167
167
|
width: string;
|
|
168
168
|
};
|
|
169
169
|
};
|
|
170
|
+
heading7: {
|
|
171
|
+
base: {
|
|
172
|
+
fontSize: {
|
|
173
|
+
base: "mobile.heading.heading7";
|
|
174
|
+
md: "desktop.heading.heading7";
|
|
175
|
+
};
|
|
176
|
+
fontWeight: string;
|
|
177
|
+
letterSpacing: string;
|
|
178
|
+
lineHeight: string;
|
|
179
|
+
width: string;
|
|
180
|
+
};
|
|
181
|
+
};
|
|
182
|
+
heading8: {
|
|
183
|
+
base: {
|
|
184
|
+
fontSize: {
|
|
185
|
+
base: "mobile.heading.heading8";
|
|
186
|
+
md: "desktop.heading.heading8";
|
|
187
|
+
};
|
|
188
|
+
fontWeight: string;
|
|
189
|
+
letterSpacing: string;
|
|
190
|
+
lineHeight: string;
|
|
191
|
+
width: string;
|
|
192
|
+
};
|
|
193
|
+
};
|
|
170
194
|
imageFigure: {
|
|
171
195
|
marginBottom: string;
|
|
172
196
|
maxWidth?: string;
|
|
@@ -348,7 +372,10 @@ declare const StructuredContent: {
|
|
|
348
372
|
zIndex: string;
|
|
349
373
|
_dark: {
|
|
350
374
|
backgroundColor: string;
|
|
351
|
-
borderRight: string
|
|
375
|
+
borderRight: string | {
|
|
376
|
+
base: any;
|
|
377
|
+
md: string;
|
|
378
|
+
};
|
|
352
379
|
};
|
|
353
380
|
};
|
|
354
381
|
_dark: {
|
|
@@ -356,10 +383,7 @@ declare const StructuredContent: {
|
|
|
356
383
|
};
|
|
357
384
|
border: string;
|
|
358
385
|
borderBottom: string;
|
|
359
|
-
borderColor: string
|
|
360
|
-
base: string;
|
|
361
|
-
md: string;
|
|
362
|
-
};
|
|
386
|
+
borderColor: string;
|
|
363
387
|
display: {
|
|
364
388
|
base: string;
|
|
365
389
|
md: string;
|
|
@@ -382,10 +406,7 @@ declare const StructuredContent: {
|
|
|
382
406
|
};
|
|
383
407
|
_last: {
|
|
384
408
|
borderBottom: string;
|
|
385
|
-
borderColor: string
|
|
386
|
-
base: string;
|
|
387
|
-
md: string;
|
|
388
|
-
};
|
|
409
|
+
borderColor: string;
|
|
389
410
|
};
|
|
390
411
|
"> span": {
|
|
391
412
|
flexBasis: string;
|
|
@@ -417,14 +438,10 @@ declare const StructuredContent: {
|
|
|
417
438
|
base: number;
|
|
418
439
|
md: string;
|
|
419
440
|
};
|
|
420
|
-
borderColor: string;
|
|
421
441
|
};
|
|
422
442
|
border: string;
|
|
423
443
|
borderBottom: string;
|
|
424
|
-
borderColor: string
|
|
425
|
-
base: string;
|
|
426
|
-
md: string;
|
|
427
|
-
};
|
|
444
|
+
borderColor: string;
|
|
428
445
|
display: {
|
|
429
446
|
base: string;
|
|
430
447
|
md: string;
|
|
@@ -447,9 +464,9 @@ declare const StructuredContent: {
|
|
|
447
464
|
md: string;
|
|
448
465
|
};
|
|
449
466
|
_first: {
|
|
450
|
-
borderBottom: string
|
|
451
|
-
|
|
452
|
-
|
|
467
|
+
borderBottom: string;
|
|
468
|
+
_dark: {
|
|
469
|
+
borderBottom: string;
|
|
453
470
|
};
|
|
454
471
|
};
|
|
455
472
|
"> span": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nypl/design-system-react-components",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.2",
|
|
4
4
|
"description": "NYPL Reservoir Design System React Components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -79,16 +79,16 @@
|
|
|
79
79
|
"@jest/core": "29.7.0",
|
|
80
80
|
"@rollup/plugin-commonjs": "24.0.1",
|
|
81
81
|
"@rollup/plugin-typescript": "11.0.0",
|
|
82
|
-
"@storybook/addon-a11y": "8.
|
|
82
|
+
"@storybook/addon-a11y": "8.3.6",
|
|
83
83
|
"@storybook/addon-designs": "8.0.2",
|
|
84
|
-
"@storybook/addon-essentials": "8.
|
|
85
|
-
"@storybook/addon-interactions": "8.
|
|
84
|
+
"@storybook/addon-essentials": "8.3.6",
|
|
85
|
+
"@storybook/addon-interactions": "8.3.6",
|
|
86
86
|
"@storybook/addon-jest": "8.1.11",
|
|
87
87
|
"@storybook/addon-links": "8.1.11",
|
|
88
|
-
"@storybook/blocks": "8.
|
|
89
|
-
"@storybook/react": "8.
|
|
90
|
-
"@storybook/react-vite": "8.
|
|
91
|
-
"@storybook/test": "8.
|
|
88
|
+
"@storybook/blocks": "8.3.6",
|
|
89
|
+
"@storybook/react": "8.3.6",
|
|
90
|
+
"@storybook/react-vite": "8.3.6",
|
|
91
|
+
"@storybook/test": "8.3.6",
|
|
92
92
|
"@testing-library/dom": "9.2.0",
|
|
93
93
|
"@testing-library/jest-dom": "5.14.1",
|
|
94
94
|
"@testing-library/react": "12.0.0",
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
"react-test-renderer": "18.2.0",
|
|
124
124
|
"remark-gfm": "4.0.0",
|
|
125
125
|
"sass": "1.60.0",
|
|
126
|
-
"storybook": "8.
|
|
126
|
+
"storybook": "8.3.6",
|
|
127
127
|
"ts-jest": "29.1.5",
|
|
128
128
|
"tslib": "2.3.0",
|
|
129
129
|
"typescript": "4.9.5",
|