@nypl/design-system-react-components 3.6.2 → 4.0.0-alpha-rc

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

@@ -14,23 +14,23 @@ declare const Hero: {
                 backgroundSize: string;
                 backgroundPosition: string;
                 display: string;
-                flexFlow: {
-                    base: "column nowrap";
-                    md: "row nowrap";
+                gridTemplateColumns: string;
+                gap: {
+                    base: string;
+                    md: string;
+                    xl: string;
                 };
-                justifyContent: string;
                 minHeight: string;
                 p: string;
+                paddingInline: string;
             };
             content: {
                 bg: string;
                 color: any;
-                flex: {
-                    base: string;
-                    md: string;
-                };
-                maxWidth: {
-                    md: "860px";
+                gridColumn: {
+                    base: "1 / -1";
+                    md: "2 / 12";
+                    lg: "3 / 11";
                 };
                 padding: {
                     base: "inset.default";
@@ -735,7 +735,7 @@ declare const Hero: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "primary" | "secondary" | "tertiary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "campaign" | "fiftyFifty";
+        variant?: "primary" | "secondary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "tertiary" | "campaign" | "fiftyFifty";
         colorScheme?: string;
     };
     parts: ("base" | "content" | "imgWrapper" | "bodyText" | "heading" | "interior")[];

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

@@ -90,45 +90,6 @@ declare const Link: {
         }>;
     };
     variants?: {
-        button: {
-            base: {
-                width: string;
-                borderRadius: string;
-                lineHeight: string;
-                display: string;
-                cursor: string;
-                color: string;
-                justifyContent: string;
-                py: string;
-                px: string;
-                textDecoration: string;
-                fontWeight: string;
-                bg: string;
-                _dark: {
-                    color: string;
-                    bg: string;
-                };
-                _hover: {
-                    color: string;
-                    bg: string;
-                    textDecoration: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    _dark: {
-                        color: string;
-                        bg: string;
-                    };
-                };
-                _visited: {
-                    color: string;
-                    _dark: {
-                        _visited: {
-                            color: string;
-                        };
-                    };
-                };
-            };
-        };
         buttonCallout: ({ hasVisitedState }: CustomLinkStyleProps) => {
             base: any;
         };
@@ -182,7 +143,7 @@ declare const Link: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "button" | "buttonCallout" | "buttonDisabled" | "buttonNoBrand" | "buttonPill" | "buttonPrimary" | "buttonSecondary" | "moreLink";
+        variant?: "buttonCallout" | "buttonDisabled" | "buttonNoBrand" | "buttonPill" | "buttonPrimary" | "buttonSecondary" | "moreLink";
         colorScheme?: string;
     };
     parts: ("base" | "screenreaderOnly")[];

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

@@ -13,10 +13,10 @@ declare const NewsletterSignup: {
         pitch: {
             bg: string;
             borderLeftColor: {
-                md: "section.blogs.secondary" | "section.books-and-more.primary" | "brand.primary" | "section.connect.primary" | "section.education.primary" | "section.locations.primary" | "section.research.primary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.whats-on.primary" | "ui.gray.medium" | "section.research-library.schwartzman";
+                md: string;
             };
             borderTopColor: {
-                base: "section.blogs.secondary" | "section.books-and-more.primary" | "brand.primary" | "section.connect.primary" | "section.education.primary" | "section.locations.primary" | "section.research.primary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.whats-on.primary" | "ui.gray.medium" | "section.research-library.schwartzman";
+                base: string;
                 md: "ui.border.default";
             };
             borderWidth: {
@@ -35,7 +35,7 @@ declare const NewsletterSignup: {
                     md: "dark.ui.border.default";
                 };
                 borderLeftColor: {
-                    md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.brand.primary" | "dark.section.books-and-more.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
+                    md: `dark.${string}`;
                 };
             };
             padding: {

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

@@ -2,18 +2,15 @@ import { NotificationTypes } from "../../components/Notification/Notification";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface NotificationBaseStyle extends StyleFunctionProps {
     isCentered: boolean;
-    noMargin: boolean;
     notificationHeading: string;
     notificationType: NotificationTypes;
     showIcon: boolean;
 }
 declare const Notification: {
-    baseStyle?: ({ isCentered, noMargin, notificationHeading, notificationType, }: NotificationBaseStyle) => {
+    baseStyle?: ({ isCentered, notificationHeading, notificationType, }: NotificationBaseStyle) => {
         bg: string;
-        borderRadius: string;
         display: string;
         fontSize: string;
-        m: string;
         position: string;
         p: string;
         textAlign: string;

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

@@ -1,12 +1,11 @@
 import { ProgressIndicatorLabelPlacements, ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface ProgressIndicatorBaseStyle extends StyleFunctionProps {
-    darkMode: boolean;
     size: ProgressIndicatorSizes;
     labelPlacement: ProgressIndicatorLabelPlacements;
 }
 declare const ProgressIndicator: {
-    baseStyle?: ({ darkMode, size, labelPlacement }: ProgressIndicatorBaseStyle) => {
+    baseStyle?: ({ size, labelPlacement }: ProgressIndicatorBaseStyle) => {
         color: string;
         fontSize: string;
         _dark: {

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

@@ -7,7 +7,7 @@ interface CustomSliderBaseStyle extends StyleFunctionProps {
     showValues: boolean;
 }
 declare const CustomSlider: {
-    baseStyle?: ({ isDarkMode, isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
+    baseStyle?: ({ isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
         container: {
             display: string;
             alignItems: string;
@@ -40,6 +40,7 @@ declare const CustomSlider: {
             };
             _dark: {
                 bgColor: string;
+                borderColor: string;
                 _disabled: {
                     bgColor: string;
                     borderColor: string;
@@ -48,6 +49,9 @@ declare const CustomSlider: {
         };
         filledTrack: {
             bgColor: string;
+            _dark: {
+                bgColor: string;
+            };
         };
         leftValue: {
             color: string;
@@ -79,12 +83,12 @@ declare const CustomSlider: {
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
+            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
         }>;
     };
     variants?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
+            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
         }>;
     };
     defaultProps?: {
@@ -92,6 +96,6 @@ declare const CustomSlider: {
         variant?: string | number;
         colorScheme?: string;
     };
-    parts: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
+    parts: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
 };
 export default CustomSlider;

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

@@ -70,19 +70,6 @@ declare const StatusBadge: {
         [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
     };
     variants?: {
-        low: {};
-        medium: {
-            borderColor: string;
-            _dark: {
-                borderColor: string;
-            };
-        };
-        high: {
-            borderColor: string;
-            _dark: {
-                borderColor: string;
-            };
-        };
         neutral: {
             borderColor: string;
             _dark: {
@@ -132,7 +119,7 @@ declare const StatusBadge: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "medium" | "neutral" | "informative" | "positive" | "negative" | "warning" | "recommendation" | "low" | "high";
+        variant?: "neutral" | "informative" | "positive" | "negative" | "warning" | "recommendation";
         colorScheme?: string;
     };
 };

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

@@ -344,10 +344,7 @@ declare const StructuredContent: {
                 base: string;
                 md: string;
             };
-            paddingTop: string; /** The following styles are meant to target HTML elements that are
-             * not rendered from the Reservoir DS. Typically, these HTML elements
-             * are added from an API response.
-             */
+            paddingTop: string;
             _dark: {
                 borderColor: string;
                 color: string;
@@ -470,7 +467,7 @@ declare const StructuredContent: {
                     base: string;
                     md: string;
                 };
-                fontSize: string;
+                fontSize: any;
                 gap: string;
                 letterSpacing: string;
                 lineHeight: number;

package/dist/src/theme/components/{customTable.d.ts → table.d.ts}

@@ -65,7 +65,7 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
         base: string;
         md: string;
     };
-    fontSize: string;
+    fontSize: any;
     gap: string;
     letterSpacing: string;
     lineHeight: number;
@@ -203,7 +203,7 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
         base: string;
         md: string;
     };
-    fontSize: string;
+    fontSize: any;
     gap: string;
     letterSpacing: string;
     lineHeight: number;
@@ -280,7 +280,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 };
                 color: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: any;
                 textTransform: string;
                 verticalAlign: string;
                 _dark: {
@@ -424,7 +424,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 base: string;
                 md: string;
             };
-            fontSize: string;
+            fontSize: any;
             gap: string;
             letterSpacing: string;
             lineHeight: number;
@@ -522,7 +522,7 @@ declare const CustomTable: {
                     };
                     color: string;
                     fontWeight: string;
-                    fontSize: string;
+                    fontSize: any;
                     textTransform: string;
                     verticalAlign: string;
                     _dark: {
@@ -666,7 +666,7 @@ declare const CustomTable: {
                     base: string;
                     md: string;
                 };
-                fontSize: string;
+                fontSize: any;
                 gap: string;
                 letterSpacing: string;
                 lineHeight: number;

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

@@ -1,69 +1,59 @@
 declare const _default: {
     Template: {
-        baseStyle?: {
+        baseStyle?: () => {
             boxSizing: string;
             color: string;
             display: string;
-            gridTemplateColumns: string;
-            rowGap: string;
-            _dark: {
-                color: string;
+            maxWidth: string;
+            minWidth: string;
+            m: string;
+            p: {
+                base: string;
+                md: string;
+                xl: string;
             };
-        };
-        sizes?: {};
-        variants?: {
-            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
-        };
-        defaultProps?: {
-            size?: never;
-            variant?: string | number;
-            colorScheme?: string;
-        };
-    };
-    TemplateBreakout: {
-        baseStyle?: {
-            width: string;
-            gridColumn: string;
-        };
-        sizes?: {
-            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
-        };
-        variants?: {
-            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
-        };
-        defaultProps?: {
-            size?: string | number;
-            variant?: string | number;
-            colorScheme?: string;
-        };
-    };
-    TemplateContent: {
-        baseStyle?: {
-            gridColumn: string;
-            display: {
-                base: "flex";
-                md: "grid";
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+            columnGap: {
+                base: string;
+                md: string;
+                xl: string;
             };
-            flexDirection: {
-                base: "column";
-                md: any;
+            "& > *:not(:last-child)": {
+                mb: {
+                    base: string;
+                    md: string;
+                    xl: string;
+                };
             };
-            gridTemplateColumns: string;
-            paddingY: number;
-            rowGap: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
         };
         variants?: {
             left: {
+                gridTemplateAreas: {
+                    base: "\"breakout\" \"top\" \"sidebar\" \"main\" \"bottom\"";
+                    md: "\"breakout breakout\" \"top top\" \"sidebar main\" \"bottom bottom\"";
+                };
                 gridTemplateColumns: {
-                    md: "271px 1fr";
+                    base: "100%";
+                    md: "repeat(2, minmax(100px, 1fr))";
+                    lg: "minmax(100px, 1fr) minmax(200px, 2fr)";
+                    xl: "minmax(100px, 1fr) minmax(300px, 3fr)";
                 };
             };
             right: {
+                gridTemplateAreas: {
+                    base: "\"breakout\" \"top\" \"main\" \"sidebar\" \"bottom\"";
+                    md: "\"breakout breakout\" \"top top\" \"main sidebar\" \"bottom bottom\"";
+                };
                 gridTemplateColumns: {
-                    md: "1fr 271px";
+                    base: "100%";
+                    md: "repeat(2, minmax(100px, 1fr))";
+                    lg: "minmax(200px, 2fr) minmax(100px, 1fr)";
+                    xl: "minmax(300px, 3fr) minmax(100px, 1fr)";
                 };
             };
         };
@@ -73,14 +63,15 @@ declare const _default: {
             colorScheme?: string;
         };
     };
-    TemplateContentTopBottom: {
-        baseStyle?: {
-            gridColumn: {
-                base: "1";
-                md: "1 / span 2";
+    TemplateBreakout: {
+        baseStyle?: () => {
+            width: string;
+            ml: string;
+            px: {
+                base: string;
+                md: string;
+                xl: string;
             };
-            height: string;
-            paddingX: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -94,87 +85,20 @@ declare const _default: {
             colorScheme?: string;
         };
     };
-    TemplateContentPrimary: {
+    TemplateMainNarrow: {
         baseStyle?: {
-            gridColumn: {
-                base: "1";
-                md: "1 / span 2";
-            };
-            paddingX: string;
+            maxWidth: string;
+            m: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
         };
         variants?: {
-            left: {
-                gridColumn: {
-                    base: "1";
-                    md: "2";
-                };
-                marginEnd: {
-                    md: number;
-                };
-                minWidth: {
-                    md: number;
-                };
-                paddingRight: string;
-                paddingLeft: {
-                    base: "s";
-                    md: "l";
-                };
-                overflow: {
-                    base: "unset";
-                    md: "hidden";
-                };
-            };
-            right: {
-                gridColumn: string;
-                paddingRight: {
-                    base: "s";
-                    md: "l";
-                };
-                paddingLeft: string;
-                overflow: {
-                    base: "unset";
-                    md: "hidden";
-                };
-            };
-        };
-        defaultProps?: {
-            size?: string | number;
-            variant?: "right" | "left";
-            colorScheme?: string;
-        };
-    };
-    TemplateContentSidebar: {
-        baseStyle?: import("@chakra-ui/styled-system").SystemStyleInterpolation;
-        sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
         };
-        variants?: {
-            left: {
-                gridColumn: string;
-                paddingLeft: string;
-                paddingRight: {
-                    base: "s";
-                    md: number;
-                };
-            };
-            right: {
-                gridColumn: {
-                    base: "1";
-                    md: "2";
-                };
-                paddingLeft: {
-                    base: "s";
-                    md: number;
-                };
-                paddingRight: string;
-            };
-        };
         defaultProps?: {
             size?: string | number;
-            variant?: "right" | "left";
+            variant?: string | number;
             colorScheme?: string;
         };
     };

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

@@ -56,18 +56,10 @@ declare const Text: {
             fontWeight: string;
             lineHeight: number;
         };
-        tag: {
-            fontSize: string;
-            fontWeight: string;
-        };
-        mini: {
-            fontSize: string;
-            fontWeight: string;
-        };
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "caption" | "default" | "body1" | "body2" | "tag" | "mini" | "overline1" | "overline2" | "subtitle1" | "subtitle2";
+        variant?: "caption" | "default" | "body1" | "body2" | "overline1" | "overline2" | "subtitle1" | "subtitle2";
         colorScheme?: string;
     };
 };

package/dist/src/theme/foundations/breakpoints.d.ts

@@ -3,19 +3,26 @@ export declare const headerBreakpoints: {
     lh: string;
 };
 /**
- * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
  *
- * Chakra Value |     DS Variable           | EM/PX value
- * ------------------------------------------------------
- *      sm      | --nypl-breakpoint-small   | 20em/320px
- *      md      | --nypl-breakpoint-medium  | 37.5em/600px
- *      lg      | --nypl-breakpoint-large   | 60em/960px
- *      xl      | --nypl-breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A                | 96em/1536px
+ * Chakra Value |     DS Variable                 | EM/PX value    | NYPL reference
+ * --------------------------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small         | 30em / 480px   | small mobile
+ *      md      | --nypl-breakpoint-medium        | 48em / 768px   | large mobile
+ *      lg      | --nypl-breakpoint-large         | 64em / 1024px  | small tablet
+ *      xl      | --nypl-breakpoint-xl            | 80em / 1280px  | large tablet
+ *     2xl      | n/a                             | 96em / 1536px  | n/a
  *
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.
+ *
+ * ------------ | ------------------------------- | -------------- | --------------
+ * smallMobile  | --nypl-breakpoint-smallMobile   | 30em / 480px   | small mobile
+ * largeMobile  | --nypl-breakpoint-largeMobile   | 48em / 768px   | large mobile
+ * mobile       | --nypl-breakpoint-mobile        | 48em / 768px   | mobile
+ * smallTablet  | --nypl-breakpoint-smallTablet   | 64em / 1024px  | small tablet
+ * largeTablet  | --nypl-breakpoint-xlargeTablet  | 80em / 1280px  | large tablet
+ * tablet       | --nypl-breakpoint-tablet        | 80em / 1280px  | tablet
  */
 declare const _default: {
     sm: string;
@@ -25,5 +32,11 @@ declare const _default: {
     lh: string;
     xl: string;
     "2xl": string;
+    smallMobile: string;
+    largeMobile: string;
+    mobile: string;
+    smallTablet: string;
+    largeTablet: string;
+    tablet: string;
 };
 export default _default;

package/dist/src/theme/sharedTypes.d.ts

@@ -0,0 +1,4 @@
+export declare const bgColorsArray: readonly ["brand.primary-05", "section.blogs.primary-05", "section.books-and-more.primary-05", "section.connect.primary-05", "section.education.primary-05", "section.locations.primary-05", "section.research.primary-05", "section.research-library.lpa-05", "section.research-library.schomburg-05", "section.research-library.schwarzman-05", "section.whats-on.primary-05", "dark.brand.primary-05", "dark.section.blogs.primary-05", "dark.section.books-and-more.primary-05", "dark.section.connect.primary-05", "dark.section.education.primary-05", "dark.section.locations.primary-05", "dark.section.research.secondary-05", "dark.section.research-library.lpa-05", "dark.section.research-library.schomburg-05", "dark.section.research-library.schwarzman-05", "dark.section.whats-on.primary-05"];
+export declare const highlightColorsArray: string[];
+export declare const messageVariantsArray: readonly ["informative", "negative", "neutral", "positive", "recommendation", "warning"];
+export declare const sizesArray: readonly ["small", "medium", "large"];

package/dist/src/utils/utils.d.ts

@@ -1,11 +1,16 @@
 import { HelperErrorTextType } from "../components/HelperErrorText/HelperErrorText";
+import { SidebarPlacement } from "../components/Template/Template";
 import { AriaAttributes } from "./interfaces";
 /**
  * range
  * Get an array of values from `start` to `stop` - 1 with an optional
  * `step` between values.
  */
-export declare const range: (start: number, stop: number, step?: number) => number[];
+export declare const range: ({ start, stop, step, }: {
+    start: number;
+    stop: number;
+    step?: number;
+}) => number[];
 /**
  * Given a pagination's pageCount, this will return (1) a page number,
  * derived from the current URL, and (2) a function that, when passed to
@@ -43,6 +48,8 @@ export declare const sanitizeStringForAttribute: (str: string) => string;
 /** Provides a random image to use as a placeholder. */
 export type GetPlaceholderImageProps = "smaller" | "default";
 export declare const getPlaceholderImage: (size?: GetPlaceholderImageProps, index?: number) => string;
+/** Creates the correct sidebar label in Template stories or tests */
+export declare const sidebarLabel: (sidebar: SidebarPlacement) => string;
 /** The default styles for images added as examples within doc pages. */
 export declare const exampleWrapperStyles: {
     bgColor: string;