@nypl/design-system-react-components 0.25.12 → 0.25.13

package/CHANGELOG.md

@@ -8,9 +8,71 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.13 (April 1, 2022)
+
+### Adds
+
+- Adds a `contentId` prop to the `TemplateAppContainer` component and adds an `id` prop to the `TemplateContent` component. The default value of these `id`s are both set to "mainContent" and it will render as an attribute on the `main` HTML element. This is used as the target for the skip navigation link in consuming applications.
+- Adds an `Accessibility Guide` section to Storybook with a "Skip Navigation" page.
+- Adds the `isFullWidth` prop to the `CheckboxGroup` and `RadioGroup` components. This sets the wrapper element to be full width for labels that need to span its container.
+- Adds an optional key – `accordionType` to the `Accordion`'s `contentData` prop, which allows users to switch the background color of the `Accordion`'s button.
+- Created new `LayoutTypes` enum for row and column layouts.
+- Adds the value "Default" to the `IconSizes` enum.
+
+### Changes
+
+- Updates Storybook's sidebar categories and documentation.
+- Updates the `Image`'s caption font size to "12px" (`text.tag`).
+- Updates the `Checkbox`'s and `Radio`'s `labelText` prop to accept strings and JSX Elements.
+- Updates the `Toggle`'s internal styling for the default and small sizes.
+- Updates the `Accordion` button's background color when expanded, adds a border color when hovered over, and adjusts the padding.
+- Updates the `CardImage`'s margin bottom in the row and column layouts for mobile to be the same.
+- Updates the `CardImage` to have width 100% on mobile regardless of size.
+- Updates all the console warnings with consistent NYPL branding prefix label.
+- Renames the `Accordion` prop `contentData` to `accordionData`.
+- Renames the `Breadcrumbs` prop `colorVariant` to `breadcrumbsType`.
+- Renames the `Card` prop `center` to `isCentered`.
+- Updates the `Card` prop `layout` to use the `LayoutTypes` enum instead of `CardLayouts`.
+- Updates the `CheckboxGroup` prop `layout` to use the `LayoutTypes` enum instead of `CheckboxGroupLayoutTypes`.
+- Renames the `Heading` prop `displaySize` to `size.
+- Renames the `HeadingDisplaySizes` enum to `HeadingSizes.
+- Renames the `Hero` prop `image` to `imageComponent`.
+- Renames the `Image` prop `imageSize` to `size`.
+- Renames the `Notification` prop `centered` to `isCentered`.
+- Updates the `RadioGroup` prop `layout` to use the `LayoutTypes` enum instead of `RadioGroupLayoutTypes`.
+- Internal updates to the `SearchBar` component based on updates from the `Select` and `TextInput` components.
+- Renames the `Select` prop `type` to `selectType`.
+- Updates the `SkeletonLoader` prop `layout` to use the `LayoutTypes` enum instead of `SkeletonLoaderLayouts`.
+- Renames the `StructuredContentImage` prop `imageSize` to `size` (this component is based on the `Image` component).
+- Internal updates to the `StructuredContent` component based on updates from the `Image` and `Heading` components.
+- Renames the `Tabs` prop `contentData` to `tabsData`.
+- Renames the `Text` prop `displaySize` to `size`.
+- Renames the `TextInput` prop `variant` to `textInputType`.
+- Updates the `Card` image-related props into one main prop named `imageProps`. This new prop contains the following properties: alt, aspectRatio, caption, component, credit, isAtEnd, size, and src.
+- Updates the `Hero` prop `image` to `imageAlt` and `imageSrc`. Internally, an `Image` component is created.
+- Renames the `Image` component props `imageAspectRatio` to `aspectRatio`, `imageCaption` to `caption`, and `imageCredit` to `credit`.
+- Updates the `StructuredContent` image-related props into one main prop named `imageProps`. This new prop contains the following properties: alt, aspectRatio, caption, component, credit, position, size, and src.
+- Renames the `ToggleSizes.tsx` file to `ToggleTypes.tsx`. Updates the values from `Large` and `Small` to `Default` and `Small`.
+- Minor update to the logic for the `ProgressIndicator` sizing prop and styles.
+
+### Fixes
+
+- Fixes bug where the Next button in `Pagination` would navigate to the previous page.
+- Fixes the alignment of the first link in the `Pagination` component.
+- Fixes the `Breadcrumbs`' SVG arrow icon fill color for the "Blogs" variant.
+- Fixes the margin right value for list items in the `List` component for the inline style.
+- Fixes bug in the `Select` component where the SVG arrow hides when the component is focused.
+- Fixes the extra bottom spacing in the `HeroTypes.Campaign` `Hero` variant for the mobile view.
+- Fixes the `Slider` component so it doesn't cause a stack overflow client-side issue when updating the slider thumbs through the keyboard arrows. The values are now returned through Chakra's `onChange` callback instead of the `onChangeEnd` callback.
+
+### Removals
+
+- Removes the `CardLayouts`, `CheckboxGroupLayoutTypes`, `RadioGroupLayoutTypes`, and `SkeletonLoaderLayouts` enums.
+- Removes the `CardTypes.tsx`,` CheckboxGroupLayoutTypes.tsx`, and `RadioGroupLayoutTypes.tsx` files.
+
 ## 0.25.12 (March 18, 2022)
 
