@nypl/design-system-react-components 1.7.1 → 2.0.0-rc

package/dist/src/components/Icons/Icon.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationTypesArray, iconSizesArray, iconTypesArray } from "./iconVariables";
+import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconTypesArray } from "./iconVariables";
 export type IconAlign = typeof iconAlignArray[number];
 export type IconColors = typeof iconColorsArray[number];
 export type IconNames = typeof iconNamesArray[number];
-export type IconRotationTypes = typeof iconRotationTypesArray[number];
+export type IconRotations = typeof iconRotationsArray[number];
+export type IconRotationTypes = typeof iconRotationsArray[number];
 export type IconSizes = typeof iconSizesArray[number];
 export type IconTypes = typeof iconTypesArray[number];
 export interface IconProps {
@@ -17,7 +18,7 @@ export interface IconProps {
      * by default. */
     decorative?: boolean;
     /** Rotates the icon clockwise in increments of 90deg */
-    iconRotation?: IconRotationTypes;
+    iconRotation?: IconRotations;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** The name of the icon you want to use. */

package/dist/src/components/Icons/IconSvgs.d.ts

@@ -21,6 +21,12 @@ declare const _default: {
     actionHelpOutline: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    actionIdentity: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionIdentityFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     actionLaunch: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -30,6 +36,9 @@ declare const _default: {
     actionRegistration: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    actionSearch: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     actionSettings: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -120,6 +129,9 @@ declare const _default: {
     locator: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    mapsPlace: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     minus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -141,6 +153,9 @@ declare const _default: {
     socialSoundCloud: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    socialSpotify: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     socialTikTok: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -150,6 +165,9 @@ declare const _default: {
     socialTwitter: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    socialVimeo: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     socialYoutube: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;

package/dist/src/components/Icons/iconVariables.d.ts

@@ -1,6 +1,6 @@
 export declare const iconAlignArray: readonly ["left", "right", "none"];
 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"];
-export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionLaunch", "actionPower", "actionRegistration", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialTikTok", "socialTumblr", "socialTwitter", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
-export declare const iconRotationTypesArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
+export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
+export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
 export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge"];
 export declare const iconTypesArray: readonly ["default", "breadcrumbs"];

package/dist/src/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards"];
+export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
 export type LinkTypes = typeof linkTypesArray[number];
 export interface LinkProps {
     /** Any child node passed to the component. */
@@ -10,12 +10,17 @@ export interface LinkProps {
     href?: string;
     /** ID used for accessibility purposes. */
     id?: string;
+    /** Used to explicitly set the underline style for a text link. If true, link
+     * text will always be underlined; if false, link text will only show
+     * underline in hover state. */
+    isUnderlined?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void;
     /** Visibly hidden text that will only be read by screenreaders. */
     screenreaderOnlyText?: string;
     /** Prop that sets the HTML attribute to target where the link should go. */
     target?: "_blank" | "_parent" | "_self" | "_top";
-    /** Controls the link visuals: action, button, backwards, forwards, or default. */
+    /** Controls the link visuals: action, button, backwards, forwards,
+     * standalone, or default. */
     type?: LinkTypes;
 }
 /**

package/dist/src/index.d.ts

@@ -28,7 +28,7 @@ export { default as Hero } from "./components/Hero/Hero";
 export type { HeroTypes } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
-export type { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, } from "./components/Icons/Icon";
+export type { IconAlign, IconColors, IconNames, IconRotations, IconSizes, IconTypes, } from "./components/Icons/Icon";
 export { default as Image } from "./components/Image/Image";
 export type { ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
 export { default as Label } from "./components/Label/Label";

package/dist/src/theme/components/accordion.d.ts

@@ -6,12 +6,12 @@ declare const Accordion: {
             width: string;
             _dark: {
                 bg: string;
-                color: string;
                 borderColor: string;
             };
         };
         button: {
             borderWidth: string;
+            color: string;
             fontWeight: string;
             _dark: {
                 bg: string;

package/dist/src/theme/components/alphabetFilter.d.ts

@@ -12,16 +12,23 @@ declare const AlphabetFilter: {
             padding: string;
             margin: string;
             fontWeight: string;
-            fontSize: string;
+            fontSize: {
+                base: string;
+                md: string;
+            };
             lineHeight: string;
             _last: {
-                padding: string;
+                fontSize: string;
                 fontWeight: string;
-                whiteSpace: string;
-                fontSize: {
+                px: {
+                    base: string;
+                    md: string;
+                };
+                py: {
                     base: any;
                     md: string;
                 };
+                whiteSpace: string;
             };
             _disabled: {
                 color: string;

package/dist/src/theme/components/breadcrumb.d.ts

@@ -27,6 +27,7 @@ declare const Breadcrumb: {
         a: {
             _hover: {
                 color: string;
+                textDecoration: string;
             };
         };
         "li:last-child": {

package/dist/src/theme/components/card.d.ts

@@ -104,11 +104,27 @@ declare const _default: {
             heading: {
                 marginBottom: string;
                 a: {
+                    textDecoration: string;
                     color: string;
-                };
-                _dark: {
-                    a: {
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    textUnderlineOffset: string;
+                    _dark: {
+                        color: string;
+                    };
+                    _hover: {
+                        color: string;
+                        textDecorationStyle: string;
+                        textDecorationThickness: string;
+                        _dark: {
+                            color: string;
+                        };
+                    };
+                    _visited: {
                         color: string;
+                        _dark: {
+                            color: string;
+                        };
                     };
                 };
             };
@@ -162,11 +178,27 @@ declare const _default: {
             heading: {
                 marginBottom: string;
                 a: {
+                    textDecoration: string;
                     color: string;
-                };
-                _dark: {
-                    a: {
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    textUnderlineOffset: string;
+                    _dark: {
+                        color: string;
+                    };
+                    _hover: {
+                        color: string;
+                        textDecorationStyle: string;
+                        textDecorationThickness: string;
+                        _dark: {
+                            color: string;
+                        };
+                    };
+                    _visited: {
                         color: string;
+                        _dark: {
+                            color: string;
+                        };
                     };
                 };
             };
@@ -221,11 +253,27 @@ declare const _default: {
             heading: {
                 marginBottom: string;
                 a: {
+                    textDecoration: string;
                     color: string;
-                };
-                _dark: {
-                    a: {
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    textUnderlineOffset: string;
+                    _dark: {
+                        color: string;
+                    };
+                    _hover: {
+                        color: string;
+                        textDecorationStyle: string;
+                        textDecorationThickness: string;
+                        _dark: {
+                            color: string;
+                        };
+                    };
+                    _visited: {
                         color: string;
+                        _dark: {
+                            color: string;
+                        };
                     };
                 };
             };
@@ -277,11 +325,27 @@ declare const _default: {
             heading: {
                 marginBottom: string;
                 a: {
+                    textDecoration: string;
                     color: string;
-                };
-                _dark: {
-                    a: {
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    textUnderlineOffset: string;
+                    _dark: {
+                        color: string;
+                    };
+                    _hover: {
+                        color: string;
+                        textDecorationStyle: string;
+                        textDecorationThickness: string;
+                        _dark: {
+                            color: string;
+                        };
+                    };
+                    _visited: {
                         color: string;
+                        _dark: {
+                            color: string;
+                        };
                     };
                 };
             };

package/dist/src/theme/components/customTable.d.ts

@@ -49,7 +49,7 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
     };
     fontSize: {
         base: string;
-        lg: string;
+        md: string;
     };
     gap: string;
     letterSpacing: string;
@@ -141,7 +141,7 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
     };
     fontSize: {
         base: string;
-        lg: string;
+        md: string;
     };
     gap: string;
     letterSpacing: string;
@@ -230,7 +230,7 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
     };
     fontSize: {
         base: string;
-        lg: string;
+        md: string;
     };
     gap: string;
     letterSpacing: string;
@@ -354,7 +354,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
         };
         fontSize: {
             base: string;
-            lg: string;
+            md: string;
         };
         gap: string;
         letterSpacing: string;
@@ -443,7 +443,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
         };
         fontSize: {
             base: string;
-            lg: string;
+            md: string;
         };
         gap: string;
         letterSpacing: string;
@@ -486,7 +486,10 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
     caption: {
         captionSide: string;
         color: string;
-        fontSize: string;
+        fontSize: {
+            base: string;
+            md: string;
+        };
         fontWeight: string;
         marginBottom: string;
         marginStart: string;
@@ -584,7 +587,7 @@ declare const CustomTable: {
             };
             fontSize: {
                 base: string;
-                lg: string;
+                md: string;
             };
             gap: string;
             letterSpacing: string;
@@ -673,7 +676,7 @@ declare const CustomTable: {
             };
             fontSize: {
                 base: string;
-                lg: string;
+                md: string;
             };
             gap: string;
             letterSpacing: string;
@@ -716,7 +719,10 @@ declare const CustomTable: {
         caption: {
             captionSide: string;
             color: string;
-            fontSize: string;
+            fontSize: {
+                base: string;
+                md: string;
+            };
             fontWeight: string;
             marginBottom: string;
             marginStart: string;

package/dist/src/theme/components/feedbackBox.d.ts

@@ -57,6 +57,12 @@ declare const FeedbackBox: {
                 base: string;
                 md: string;
             };
+            aside: {
+                color: string;
+                _dark: {
+                    color: string;
+                };
+            };
         };
         drawerHeader: {
             alignItems: string;
@@ -67,6 +73,7 @@ declare const FeedbackBox: {
                 md: string;
             };
             borderTopWidth: string;
+            color: string;
             display: string;
             fontSize: string;
             px: string;
@@ -78,6 +85,7 @@ declare const FeedbackBox: {
             _dark: {
                 background: string;
                 borderColor: string;
+                color: string;
             };
         };
         openButton: {

package/dist/src/theme/components/fieldset.d.ts

@@ -6,6 +6,10 @@ declare const Fieldset: {
         border: number;
         padding: number;
         legend: {
+            _dark: {
+                color: string;
+            };
+            color: string;
             display: string;
             fontSize: string;
             fontWeight: string;
@@ -14,9 +18,6 @@ declare const Fieldset: {
             span: {
                 fontWeight: string;
             };
-            _dark: {
-                color: string;
-            };
         };
     };
 };

package/dist/src/theme/components/global.d.ts

@@ -91,6 +91,7 @@ declare const defaultElementSizes: {
     mobileFieldHeight: string;
 };
 declare const labelLegendText: {
+    color: string;
     display: string;
     fontSize: string;
     fontWeight: string;

package/dist/src/theme/components/heading.d.ts

@@ -1,6 +1,9 @@
 export declare const headings: {
     one: {
         width: string;
+        a: {
+            textUnderlineOffset: string;
+        };
         marginTop: string;
         marginStart: string;
         marginEnd: string;
@@ -11,6 +14,9 @@ export declare const headings: {
     };
     two: {
         width: string;
+        a: {
+            textUnderlineOffset: string;
+        };
         marginTop: string;
         marginStart: string;
         marginEnd: string;
@@ -50,29 +56,44 @@ export declare const headings: {
         letterSpacing: string;
         lineHeight: string;
         width: string;
+        a: {
+            textUnderlineOffset: string;
+        };
     };
     heading1: {
         fontWeight: string;
         letterSpacing: string;
         lineHeight: string;
         width: string;
+        a: {
+            textUnderlineOffset: string;
+        };
     };
     heading2: {
         fontWeight: string;
         letterSpacing: string;
         lineHeight: string;
         width: string;
+        a: {
+            textUnderlineOffset: string;
+        };
     };
     heading3: {
         fontWeight: string;
         letterSpacing: string;
         lineHeight: string;
         width: string;
+        a: {
+            textUnderlineOffset: string;
+        };
     };
     heading4: {
         fontWeight: string;
         lineHeight: string;
         width: string;
+        a: {
+            textUnderlineOffset: string;
+        };
     };
     heading5: {
         fontWeight: string;
@@ -87,25 +108,38 @@ export declare const headings: {
 };
 declare const Heading: {
     parts: string[];
-    baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace }: {
+    baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace, url }: {
         isCapitalized: any;
         isUppercase: any;
         isLowercase: any;
         noSpace: any;
+        url: any;
     }) => {
         a: {
-            color: string;
             textDecoration: string;
+            color: string;
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            textUnderlineOffset: string;
             _dark: {
                 color: string;
             };
             _hover: {
+                color: string;
+                textDecorationStyle: string;
+                textDecorationThickness: string;
+                _dark: {
+                    color: string;
+                };
+            };
+            _visited: {
                 color: string;
                 _dark: {
                     color: string;
                 };
             };
         };
+        color: string;
         textTransform: string;
         _dark: {
             color: string;
@@ -123,23 +157,35 @@ declare const Heading: {
             letterSpacing: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         h2: {
             fontWeight: string;
             letterSpacing: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         h3: {
             fontWeight: string;
             letterSpacing: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         h4: {
             fontWeight: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         h5: {
             fontWeight: string;
@@ -153,6 +199,9 @@ declare const Heading: {
         };
         one: {
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
             marginTop: string;
             marginStart: string;
             marginEnd: string;
@@ -163,6 +212,9 @@ declare const Heading: {
         };
         two: {
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
             marginTop: string;
             marginStart: string;
             marginEnd: string;
@@ -211,29 +263,44 @@ declare const Heading: {
             letterSpacing: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         heading1: {
             fontWeight: string;
             letterSpacing: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         heading2: {
             fontWeight: string;
             letterSpacing: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         heading3: {
             fontWeight: string;
             letterSpacing: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         heading4: {
             fontWeight: string;
             lineHeight: string;
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
         };
         heading5: {
             fontWeight: string;
@@ -247,6 +314,9 @@ declare const Heading: {
         };
         primary: {
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
             marginTop: string;
             marginStart: string;
             marginEnd: string;
@@ -257,6 +327,9 @@ declare const Heading: {
         };
         secondary: {
             width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
             marginTop: string;
             marginStart: string;
             marginEnd: string;