@nypl/design-system-react-components 3.4.4 → 3.5.0-rc-svg-2

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

@@ -5,6 +5,7 @@ export interface MultiSelectItem {
     name: string;
     isDisabled?: boolean;
     children?: MultiSelectItem[];
+    itemCount?: number;
 }
 export declare const multiSelectWidthsArray: readonly ["fitContent", "full"];
 export type MultiSelectWidths = typeof multiSelectWidthsArray[number];

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { ChakraComponent } from "@chakra-ui/react";
+export declare const actionBackgroundColorsArray: 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 type actionBackgroundColors = typeof actionBackgroundColorsArray[number];
+export declare const highlightColorsArray: string[];
+export type highlightColors = typeof highlightColorsArray[number];
+export interface SubNavProps {
+    /**
+     * The background color to be applied to the hover and active states
+     * of the SubNavLink and SubNavButton components.
+     * This allows for customization of the action items.
+     */
+    actionBackgroundColor?: actionBackgroundColors;
+    /** Additional class name for the `SubNav` component. */
+    className?: string;
+    /**
+     * Custom color for SubNavLink, SubNavButton, and icons.
+     */
+    highlightColor?: highlightColors;
+    /**
+     * Optional unique ID for accessibility, allowing other components
+     * to reference this element.
+     */
+    id?: string;
+    /**
+     * Primary actions displayed on the left side of the SubNav.
+     * Use SubNavButton and SubNavLink components, which mirror
+     * the DS Button and Link.
+     */
+    primaryActions: React.ReactNode;
+    /**
+     * Secondary actions displayed on the right side of the SubNav.
+     * Use SubNavButton and SubNavLink components, which mirror
+     * the DS Button and Link.
+     */
+    secondaryActions?: React.ReactNode;
+}
+interface SubNavItemProps {
+    id: string;
+    children: React.ReactNode;
+    isOutlined?: boolean;
+    isSelected?: boolean;
+    screenreaderOnlyText?: string;
+}
+interface SubNavLinkProps extends SubNavItemProps {
+    href: string;
+}
+interface SubNavButtonProps extends SubNavItemProps {
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export declare const SubNavButton: React.FC<React.PropsWithChildren<SubNavButtonProps>>;
+export declare const SubNavLink: React.FC<React.PropsWithChildren<SubNavLinkProps>>;
+/**
+ * The `SubNav` component is a navigation element that displays a group of
+ * related action items (buttons or links) in a horizontal layout.  The action
+ * items in the `SubNav` component will link to children within or perform
+ * actions related to the current section of a website.
+ */
+export declare const SubNav: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<SubNavProps> & React.RefAttributes<HTMLDivElement>>, SubNavProps>;
+export default SubNav;

package/dist/src/hooks/useScrollFadeStyles.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * The `useScrollFadeStyles` hook manages the visibility of a right-side fade effect
+ * based on horizontal scrolling. It tracks scroll events and shows the fade effect
+ * when scrolling to the left and more content is available to the right, hiding it
+ * when scrolling right or when at the right edge of the scrollable container.
+ */
+export default function useScrollFadeStyles(): {
+    scrollableRef: React.MutableRefObject<any>;
+    showRightFade: boolean;
+};

package/dist/src/index.d.ts

@@ -98,6 +98,7 @@ export { default as StructuredContent } from "./components/StructuredContent/Str
 export type { StructuredContentImagePosition, StructuredContentProps, } from "./components/StructuredContent/StructuredContent";
 export { default as StyledList } from "./components/StyledList/StyledList";
 export type { StyledListProps, StyledListTextSizes, } from "./components/StyledList/StyledList";
+export { default as SubNav, SubNavButton, SubNavLink, } from "./components/SubNav/SubNav";
 export { default as Table } from "./components/Table/Table";
 export type { TableBodyTextSizes, TableProps } from "./components/Table/Table";
 export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
@@ -122,5 +123,6 @@ export { default as useMultiSelect } from "./hooks/useMultiSelect";
 export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as useWindowSize } from "./hooks/useWindowSize";
