@nypl/design-system-react-components 0.25.2 → 0.25.6

package/CHANGELOG.md

@@ -8,6 +8,107 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.6 (December 16, 2021)
+
+### Adds
+
+- Adds export statements for `ProgressIndicator` and `Slider` components to `index.ts`.
+- Adds `Blogs` variant to `Breadcrumbs` component.
+
+### Changes
+
+- Adds "(Required)" text to the placeholder in the `SearchBar` component when `isRequired` is true.
+
+## 0.25.5 (December 9, 2021)
+
+### Fixes
+
+- Updates the Github Action for the Github Pages deployment to use node 12 instead of the default node 16. This caused issues since we now set the node engine to `<=12.22`.
+
+## 0.25.4 (December 9, 2021)
+
+### Adds
+
+- Adds the `ProgressIndicator` component.
+- Adds documentation for using `NYPL Design Tokens`.
+- Adds the `ActionHelpDefault`, `ActionHelpOutline` and `ActionLaunch` icons to the `Icon` component.
+- Adds the DS `Slider` component based on the Chakra `Slider` and `RangeSlider` components.
+- Adds the `ButtonTypes.NoBrand` variant to the `Button` component.
+- Adds the `additionalStyles` prop to the `Breadcrumbs` component.
+
+### Changes
+
+- Updates the organization of SCSS files by deleting some files and combining others.
+- Updates `@chakra-ui/react` to version 1.7.1 and `@chakra-ui/system` to version 1.8.1.
+- Updates the `TextInput` component to now have `defaultValue` and `step` props.
+- Updates `Latest Version` number for `Image`, `Notification` and `Pagination` components.
+- Removes the Storybook "Knobs" addon.
+- Updates the margin for labels in the `DatePicker` component when it is in the "date range" state.
+- Updates the `DatePicker` component to have proper form spacing when in the "date range" state.
+- Updates the `Tabs` component to comply with linting rules -- no functional or visual changes were made.
+- Removes the `alignText` prop from the `Notification` component. Storybook was incorrectly displaying `alignText` as an available prop.
+
+### Fixes
+
+- Exports components and variables that were initially missed when they were added: `ColorVariants`, `Fieldset`, `IconAlign`, `StatusBadgeTypes`,
+- Fixes `SearchBar` by passing necessary props down to its `TextInput` through the `textInputProps` prop.
+- Fixes `DatePicker` component unit tests.
+- Removes the `showLabel` prop from the `SearchBar` component to prevent confusion. Labels for the `Select` and `TextInput` components are never shown but are added through the `aria-label` attribute.
+
+### Breaking Changes
+
+- Updates the breakpoint CSS variable names by adding the `--nypl` prefix and the SCSS variables by adding the `$nypl` prefix. Updates references throughout the codebase.
+- Changes the `Button`'s `disabled` prop to `isDisabled`.
+- Updates npm packages in `package.json`. Removes `cpy-cli`, `react-uid`, `react-is`, `stylelint` and related packages, and `ts-loader` (already added through TSDX). Updates other packages such as `sass-loader`, `prettier`, `jest`, `jest-axe`, and the majority of Storybook addon packages.
+
+### Deprecates
+
+- Deprecates the `Input` component. The `Input` component will be removed from the NYPL Design System React Library in the first release of January 2022.
+- Deprecates the `CardEdition` component. The `CardEdition` component will be removed from the NYPL Design System React Library in the first release of January 2022.
+
+## 0.25.3 (November 18, 2021)
+
+### Adds
+
+- Adds the `ImageRatios`, `ImageSizes`, and `ImageTypes` enums.
+- Composes the DS `Fieldset` component with Chakra. This always renders a `legend` element as its first child but it can be optionally hidden from the screen.
+- Adds the ability to make an entire `Card` component clickable with Chakra's `LinkBox` and `LinkOverlay` components. Links in the `CardActions` component can still be accessed in this state by clicking with the mouse or tabbing and pressing "enter".
+- Adds new file type SVG files to use in the `Icon` component: Audio, Doc, GenericDoc, Image, PDF, Spreadsheet, Video.
+- Adds `ActionCheckCircle` SVG file to use in the `Icon` component.
+
+### Changes
+
+- Updates the Github Action for the changelog reminder.
+- Updates the `Checkbox` component with an "indeterminate" state through the `isIndeterminate` prop.
+- Updates the `CheckboxGroup` component story with an "indeterminate" state example.
+- Updates the `CheckboxGroup` and `RadioGroup` components to use the `Fieldset` component.
+- Updates the `HelperErrorText` and `TextInput` components with added `additionalStyles` prop.
+- Updates the `Button` Style Guide documentation.
+- Updates the `Iconography` Style Guide story documentation.
+- Updates the `Button` font weight to "regular".
+
+### Fixes
+
+- Fixes nondeterministic unit test in the `DatePicker` component.
+- Version of latest `List` component release in its storybook page.
+- Adds validation to the `height` prop in the `HorizontalRule` so percentage values are not used. If a percentage value is used, the default "2px" value is set.
+- Fixes styling issues for the `Notification` dismissible button.
+- Fixes `SearchBar` mobile styling for the `Select`, `TextInput`, and `Button` components.
+- Fixes `SearchBar` focus flicker when the `Select` component is selected.
+
+### Breaking Changes
+
+- Updates the `Notification` component to fix the custom icon alignment.
+- Adds the `title` prop to the `Icon` component to render a `title` HTML element for accessible SVG icons.
+- Updates the default font size of the `Button` component to `"-1"` (14px) for all variants except the `Link` variant. Removes the `bem` function from internal use and makes it clearer that the `ButtonGroup` Chakra component is exported in the Design System.
+- Updates the `errorText` prop to `invalidText` for the `Checkbox` component.
+- Composes the DS `Pagination` component with Chakra. Removes the BEM-related props and updates the `currentPage` prop to `initialPage`. The current selected page is now kept in state inside the `Pagination` component and returned to the user through `getPageHref` or `onPageChange`. This also adds better aria attributes to the list inside the `Pagination` component.
+- Composes the DS `Image` component with Chakra styling and updates all `Image` references in other DS components. The `attributes` prop and the BEM related props `blockname` and `modifiers` have been removed. Adds the following new props: `additionalStyles`, `component`, `imageAspectRatio`, `imageSize`, `imageType`.
+- Composes the DS `Card` component with Chakra. BEM related props `modifiers` and `blockname` have been removed. Replaces the `CardImageRatios` with `ImageRatios`. Removes the `CardImageSizes` enum.
+- Composes the DS `DatePicker` component with Chakra. Adds more tests, documentation, and examples. This component now uses the `Fieldset` component for the date range type, and better `Form` components for layout. Prop name changes: `dateRange` is now `isDateRange` and `required` is now `isRequired`. BEM related props `modifiers` and `blockname` have been removed. The "Required"/"Optional" text in the date range legend can now be hidden with the `showOptReqLabel` prop.
+- Composes the DS `SkeletonLoader` with Chakra's `Skeleton` component. BEM related prop `modifiers` has been removed. Chakra's default `Skeleton` styles have been updated with NYPL's theme.
+- Removes deprecated CSS variables. Now the DS repo only uses the CSS variables exposed by Chakra that contain the `--nypl` prefix.
+
 ## 0.25.2 (October 28, 2021)
 
 ### Adds

