@nypl/design-system-react-components 2.1.1 → 2.1.3

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

@@ -10,8 +10,10 @@ export interface AlphabetFilterProps {
     currentLetter?: string;
     /** Value used to set the text for a `Text` component that will be displayed above the letter buttons. */
     descriptionText?: string | JSX.Element;
-    /** Value used to set the text for a `Heading` component. */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Adds the `disabled` prop to the AlphabetFilter when true. */

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

@@ -18,8 +18,10 @@ export interface AudioPlayerProps {
      * or to another domain altogether.
      * TODO: This prop won't be used until a future version.
      */
-    /** Optional string to set the text for a `Heading` component. */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** Optional string to set the text for a `HelperErrorText` component. */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes. */

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

@@ -7,8 +7,10 @@ export interface ComponentWrapperProps {
     className?: string;
     /** Optional string to set the text for the component's description */
     descriptionText?: string | JSX.Element;
-    /** Optional string to set the text for a `Heading` component */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: HelperErrorTextType;
     /** Styles that target the helper text. */

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

@@ -36,6 +36,10 @@ export interface HeroProps {
      * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
      * `Hero` type. Note: not all `Hero` variations utilize this prop. */
     imageProps?: HeroImageProps;
+    /** Optional boolean used to toggle the treatment of the background image in
+     * the "campaign" variant. If true, the background image will be converted to
+     * black & white and darkened to 60% black. */
+    isDarkBackgroundImage?: boolean;
     /** Optional details area that contains location data.
      * Note: not all `Hero` variations utilize this prop. */
     locationDetails?: JSX.Element;

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

@@ -1,4 +1,5 @@
 import React, { ImgHTMLAttributes } from "react";
+import { DimensionTypes } from "../../helpers/types";
 export declare const imageRatiosArray: readonly ["fourByThree", "oneByTwo", "original", "sixteenByNine", "square", "threeByFour", "threeByTwo", "twoByOne"];
 export declare const imageSizesArray: readonly ["default", "xxxsmall", "xxsmall", "xsmall", "small", "medium", "large"];
 export declare const imageTypesArray: readonly ["default", "circle"];
@@ -39,6 +40,8 @@ interface ImageWrapperProps {
     aspectRatio?: ImageRatios;
     /** Optional value to control the size of the image */
     size?: ImageSizes;
+    /** Sets the image size based on the width or height. Width by default. */
+    sizeBasedOn?: DimensionTypes;
 }
 export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLImageElement> {
     /** Optionally pass in additional Chakra-based styles only for the figure. */

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

@@ -6,6 +6,8 @@ export interface LinkProps {
     children: React.ReactNode;
     /** Additional class name to render in the `Link` component. */
     className?: string;
+    /** Used to include or remove visited state styles. Default is true. */
+    hasVisitedState?: boolean;
     /** The `href` attribute for the anchor element. */
     href?: string;
     /** ID used for accessibility purposes. */

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

@@ -21,9 +21,10 @@ export interface ListProps {
     listItems?: (string | JSX.Element | DescriptionProps)[];
     /** Remove list styling. */
     noStyling?: boolean;
-    /** An optional title that will appear over the list. This prop only applies
-     * to Description Lists. */
-    title?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in. This title only applies to
+     * to Description Lists and will render above the list. */
+    title?: string | JSX.Element;
     /** The type of list: "ol", "ul", or "dl". "ul" by default. */
     type: ListTypes;
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { DimensionTypes } from "../../helpers/types";
 import { logoNamesArray, logoSizesArray } from "./logoVariables";
 export type LogoNames = typeof logoNamesArray[number];
 export type LogoSizes = typeof logoSizesArray[number];
@@ -14,6 +15,8 @@ export interface LogoProps {
     name?: LogoNames;
     /** Sets the logo size. */
     size?: LogoSizes;
+    /** Sets the logo size based on the width or height. Width by default. */
+    sizeBasedOn?: DimensionTypes;
     /** For accessibility purposes, the text passed in the `title` prop gets
      * rendered in a `title` element in the SVG. This descriptive text is not
      * visible but is needed for screenreaders to describe the graphic. */

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

@@ -30,8 +30,10 @@ interface NewsletterSignupProps {
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Link to the relevant privacy policy page. */
     privacyPolicyLink?: string;
-    /** Used to populate the title of the Component*/
-    title?: JSX.Element;
+    /** 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. */

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

@@ -10,15 +10,18 @@ interface BaseProps {
     id?: string;
     /** Optional prop to control horizontal alignment of the `Notification` content */
     isCentered?: boolean;
-    /** Content to be rendered in a `NotificationHeading` component. */
-    notificationHeading?: string;
+    /** Optional content to be rendered in a `NotificationHeading` component. A
+     * string value is used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    notificationHeading?: string | JSX.Element;
     /** Optional prop to control the coloring of the `Notification` text and the
      * visibility of an applicable icon. */
     notificationType?: NotificationTypes;
     /** Prop to display the `Notification` icon. Defaults to `true`. */
     showIcon?: boolean;
 }
-type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "notificationHeading" | "showIcon">;
+type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "showIcon">;
 type NotificationContentProps = Omit<BaseProps, "icon">;
 type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 export interface NotificationProps extends BasePropsWithoutAlignText {

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

@@ -19,8 +19,10 @@ export interface SearchBarProps {
     className?: string;
     /** Optional string for the SearchBar's description above the component. */
     descriptionText?: string;
-    /** Optional string for the SearchBar's heading text above the component. */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** The text to display below the form in a `HelperErrorText` component. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */

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

@@ -8,11 +8,13 @@ interface StructuredContentImageProps extends ComponentImageProps {
 }
 export interface StructuredContentProps {
     /** Optional value to set the text for the callout heading text. */
-    calloutText?: string;
+    calloutText?: string | JSX.Element;
     /** Additional class name for the `StructuredContent` component. */
     className?: string;
-    /** Optional value to set the text for the main heading text. */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Object used to create and render the `Image` component. */

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare const autoCompleteValuesArray: readonly ["on", "off", "additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday-day", "bday-month", "bday-year", "bday", "cc-additional-name", "cc-csc", "cc-exp-month", "cc-exp-year", "cc-exp", "cc-family-name", "cc-given-name", "cc-name", "cc-number", "cc-type", "country-name", "country", "current-password", "email", "family-name", "given-name", "honorific-prefix", "honorific-suffix", "impp", "language", "name", "new-password", "nickname", "organization-title", "organization", "photo", "postal-code", "sex", "street-address", "tel-area-code", "tel-country-code", "tel-extension", "tel-local-prefix", "tel-local-suffix", "tel-local", "tel-national", "tel", "transaction-amount", "transaction-currency", "url", "username"];
+export type AutoCompleteValues = typeof autoCompleteValuesArray[number];
 export declare const textInputTypesArray: readonly ["email", "hidden", "number", "password", "text", "textarea", "tel", "url"];
 export type TextInputTypes = typeof textInputTypesArray[number];
 export declare const TextInputFormats: {
@@ -18,6 +20,8 @@ export interface InputProps {
     /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
      * If more than one, separate each with a space */
     additionalHelperTextIds?: string;
+    /** String value used to set the autocomplete attribute. */
+    autoComplete?: AutoCompleteValues;
     /** A class name for the TextInput parent div. */
     className?: string;
     /** The starting value of the input field. */

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

@@ -16,8 +16,10 @@ export interface VideoPlayerProps {
      * `videoPlayer` component will accept the `embedCode` prop or the `videoId`
      * and `videoType` props */
     embedCode?: string;
-    /** Optional string to set the text for a `Heading` component */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */

package/dist/src/helpers/types.d.ts

@@ -1,6 +1,6 @@
 export declare const layoutTypesArray: readonly ["column", "row"];
 export type LayoutTypes = typeof layoutTypesArray[number];
-export declare const sectionDataMap: {
+export declare const sectionColorsDataMap: {
     blogs: {
         primary: string;
         secondary: string;
@@ -48,3 +48,5 @@ export declare const sectionDataMap: {
 };
 export declare const sectionTypeArray: string[];
 export type SectionTypes = typeof sectionTypeArray[number];
+export declare const dimensionTypeArray: readonly ["height", "width"];
+export type DimensionTypes = typeof dimensionTypeArray[number];

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface UseDSHeadingProps {
+    title: string | JSX.Element;
+    id?: string;
+    customDefaultHeading?: string | JSX.Element;
+    additionalStyles?: {
+        [key: string]: any;
+    };
+}
+/**
+ * DS internal helper hook to render a default `h2` heading element if the
+ * passed title is a string. Otherwise, it will return the title as is if it
+ * is a JSX element.
+ */
+declare function useDSHeading({ title, id, customDefaultHeading, additionalStyles, }: UseDSHeadingProps): string | JSX.Element;
+export default useDSHeading;

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

@@ -1,8 +1,10 @@
 /**
  * DS internal helper hook to use state with prop dependencies.
  *
- * This hook should NOT be used by consuming apps. DS components should use this hook rather than useState() whenever
- * a change in state is expected for a given prop from a consuming app. The hook updates the DS component with useEffect().
+ * This hook should NOT be used by consuming apps. DS components should use
+ * this hook rather than useState() whenever a change in state is expected
+ * for a given prop from a consuming app. The hook updates the DS component
+ * with useEffect().
  */
 declare function useStateWithDependencies(initialValue: any): typeof initialValue;
 export default useStateWithDependencies;

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

@@ -120,12 +120,6 @@ declare const _default: {
                             color: string;
                         };
                     };
-                    _visited: {
-                        color: string;
-                        _dark: {
-                            color: string;
-                        };
-                    };
                 };
             };
         } | {
@@ -194,12 +188,6 @@ declare const _default: {
                             color: string;
                         };
                     };
-                    _visited: {
-                        color: string;
-                        _dark: {
-                            color: string;
-                        };
-                    };
                 };
             };
         } | {
@@ -269,12 +257,6 @@ declare const _default: {
                             color: string;
                         };
                     };
-                    _visited: {
-                        color: string;
-                        _dark: {
-                            color: string;
-                        };
-                    };
                 };
             };
         } | {
@@ -341,12 +323,6 @@ declare const _default: {
                             color: string;
                         };
                     };
-                    _visited: {
-                        color: string;
-                        _dark: {
-                            color: string;
-                        };
-                    };
                 };
             };
         };

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

@@ -6,24 +6,32 @@ interface FeaturedContentBaseStyleProps {
 declare const FeaturedContent: {
     baseStyle: ({ imagePosition, imageWidth, isFullWidth, }: FeaturedContentBaseStyleProps) => {
         bgColor: string;
-        _dark: {
-            bgColor: string;
-        };
-        width: string;
         left: string;
-        right: string;
-        position: string;
         marginLeft: string;
         marginRight: string;
+        position: string;
+        right: string;
+        width: string;
+        _dark: {
+            bgColor: string;
+        };
         wrapper: {
-            minHeight: string;
-            maxWidth: string;
-            display: string;
             alignItems: string;
+            display: string;
             flexDirection: {
                 sm: string;
                 md: string;
             };
+            maxWidth: string;
+            minHeight: string;
+            paddingLeft: {
+                base: any;
+                md: string;
+            };
+            paddingRight: {
+                base: any;
+                md: string;
+            };
             marginY: string;
             marginX: string;
             padding: string;
@@ -31,10 +39,19 @@ declare const FeaturedContent: {
         };
         text: {
             display: string;
-            padding: string;
             flex: number;
             flexDirection: string;
             justifyContent: string;
+            padding: string;
+            /** The `paddingLeft` attribute is used to adjust the spacing around the
+             * text when the image is positioned at the end. For aesthetic reasons,
+             * we opted to not adjust the spacing around the text when the image is
+             * positioned at the start.
+             * */
+            paddingStart: {
+                base: any;
+                md: number;
+            };
         };
         imgWrapper: {
             backgroundPosition: string;

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

@@ -135,12 +135,6 @@ declare const Heading: {
                     color: string;
                 };
             };
-            _visited: {
-                color: string;
-                _dark: {
-                    color: string;
-                };
-            };
         };
         color: string;
         textTransform: string;

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

@@ -503,13 +503,8 @@ declare const Hero: {
         };
         campaign: {
             alignItems: string;
-            backgroundSize: string;
-            backgroundPosition: string;
             display: string;
             justifyContent: string;
-            marginBottom: string[];
-            minHeight: string;
-            overflow: string;
             padding: {
                 base: string;
                 md: string;
@@ -534,9 +529,7 @@ declare const Hero: {
                 position: {
                     md: string;
                 };
-                top: {
-                    md: string;
-                };
+                zIndex: number;
                 _dark: {
                     color: string;
                 };