@nypl/design-system-react-components 3.1.1 → 3.1.2

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

@@ -1,10 +1,10 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { ChakraComponent, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
 import React from "react";
 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 {
+export interface HeadingProps extends ChakraHeadingProps {
     /** Optional className that appears in addition to `heading` */
     className?: string;
     /** Optional ID that other components can cross reference for accessibility

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

@@ -4,7 +4,7 @@ import { ComponentImageProps } from "../Image/Image";
 export declare const heroTypesArray: readonly ["primary", "secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn", "tertiary", "campaign", "fiftyFifty"];
 export type HeroTypes = typeof heroTypesArray[number];
 export declare const heroSecondaryTypes: string[];
-export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "src" | "onError"> {
+export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError"> {
 }
 export interface HeroProps {
     /**
@@ -29,6 +29,8 @@ export interface HeroProps {
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
     heroType?: HeroTypes;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Object used to create and render the `Image` component. Note that only
      * `alt`, `component`, and `src` are the available attributes to pass. If
      * `imageProps.alt` is left blank, a warning will be logged to the console and

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

@@ -7,6 +7,8 @@ export interface HorizontalRuleProps {
     align?: "left" | "right";
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
 }
 export declare const HorizontalRule: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<HorizontalRuleProps> & React.RefAttributes<HTMLDivElement & HTMLHRElement>>, React.PropsWithChildren<HorizontalRuleProps>>;
 export default HorizontalRule;

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

@@ -12,6 +12,8 @@ export interface SkeletonLoaderProps {
     /** Optional numeric value to control the number of lines for heading
      * placeholder; default value is `1`. */
     headingSize?: number;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Optional value to control the aspect ratio of the image placeholder;
      * default value is `"square"`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;

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

@@ -1,6 +1,8 @@
 import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TemplateProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
 }
 export interface TemplateHeaderProps {
     /** Flag to render an HTML header element. True by default. */
@@ -41,6 +43,8 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     footer?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateHeader` component section. */
     header?: React.ReactElement;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Render the `SkipNavigation` component or not. False by default. */
     renderSkipNavigation?: boolean;
 }

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

@@ -5,6 +5,8 @@ export type TextSizes = typeof textSizesArray[number];
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
     className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Optional prop used to show bolded text */
     isBold?: boolean;
     /** Optional prop used to show itlicized text */

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

@@ -196,7 +196,7 @@ declare const Button: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "primary" | "secondary" | "callout" | "link" | "text" | "pill" | "iconOnly" | "noBrand";
+        variant?: "link" | "text" | "primary" | "secondary" | "callout" | "pill" | "iconOnly" | "noBrand";
         colorScheme?: string;
     };
     parts: ("base" | "screenreaderOnly")[];

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

@@ -513,7 +513,7 @@ declare const Heading: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "primary" | "secondary" | "tertiary" | "callout" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "one" | "two" | "three" | "four" | "five" | "six";
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
         colorScheme?: string;
     };
     parts: ("base" | "headingWrapper")[];

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

@@ -65,7 +65,7 @@ declare const SkeletonLoader: {
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("base" | "button" | "section" | "content" | "container" | "image" | "heading" | "loader")[];
+            keys: ("base" | "button" | "section" | "image" | "content" | "container" | "heading" | "loader")[];
         }>;
     };
     variants?: {
@@ -113,6 +113,6 @@ declare const SkeletonLoader: {
         variant?: "row";
         colorScheme?: string;
     };
-    parts: ("base" | "button" | "section" | "content" | "container" | "image" | "heading" | "loader")[];
+    parts: ("base" | "button" | "section" | "image" | "content" | "container" | "heading" | "loader")[];
 };
 export default SkeletonLoader;

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

@@ -63,7 +63,7 @@ declare const _default: {
         };
         defaultProps?: {
             size?: string | number;
-            variant?: "left" | "right";
+            variant?: "right" | "left";
             colorScheme?: string;
         };
     };
@@ -119,7 +119,7 @@ declare const _default: {
         };
         defaultProps?: {
             size?: string | number;
-            variant?: "left" | "right";
+            variant?: "right" | "left";
             colorScheme?: string;
         };
     };
@@ -141,7 +141,7 @@ declare const _default: {
         };
         defaultProps?: {
             size?: string | number;
-            variant?: "left" | "right";
+            variant?: "right" | "left";
             colorScheme?: string;
         };
     };

package/package.json

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