+export { default as useScrollFadeStyles } from "./hooks/useScrollFadeStyles";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export type { VideoPlayerAspectRatios, VideoPlayerProps, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";

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

@@ -0,0 +1,275 @@
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface SubNavStyleProps extends StyleFunctionProps {
+    backgroundColor: string;
+    highlightColor: string;
+}
+interface SubNavChildrenStyleProps extends StyleFunctionProps {
+    isOutlined: boolean;
+}
+declare const SubNav: {
+    baseStyle?: ({ backgroundColor, highlightColor }: SubNavStyleProps) => {
+        base: {
+            ".selectedItem": {
+                color: string;
+                fontWeight: string;
+                backgroundColor: string;
+                "&:hover": {
+                    color: string;
+                };
+            };
+            borderBottom: string;
+            borderColor: string;
+            display: string;
+            justifyContent: string;
+        };
+        container: {
+            maxWidth: string;
+            px: {
+                base: "0";
+                md: "xs";
+            };
+            width: string;
+        };
+        scrollableList: {
+            display: string;
+            overflowX: string;
+            whiteSpace: string;
+            position: string;
+            scrollbarWidth: string;
+        };
+        primaryActions: {
+            width: string;
+            button: {
+                svg: {
+                    fill: string;
+                    margin: {
+                        base: string;
+                        md: any;
+                    };
+                    _dark: {
+                        fill: string;
+                    };
+                };
+                _hover: {
+                    backgroundColor: string;
+                    color: string;
+                    svg: {
+                        fill: string;
+                        _dark: {
+                            fill: string;
+                        };
+                    };
+                };
+                alignItems: string;
+                display: string;
+                fontSize: string;
+                fontWeight: string;
+                gap: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                lineHeight: string;
+                position: string;
+                px: string;
+                py: string;
+                textDecoration: string;
+                transition: string;
+                color: string;
+            };
+            a: {
+                svg: {
+                    fill: string;
+                    margin: {
+                        base: "0";
+                        md: any;
+                    };
+                    _dark: {
+                        fill: string;
+                    };
+                };
+                _hover: {
+                    backgroundColor: string;
+                    color: string;
+                    svg: {
+                        fill: string;
+                        _dark: {
+                            fill: string;
+                        };
+                    };
+                };
+                alignItems: string;
+                display: string;
+                fontSize: string;
+                fontWeight: string;
+                gap: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                lineHeight: string;
+                position: string;
+                px: string;
+                py: string;
+                textDecoration: string;
+                transition: string;
+                color: string;
+            };
+            p: {
+                base: string;
+                md: string;
+            };
+            gap: string;
+            li: {
+                marginEnd: string;
+            };
+            margin: string;
+        };
+        secondaryActions: {
+            width: string;
+            whiteSpace: string;
+            button: {
+                color: string;
+                svg: {
+                    fill: string;
+                    margin: {
+                        base: string;
+                        md: any;
+                    };
+                    _dark: {
+                        fill: string;
+                    };
+                };
+                _hover: {
+                    background: string;
+                    color: string;
+                    svg: {
+                        fill: string;
+                        _dark: {
+                            fill: string;
+                        };
+                    };
+                };
+                alignItems: string;
+                display: string;
+                fontSize: string;
+                fontWeight: string;
+                gap: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                lineHeight: string;
+                position: string;
+                px: string;
+                py: string;
+                textDecoration: string;
+                transition: string;
+            };
+            a: {
+                color: string;
+                svg: {
+                    fill: string;
+                    margin: {
+                        base: string;
+                        md: any;
+                    };
+                    _dark: {
+                        fill: string;
+                    };
+                };
+                _hover: {
+                    background: string;
+                    color: string;
+                    svg: {
+                        fill: string;
+                        _dark: {
+                            fill: string;
+                        };
+                    };
+                };
+                alignItems: string;
+                display: string;
+                fontSize: string;
+                fontWeight: string;
+                gap: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                lineHeight: string;
+                position: string;
+                px: string;
+                py: string;
+                textDecoration: string;
+                transition: string;
+            };
+            p: {
+                base: string;
+                md: string;
+            };
+            gap: string;
+            li: {
+                marginEnd: string;
+            };
+            margin: string;
+        };
+        fadeEffect: {
+            position: string;
+            top: number;
+            right: number;
+            height: string;
+            width: string;
+            background: string;
+            pointerEvents: string;
+            zIndex: number;
+        };
+        primaryList: {
+            position: string;
+            display: string;
+            width: string;
+            overflowX: string;
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "container" | "primaryActions" | "selectedItem" | "secondaryActions")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "container" | "primaryActions" | "selectedItem" | "secondaryActions")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("base" | "container" | "primaryActions" | "selectedItem" | "secondaryActions")[];
+};
+declare const SubNavChildren: {
+    baseStyle?: ({ isOutlined }: SubNavChildrenStyleProps) => {
+        outLine: {
+            border: string;
+            borderRadius: string;
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "outLine"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "outLine"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "outLine"[];
+};
+export { SubNav, SubNavChildren };

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

@@ -50,8 +50,7 @@ declare const _default: {
             };
             gridTemplateColumns: string;
             paddingY: number;
-            paddingX: string;
-            gap: string;
+            rowGap: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -59,12 +58,12 @@ declare const _default: {
         variants?: {
             left: {
                 gridTemplateColumns: {
-                    md: "255px 1fr";
+                    md: "271px 1fr";
                 };
             };
             right: {
                 gridTemplateColumns: {
-                    md: "1fr 255px";
+                    md: "1fr 271px";
                 };
             };
         };
@@ -81,6 +80,7 @@ declare const _default: {
                 md: "1 / span 2";
             };
             height: string;
+            paddingX: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -100,6 +100,7 @@ declare const _default: {
                 base: "1";
                 md: "1 / span 2";
             };
+            paddingX: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -116,16 +117,23 @@ declare const _default: {
                 minWidth: {
                     md: number;
                 };
+                paddingRight: string;
+                paddingLeft: {
+                    base: "s";
+                    md: "l";
+                };
                 overflow: {
                     base: "unset";
                     md: "hidden";
                 };
             };
             right: {
-                gridColumn: {
-                    base: "1";
-                    md: "1";
+                gridColumn: string;
+                paddingRight: {
+                    base: "s";
+                    md: "l";
                 };
+                paddingLeft: string;
                 overflow: {
                     base: "unset";
                     md: "hidden";
@@ -146,12 +154,22 @@ declare const _default: {
         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?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.4.4",
+  "version": "3.5.0-rc-svg-2",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",