@nypl/design-system-react-components 1.6.1 → 1.7.0-rc

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

@@ -19,6 +19,8 @@ interface ButtonProps {
     mouseDown?: boolean;
     /** The action to perform on the `<button>`'s onClick function. */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** Visibly hidden text that will only be read by screenreaders. */
+    screenreaderOnlyText?: string;
     /** The size of the `Button`. */
     size?: ButtonSizes;
     /** The HTML button type attribute. */

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

@@ -1,12 +1,13 @@
 import React from "react";
-export declare const headingSizesArray: readonly ["primary", "secondary", "tertiary", "callout"];
-export declare const headingLevelsArray: readonly ["one", "two", "three", "four", "five", "six"];
+export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "primary", "secondary", "tertiary", "callout"];
+export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "one", "two", "three", "four", "five", "six"];
 export type HeadingSizes = typeof headingSizesArray[number];
 export type HeadingLevels = typeof headingLevelsArray[number];
 export interface HeadingProps {
     /** Optional className that appears in addition to `heading` */
     className?: string;
-    /** Optional ID that other components can cross reference for accessibility purposes */
+    /** Optional ID that other components can cross reference for accessibility
+     * purposes */
     id?: string;
     /** Optional prop used to show capitalized text */
     isCapitalized?: boolean;
@@ -17,16 +18,20 @@ export interface HeadingProps {
     /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
      * `Heading` will default to `<h2>` */
     level?: HeadingLevels;
-    /** Optional size used to override the default styles of the semantic HTM
-     * `<h>` elements */
-    size?: HeadingSizes;
     /** Optional prop used to remove default spacing */
     noSpace?: boolean;
+    /** String to populate the overline element */
+    overline?: string;
+    /** Optional size used to override the default styles of the native HTML `<h>`
+     * elements */
+    size?: HeadingSizes;
+    /** String to populate the subtitle element */
+    subtitle?: string;
     /** Inner text of the `<h*>` element */
     text?: string;
     /** Optional URL that header points to; when `url` prop is passed to
-     * `Heading`, a child `<a>` element is created and the heading text becomes
-     * an active link */
+     * `Heading`, a child `<a>` element is created and the heading text becomes an
+     * active link */
     url?: string;
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;

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

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export type AriaLiveValues = "assertive" | "off" | "polite" | undefined;
 export type HelperErrorTextType = string | JSX.Element;
 interface HelperErrorTextProps {
@@ -30,5 +30,5 @@ interface HelperErrorTextProps {
  * This pattern guarantees accessibility guidelines are met if the text content
  * is dynamically updated by the app or component that implements it.
  */
-export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HelperErrorTextProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<import("react").ForwardRefExoticComponent<HelperErrorTextProps & import("react").RefAttributes<HTMLDivElement>>, {}>;
 export default HelperErrorText;

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

@@ -11,6 +11,8 @@ export interface LinkProps {
     /** ID used for accessibility purposes. */
     id?: string;
     onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void;
+    /** Visibly hidden text that will only be read by screenreaders. */
+    screenreaderOnlyText?: string;
     /** Prop that sets the HTML attribute to target where the link should go. */
     target?: "_blank" | "_parent" | "_self" | "_top";
     /** Controls the link visuals: action, button, backwards, forwards, or default. */

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

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const textSizesArray: readonly ["default", "caption", "tag", "mini"];
+export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini", "overline1", "overline2", "subtitle1", "subtitle2"];
 export type TextSizes = typeof textSizesArray[number];
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */

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

@@ -9,6 +9,25 @@ export declare const buttonBaseStyle: {
     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;
     };
@@ -47,6 +66,7 @@ export declare const noBrand: ({ buttonSize }: {
     buttonSize?: string;
 }) => any;
 declare const Button: {
+    parts: string[];
     baseStyle: {
         alignItems: string;
         borderRadius: string;
@@ -58,6 +78,25 @@ declare const Button: {
         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;
         };

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

@@ -1,5 +1,5 @@
 export declare const headings: {
-    h1: {
+    one: {
         width: string;
         marginTop: string;
         marginStart: string;
@@ -9,7 +9,7 @@ export declare const headings: {
         letterSpacing: string;
         lineHeight: string;
     };
-    h2: {
+    two: {
         width: string;
         marginTop: string;
         marginStart: string;
@@ -18,7 +18,7 @@ export declare const headings: {
         fontWeight: string;
         lineHeight: string;
     };
-    h3: {
+    three: {
         width: string;
         marginTop: string;
         marginStart: string;
@@ -27,7 +27,7 @@ export declare const headings: {
         fontWeight: string;
         lineHeight: string;
     };
-    h4: {
+    four: {
         width: string;
         marginTop: string;
         marginStart: string;
@@ -45,8 +45,48 @@ export declare const headings: {
         fontWeight: string;
         lineHeight: string;
     };
+    display1: {
+        fontWeight: string;
+        letterSpacing: string;
+        lineHeight: string;
+        width: string;
+    };
+    heading1: {
+        fontWeight: string;
+        letterSpacing: string;
+        lineHeight: string;
+        width: string;
+    };
+    heading2: {
+        fontWeight: string;
+        letterSpacing: string;
+        lineHeight: string;
+        width: string;
+    };
+    heading3: {
+        fontWeight: string;
+        letterSpacing: string;
+        lineHeight: string;
+        width: string;
+    };
+    heading4: {
+        fontWeight: string;
+        lineHeight: string;
+        width: string;
+    };
+    heading5: {
+        fontWeight: string;
+        lineHeight: string;
+        width: string;
+    };
+    heading6: {
+        fontWeight: string;
+        lineHeight: string;
+        width: string;
+    };
 };
 declare const Heading: {
+    parts: string[];
     baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace }: {
         isCapitalized: any;
         isUppercase: any;
@@ -66,14 +106,52 @@ declare const Heading: {
                 };
             };
         };
-        marginBottom: string;
         textTransform: string;
         _dark: {
             color: string;
         };
+        headingWrapper: {
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            marginBottom: string;
+        };
     };
     variants: {
         h1: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        h2: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        h3: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        h4: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
+        h5: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
+        h6: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
+        one: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -83,7 +161,7 @@ declare const Heading: {
             letterSpacing: string;
             lineHeight: string;
         };
-        h2: {
+        two: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -92,7 +170,7 @@ declare const Heading: {
             fontWeight: string;
             lineHeight: string;
         };
-        h3: {
+        three: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -101,7 +179,7 @@ declare const Heading: {
             fontWeight: string;
             lineHeight: string;
         };
-        h4: {
+        four: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -110,7 +188,7 @@ declare const Heading: {
             fontWeight: string;
             lineHeight: string;
         };
-        h5: {
+        five: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -119,7 +197,7 @@ declare const Heading: {
             fontWeight: string;
             lineHeight: string;
         };
-        h6: {
+        six: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -128,6 +206,45 @@ declare const Heading: {
             fontWeight: string;
             lineHeight: string;
         };
+        display1: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading1: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading2: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading3: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading4: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading5: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading6: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
         primary: {
             width: string;
             marginTop: string;

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

@@ -2,14 +2,17 @@ interface HelperErrorTextBaseStyle {
     isInvalid: boolean;
 }
 declare const helperErrorText: {
+    parts: string[];
     baseStyle: ({ isInvalid }: HelperErrorTextBaseStyle) => {
-        marginTop: string;
-        marginBottom: string;
         fontSize: string;
         color: string;
         _dark: {
             color: string;
         };
+        innerChild: {
+            marginTop: string;
+            marginBottom: string;
+        };
     };
 };
 export default helperErrorText;

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

@@ -23,7 +23,7 @@ declare const Link: {
         };
         /** The element will handle descriptive text added to aid
          * screen readers. */
-        srOnly: {
+        screenreaderOnly: {
             clip: string;
             height: {
                 base: string;

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

@@ -6,7 +6,7 @@ interface StructuredContentBaseStyle {
 declare const StructuredContent: {
     parts: string[];
     baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
-        h1: {
+        one: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -16,7 +16,7 @@ declare const StructuredContent: {
             letterSpacing: string;
             lineHeight: string;
         };
-        h2: {
+        two: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -25,7 +25,7 @@ declare const StructuredContent: {
             fontWeight: string;
             lineHeight: string;
         };
-        h3: {
+        three: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -34,7 +34,7 @@ declare const StructuredContent: {
             fontWeight: string;
             lineHeight: string;
         };
-        h4: {
+        four: {
             width: string;
             marginTop: string;
             marginStart: string;
@@ -52,6 +52,45 @@ declare const StructuredContent: {
             fontWeight: string;
             lineHeight: string;
         };
+        display1: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading1: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading2: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading3: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading4: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading5: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading6: {
+            fontWeight: string;
+            lineHeight: string;
+            width: string;
+        };
         imageFigure: {
             marginBottom: string;
             maxWidth?: string;

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

@@ -54,6 +54,12 @@ declare const _default: {
         };
     };
     TemplateContentPrimary: {
+        baseStyle: {
+            gridColumn: {
+                base: string;
+                md: string;
+            };
+        };
         variants: {
             left: {
                 gridColumn: {
@@ -67,6 +73,12 @@ declare const _default: {
                     md: number;
                 };
             };
+            right: {
+                gridColumn: {
+                    base: string;
+                    md: string;
+                };
+            };
         };
     };
     TemplateContentSidebar: {

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

@@ -16,14 +16,43 @@ declare const Text: {
     };
     variants: {
         default: {};
+        body1: {};
+        body2: {
+            fontSize: string;
+        };
         caption: {
             fontSize: string;
+            fontWeight: string;
+        };
+        overline1: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
+            textTransform: string;
+        };
+        overline2: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
+            textTransform: string;
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
         };
         tag: {
             fontSize: string;
+            fontWeight: string;
         };
         mini: {
             fontSize: string;
+            fontWeight: string;
         };
     };
 };

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

@@ -327,6 +327,11 @@ declare const TextInput: {
                 wordWrap: string;
             };
             zIndex: string;
+            _dark: {
+                svg: {
+                    fill: string;
+                };
+            };
         };
     };
     variants: {