@nypl/design-system-react-components 3.6.1 → 4.0.0-remove-matchMedia-test

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

@@ -353,79 +353,6 @@ declare const Heading: {
                 width: string;
             };
         };
-        one: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                letterSpacing: string;
-                lineHeight: string;
-            };
-        };
-        two: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        three: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        four: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        five: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        six: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
         display1: {
             base: {
                 fontSize: {
@@ -573,61 +500,10 @@ declare const Heading: {
                 width: string;
             };
         };
-        primary: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                letterSpacing: string;
-                lineHeight: string;
-            };
-        };
-        secondary: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        tertiary: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        callout: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
     };
     defaultProps?: {
         size?: string | number;
-        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";
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8";
         colorScheme?: string;
     };
     parts: ("base" | "headingWrapper")[];

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

@@ -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.section.blogs.secondary" | "dark.section.locations.primary" | "dark.section.books-and-more.primary" | "dark.brand.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";
                 };
             };
             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

@@ -79,12 +79,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 +92,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/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/utils/utils.d.ts

@@ -1,4 +1,5 @@
 import { HelperErrorTextType } from "../components/HelperErrorText/HelperErrorText";
+import { SidebarPlacement } from "../components/Template/Template";
 import { AriaAttributes } from "./interfaces";
 /**
  * range
@@ -43,6 +44,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;