@nypl/design-system-react-components 0.23.4 → 0.25.1

package/CHANGELOG.md

@@ -8,6 +8,103 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.1 (October 14, 2021)
+
+### Adds
+
+- Updates the `Accordion` component to internally use Chakra components.
+- Adds DS `SimpleGrid` component composed from Chakra's `Simplegrid` component.
+- Adds DS `Text` component composed from Chakra's `Text` component.
+- Update the NYPL Colors with updated color names and values.
+- Composes the DS `TextInput` component from Chakra's `Input` and `Textarea` components.
+- Composes the DS `Select` component from Chakra's `Select` component.
+- Composes the DS `Hero` component from Chakra's component.
+- Composes the DS `CheckboxGroup` component from Chakra's `CheckboxGroup` component.
+- Composes the DS "Template" components (`Template`, `TemplateHeader`, `TemplateBreakout`, `TemplateContent`, `TemplateContentPrimary`, `TemplateContentSidebar`, `TemplateFooter`) from Chakra's `Box` component for page layouts through children components.
+- Composes the DS `TemplateAppContainer` component from Chakra's `Box` component for page layouts through props.
+- Composes the DS `Link` component with Chakra component and fixes the `Button` type.
+- Exports Chakra's `Grid` and `GridItem` components.
+- Composes the DS `Label` component with Chakra component and updates the font size.
+- Composes the DS `StatusBadge` component from Chakra's component.
+- Composes the DS `Forms` component using DS and Chakra components.
+- Composes the DS `Icon` component with Chakra's `Icon` component. Added new props for `Icon` sizing, alignment, name, and rotation.
+- Composes the DS `SearchBar` component from DS `Select`, `TextInput`, `Button`, and `HelperErrorText` components.
+- Composes the DS `Breadcrumbs` component from Chakra's `Breadcumb`, `BreadcrumbItem` and `BreadcrumbLink` components.
+
+### Changes
+
+- Updates spacing values to use NYPL spacing rather than "em"s.
+- Updates the `SkeletonLoaderLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
+- Updates the `CardLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
+- Updates font size of the `legend` element used in `CheckboxGroup`, `DatePicker` and `RadioGroup`.
+
+## 0.25.0
+
+### Breaking Changes
+
+- Renames `HeadingDisplaySizes.tsx` to `HeadingTypes.tsx`.
+
+### Adds
+
+- Integrates Chakra-UI into the codebase.
+- Moved SCSS and CSS variable styles into a custom NYPL theme to extend Chakra's base theme.
+- Adds `DSProvider` component to use the NYPL theme in consuming applications.
+- Exports Chakra's `Box`, `Center`, `Circle`, `Square`, `Stack`, `HStack`, and `VStack` components.
+- Composes the DS `Button` component from Chakra's `Button` component.
+- Composes the DS `Heading` component from Chakra's `Heading` component.
+- Composes the DS `Tabs` component from Chakra's `Tabs`, `TabList`, `Tab`, `TabPanels`, and `TabPanel` components.
+- Composes the DS `Radio` component from Chakra's `Radio` component.
+- Composes the DS `RadioGroup` component from Chakra's `RadioGroup` component.
+- Composes the DS `Checkbox` component from Chakra's `Checkbox` component.
+- Updates the `errorText` prop name to `invalidText`.
+
+### Removes
+
+- Removes the `color-classes` SCSS mixin.
+
+### Changes
+
+- Updates the development preview URL from the Netlify link to the Tugboat QA link.
+
+## 0.24.1
+
+### Adds
+
+- Adds `FormSpacing` enum to DS exports.
+- Adds `utility_account_filled`, `utility_account_unfilled`, `utility_hamburger` and `utility_search` icons to `Icon` component.
+
+### Changes
+
+- Updates `General Guidelines` for `Buttons Style Guide`.
+
+### Fixes
+
+- Fixes left padding on `Card` when `imageAtEnd` and `border` are both `true`.
+
+## 0.24.0
+
+### Breaking Changes
+
+- Renames original `Card` components to be `CardEdition`.
+
+### Adds
+
+- Adds the `DatePicker` component.
+- Adds new `Card` component.
+- Adds `spacing` prop to `Form` component to allow for spacing variations.
+- Adds Style Guide `Forms`
+
+### Changes
+
+- Exports `VideoPlayerAspectRatios`.
+- Adds additional props for the `DatePicker` component based on its TAD Addendum section.
+- Adds Tugboat QA configuration for PR preview deployments to replace Netlify.
+- Updates the `DatePicker`, `TextInput`, `Select`, and `Label` components to pass an optional `showOptReqLabel` prop to conditionally render "Required"/"Optional" in the label text.
+
+### Fixes
+
+- Fixes Accordion FAQ Storybook example rendering bug.
+
 ## 0.23.4
 
 ### Adds
