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

package/dist/src/index.d.ts

@@ -0,0 +1,87 @@
+export { Box, Center, Circle, ColorModeScript, cookieStorageManager, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, VStack, } from "@chakra-ui/react";
+export { default as Accordion } from "./components/Accordion/Accordion";
+export type { AccordionTypes } from "./components/Accordion/Accordion";
+export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
+export { default as AudioPlayer } from "./components/AudioPlayer/AudioPlayer";
+export type { AudioType } from "./components/AudioPlayer/AudioPlayer";
+export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
+export type { BreadcrumbsTypes } from "./components/Breadcrumbs/Breadcrumbs";
+export { default as Button } from "./components/Button/Button";
+export type { ButtonTypes } from "./components/Button/Button";
+export { default as ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
+export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
+export { default as Checkbox } from "./components/Checkbox/Checkbox";
+export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
+export { default as ColorCard } from "./components/StyleGuide/ColorCard";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export type { DatePickerTypes, FullDateType, } from "./components/DatePicker/DatePicker";
+export { default as DSProvider } from "./theme/provider";
+export type { FeaturedContentProps } from "./components/FeaturedContent/FeaturedContent";
+export { default as FeaturedContent } from "./components/FeaturedContent/FeaturedContent";
+export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
+export type { FeedbackBoxViewType } from "./components/FeedbackBox/FeedbackBox";
+export { default as Fieldset } from "./components/Fieldset/Fieldset";
+export { default as Form, FormField, FormRow } from "./components/Form/Form";
+export { default as Heading } from "./components/Heading/Heading";
+export type { HeadingSizes, HeadingLevels } from "./components/Heading/Heading";
+export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
+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, 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";
+export type { LayoutTypes } from "./helpers/types";
+export { default as Link } from "./components/Link/Link";
+export type { LinkTypes } from "./components/Link/Link";
+export { default as List } from "./components/List/List";
+export type { DescriptionProps, ListTypes } from "./components/List/List";
+export { default as Logo } from "./components/Logo/Logo";
+export type { LogoNames, LogoSizes } from "./components/Logo/Logo";
+export { ModalTrigger, useModal } from "./components/Modal/Modal";
+export { default as NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
+export type { NewsletterSignupViewType } from "./components/NewsletterSignup/NewsletterSignup";
+export { default as Notification } from "./components/Notification/Notification";
+export type { NotificationTypes } from "./components/Notification/Notification";
+export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
+export type { ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicator";
+export { default as Radio } from "./components/Radio/Radio";
+export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
+export { default as SearchBar } from "./components/SearchBar/SearchBar";
+export { default as Select } from "./components/Select/Select";
+export type { LabelPositions } from "./components/Select/Select";
+export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
+export type { GridGaps } from "./components/Grid/SimpleGrid";
+export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
+export type { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoader";
+export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
+export { default as Slider } from "./components/Slider/Slider";
+export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
+export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
+export type { StatusBadgeTypes } from "./components/StatusBadge/StatusBadge";
+export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
+export type { StructuredContentImagePosition } from "./components/StructuredContent/StructuredContent";
+export { default as StyledList } from "./components/StyledList/StyledList";
+export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
+export { default as TagSet } from "./components/TagSet/TagSet";
+export type { TagSetExploreDataProps } from "./components/TagSet/TagSetExplore";
+export type { TagSetFilterDataProps } from "./components/TagSet/TagSetFilter";
+export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
+export { default as Text } from "./components/Text/Text";
+export type { TextSizes } from "./components/Text/Text";
+export { default as TextInput } from "./components/TextInput/TextInput";
+export type { TextInputRefType, TextInputTypes, } from "./components/TextInput/TextInput";
+export { default as Toggle } from "./components/Toggle/Toggle";
+export type { ToggleSizes } from "./components/Toggle/Toggle";
+export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
+export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
+export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
+export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
+export { default as useWindowSize } from "./hooks/useWindowSize";
+export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
+export type { VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
+export { default as Table } from "./components/Table/Table";
+export { default as Tooltip } from "./components/Tooltip/Tooltip";

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

@@ -0,0 +1,34 @@
+declare const Accordion: {
+    parts: string[];
+    baseStyle: {
+        container: {
+            border: string;
+            width: string;
+            _dark: {
+                bg: string;
+                borderColor: string;
+            };
+        };
+        button: {
+            borderWidth: string;
+            color: string;
+            fontWeight: string;
+            _dark: {
+                bg: string;
+                color: string;
+            };
+        };
+        panel: {
+            padding: string;
+            borderLeftWidth: string;
+            borderRightWidth: string;
+            borderBottomWidth: string;
+            _dark: {
+                bg: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+};
+export default Accordion;

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

@@ -0,0 +1,40 @@
+declare const AlphabetFilter: {
+    baseStyle: {
+        button: {
+            minWidth: {
+                base: string;
+                md: string;
+            };
+            height: {
+                base: string;
+                md: string;
+            };
+            padding: string;
+            margin: string;
+            fontWeight: string;
+            fontSize: {
+                base: string;
+                md: string;
+            };
+            lineHeight: string;
+            _last: {
+                fontSize: string;
+                fontWeight: string;
+                px: {
+                    base: string;
+                    md: string;
+                };
+                py: {
+                    base: any;
+                    md: string;
+                };
+                whiteSpace: string;
+            };
+            _disabled: {
+                color: string;
+                cursor: string;
+            };
+        };
+    };
+};
+export default AlphabetFilter;

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

@@ -0,0 +1,16 @@
+declare const AudioPlayer: {
+    baseStyle: {
+        invalid: {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            padding: string;
+            _dark: {
+                bg: string;
+                border: string;
+                borderColor: string;
+            };
+        };
+    };
+};
+export default AudioPlayer;

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

@@ -0,0 +1,158 @@
+declare const Breadcrumb: {
+    baseStyle: {
+        bg: string;
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+        paddingBottom: string;
+        paddingTop: string;
+        _dark: {
+            bg: string;
+            color: string;
+        };
+        ol: {
+            alignItems: {
+                base: string;
+                md: string;
+            };
+            display: {
+                base: string;
+                md: string;
+            };
+            margin: string;
+            maxWidth: string;
+            paddingStart: string;
+            paddingEnd: string;
+        };
+        a: {
+            _hover: {
+                color: string;
+                textDecoration: string;
+            };
+        };
+        "li:last-child": {
+            fontWeight: {
+                base: string;
+                md: string;
+            };
+            ".chakra-breadcrumb__link": {
+                _hover: {
+                    color: string;
+                    cursor: string;
+                    textDecoration: string;
+                };
+                _dark: {
+                    _hover: {
+                        color: string;
+                    };
+                };
+            };
+            ".icon": {
+                display: string;
+            };
+        };
+        "li:not(:last-child)": {
+            display: {
+                base: string;
+                md: string;
+            };
+            a: {
+                marginEnd: {
+                    base: string;
+                    md: string;
+                };
+            };
+            ".icon": {
+                display: {
+                    base: string;
+                    md: string;
+                };
+            };
+            "span:not(.breadcrumb-label)": {
+                marginInlineEnd: string;
+                marginInlineStart: string;
+            };
+        };
+        "li:nth-last-of-type(2)": {
+            display: string;
+            span: {
+                display: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+    variants: {
+        blogs: {
+            bg: string;
+            color: string;
+            _dark: {
+                bg: string;
+            };
+            a: {
+                _hover: {
+                    color: string;
+                };
+                _dark: {
+                    _hover: {
+                        color: string;
+                    };
+                };
+            };
+            "li:last-child": {
+                ".chakra-breadcrumb__link": {
+                    _hover: {
+                        color: string;
+                    };
+                };
+            };
+            svg: {
+                fill: string;
+            };
+        };
+        booksAndMore: {
+            bg: string;
+            _dark: {
+                bg: string;
+            };
+        };
+        brand: {
+            bg: string;
+            _dark: {
+                bg: string;
+            };
+        };
+        connect: {
+            bg: string;
+            _dark: {
+                bg: string;
+            };
+        };
+        education: {
+            bg: string;
+            _dark: {
+                bg: string;
+            };
+        };
+        locations: {
+            bg: string;
+            _dark: {
+                bg: string;
+            };
+        };
+        research: {
+            bg: string;
+            _dark: {
+                bg: string;
+            };
+        };
+        whatsOn: {
+            bg: string;
+            _dark: {
+                bg: string;
+            };
+        };
+    };
+};
+export default Breadcrumb;

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

@@ -0,0 +1,152 @@
+export declare const buttonBaseStyle: {
+    alignItems: string;
+    borderRadius: string;
+    display: string;
+    cursor: string;
+    color: string;
+    fontWeight: string;
+    justifyContent: string;
+    lineHeight: string;
+    textDecoration: string;
+    wordWrap: string;
+    /** The element will handle descriptive text added to aid
+     * screen readers. */
+    screenreaderOnly: {
+        clip: string;
+        height: {
+            base: string;
+            md: string;
+        };
+        overflow: string;
+        position: {
+            base: string;
+            md: string;
+        };
+        width: {
+            base: string;
+            md: string;
+        };
+        wordWrap: string;
+    };
+    svg: {
+        fill: string;
+    };
+    _hover: {
+        bg: string;
+    };
+    _visited: {
+        color: string;
+    };
+    _disabled: {
+        bg: string;
+        color: string;
+        opacity: string;
+        pointerEvents: string;
+    };
+    _dark: {
+        _disabled: {
+            bg: string;
+            color: string;
+        };
+    };
+};
+export declare const primary: ({ buttonSize }: {
+    buttonSize?: string;
+}) => any;
+export declare const secondary: ({ buttonSize }: {
+    buttonSize?: string;
+}) => any;
+export declare const pill: ({ buttonSize }: {
+    buttonSize?: string;
+}) => any;
+export declare const callout: ({ buttonSize }: {
+    buttonSize?: string;
+}) => any;
+export declare const noBrand: ({ buttonSize }: {
+    buttonSize?: string;
+}) => any;
+declare const Button: {
+    parts: string[];
+    baseStyle: {
+        alignItems: string;
+        borderRadius: string;
+        display: string;
+        cursor: string;
+        color: string;
+        fontWeight: string;
+        justifyContent: string;
+        lineHeight: string;
+        textDecoration: string;
+        wordWrap: string;
+        /** The element will handle descriptive text added to aid
+         * screen readers. */
+        screenreaderOnly: {
+            clip: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            overflow: string;
+            position: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+            wordWrap: string;
+        };
+        svg: {
+            fill: string;
+        };
+        _hover: {
+            bg: string;
+        };
+        _visited: {
+            color: string;
+        };
+        _disabled: {
+            bg: string;
+            color: string;
+            opacity: string;
+            pointerEvents: string;
+        };
+        _dark: {
+            _disabled: {
+                bg: string;
+                color: string;
+            };
+        };
+    };
+    variants: {
+        primary: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+        secondary: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+        text: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+        link: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+        pill: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+        iconOnly: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+        callout: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+        noBrand: ({ buttonSize }: {
+            buttonSize?: string;
+        }) => any;
+    };
+    defaultProps: {
+        variant: string;
+    };
+};
+export default Button;

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

@@ -0,0 +1,11 @@
+declare const ButtonGroup: {
+    baseStyle: ({ buttonWidth }: {
+        buttonWidth: any;
+    }) => {
+        width: string;
+        button: {
+            flexGrow: string;
+        };
+    };
+};
+export default ButtonGroup;