@nypl/design-system-react-components 3.0.0-react-chakra-rc2 → 3.0.0-react-chakra-rc4

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

@@ -11,58 +11,83 @@ declare const imagePaddingBottomStyles: {
 };
 declare const SkeletonLoader: {
     baseStyle?: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
-        section: {
-            marginBottom: string;
-            _last: {
-                marginBottom: string;
-            };
+        base: {
+            margin: string;
+            width: string;
         };
-        image: {
-            boxSizing: string;
-            flexShrink: string;
+        button: {
             height: string;
-            overflow: string;
-            paddingBottom: string;
-            position: string;
+            margin: string;
+            maxWidth: string;
             width: string;
-            borderRadius: string;
-            marginBottom: string;
         };
         container: {
             marginTop: string;
             width: string;
         };
-        heading: {
+        content: {
             height: string;
             borderRadius: string;
             boxSizing: string;
             marginBottom: string;
         };
-        content: {
+        heading: {
             height: string;
             borderRadius: string;
             boxSizing: string;
             marginBottom: string;
         };
-        button: {
+        image: {
+            boxSizing: string;
+            flexShrink: string;
             height: string;
-            margin: string;
-            maxWidth: string;
+            overflow: string;
+            paddingBottom: string;
+            position: string;
             width: string;
+            borderRadius: string;
+            marginBottom: string;
+        };
+        loader: {
+            borderRadius: string;
+            bg: string;
+            animation: string;
+            _dark: {
+                bg: string;
+            };
+        };
+        section: {
+            marginBottom: string;
+            _last: {
+                marginBottom: string;
+            };
         };
-        margin: string;
-        width: string;
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("button" | "section" | "content" | "container" | "image" | "heading")[];
+            keys: ("base" | "button" | "section" | "content" | "container" | "image" | "heading" | "loader")[];
         }>;
     };
     variants?: {
         row: ({ imageAspectRatio, showImage }: SkeletonLoaderBaseStyle) => {
-            alignItems: string;
-            display: {
-                md: string;
+            base: {
+                alignItems: string;
+                display: {
+                    md: "flex";
+                };
+            };
+            button: {
+                margin: {
+                    md: "0";
+                };
+            };
+            container: {
+                marginStart: {
+                    md: "m";
+                };
+                marginTop: {
+                    md: "0";
+                };
             };
             image: {
                 overflow: {
@@ -81,19 +106,6 @@ declare const SkeletonLoader: {
                     md: string;
                 };
             };
-            container: {
-                marginStart: {
-                    md: "m";
-                };
-                marginTop: {
-                    md: "0";
-                };
-            };
-            button: {
-                margin: {
-                    md: "0";
-                };
-            };
         };
     };
     defaultProps?: {
@@ -101,27 +113,6 @@ declare const SkeletonLoader: {
         variant?: "row";
         colorScheme?: string;
     };
-    parts: ("button" | "section" | "content" | "container" | "image" | "heading")[];
-};
-declare const Skeleton: {
-    baseStyle?: {
-        borderRadius: string;
-        bg: string;
-        animation: string;
-        _dark: {
-            bg: 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;
-    };
+    parts: ("base" | "button" | "section" | "content" | "container" | "image" | "heading" | "loader")[];
 };
-export { Skeleton, SkeletonLoader };
+export default SkeletonLoader;

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

@@ -1,5 +1,6 @@
 declare const StatusBadge: {
     baseStyle?: {
+        alignItems: string;
         bgColor: string;
         borderLeft: string;
         borderColor: string;
@@ -11,7 +12,6 @@ declare const StatusBadge: {
         py: string;
         paddingInlineEnd: string;
         paddingInlineStart: string;
-        textAlign: string;
         whiteSpace: string;
         width: string;
         _dark: {

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

@@ -12,15 +12,10 @@ declare const StructuredContent: {
                 a: {
                     textUnderlineOffset: string;
                 };
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
                 marginTop: string;
                 marginStart: string;
                 marginEnd: string;
+                fontSize: string;
                 fontWeight: string;
                 letterSpacing: string;
                 lineHeight: string;
@@ -32,15 +27,10 @@ declare const StructuredContent: {
                 a: {
                     textUnderlineOffset: string;
                 };
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
                 marginTop: string;
                 marginStart: string;
                 marginEnd: string;
+                fontSize: string;
                 fontWeight: string;
                 lineHeight: string;
             };
@@ -48,15 +38,10 @@ declare const StructuredContent: {
         three: {
             base: {
                 width: string;
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
                 marginTop: string;
                 marginStart: string;
                 marginEnd: string;
+                fontSize: string;
                 fontWeight: string;
                 lineHeight: string;
             };
@@ -64,15 +49,10 @@ declare const StructuredContent: {
         four: {
             base: {
                 width: string;
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
                 marginTop: string;
                 marginStart: string;
                 marginEnd: string;
+                fontSize: string;
                 fontWeight: string;
                 lineHeight: string;
             };
@@ -80,15 +60,10 @@ declare const StructuredContent: {
         fallback: {
             base: {
                 width: string;
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
                 marginTop: string;
                 marginStart: string;
                 marginEnd: string;
+                fontSize: string;
                 fontWeight: string;
                 lineHeight: string;
             };
@@ -106,12 +81,6 @@ declare const StructuredContent: {
                 a: {
                     textUnderlineOffset: string;
                 };
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
             };
         };
         heading1: {
@@ -127,12 +96,6 @@ declare const StructuredContent: {
                 a: {
                     textUnderlineOffset: string;
                 };
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
             };
         };
         heading2: {
@@ -148,12 +111,6 @@ declare const StructuredContent: {
                 a: {
                     textUnderlineOffset: string;
                 };
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
             };
         };
         heading3: {
@@ -169,12 +126,6 @@ declare const StructuredContent: {
                 a: {
                     textUnderlineOffset: string;
                 };
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
             };
         };
         heading4: {
@@ -190,12 +141,6 @@ declare const StructuredContent: {
                 a: {
                     textUnderlineOffset: string;
                 };
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
             };
         };
         heading5: {
@@ -208,12 +153,6 @@ declare const StructuredContent: {
                 letterSpacing: string;
                 lineHeight: string;
                 width: string;
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
             };
         };
         heading6: {
@@ -226,12 +165,6 @@ declare const StructuredContent: {
                 letterSpacing: string;
                 lineHeight: string;
                 width: string;
-                "@media (min-width: 0px)": {
-                    fontSize: string;
-                };
-                "@media (min-width: 600px)": {
-                    fontSize: string;
-                };
             };
         };
         imageFigure: {

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

@@ -7,6 +7,7 @@ declare const CustomTabs: {
         };
         tablist: {
             borderColor: string;
+            width: string;
         };
         tab: {
             background: string;
@@ -160,10 +161,7 @@ declare const CustomTabs: {
                 display: string;
             };
             overflowY: string;
-            overflowX: {
-                base: string;
-                md: string;
-            };
+            overflowX: string;
         };
     };
     sizes?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.0.0-react-chakra-rc2",
+  "version": "3.0.0-react-chakra-rc4",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

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

@@ -1,49 +0,0 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
-import { SectionTypes } from "../../helpers/types";
-interface NewsletterSignupProps {
-    /** Additional class name to add. */
-    className?: string;
-    /** Text displayed next to the confirmation icon after a successful email submission */
-    confirmationHeading: string;
-    /** Detail text for the confirmation view */
-    confirmationText: string;
-    /** Appears below the title to provide details about the newsletter. Accepts a string or an element. */
-    descriptionText?: string | JSX.Element;
-    /** Text displayed next to the error icon in case of an error in the email submission process*/
-    errorHeading?: string;
-    /** Appears below the title to provide details about next steps in case of an error. Accepts a string or an element. */
-    errorText?: string | JSX.Element;
-    /** Appears below the input field's example text to provide any additional instructions. Accepts a string or
-     *  an element. */
-    formHelperText?: string | JSX.Element;
-    /** ID that other components can cross-reference for accessibility purposes */
-    id?: string;
-    /** Toggles the invalid state for the email field. */
-    isInvalidEmail?: boolean;
-    /** Value to determine the section color highlight. The default is set to "blogs" as it uses the
-     * "ui.border.deafult" color.
-     */
-    newsletterSignupType?: SectionTypes;
-    /** A handler function that will be called when the form is submitted. */
-    onSubmit: (event: React.FormEvent<any>) => void;
-    /** A handler function that will be called when the text input changes. */
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Link to the relevant privacy policy page. */
-    privacyPolicyLink?: string;
-    /** Optional string value used to set the text for a `Heading` component, or
-     * a DS Heading component that can be passed in.
-     */
-    title?: JSX.Element | string;
-    /** The value of the email text input field. */
-    valueEmail?: string;
-    /** Used to specify what is displayed in the component form/feedback area. */
-    view?: NewsletterSignupViewType;
-}
-export type NewsletterSignupViewType = "form" | "submitting" | "confirmation" | "error";
-/**
- * The NewsletterSignup component provides a way for patrons to register for an
- * email-based newsletter distribution list.
- */
-export declare const NewsletterSignup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NewsletterSignupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<NewsletterSignupProps>>;
-export default NewsletterSignup;

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

@@ -1,43 +0,0 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import { LayoutTypes } from "../../helpers/types";
-import React from "react";
-export declare const borderTypeArray: readonly ["none", "circular", "straight"];
-export type BorderType = typeof borderTypeArray[number];
-export declare const colorTypeArray: readonly ["link", "textDefault", "textInverse"];
-export type ColorType = typeof colorTypeArray[number];
-export declare const sizeTypeArray: readonly ["small", "medium", "large"];
-export type SizeType = typeof sizeTypeArray[number];
-export declare const socialMediaLinkTypeArray: string[];
-export type SocialMediaLinkType = typeof socialMediaLinkTypeArray[number];
-export interface SocialMediaLinkDataProps {
-    /** Optional override for default platform name */
-    labelText?: string;
-    /** Required. Must be one of socialMediaLinkTypeArray */
-    type: SocialMediaLinkType;
-    /** Optional override for default social media url */
-    url?: string;
-}
-export interface SocialMediaLinksProps {
-    /** Optional border: straight, circular or none. */
-    borders?: BorderType;
-    /** Optional className you can add in addition to "social-media-links." */
-    className?: string;
-    /** Any of three optional values that will change the color of the svg and label text (if any). */
-    color?: ColorType;
-    /** ID that other components can cross-reference for accessibility purposes. */
-    id?: string;
-    /** Optional desktop layout. Smaller viewports are always in a column. */
-    layout?: LayoutTypes;
-    /** Optional array of social media platform types, urls, and label texts. */
-    linksData?: SocialMediaLinkDataProps[];
-    /** Optional true/false to display names of platforms along with icons.
-     *  NOTE: Labels will NOT be shown with a circular border */
-    showLabels?: boolean;
-    /** Optional size: small, medium, or large. */
-    size?: SizeType;
-}
-/**
- * The SocialMediaLinks component renders a list of links for accessing social media sites.
- */
-export declare const SocialMediaLinks: ChakraComponent<React.ForwardRefExoticComponent<SocialMediaLinksProps & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, SocialMediaLinksProps>;
-export default SocialMediaLinks;

package/dist/src/components/SocialMediaLinks/SocialMediaLinksUtils.d.ts

@@ -1,7 +0,0 @@
-export declare const socialMediaDataMap: {
-    type: string;
-    iconName: string;
-    labelText: string;
-    url: string;
-}[];
-export declare function GetTableData(): any[];