@nypl/design-system-react-components 2.1.5-rc2 → 2.1.5

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.
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ /// <reference types="react" />
2
2
  export declare const feedbackBoxViewTypeArray: readonly ["form", "confirmation", "error"];
3
3
  export type FeedbackBoxViewType = typeof feedbackBoxViewTypeArray[number];
4
4
  interface FeedbackBoxProps {
@@ -54,7 +54,7 @@ interface FeedbackBoxProps {
54
54
  * submitted data; that feature is the responsibility of the consuming
55
55
  * application.
56
56
  */
57
- export declare const FeedbackBox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FeedbackBoxProps & React.RefAttributes<any>>, {}>;
57
+ export declare const FeedbackBox: import("@chakra-ui/react").ChakraComponent<import("react").ForwardRefExoticComponent<FeedbackBoxProps & import("react").RefAttributes<any>>, {}>;
58
58
  export declare function useFeedbackBox(): {
59
59
  isOpen: boolean;
60
60
  onClose: () => void;
@@ -159,6 +159,9 @@ declare const _default: {
159
159
  moonCrescent: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
160
160
  title?: string;
161
161
  }>;
162
+ navigationMoreVert: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
163
+ title?: string;
164
+ }>;
162
165
  plus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
163
166
  title?: string;
164
167
  }>;
@@ -1,6 +1,6 @@
1
1
  export declare const iconAlignArray: readonly ["left", "right", "none"];
2
2
  export declare const iconColorsArray: readonly ["ui.black", "ui.white", "brand.primary", "brand.secondary", "ui.error.primary", "ui.error.secondary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.warning.primary", "ui.warning.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.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.schwartzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.warning.primary", "dark.ui.warning.secondary"];
3
- export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "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", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "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"];
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"];
6
6
  export declare const iconTypesArray: readonly ["default", "breadcrumbs"];
@@ -9,7 +9,5 @@ declare const useNYPLBreakpoints: () => {
9
9
  isLargerThanMobile: any;
10
10
  isLargerThanLarge: any;
11
11
  isLargerThanXLarge: any;
12
- isSmallerThanMedium: any;
13
- isSmallerThanDesktop: any;
14
12
  };
15
13
  export default useNYPLBreakpoints;
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ /**
3
+ * DS internal helper hook for the Tabs component to scroll
4
+ * the selected tab into view using useEffect and querySelector.
5
+ *
6
+ * Returns a ref for the TabList component.
7
+ */
8
+ export declare const useScrollTabIntoView: (index: number) => React.MutableRefObject<HTMLDivElement>;
9
+ export default useScrollTabIntoView;
@@ -94,6 +94,9 @@ declare const FeedbackBox: {
94
94
  bottom: string;
95
95
  right: string;
96
96
  zIndex: string;
97
+ _focus: {
98
+ boxShadow: string;
99
+ };
97
100
  };
98
101
  };
99
102
  };