package/README.md

@@ -19,11 +19,11 @@ Storybook documentation
 | 2.                | [Developing with NPM Link](#developing-with-npm-link)                               |
 | 3.                | [Using the Design System in Your Product](#using-the-design-system-in-your-product) |
 | 4.                | [Using Chakra UI Components](#using-chakra-ui-components)                           |
-| 5.                | [CDN](#cdn)                                                                         |
-| 6.                | [Accessibility Product Requirements](#accessibility-product-requirements)           |
-| 7.                | [Storybook](#storybook)                                                             |
-| 8.                | [Typescript Usage](#typescript-usage)                                               |
-| 9.                | [Unit Testing](#unit-testing)                                                       |
+| 5.                | [Storybook](#storybook)                                                             |
+| 6.                | [Typescript Usage](#typescript-usage)                                               |
+| 7.                | [Unit Testing](#unit-testing)                                                       |
+| 8.                | [Accessibility](#accessibility)                                                     |
+| 9.                | [CDN](#cdn)                                                                         |
 
 ## Contributing Quickstart
 
@@ -53,6 +53,12 @@ Information about active maintainers, how we run reviews, and more can be found
 
 Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branching convetions, component creation and update guidelines, testing methodoly, and documentation guidelines.
 
+### Node Version
+
+We recommend using Node version 12.22.x since the DS has some issues with versions higher than 12.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 12.x.
+
+If you are using `nvm`, the local `.nvmrc` file can be use to set your local Node version with the `nvm use` command (will be set to `12.22.x`).
+
 ## Developing with NPM Link
 
 To develop with a local version of the Design System:
@@ -220,12 +226,6 @@ If you need to reference a particular version you can do do by including the ver
 
 You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).
 
-## Accessibility Product Requirements
-
-The NYPL Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
-
-NYPL's Metronome instance is currently password protected. For access to Metronome, please contact NYPL's UX team or Design System team.
-
 ## Storybook
 
 The NYPL Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation can be found [here](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). For your convenience, the NYPL Design System components have been organized into logical categories based on both form and function. Please refer to the COMPONENTS section in the Storybook sidebar.
@@ -366,3 +366,39 @@ Each snapshot file also includes a link to its [Jest Snapshot documentation](htt
 Through the [`@storybook/addon-jest`](https://www.npmjs.com/package/@storybook/addon-jest) plugin, we can see a component's suite of unit tests right Storybook. In the "Addons" panel, a "Test" tab will display all the tests for the current component and whether they pass or fail.
 
 After writing new tests, run `npm run test:generate-output` to create a new JSON file that is used by Storybook. This JSON file contains all the test suites for all the components and Storybook picks this up and automatically combines a component with its relevant unit tests. Make sure to commit this file although new builds on Github Pages will recreate this file for the production Storybook instance.
+
+## Accessibility
+
+### Development and Storybook
+
+The NYPL Design System is built with accessibility in mind. By using Chakra UI as our foundational base, the custom DS components built with Chakra have accessibility concerns already implemented. On top of built-in accessible elements, DS components internally work to link labels with input elements, to add correct `aria-*` attributes, to visually hide text but still associate it with the correct element for titles and descriptions, to auto-generate a random `id` attribute if none was passed, and much more.
+
+We make use of:
+
+- `eslint-plugin-jsx-a11y` for finding accessibility errors through linting and through IDE environments.
+- `jest-axe` for running [`axe-core`](https://github.com/dequelabs/axe-core) on _every_ component's unit test file. This is part of the automated tests that run in Github Actions through the `npm test` command.
+- `@storybook/addon-a11y` for real-time accessibility testing in the browser through Storybook. _Every_ component has a tab that displays violations, passes, and incomplete checks performed by `axe-core`.
+
+If applicable, DS components have section(s) on accessibility in their Storybook documentation. For example, in the `Slider`'s [Storybook file](/src/components/Slider/Slider.stories.mdx), there are two "Accessibility" sections for each of the two `Slider` types, "single" and "range". This gives an explanation on additional changes we made to make the combination of elements in the `Slider` component accessible.
+
+### Product Requirements
+
+The NYPL Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
+
+NYPL's Metronome instance is currently password protected. For access to Metronome, please contact NYPL's UX team or Design System team.
+
+## CDN
+
+You can also use the Design System styles in your project through the `unpkg` CDN:
+
+```jsx
+<link href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css">
+```
+
+If you need to reference a particular version you can do do by including the version number in the URL:
+
+```jsx
+<link href="https://unpkg.com/@nypl/design-system-react-components@0.9.1/dist/styles.css">
+```
+
+You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).

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

@@ -5,6 +5,10 @@ export interface BreadcrumbsDataProps {
     text: string | React.ReactNode;
 }
 export interface BreadcrumbProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
     /** className you can add in addition to 'input' */

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

@@ -1,4 +1,5 @@
 export declare enum ColorVariants {
+    Blogs = "blogs",
     BooksAndMore = "booksAndMore",
     Locations = "locations",
     Research = "research",

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ButtonGroup } from "@chakra-ui/react";
 import { ButtonTypes } from "./ButtonTypes";
 declare type ButtonElementType = "submit" | "button" | "reset";
 interface ButtonProps {
@@ -13,20 +12,22 @@ interface ButtonProps {
     };
     /** The kind of button assigned through the `ButtonTypes` enum  */
     buttonType?: ButtonTypes;
-    /** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+    /** Additional className to use. */
     className?: string;
-    /** Adds 'disabled' property to the button */
-    disabled?: boolean;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Trigger the Button's action through the `mouseDown` event handler instead of `onClick`. `false` by default. */
+    /** Adds 'disabled' property to the button */
+    isDisabled?: boolean;
+    /** Trigger the Button's action through the `mouseDown` event handler instead
+     * of `onClick`. `false` by default. */
     mouseDown?: boolean;
     /** The action to perform on the `<button>`'s onClick function */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /** The html button attribute */
+    /** The HTML button type attribute. */
     type?: ButtonElementType;
 }
-/** Renders a simple `button` element with custom classes and modifiers. */
+/**
+ * Renders a simple `button` element with custom variant styles.
+ */
 declare function Button(props: React.PropsWithChildren<ButtonProps>): JSX.Element;
-export { ButtonGroup };
 export default Button;

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

@@ -4,5 +4,6 @@ export declare enum ButtonTypes {
     Callout = "callout",
     Pill = "pill",
     Link = "link",
-    SearchBar = "searchBar"
+    SearchBar = "searchBar",
+    NoBrand = "noBrand"
 }

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

@@ -1,70 +1,54 @@
 import * as React from "react";
-import { CardImageRatios, CardImageSizes, CardLayouts } from "./CardTypes";
-interface CardImageProps {
-    /** Text description of the image */
-    alt: string;
-    /** Custom image component used in place of DS `Image` component */
-    component?: React.ReactNode;
-    /** 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?: CardImageRatios;
-    /** Optional value to control the size of the card image */
-    imageSize?: CardImageSizes;
-    /** The src attribute is required, and contains the path to the image you want to embed. */
-    src: string;
+import { CardLayouts } from "./CardTypes";
+import Heading from "../Heading/Heading";
+import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+interface CardBaseProps {
+    /** Optional value to control the alignment of the text and elements. */
+    center?: boolean;
+    /** Optional value to render the layout in a row or column (default). */
+    layout?: CardLayouts;
 }
-interface CardContentProps {
-    /** Optional className that would be applied to the `card-content` element */
-    className?: string;
+interface CardLinkBoxProps {
+    /** Main link to use when the full `Card` component should be clickable. */
+    mainActionLink?: string;
 }
-interface CardActionsProps {
-    /** Optional boolean value to control visibility of border on the bottom edge of the card actions element */
+interface CardActionsProps extends CardBaseProps {
+    /** Optional boolean value to control visibility of border on the bottom edge
+     * of the card actions element */
     bottomBorder?: boolean;
-    /** Optional className that would be applied to the `card-actions` element */
-    className?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional boolean value to control visibility of border on the top edge of the card actions element */
+    /** Optional boolean value to control visibility of border on the top edge of
+     * the card actions element */
     topBorder?: boolean;
 }
-export interface CardProps {
-    /** Optional hex color value used to set the card background color */
+export interface CardProps extends CardBaseProps, CardLinkBoxProps {
+    /** Optional hex color value used to set the card background color. */
     backgroundColor?: string;
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Optional boolean value to control the visibility of a border around the card */
+    /** Optional boolean value to control the visibility of a border around
+     * the card. */
     border?: boolean;
-    /** Optional boolean value to control the alignment of the text and elements within the card */
-    center?: boolean;
-    /** ClassName that appears in addition to "card" */
+    /** Optional CSS class name to add. */
     className?: string;
-    /** Optional hex color value used to override the default text color */
+    /** Optional hex color value used to override the default text color. */
     foregroundColor?: string;
-    /** ID that other components can cross reference for accessibility purposes */
+    /** 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 */
+    /** 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 card image; default value is `square` */
-    imageAspectRatio?: CardImageRatios;
-    /** Optional boolean value to control the position of the card image */
+    /** Optional value to control the aspect ratio of the `CardIage`; default
+     * value is `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?: React.ReactNode;
-    /** Optional value to control the size of the card image */
-    imageSize?: CardImageSizes;
-    /** The path to the image displayed with the card */
+    /** Custom image component used in place of DS `Image` component. */
+    imageComponent?: JSX.Element;
+    /** Optional value to control the size of the `CardImage`. */
+    imageSize?: ImageSizes;
+    /** The path to the image displayed within the `Card` component. */
     imageSrc?: string;
-    /** Optional value to control the position of the image placeholder; default value is `column` */
-    layout?: CardLayouts;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional padding value.  This value should be entered with the same formatting as a CSS padding attribute (ex. `5%`, `20px`, `2rem`).  If omitted, the Card will use the default padding. */
-    padding?: string;
 }
-export declare function CardImage(props: React.PropsWithChildren<CardImageProps>): JSX.Element;
-export declare const CardHeading: (props: any) => JSX.Element;
-export declare function CardContent(props: React.PropsWithChildren<CardContentProps>): JSX.Element;
+export declare const CardHeading: typeof Heading;
+export declare function CardContent(props: React.PropsWithChildren<{}>): JSX.Element;
 export declare function CardActions(props: React.PropsWithChildren<CardActionsProps>): JSX.Element;
 export default function Card(props: React.PropsWithChildren<CardProps>): JSX.Element;
 export {};

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

@@ -2,18 +2,3 @@ export declare enum CardLayouts {
     Row = "row",
     Column = "column"
 }
-export declare enum CardImageRatios {
-    FourByThree = "four-by-three",
-    OneByTwo = "one-by-two",
-    Original = "original",
-    SixteenByNine = "sixteen-by-nine",
-    Square = "square",
-    ThreeByFour = "three-by-four",
-    ThreeByTwo = "three-by-two",
-    TwoByOne = "two-by-one"
-}
-export declare enum CardImageSizes {
-    Large = "large",
-    Medium = "medium",
-    Small = "small"
-}

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

@@ -2,26 +2,25 @@ import * as React from "react";
 export interface CheckboxProps {
     /** className you can add in addition to 'input' */
     className?: string;
-    /** Optional string to populate the HelperErrorText for the error state
-     * when `isInvalid` is true.
-     */
-    errorText?: string;
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Optional string to populate the HelperErrorText for the error state
+     * when `isInvalid` is true. */
+    invalidText?: string;
     /** When using the Checkbox as a "controlled" form element, you can specify
      * the Checkbox's checked state using this prop.
      * Learn more about controlled and uncontrolled form fields:
      * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
     isChecked?: boolean;
     /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-     * This also makes the text italic and color scheme gray.
-     */
+     * This also makes the text italic and color scheme gray. */
     isDisabled?: boolean;
+    /** Adds the indeterminate state to the `Checkbox`. */
+    isIndeterminate?: boolean;
     /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-     * the color theme "NYPL error" red for the button and text.
-     */
+     * the color theme "NYPL error" red for the button and text. */
     isInvalid?: boolean;
     /** Adds the 'required' attribute to the input when true. */
     isRequired?: boolean;
@@ -29,7 +28,7 @@ export interface CheckboxProps {
      * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
     labelText: string;
     /** The name prop indicates into which group of checkboxes this checkbox
-     * belongs.  If none is specified, 'default' will be used */
+     * belongs. If none is specified, 'default' will be used */
     name?: string;
     /** The action to perform on the `<input>`'s onChange function  */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -5,12 +5,12 @@ export interface CheckboxGroupProps {
     children: React.ReactNode;
     /** Populates the initial value of the input */
     defaultValue?: string[];
-    /** Optional string to populate the HelperErrorText for error state */
-    invalidText?: string;
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Optional string to populate the HelperErrorText for error state */
+    invalidText?: string;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
     /** A`dds the 'aria-invalid' attribute to the input and

package/dist/components/DatePicker/DatePicker.d.ts

@@ -2,29 +2,36 @@ import React from "react";
 import { DatePickerTypes } from "./DatePickerTypes";
 import { TextInputRefType } from "../TextInput/TextInput";
 interface FullDateType {
-    startDate: Date;
+    /** Date object that gets returned for the onChange
+     * function only for date ranges. */
     endDate?: Date;
+    /** Date object that gets returned for the onChange function. */
+    startDate: Date;
 }
 interface DateRangeRowProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Whether to render a single date input or two for a range of two dates. */
-    dateRange?: boolean;
+    isDateRange?: boolean;
 }
 interface DatePickerWrapperProps extends DateRangeRowProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    /** Additional className. */
+    className?: string;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
     /** Passed to the `TextInput` component to render a label associated with an input field. */
     labelText: string;
     /** Offers the ability to show the label onscreen or hide it. */
     showLabel?: boolean;
-    /** Additional className for use with BEM. See how to work with blockNames and
-     * BEM here: http://getbem.com/introduction/ */
-    className?: string;
+    /** Whether or not to display the "Required"/"Optional" text in the label text. */
+    showOptReqLabel?: boolean;
 }
 export interface DatePickerProps extends DatePickerWrapperProps {
+    /** The date format to display. Defaults to "yyyy-MM-dd".
+     * Must be in ISO-8601 format. */
+    dateFormat?: string;
     /** DatePicker date types that can be rendered. */
     dateType?: DatePickerTypes;
-    /** The date format to display. Defaults to "yyyy-MM-dd". */
-    dateFormat?: string;
     /** Populates the `HelperErrorText` component in this component. */
     helperText?: string;
     /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
@@ -34,45 +41,38 @@ export interface DatePickerProps extends DatePickerWrapperProps {
     /** The initial date value. This must be in the mm/dd/yyyy format. */
     initialDate?: string;
     /** The initialTo date value used for date ranges.
-     * This must be in the mm/dd/yyyy format.
-     */
+     * This must be in the mm/dd/yyyy format. */
     initialDateTo?: string;
-    /** The minimum date value that applies to both input fields.
-     * This must be in the mm/dd/yyyy format.
-     */
-    minDate?: string;
-    /** The maximum date value that applies to both input fields.
-     * This must be in the mm/dd/yyyy format.
-     */
-    maxDate?: string;
-    /** Populates the `HelperErrorText` error state for both "From" and "To" input components. */
+    /** Populates the `HelperErrorText` error state for both "From"
+     * and "To" input components. */
     invalidText?: string;
-    /** Helper for modifiers array; adds 'isInvalid' styling. */
-    isInvalid?: boolean;
-    /** Adds the 'required' property to the input element(s). */
-    required?: boolean;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** Whether or not to display the "Required"/"Optional" text in the label text. */
-    showOptReqLabel?: boolean;
     /** Adds the 'disabled' property to the input element(s). */
     isDisabled?: boolean;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM
-     * here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** BlockName for use with BEM. See how to work with blockNames and BEM
-     * here: http://getbem.com/introduction/ */
-    blockName?: string;
+    /** Adds 'isInvalid' styling. */
+    isInvalid?: boolean;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
+    /** The maximum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    maxDate?: string;
+    /** The minimum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    minDate?: string;
     /** Value name for the single input field or the "From" input field in a date range. */
     nameFrom?: string;
     /** Value name for the "To" input field */
     nameTo?: string;
-    /** An additional explicit React ref passed for a date range's "From" input field. */
-    refTo?: React.Ref<TextInputRefType>;
     /** The action to perform on the `input`'s onChange function for both fields.
      * This will return the data in an object with `startDate` and `endDate` keys.
      */
     onChange?: (data: FullDateType) => void;
+    /** An additional explicit React ref passed for a date range's "To"
+     * input field. Note that the "From" input takes the initial "ref" value. */
+    refTo?: React.Ref<TextInputRefType>;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Whether or not to display the "Required"/"Optional" text in the label text. */
+    showOptReqLabel?: boolean;
 }
 /**
  * Returns a single date input field or two date input fields for a date range.

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+interface FieldsetProps {
+    /** Children to render. Typically form-related components are used. */
+    children: React.ReactNode;
+    /** Additional class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Flag to show or hide the text in the `legend` element. False by default. */
+    isLegendHidden?: boolean;
+    /** Flag to render "Required" or "Optional" in the `legend`.
+     * False/"Optional" by default. */
+    isRequired?: boolean;
+    /** Text to display in the `legend` element. */
+    legendText?: string;
+    /** Flag to show or hide the "Required"/"Optional" text in the `legend`.
+     * True by default. */
+    optReqFlag?: boolean;
+}
+/**
+ * A wrapper component that renders a `fieldset` element along with a `legend`
+ * element as its first child. Commonly used to wrap form components.
+ */
+declare const Fieldset: React.FC<FieldsetProps>;
+export default Fieldset;

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

@@ -1,6 +1,10 @@
 import * as React from "react";
 export declare type AriaLiveValues = "assertive" | "off" | "polite";
 interface HelperErrorTextProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** Aria attribute. When true, assistive technologies will
      * read the entire DOM element. When false, only changes (additionals or
      * removals) will be read. True by default. */

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

@@ -1,12 +1,19 @@
 import * as React from "react";
 export interface HorizontalRuleProps {
-    /** Optional alignment value to align the horizontal rule to one side or the other when the width is less than 100%. If omitted, the horizobntal rule will have a default center alignment. */
+    /** Optional alignment value to align the horizontal rule to one side or the
+     * other when the width is less than 100%. If omitted, the horizontal rule
+     * will have a default center alignment. */
     align?: "left" | "right";
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
-    /** Optional height value.  This value should be entered with the same formatting as a CSS height attribute (ex. `2%`, `5px`, `1.5rem`).  If omitted, the horizobntal rule will have a default height of 2px. */
+    /** Optional height value. This value should be entered with the same
+     * formatting as a CSS height attribute except for percent values (ex. `2`,
+     * `5px`, `1.5rem`). If this prop is omitted or a percent value is used, the
+     * horizontal rule will have a default height of 2px. */
     height?: string;
-    /** Optional width value.  This value should be entered with the same formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).  If omitted, the horizobntal rule will have a default width of 100%. */
+    /** Optional width value. This value should be entered with the same
+     * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
+     * omitted, the horizontal rule will have a default width of "auto". */
     width?: string;
 }
 export default function HorizontalRule(props: React.ComponentProps<"hr"> & HorizontalRuleProps): JSX.Element;

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

@@ -22,6 +22,10 @@ export interface IconProps {
     name?: IconNames | LogoNames;
     /** Sets the icon size. */
     size?: IconSizes;
+    /** 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. */
+    title?: string;
     /** Sets the icon variant type. */
     type?: IconTypes;
 }