@@ -132,7 +229,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Removes `--ui-success` CSS variable and adds `--ui-success-primary` and `--ui-success-secondary`
 - Removes `checkboxId` prop from `Checkbox` component and employs `id` in its place.
 - Removes `defaultChecked` prop from `Checkbox` component.
-- Removed `labelOptions` porp from `Checkbox` component and employs `labelText` in its place.
+- Removed `labelOptions` prop from `Checkbox` component and employs `labelText` in its place.
 
 ### Changes
 

package/README.md

@@ -9,18 +9,19 @@ The NYPL Design System (DS) is NYPL’s open-source extensible React library for
 Storybook documentation
 
 - [Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page)
-- [Development - deployed to Netlify](https://nypl-design-system-dev.netlify.app/?path=/story/introduction--page)
+- [Development - deployed to Tugboat QA](https://development-6y1v6na1ceqnmojvc5akrm5ewys3cshs.tugboat.qa/?path=/story/introduction--page)
 
 | Table of Contents |                                                                                     |
 | ----------------- | ----------------------------------------------------------------------------------- |
 | 1.                | [Contributing Quickstart](#contributing-quickstart)                                 |
 | 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.                | [CDN](#cdn)                                                                         |
-| 5.                | [Accessibility Product Requirements](#accessibility-product-requirements)           |
-| 6.                | [Storybook](#storybook)                                                             |
-| 7.                | [Typescript Usage](#typescript-usage)                                               |
-| 8.                | [Unit Testing](#unit-testing)                                                       |
+| 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)                                                       |
 
 ## Contributing Quickstart
 
@@ -142,6 +143,30 @@ Some CSS rules in the Design System, such as the universal focus styling and the
 </div>
 ```
 
+4. Import the `DSProvider` component
+
+While the Chakra UI integration into the DS is a work-in-progress, there is one necessary step consuming applications need to take for component styles to properly render. In order render styles properly, consuming applications need to wrap all the DS components with a simple provider component. Fortunately, this only needs to be done once at the top level of the consuming application.
+
+Once the following is completed, DS components that internally use Chakra UI will render styles properly.
+
+```jsx
+// your main application file
+import { DSProvider } from "@nypl/design-system-react-components";
+
+// ...
+const ApplicationContainer = (props) => {
+  // ...
+  return (
+    <DSProvider>
+      <div className="my-app nypl-ds">
+        // ...
+        {children}
+      </div>
+    </DSProvider>
+  );
+};
+```
+
 ### NYPL DS, NYPL Header, and NYPL Footer
 
 Please note that the NYPL Header and Footer should be _outside_ of the `.nypl-ds` wrapper class.
@@ -158,6 +183,16 @@ Please note that the NYPL Header and Footer should be _outside_ of the `.nypl-ds
 </body>
 ```
 
+## Using Chakra UI Components
+
+The Chakra UI component library is integrated into the NYPL Design System and is currently a work-in-progress. We
+are in the middle of the process of using Chakra components and patterns to build DS components, and therefore documentation and features are expected to change. While the implementation details of DS components will use Chakra, the DS package itself will export _some_ Chakra components.
+
+The list of re-exported Chakra components can be found in the main
+[index.ts](/index.ts) file.
+
+Find more information about the Design System's use of [Chakra](/src/docs/Chakra.stories.mdx).
+
 ## CDN
 
 You can also use the Design System styles in your project through the `unpkg` CDN:
@@ -182,7 +217,7 @@ NYPL's Metronome instance is currently password protected. For access to Metrono
 
 ## Storybook
 
-The NYPL Design System leverages Storybook to document all the React components and style guidelines.
+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.
 
 ### Documentation Instances
 
@@ -196,11 +231,11 @@ As of July, 2021, the Github Pages production site gets deployed every two weeks
 
 **Development**
 
-The development Storybook documentation is deployed to [Netlify](https://nypl-design-system-dev.netlify.app/?path=/story/introduction--page). This development site has all the working updates that get merged to the `development` branch. This means that this site is constantly being updated as pull requests are being merged in. This site is used to see the lastest changes during a working sprint before a production release is made.
+The development Storybook documentation is deployed to [Tugboat QA](https://development-6y1v6na1ceqnmojvc5akrm5ewys3cshs.tugboat.qa/?path=/story/introduction--page). This development site has all the working updates that get merged to the `development` branch. This means that this site is constantly being updated as pull requests are being merged in. This site is used to see the lastest changes during a working sprint before a production release is made.
 
 **Preview Sites**
 
-Preview Storybook documentation sites are deployed to Netlify for every pull request. They follow a pattern such as `deploy-preview-[pr-number]--nypl-design-system-dev.netlify.app` where `[pr-number]` is the number of the pull request it is deploying. For example, for pull request #101, Netlify will deploy a "preview" site to `deploy-preview-101--nypl-design-system-dev.netlify.app`. Since these "preview" sites are brought up only for pull requests, this means that the URL varies and that those instances are eventually shut off. They are not meant to be used as long-term sites but rather for reviewing working changes within the team.
+Preview Storybook documentation sites are deployed to Tugboat QA for every pull request. They follow a pattern such as `pr[number]-[hash].tugboat.qa` where `[number]` is the number of the pull request it is deploying. For example, for pull request #101, Tugboat will deploy a "preview" site to `pr101-wldudndlk24kas42.tugboat.qa`. Since these "preview" sites are brought up only for pull requests, this means that the URL varies and that those instances are eventually shut off. They are not meant to be used as long-term sites but rather for reviewing working changes within the team.
 
 ### React Component Documentation
 
@@ -237,7 +272,7 @@ You can then view `/storybook-static/index.html` in your browser. _Make sure not
 
 ## Typescript Usage
 
-The NYPL Design System is built with Typescript. Check out the Design System's [Typescript documentation](/typescript.md) for more information on why we chose to build React components in Typescript and the benefits and the gotchas we encountered.
+The NYPL Design System is built with Typescript. Check out the Design System's [Typescript documentation](/TYPESCRIPT.md) for more information on why we chose to build React components in Typescript and the benefits and the gotchas we encountered.
 
 ## Unit Testing
 
@@ -309,7 +344,7 @@ Now, if we unintentionally update the `Notification.tsx` component to render a `
 If you want to update any existing snapshots, re-run the test script as:
 
 ```sh
-$ npm test -- updateSnapshot
+$ npm test -- --updateSnapshot
 ```
 
 Each snapshot file also includes a link to its [Jest Snapshot documentation](https://jestjs.io/docs/snapshot-testing) which is recommended to read!

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

@@ -1,19 +1,19 @@
 import * as React from "react";
+export interface AccordionContentDataProps {
+    label: string;
+    panel: string | React.ReactNode;
+}
 export interface AccordionProps {
-    /** Inner label on the button that opens the accordion */
-    accordionLabel?: React.ReactNode;
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** className you can add in addition to 'input' */
-    className?: string;
-    /** Whether the accordion is open by default */
-    defaultOpen?: boolean;
+    /** Array of data to display */
+    contentData: AccordionContentDataProps[];
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** accordionLabel's input ID */
-    inputId?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Whether the accordion is open by default only on its initial rendering */
+    isDefaultOpen?: boolean;
 }
-/** Accordion component that shows content on toggle */
-export default function Accordion(props: React.PropsWithChildren<AccordionProps>): JSX.Element;
+/**
+ * Accordion component that shows content on toggle. Can be used to display
+ * multiple accordion items together.
+ */
+declare function Accordion(props: React.PropsWithChildren<AccordionProps>): JSX.Element;
+export default Accordion;

package/dist/components/Autosuggest/Autosuggest.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const AutosuggestLibrary: () => JSX.Element;
 export declare const AutosuggestFish: () => JSX.Element;
 export declare const SearchBarExample: () => JSX.Element;

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

@@ -1,21 +1,18 @@
 import * as React from "react";
-declare type breadcrumb = {
+import { ColorVariants } from "./BreadcrumbsTypes";
+export interface BreadcrumbsDataProps {
     url: string;
-    text: string;
-};
+    text: string | React.ReactNode;
+}
 export interface BreadcrumbProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
     /** Breadcrumb links as an array */
-    breadcrumbs: breadcrumb[] | JSX.Element[];
+    breadcrumbsData: BreadcrumbsDataProps[];
     /** className you can add in addition to 'input' */
     className?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-}
-export default class Breadcrumbs extends React.Component<BreadcrumbProps, any> {
-    static defaultProps: {};
-    constructor(props: BreadcrumbProps);
-    render(): JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Used to control how the `Hero` component will be rendered. */
+    colorVariant?: ColorVariants;
 }
-export {};
+declare function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>): JSX.Element;
+export default Breadcrumbs;

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

@@ -0,0 +1,6 @@
+export declare enum ColorVariants {
+    BooksAndMore = "booksAndMore",
+    Locations = "locations",
+    Research = "research",
+    WhatsOn = "whatsOn"
+}

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

@@ -1,12 +1,12 @@
 import * as React from "react";
+import { ButtonGroup } from "@chakra-ui/react";
 import { ButtonTypes } from "./ButtonTypes";
+declare type ButtonElementType = "submit" | "button" | "reset";
 interface ButtonProps {
     /** Additional attributes passed to the button */
     attributes?: {
         [key: string]: any;
     };
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
     /** 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/ */
@@ -15,21 +15,14 @@ interface ButtonProps {
     disabled?: boolean;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
     /** 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 */
-    type?: "submit" | "button" | "reset";
+    type?: ButtonElementType;
 }
 /** Renders a simple `button` element with custom classes and modifiers. */
-export default class Button extends React.Component<ButtonProps, any> {
-    static defaultProps: {
-        mouseDown: boolean;
-    };
-    constructor(props: ButtonProps);
-    render(): JSX.Element;
-}
-export {};
+declare function Button(props: React.PropsWithChildren<ButtonProps>): JSX.Element;
+export { ButtonGroup };
+export default Button;

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

@@ -1,6 +1,8 @@
 export declare enum ButtonTypes {
-    Primary = "filled",
-    Secondary = "outline",
+    Primary = "primary",
+    Secondary = "secondary",
+    Callout = "callout",
     Pill = "pill",
-    Link = "link"
+    Link = "link",
+    SearchBar = "searchBar"
 }

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

@@ -1,21 +1,70 @@
 import * as React from "react";
-interface CardProps {
-    /** ClassName that appears in addition to "card" */
+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;
+}
+interface CardContentProps {
+    /** Optional className that would be applied to the `card-content` element */
+    className?: string;
+}
+interface CardActionsProps {
+    /** 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 */
+    topBorder?: boolean;
+}
+export interface CardProps {
+    /** 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;
-    /** Calls to Action for the card, such as "download" on a card for a book */
-    ctas?: React.ReactNode;
-    /** Footer that appears within the card but below the three columns within it */
-    footer?: React.ReactNode;
-    /** Heading that appears within the card but above the three columns within it */
-    heading?: React.ReactNode;
+    /** 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" */
+    className?: string;
+    /** Optional hex color value used to override the default text color */
+    foregroundColor?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** First column within the card */
-    image?: React.ReactNode;
+    /** 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 */
+    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 */
+    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 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

@@ -0,0 +1,19 @@
+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/CardEdition/CardEdition.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+interface CardEditionProps {
+    /** ClassName that appears in addition to "card" */
+    className?: string;
+    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+    blockName?: string;
+    /** Calls to Action for the card, such as "download" on a card for a book */
+    ctas?: React.ReactNode;
+    /** Footer that appears within the card but below the three columns within it */
+    footer?: React.ReactNode;
+    /** Heading that appears within the card but above the three columns within it */
+    heading?: React.ReactNode;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** First column within the card */
+    image?: React.ReactNode;
+    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
+    modifiers?: string[];
+}
+export default function CardEdition(props: React.PropsWithChildren<CardEditionProps>): JSX.Element;
+export {};

package/dist/components/{StyleGuide/Colors.stories.d.ts → CardEdition/CardEdition.stories.d.ts}

@@ -1,8 +1,11 @@
+/// <reference types="react" />
+import CardEdition from "./CardEdition";
 declare const _default: {
     title: any;
+    component: typeof CardEdition;
 };
 export default _default;
-export declare const colorsBrand: {
+export declare const cardEdition: {
     (): JSX.Element;
     storyName: string;
     parameters: {
@@ -12,7 +15,7 @@ export declare const colorsBrand: {
         };
     };
 };
-export declare const colorsUtility: {
+export declare const ExampleCardEdition: {
     (): JSX.Element;
     storyName: string;
     parameters: {

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

@@ -1,33 +1,38 @@
 import * as React from "react";
 export interface CheckboxProps {
-    /** 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;
-    /** Additional attributes to pass to the `<input>` tag */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** 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/ */
-    checked?: boolean;
     /** className you can add in addition to 'input' */
     className?: string;
-    /** Adds the 'disabled' prop to the input when true */
-    disabled?: boolean;
-    /** Helper for modifiers array; adds 'errored' styling */
-    errored?: boolean;
-    /** Optional string to populate the HelperErrorText for error state */
+    /** 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;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: 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.
+     */
+    isDisabled?: 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.
+     */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    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;
     /** The name prop indicates into which group of checkboxes this checkbox 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;
     /** Offers the ability to show the checkbox's label onscreen or hide it. Refer to the `labelText` property for more information. */
-    showLabel: boolean;
+    showLabel?: boolean;
     /** Populates the value of the input */
     value?: string;
 }

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
+export interface CheckboxGroupProps {
+    /** Any child node passed to the component. */
+    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;
+    /** Adds the 'disabled' prop to the input when true. */
+    isDisabled?: boolean;
+    /** A`dds the 'aria-invalid' attribute to the input and
+     * sets the error state when true. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The checkbox group label displayed in a `legend` element if `showlabel` is
+     * true, or an "aria-label" if `showLabel` is false. */
+    labelText: string;
+    /** Renders the checkbox buttons in a row or column (default). */
+    layout?: CheckboxGroupLayoutTypes;
+    /** The `name` prop indicates the form group for all the `Checkbox` children. */
+    name: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (value: string[]) => void;
+    /** Whether or not to display "Required"/"Optional" in the label text. */
+    optReqFlag?: boolean;
+    /** Offers the ability to show the group's legend onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+}
+/**
+ * Wrapper component to wrap `Checkbox` components. Can be displayed in a
+ * column or in a row. The `CheckboxGroup` component renders all the necessary
+ * wrapping and associated text elements, but the checkbox input elements
+ * _need_ to be child `Checkbox` components from the NYPL Design System.
+ */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxGroup;

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

@@ -0,0 +1,4 @@
+export declare enum CheckboxGroupLayoutTypes {
+    Column = "column",
+    Row = "row"
+}