@@ -1,13 +1,29 @@
1
+ /**
2
+ * Heading Styles
3
+ *
4
+ * Chakra's standard responsive style method is not working for the fontSize
5
+ * attribute. Because of the, we are including our own @media queries to set
6
+ * fontSize.
7
+ *
8
+ * For the deprecated variants, the base and 600px breakpoints use the same
9
+ * values. This was needed for consistency and necessary to override the styles
10
+ * set later in the file for the new heading variants.
11
+ */
1
12
  export declare const headings: {
2
13
  one: {
3
14
  width: string;
4
15
  a: {
5
16
  textUnderlineOffset: string;
6
17
  };
18
+ "@media (min-width: 0px)": {
19
+ fontSize: string;
20
+ };
21
+ "@media (min-width: 600px)": {
22
+ fontSize: string;
23
+ };
7
24
  marginTop: string;
8
25
  marginStart: string;
9
26
  marginEnd: string;
10
- fontSize: string;
11
27
  fontWeight: string;
12
28
  letterSpacing: string;
13
29
  lineHeight: string;
@@ -17,37 +33,57 @@ export declare const headings: {
17
33
  a: {
18
34
  textUnderlineOffset: string;
19
35
  };
36
+ "@media (min-width: 0px)": {
37
+ fontSize: string;
38
+ };
39
+ "@media (min-width: 600px)": {
40
+ fontSize: string;
41
+ };
20
42
  marginTop: string;
21
43
  marginStart: string;
22
44
  marginEnd: string;
23
- fontSize: string;
24
45
  fontWeight: string;
25
46
  lineHeight: string;
26
47
  };
27
48
  three: {
28
49
  width: string;
50
+ "@media (min-width: 0px)": {
51
+ fontSize: string;
52
+ };
53
+ "@media (min-width: 600px)": {
54
+ fontSize: string;
55
+ };
29
56
  marginTop: string;
30
57
  marginStart: string;
31
58
  marginEnd: string;
32
- fontSize: string;
33
59
  fontWeight: string;
34
60
  lineHeight: string;
35
61
  };
36
62
  four: {
37
63
  width: string;
64
+ "@media (min-width: 0px)": {
65
+ fontSize: string;
66
+ };
67
+ "@media (min-width: 600px)": {
68
+ fontSize: string;
69
+ };
38
70
  marginTop: string;
39
71
  marginStart: string;
40
72
  marginEnd: string;
41
- fontSize: string;
42
73
  fontWeight: string;
43
74
  lineHeight: string;
44
75
  };
45
76
  fallback: {
46
77
  width: string;
78
+ "@media (min-width: 0px)": {
79
+ fontSize: string;
80
+ };
81
+ "@media (min-width: 600px)": {
82
+ fontSize: string;
83
+ };
47
84
  marginTop: string;
48
85
  marginStart: string;
49
86
  marginEnd: string;
50
- fontSize: string;
51
87
  fontWeight: string;
52
88
  lineHeight: string;
53
89
  };
@@ -280,10 +316,15 @@ declare const Heading: {
280
316
  a: {
281
317
  textUnderlineOffset: string;
282
318
  };
319
+ "@media (min-width: 0px)": {
320
+ fontSize: string;
321
+ };
322
+ "@media (min-width: 600px)": {
323
+ fontSize: string;
324
+ };
283
325
  marginTop: string;
284
326
  marginStart: string;
285
327
  marginEnd: string;
286
- fontSize: string;
287
328
  fontWeight: string;
288
329
  letterSpacing: string;
289
330
  lineHeight: string;
@@ -293,46 +334,71 @@ declare const Heading: {
293
334
  a: {
294
335
  textUnderlineOffset: string;
295
336
  };
337
+ "@media (min-width: 0px)": {
338
+ fontSize: string;
339
+ };
340
+ "@media (min-width: 600px)": {
341
+ fontSize: string;
342
+ };
296
343
  marginTop: string;
297
344
  marginStart: string;
298
345
  marginEnd: string;
299
- fontSize: string;
300
346
  fontWeight: string;
301
347
  lineHeight: string;
302
348
  };
303
349
  three: {
304
350
  width: string;
351
+ "@media (min-width: 0px)": {
352
+ fontSize: string;
353
+ };
354
+ "@media (min-width: 600px)": {
355
+ fontSize: string;
356
+ };
305
357
  marginTop: string;
306
358
  marginStart: string;
307
359
  marginEnd: string;
308
- fontSize: string;
309
360
  fontWeight: string;
310
361
  lineHeight: string;
311
362
  };
312
363
  four: {
313
364
  width: string;
365
+ "@media (min-width: 0px)": {
366
+ fontSize: string;
367
+ };
368
+ "@media (min-width: 600px)": {
369
+ fontSize: string;
370
+ };
314
371
  marginTop: string;
315
372
  marginStart: string;
316
373
  marginEnd: string;
317
- fontSize: string;
318
374
  fontWeight: string;
319
375
  lineHeight: string;
320
376
  };
321
377
  five: {
322
378
  width: string;
379
+ "@media (min-width: 0px)": {
380
+ fontSize: string;
381
+ };
382
+ "@media (min-width: 600px)": {
383
+ fontSize: string;
384
+ };
323
385
  marginTop: string;
324
386
  marginStart: string;
325
387
  marginEnd: string;
326
- fontSize: string;
327
388
  fontWeight: string;
328
389
  lineHeight: string;
329
390
  };
330
391
  six: {
331
392
  width: string;
393
+ "@media (min-width: 0px)": {
394
+ fontSize: string;
395
+ };
396
+ "@media (min-width: 600px)": {
397
+ fontSize: string;
398
+ };
332
399
  marginTop: string;
333
400
  marginStart: string;
334
401
  marginEnd: string;
335
- fontSize: string;
336
402
  fontWeight: string;
337
403
  lineHeight: string;
338
404
  };
@@ -440,10 +506,15 @@ declare const Heading: {
440
506
  a: {
441
507
  textUnderlineOffset: string;
442
508
  };
509
+ "@media (min-width: 0px)": {
510
+ fontSize: string;
511
+ };
512
+ "@media (min-width: 600px)": {
513
+ fontSize: string;
514
+ };
443
515
  marginTop: string;
444
516
  marginStart: string;
445
517
  marginEnd: string;
446
- fontSize: string;
447
518
  fontWeight: string;
448
519
  letterSpacing: string;
449
520
  lineHeight: string;
@@ -453,28 +524,43 @@ declare const Heading: {
453
524
  a: {
454
525
  textUnderlineOffset: string;
455
526
  };
527
+ "@media (min-width: 0px)": {
528
+ fontSize: string;
529
+ };
530
+ "@media (min-width: 600px)": {
531
+ fontSize: string;
532
+ };
456
533
  marginTop: string;
457
534
  marginStart: string;
458
535
  marginEnd: string;
459
- fontSize: string;
460
536
  fontWeight: string;
461
537
  lineHeight: string;
462
538
  };
463
539
  tertiary: {
464
540
  width: string;
541
+ "@media (min-width: 0px)": {
542
+ fontSize: string;
543
+ };
544
+ "@media (min-width: 600px)": {
545
+ fontSize: string;
546
+ };
465
547
  marginTop: string;
466
548
  marginStart: string;
467
549
  marginEnd: string;
468
- fontSize: string;
469
550
  fontWeight: string;
470
551
  lineHeight: string;
471
552
  };
472
553
  callout: {
473
554
  width: string;
555
+ "@media (min-width: 0px)": {
556
+ fontSize: string;
557
+ };
558
+ "@media (min-width: 600px)": {
559
+ fontSize: string;
560
+ };
474
561
  marginTop: string;
475
562
  marginStart: string;
476
563
  marginEnd: string;
477
- fontSize: string;
478
564
  fontWeight: string;
479
565
  lineHeight: string;
480
566
  };
@@ -11,10 +11,15 @@ declare const StructuredContent: {
11
11
  a: {
12
12
  textUnderlineOffset: string;
13
13
  };
14
+ "@media (min-width: 0px)": {
15
+ fontSize: string;
16
+ };
17
+ "@media (min-width: 600px)": {
18
+ fontSize: string;
19
+ };
14
20
  marginTop: string;
15
21
  marginStart: string;
16
22
  marginEnd: string;
17
- fontSize: string;
18
23
  fontWeight: string;
19
24
  letterSpacing: string;
20
25
  lineHeight: string;
@@ -24,37 +29,57 @@ declare const StructuredContent: {
24
29
  a: {
25
30
  textUnderlineOffset: string;
26
31
  };
32
+ "@media (min-width: 0px)": {
33
+ fontSize: string;
34
+ };
35
+ "@media (min-width: 600px)": {
36
+ fontSize: string;
37
+ };
27
38
  marginTop: string;
28
39
  marginStart: string;
29
40
  marginEnd: string;
30
- fontSize: string;
31
41
  fontWeight: string;
32
42
  lineHeight: string;
33
43
  };
34
44
  three: {
35
45
  width: string;
46
+ "@media (min-width: 0px)": {
47
+ fontSize: string;
48
+ };
49
+ "@media (min-width: 600px)": {
50
+ fontSize: string;
51
+ };
36
52
  marginTop: string;
37
53
  marginStart: string;
38
54
  marginEnd: string;
39
- fontSize: string;
40
55
  fontWeight: string;
41
56
  lineHeight: string;
42
57
  };
43
58
  four: {
44
59
  width: string;
60
+ "@media (min-width: 0px)": {
61
+ fontSize: string;
62
+ };
63
+ "@media (min-width: 600px)": {
64
+ fontSize: string;
65
+ };
45
66
  marginTop: string;
46
67
  marginStart: string;
47
68
  marginEnd: string;
48
- fontSize: string;
49
69
  fontWeight: string;
50
70
  lineHeight: string;
51
71
  };
52
72
  fallback: {
53
73
  width: string;
74
+ "@media (min-width: 0px)": {
75
+ fontSize: string;
76
+ };
77
+ "@media (min-width: 600px)": {
78
+ fontSize: string;
79
+ };
54
80
  marginTop: string;
55
81
  marginStart: string;
56
82
  marginEnd: string;
57
- fontSize: string;
58
83
  fontWeight: string;
59
84
  lineHeight: string;
60
85
  };
@@ -142,14 +142,10 @@ declare const CustomTabs: {
142
142
  base: string;
143
143
  md: string;
144
144
  };
145
- paddingStart: {
146
- base: string;
147
- md: string;
148
- };
145
+ paddingStart: string;
149
146
  paddingEnd: string;
150
147
  paddingTop: {
151
148
  base: string;
152
- md: string;
153
149
  };
154
150
  right: {
155
151
  base: string;
@@ -157,8 +153,12 @@ declare const CustomTabs: {
157
153
  };
158
154
  top: {
159
155
  base: string;
160
- md: string;
161
156
  };
157
+ scrollbarWidth: string;
158
+ "::-webkit-scrollbar": {
159
+ display: string;
160
+ };
161
+ overflowY: string;
162
162
  overflowX: {
163
163
  base: string;
164
164
  md: string;
@@ -25,24 +25,36 @@ declare const Text: {
25
25
  fontWeight: string;
26
26
  };
27
27
  overline1: {
28
- fontSize: string;
28
+ fontSize: {
29
+ base: string;
30
+ md: string;
31
+ };
29
32
  fontWeight: string;
30
33
  lineHeight: number;
31
34
  textTransform: string;
32
35
  };
33
36
  overline2: {
34
- fontSize: string;
37
+ fontSize: {
38
+ base: string;
39
+ md: string;
40
+ };
35
41
  fontWeight: string;
36
42
  lineHeight: number;
37
43
  textTransform: string;
38
44
  };
39
45
  subtitle1: {
40
- fontSize: string;
46
+ fontSize: {
47
+ base: string;
48
+ md: string;
49
+ };
41
50
  fontWeight: string;
42
51
  lineHeight: number;
43
52
  };
44
53
  subtitle2: {
45
- fontSize: string;
54
+ fontSize: {
55
+ base: string;
56
+ md: string;
57
+ };
46
58
  fontWeight: string;
47
59
  lineHeight: number;
48
60
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "2.1.5-rc2",
3
+ "version": "2.1.5",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -138,7 +138,7 @@
138
138
  "style-loader": "2.0.0",
139
139
  "ts-jest": "29.0.5",
140
140
  "tslib": "2.3.0",
141
- "vite": "4.3.9",
141
+ "vite": "4.5.2",
142
142
  "vite-plugin-dts": "2.1.0"
143
143
  }
144
144
  }