-## Adds
+### Adds
 
 - Adds `Education` section colors to the color palette theme object.
 - Adds a `currentPage` prop to the `Pagination` component, a value that updates the selected page programmatically without the user explicitly requesting it.

package/dist/components/Accordion/Accordion.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
-export interface AccordionContentDataProps {
+import { AccordionTypes } from "./AccordionTypes";
+export interface AccordionDataProps {
+    accordionType?: AccordionTypes;
     label: string;
     panel: string | React.ReactNode;
 }
 export interface AccordionProps {
-    /** Array of data to display */
-    contentData: AccordionContentDataProps[];
+    /** Array of data to display, and an optional accordionType */
+    accordionData: AccordionDataProps[];
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Whether the accordion is open by default only on its initial rendering */

package/dist/components/Accordion/AccordionTypes.d.ts

@@ -0,0 +1,5 @@
+export declare enum AccordionTypes {
+    Default = "default",
+    Warning = "warning",
+    Error = "error"
+}

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ColorVariants } from "./BreadcrumbsTypes";
+import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
 export interface BreadcrumbsDataProps {
     url: string;
     text: string | React.ReactNode;
@@ -11,12 +11,12 @@ export interface BreadcrumbProps {
     };
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
+    /** Used to control how the `Hero` component will be rendered. */
+    breadcrumbsType?: BreadcrumbsTypes;
     /** className you can add in addition to 'input' */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Used to control how the `Hero` component will be rendered. */
-    colorVariant?: ColorVariants;
 }
 declare function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>): JSX.Element;
 export default Breadcrumbs;

package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts

@@ -1,4 +1,4 @@
-export declare enum ColorVariants {
+export declare enum BreadcrumbsTypes {
     Blogs = "blogs",
     BooksAndMore = "booksAndMore",
     Education = "education",

package/dist/components/Card/Card.d.ts

@@ -1,18 +1,22 @@
 import * as React from "react";
-import { CardLayouts } from "./CardTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import Heading from "../Heading/Heading";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+import { ComponentImageProps } from "../Image/Image";
 interface CardBaseProps {
     /** Optional value to control the alignment of the text and elements. */
-    center?: boolean;
+    isCentered?: boolean;
     /** Optional value to render the layout in a row or column.
-     * Default is `CardLayouts.Column`. */
-    layout?: CardLayouts;
+     * Default is `LayoutTypes.Column`. */
+    layout?: LayoutTypes;
 }
 interface CardLinkBoxProps {
     /** Main link to use when the full `Card` component should be clickable. */
     mainActionLink?: string;
 }
+interface CardImageProps extends ComponentImageProps {
+    /** Optional boolean value to control the position of the `CardImage`. */
+    isAtEnd?: boolean;
+}
 interface CardActionsProps extends CardBaseProps {
     /** Optional boolean value to control visibility of border on the bottom edge
      * of the card actions element */
@@ -33,21 +37,8 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
     foregroundColor?: string;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Text description of the image; to follow best practices for accessibility,
-     * this prop should not be left blank if `imageSrc` is passed. */
-    imageAlt?: string;
-    /** Optional value to control the aspect ratio of the `CardImage`; default
-     * value is `ImageRatios.Square`. */
-    imageAspectRatio?: ImageRatios;
-    /** Optional boolean value to control the position of the `CardImage`. */
-    imageAtEnd?: boolean;
-    /** Custom image component used in place of DS `Image` component. */
-    imageComponent?: JSX.Element;
-    /** Optional value to control the size of the `CardImage`. Default value is
-     * `ImageSizes.Default`. */
-    imageSize?: ImageSizes;
-    /** The path to the image displayed within the `Card` component. */
-    imageSrc?: string;
+    /** Object used to create and render the `Image` component. */
+    imageProps?: CardImageProps;
 }
 export declare const CardHeading: typeof Heading;
 export declare function CardContent(props: React.PropsWithChildren<{}>): JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -27,7 +27,7 @@ export interface CheckboxProps {
     isRequired?: boolean;
     /** The checkbox's label. This will serve as the text content for a `<label>`
      * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
-    labelText: string;
+    labelText: string | JSX.Element;
     /** The name prop indicates into which group of checkboxes this checkbox
      * belongs. If none is specified, 'default' will be used */
     name?: string;

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { LayoutTypes } from "../../helpers/enums";
 export interface CheckboxGroupProps {
     /** Any child node passed to the component. */
     children: React.ReactNode;
@@ -14,6 +14,8 @@ export interface CheckboxGroupProps {
     invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
+    /** Set's the `Checkbox`s' wrapper to be full width. */
+    isFullWidth?: boolean;
     /** A`dds the 'aria-invalid' attribute to the input and
      * sets the error state when true. */
     isInvalid?: boolean;
@@ -23,7 +25,7 @@ export interface CheckboxGroupProps {
      * true, or an "aria-label" if `showLabel` is false. */
     labelText: string;
     /** Renders the checkbox buttons in a row or column (default). */
-    layout?: CheckboxGroupLayoutTypes;
+    layout?: LayoutTypes;
     /** The `name` prop indicates the form group for all the `Checkbox` children. */
     name: string;
     /** The action to perform on the `<input>`'s onChange function  */

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 export interface HeadingProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -7,14 +7,14 @@ export interface HeadingProps {
     };
     /** Optional className that appears in addition to `heading` */
     className?: string;
-    /** Optional size used to override the default styles of the semantic HTM
-     * `<h>` elements */
-    displaySize?: HeadingDisplaySizes;
     /** Optional ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** 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;
     /** Inner text of the `<h*>` element */
     text?: string;
     /** Optional URL that header points to; when `url` prop is passed to

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

@@ -1,4 +1,4 @@
-export declare enum HeadingDisplaySizes {
+export declare enum HeadingSizes {
     Primary = "primary",
     Secondary = "secondary",
     Tertiary = "tertiary",

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

@@ -17,11 +17,14 @@ export interface HeroProps {
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
     heroType?: HeroTypes;
-    /** Optional `Image` component used for SECONDARY, FIFTYFIFTY and CAMPAIGN
-     * `Hero` types; Note: `image` can only be used in conjunction with
-     * `backgroundImageSrc` for CAMPAIGN the `Hero` type.
+    /** Text description of the image; to follow best practices for accessibility,
+     * this prop should not be left blank if `imageSrc` is passed. */
+    imageAlt?: string;
+    /** Optional `imageSrc` used for SECONDARY, FIFTYFIFTY and CAMPAIGN
+     * `Hero` types; Note: `imageSrc` can only be used in conjunction with
+     * `backgroundImageSrc` for the CAMPAIGN `Hero` type.
      * Note: not all `Hero` variations utilize this prop. */
-    image?: JSX.Element;
+    imageSrc?: string;
     /** Optional details area that contains location data.
      * Note: not all `Hero` variations utilize this prop. */
     locationDetails?: JSX.Element;

package/dist/components/Icons/IconTypes.d.ts

@@ -35,6 +35,7 @@ export declare enum IconColors {
     SectionWhatsOnSecondary = "section.whats-on.secondary"
 }
 export declare enum IconSizes {
+    Default = "default",
     Small = "small",
     Medium = "medium",
     Large = "large",

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

@@ -1,5 +1,25 @@
 /// <reference types="react" />
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+export interface ComponentImageProps {
+    /** String value used to populate the `alt` attribute of the internal `Image`
+     * component's `img` element. @NOTE if an image is used, this value must be passed. */
+    alt?: string;
+    /** Optional value to control the aspect ratio of the internal `Image` component.
+     * Defaults to `ImageRatios.Square`. */
+    aspectRatio?: ImageRatios;
+    /** Optional value to render as a caption for the internal `Image` component. */
+    caption?: string;
+    /** Optional DOM element to use instead of the DS `Image` component. */
+    component?: JSX.Element;
+    /** Optional value to render as a credit for the internal `Image` component. */
+    credit?: string;
+    /** Optional value to control the size of the internal `Image` component.
+     * Defaults to `ImageSizes.Medium`. */
+    size?: ImageSizes;
+    /** Optional value that contains the path to an image. If omitted, the internal
+     * DS `Image` component will not render. */
+    src?: string;
+}
 interface ImageWrapperProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalWrapperStyles?: {
@@ -8,9 +28,9 @@ interface ImageWrapperProps {
     /** ClassName you can add in addition to 'image' */
     className?: string;
     /** Optional value to control the aspect ratio of the cartd image; default value is `square` */
-    imageAspectRatio?: ImageRatios;
+    aspectRatio?: ImageRatios;
     /** Optional value to control the size of the image */
-    imageSize?: ImageSizes;
+    size?: ImageSizes;
 }
 export interface ImageProps extends ImageWrapperProps {
     /** Optionally pass in additional Chakra-based styles only for the figure. */
@@ -23,14 +43,12 @@ export interface ImageProps extends ImageWrapperProps {
     };
     /** Alternate text description of the image */
     alt: string;
+    /** Adding will wrap the image in a <figure> */
+    caption?: string;
     /** Custom image component */
     component?: JSX.Element | null;
     /** Adding will wrap the image in a <figure> */
-    imageCaption?: string;
-    /** Adding will wrap the image in a <figure> */
-    imageCredit?: string;
-    /** Optional value to control the size of the image */
-    imageSize?: ImageSizes;
+    credit?: string;
     /** Optional value for the image type */
     imageType?: ImageTypes;
     /** The src attribute is required, and contains the path to the image you want to embed. */

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

@@ -10,11 +10,11 @@ export declare enum ImageRatios {
 }
 export declare enum ImageSizes {
     Default = "default",
-    Large = "large",
-    Medium = "medium",
-    Small = "small",
+    ExtraExtraSmall = "xxsmall",
     ExtraSmall = "xsmall",
-    ExtraExtraSmall = "xxsmall"
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
 }
 export declare enum ImageTypes {
     Default = "default",

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

@@ -4,12 +4,12 @@ export declare enum LogoColors {
     UiWhite = "ui.white"
 }
 export declare enum LogoSizes {
+    Default = "default",
     ExtraExtraSmall = "xxsmall",
     ExtraSmall = "xsmall",
     Small = "small",
     Medium = "medium",
-    Large = "large",
-    Default = "default"
+    Large = "large"
 }
 export declare enum LogoNames {
     BrooklynPublicLibraryBlack = "logo_bpl_black",

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

@@ -3,18 +3,18 @@ import { NotificationTypes } from "./NotificationTypes";
 interface BaseProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
-    /** Optional prop to control horizontal alignment of the `Notification` content */
-    centered?: boolean;
     /** Optional custom `Icon` that will override the default `Icon`. */
     icon?: JSX.Element;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
+    /** Optional prop to control horizontal alignment of the `Notification` content */
+    isCentered?: boolean;
     /** Optional prop to control the coloring of the `Notification` text and the
      * visibility of an applicable icon. */
     notificationType?: NotificationTypes;
 }
 declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
-declare type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+declare type BasePropsWithoutIsCentered = Omit<BaseProps, "isCentered">;
 export interface NotificationProps extends BasePropsWithoutAlignText {
     /** Label used to describe the `Notification`'s aside HTML element. */
     ariaLabel?: string;
@@ -41,7 +41,7 @@ export declare function NotificationHeading(props: React.PropsWithChildren<BaseP
 /**
  * NotificationContent child-component.
  */
-export declare function NotificationContent(props: React.PropsWithChildren<BasePropsWithoutCentered>): JSX.Element;
+export declare function NotificationContent(props: React.PropsWithChildren<BasePropsWithoutIsCentered>): JSX.Element;
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.

package/dist/components/Radio/Radio.d.ts

@@ -28,7 +28,7 @@ export interface RadioProps {
     /** The radio button's label. This will serve as the text content for the
      * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
      * is false. */
-    labelText: string;
+    labelText: string | JSX.Element;
     /** Used to reference the input element in forms. */
     name?: string;
     /** Should be passed along with `isChecked` for controlled components. */

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
+import { LayoutTypes } from "../../helpers/enums";
 export interface RadioGroupProps {
     /** Additional class name. */
     className?: string;
@@ -14,6 +14,8 @@ export interface RadioGroupProps {
     invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
+    /** Set's the `Radio`s' wrapper to be full width. */
+    isFullWidth?: boolean;
     /** Adds the 'aria-invalid' attribute to the input and
      * sets the error state when true. */
     isInvalid?: boolean;
@@ -23,7 +25,7 @@ export interface RadioGroupProps {
      * true, or an "aria-label" if `showLabel` is false. */
     labelText: string;
     /** Renders the Radio buttons in a row or column (default). */
-    layout?: RadioGroupLayoutTypes;
+    layout?: LayoutTypes;
     /** The `name` prop indicates the form group for all the Radio children. */
     name: string;
     /** The action to perform on the `<input>`'s onChange function  */

package/dist/components/Select/Select.d.ts

@@ -33,6 +33,8 @@ export interface SelectProps {
     onChange?: (event: React.FormEvent) => void;
     /** Placeholder text in the select element. */
     placeholder?: string;
+    /** The variant to display. */
+    selectType?: SelectTypes;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the select's label onscreen or hide it. Refer
@@ -40,8 +42,6 @@ export interface SelectProps {
     showLabel?: boolean;
     /** Whether or not to display the "Required"/"Optional" text in the label text. */
     showOptReqLabel?: boolean;
-    /** The variant to display. */
-    type?: SelectTypes;
     /** The value of the selected option.
      * Should be passed along with `onChange` for controlled components. */
     value?: string;

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { SkeletonLoaderImageRatios, SkeletonLoaderLayouts } from "./SkeletonLoaderTypes";
+import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
+import { LayoutTypes } from "../../helpers/enums";
 export interface SkeletonLoaderProps {
     /** Optional boolean value to control visibility of border around skeleton loader. */
     border?: boolean;
@@ -15,8 +16,8 @@ export interface SkeletonLoaderProps {
      * default value is `SkeletonLoaderImageRatios.Square`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;
     /** Optional value to control the position of the image placeholder;
-     * default value is `SkeletonLoaderLayouts.Column`. */
-    layout?: SkeletonLoaderLayouts;
+     * default value is `LayoutTypes.Column`. */
+    layout?: LayoutTypes;
     /** Optional boolean value to control visibility of button placeholder. */
     showButton?: boolean;
     /** Optional boolean value to control visibility of content placeholder. */

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

@@ -1,7 +1,3 @@
-export declare enum SkeletonLoaderLayouts {
-    Row = "row",
-    Column = "column"
-}
 export declare enum SkeletonLoaderImageRatios {
     Landscape = "landscape",
     Portrait = "portrait",

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

@@ -1,6 +1,11 @@
 import * as React from "react";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+import { ComponentImageProps } from "../Image/Image";
 import { StructuredContentImagePosition } from "./StructuredContentTypes";
+interface StructuredContentImageProps extends ComponentImageProps {
+    /** Optional value to control the positioning of the internal `Image` component.
+     * Defaults to `StructuredContentImagePosition.Left`. */
+    position?: StructuredContentImagePosition;
+}
 export interface StructuredContentProps {
     /** Optional value to set the text for the callout heading text. */
     calloutText?: string;
@@ -10,27 +15,8 @@ export interface StructuredContentProps {
     headingText?: string;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** String value used to populate the `alt` attribute of the internal `Image`
-     * component's `img` element. @NOTE if an image is used, this value must be passed. */
-    imageAlt?: string;
-    /** Optional value to control the aspect ratio of the internal `Image` component.
-     * Defaults to `ImageRatios.Square`. */
-    imageAspectRatio?: ImageRatios;
-    /** Optional value to render as a caption for the internal `Image` component. */
-    imageCaption?: string;
-    /** Optional DOM element to use instead of the DS `Image` component. */
-    imageComponent?: JSX.Element;
-    /** Optional value to render as a credit for the internal `Image` component. */
-    imageCredit?: string;
-    /** Optional value to control the positioning of the internal `Image` component.
-     * Defaults to `StructuredContentImagePosition.Left`. */
-    imagePosition?: StructuredContentImagePosition;
-    /** Optional value to control the size of the internal `Image` component.
-     * Defaults to `ImageSizes.Medium`. */
-    imageSize?: ImageSizes;
-    /** Optional value that contains the path to an image. If omitted, the internal
-     * DS `Image` component will not render. */
-    imageSrc?: string;
+    /** Object used to create and render the `Image` component. */
+    imageProps?: StructuredContentImageProps;
     /** Required value to set the text for the body content. */
     bodyContent: string | JSX.Element;
 }
@@ -39,3 +25,4 @@ export interface StructuredContentProps {
  * an image, and body content. All are optional except for body content.
  */
 export default function StructuredContent(props: React.PropsWithChildren<StructuredContentProps>): JSX.Element;
+export {};

package/dist/components/Tabs/Tabs.d.ts

@@ -1,18 +1,18 @@
 import * as React from "react";
 import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
-export interface TabsContentDataProps {
+export interface TabsDataProps {
     label: string;
     content: string | React.ReactNode;
 }
 export interface TabsProps {
-    /** Array of data to display */
-    contentData?: TabsContentDataProps[];
     /** The index of the tab to display for controlled situations. */
     defaultIndex?: number;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** The callback function invoked on every tab change event. */
     onChange?: (index: number) => any;
+    /** Array of data to display */
+    tabsData?: TabsDataProps[];
     /** Render a hash in the url for each tab. Only available when data is
      * passed through the `data` props. */
     useHash?: boolean;

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

@@ -15,6 +15,9 @@ export interface TemplateSidebarProps {
     sidebar?: "none" | "left" | "right";
 }
 export interface TemplateContentProps extends TemplateSidebarProps {
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    id?: string;
 }
 export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateHeaderProps, TemplateSidebarProps {
     /** DOM that will be rendered before the rest of the components in
@@ -22,6 +25,9 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     aboveHeader?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateBreakout` component section. */
     breakout?: React.ReactElement;
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    contentId?: string;
     /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
     contentPrimary?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
@@ -63,11 +69,13 @@ declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWi
 declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
 /**
  * This component is most useful to render content on the page. This renders an
- * HTML `<main>` element and takes a `sidebar` prop with optional "left" or
- * "right" values. This will set the correct styling needed for the
- * `TemplateContentPrimary` and `TemplateContentSidebar` components. Note that
- * `TemplateContentPrimary` and `TemplateContentSidebar` must be ordered
- * correctly as children elements for the appropriate styles to take effect.
+ * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
+ * be used as the consuming application's skip navigation link. The `TemplateContent`
+ * component also takes a `sidebar` prop with optional "left" or "right" values.
+ * This will set the correct *styling* needed for the `TemplateContentPrimary`
+ * and `TemplateContentSidebar` components. Note that `TemplateContentPrimary`
+ * and `TemplateContentSidebar` must be ordered correctly as children elements
+ * for the appropriate styles to take effect.
  */
 declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
 /**

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

@@ -1,16 +1,16 @@
 import * as React from "react";
-import { TextDisplaySizes } from "./TextTypes";
+import { TextSizes } from "./TextTypes";
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
     className?: string;
-    /** Optional prop to control the text styling */
-    displaySize?: TextDisplaySizes;
     /** Optional prop used to show bolded text */
     isBold?: boolean;
     /** Optional prop used to show itlicized text */
     isItalic?: boolean;
     /** Optional prop used to remove default spacing */
     noSpace?: boolean;
+    /** Optional prop to control the text styling */
+    size?: TextSizes;
 }
 declare function Text(props: React.PropsWithChildren<TextProps>): JSX.Element;
 export default Text;

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

@@ -1,4 +1,4 @@
-export declare enum TextDisplaySizes {
+export declare enum TextSizes {
     Default = "default",
     Caption = "caption",
     Tag = "tag",

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

@@ -45,12 +45,12 @@ export interface InputProps {
     showOptReqLabel?: boolean;
     /** The amount to increase or decrease when using the number type. */
     step?: number;
+    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
+    textInputType?: TextInputVariants;
     /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
     type?: TextInputTypes;
     /** Populates the value of the input/textarea elements */
     value?: string;
-    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
-    variantType?: TextInputVariants;
 }
 /**
  * The type used for `ref`s. We want to extend both `input` and `textarea`