@nypl/design-system-react-components 1.0.3-beta → 1.0.5

package/README.md

@@ -13,108 +13,27 @@ Storybook documentation
 
 | 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.                | [Using Chakra UI Components](#using-chakra-ui-components)                           |
-| 5.                | [Storybook](#storybook)                                                             |
-| 6.                | [Typescript Usage](#typescript-usage)                                               |
-| 7.                | [Unit Testing](#unit-testing)                                                       |
-| 8.                | [Accessibility](#accessibility)                                                     |
+| 1.                | [Using the Design System in Your Product](#using-the-design-system-in-your-product) |
+| 2.                | [Using Chakra UI Components](#using-chakra-ui-components)                           |
+| 3.                | [Storybook](#storybook)                                                             |
+| 4.                | [Accessibility](#accessibility)                                                     |
+| 5.                | [Contributing Quickstart](#contributing-quickstart)                                 |
+| 6.                | [Developing with NPM Link](#developing-with-npm-link)                               |
+| 7.                | [Typescript Usage](#typescript-usage)                                               |
+| 8.                | [Unit Testing](#unit-testing)                                                       |
 | 9.                | [CDN](#cdn)                                                                         |
 
-## Contributing Quickstart
-
-Follow these steps to setup a local installation of the project:
-
-1. Clone the repo
-
-```sh
-$ git clone https://github.com/NYPL/nypl-design-system.git
-```
-
-2. Install all the dependencies
-
-```sh
-$ npm install
-```
-
-3. Run the Storybook instance and view it at `http://localhost:6006`
-
-```sh
-$ npm run storybook
-```
-
-You can now edit styles or templates in the `src` directory, and they will automatically re-build and update in the Storybook instance. Adding new stories or changing story names will require a page refresh.
-
-Information about active maintainers, how we run reviews, and more can be found in our wiki page for [Contributing to the Design System](https://github.com/NYPL/nypl-design-system/wiki/Contributing-to-the-React-Library).
-
-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:
-
-1. In the Design System directory, run:
-
-```sh
-$ npm link
-```
-
-2. Go to the consuming application directory and run:
-
-```sh
-$ npm link @nypl/design-system-react-components
-```
-
-3. Go back to the Design System directory and run the following command. It allos the local Design System to be rebuilt and exported automatically:
-
-```sh
-$ npm start
-```
-
-### Error Troubleshooting
-
-It's possible when running `npm link` that you'll get an `Invalid Hook` issue. If this occurs, it's most likely caused by having two versions of React when trying to run the application while the NYPL DS package is linked. This [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) issue is covered by the React team.
-
-To be more specific, you should run the following in your local DS directory, where `[../path/to/application]` is the local directory of the consuming application.
-
-```sh
-$ npm link [../path/to/application]/node_modules/react
-```
-
-Now you should be able to run `npm start` in the DS directory and `npm run dev` (or whatever your application uses) in the application directory and not get an `Invalid Hook` error.
-
-### npm Unlink
-
-To unlink the DS codebase:
-
-1. Run `npm unlink` in the Design System directory.
-2. Run `npm unlink --no-save @nypl/design-system-react-components` in the consuming application.
-
 ## Using the Design System in Your Product
 
-To use the Design System in your project:
+The Reservoir Design System package is distributed on npm.
 
-1. Install the DS:
+1. Install the package in your app's directory:
 
 ```sh
 $ npm install @nypl/design-system-react-components
 ```
 
-2. Import the styles in your main css file
-
-```css
-@import "~@nypl/design-system-react-components/dist/styles.css";
-```
-
-3. Import the `DSProvider` component
+2. Import the `DSProvider` component
 
 In order to use DS components in a consuming application, there is a necessary step that must be done for component styles to properly render. 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.
 
@@ -138,7 +57,59 @@ const ApplicationContainer = (props) => {
 };
 ```
 
-4. Use DS components!
+3. Import the minified styles `@nypl/design-system-react-components/dist/styles.css` file in your app.
+
+This file contains normalized reset CSS rules, system fonts, the `react-datepicker`'s styles, breakpoint CSS variables, and overriding styles for a few components.
+
+Importing this file varies on the stack of the application. For Nextjs apps, the file can be imported in the `_app.tsx` file:
+
+```tsx
+// _app.tsx
+@import "@nypl/design-system-react-components/dist/styles.css";
+
+import {
+  DSProvider,
+  TemplateAppContainer,
+} from "@nypl/design-system-react-components";
+...
+```
+
+Otherwise, it can be imported in the app's main SCSS file:
+
+```scss
+// main.scss (for example)
+@import "@nypl/design-system-react-components/dist/styles.css";
+
+body {
+  ....
+}
+```
+
+Note: Using tilde to import scss/css is no longer a best practice for apps using _recent_ versions of webpack or parcel.
+
+```scss
+// No longer a best practice:
+@import "~@nypl/design-system-react-components/dist/styles.css";
+```
+
+For apps using parcel, prepend the string import with `npm:` such as :
+
+```scss
+@import "npm:@nypl/design-system-react-components/dist/styles.css";
+```
+
+4. Optionally import the `@nypl/design-system-react-components/dist/resources.scss` file in your main _scss_ file. This file contains useful SCSS mixins that can be used for global or component style rules.
+
+```scss
+@import "@nypl/design-system-react-components/dist/resources.scss";
+
+// `screenreader-only` is one example of a mixing from `resources.scss`:
+legend {
+  @include screenreader-only;
+}
+```
+
+5. Use DS components!
 
 Consult Storybook for the list of available components and props that they require.
 
@@ -196,22 +167,6 @@ Find more information about the Design System's internal use of Chakra to create
 
 Chakra was integrated into the Design System in version `0.25.0`. For those looking to update to a version greater than or equal `0.25.0`, check out our [Chakra Migration Guide](/CHAKRA_MIGRATION_GUIDE.md).
 
-## 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).
-
 ## Storybook
 
 The Reservoir 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/reservoir/v1/?path=/story/welcome--page). For your convenience, the Reservoir 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.
@@ -267,6 +222,101 @@ $ npm run build-storybook:v1
 
 You can then view `/reservoir/v1/index.html` in your browser. _Make sure not to commit this directory_.
 
+## Accessibility
+
+### Development and Storybook
+
+The Reservoir 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, 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 Reservoir Design System provides accessible stories, but real 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.
+
+## Contributing Quickstart
+
+Follow these steps to setup a local installation of the project:
+
+1. Clone the repo
+
+```sh
+$ git clone https://github.com/NYPL/nypl-design-system.git
+```
+
+2. Install all the dependencies
+
+```sh
+$ npm install
+```
+
+3. Run the Storybook instance and view it at `http://localhost:6006`
+
+```sh
+$ npm run storybook
+```
+
+You can now edit styles or templates in the `src` directory, and they will automatically re-build and update in the Storybook instance. Adding new stories or changing story names will require a page refresh.
+
+Information about active maintainers, how we run reviews, and more can be found in our wiki page for [Contributing to the Design System](https://github.com/NYPL/nypl-design-system/wiki/Contributing-to-the-React-Library).
+
+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:
+
+1. In the Design System directory, run:
+
+```sh
+$ npm link
+```
+
+2. Go to the consuming application directory and run:
+
+```sh
+$ npm link @nypl/design-system-react-components
+```
+
+3. Go back to the Design System directory and run the following command. It allos the local Design System to be rebuilt and exported automatically:
+
+```sh
+$ npm start
+```
+
+### Error Troubleshooting
+
+It's possible when running `npm link` that you'll get an `Invalid Hook` issue. If this occurs, it's most likely caused by having two versions of React when trying to run the application while the NYPL DS package is linked. This [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) issue is covered by the React team.
+
+To be more specific, you should run the following in your local DS directory, where `[../path/to/application]` is the local directory of the consuming application.
+
+```sh
+$ npm link [../path/to/application]/node_modules/react
+```
+
+Now you should be able to run `npm start` in the DS directory and `npm run dev` (or whatever your application uses) in the application directory and not get an `Invalid Hook` error.
+
+### npm Unlink
+
+To unlink the DS codebase:
+
+1. Run `npm unlink` in the Design System directory.
+2. Run `npm unlink --no-save @nypl/design-system-react-components` in the consuming application.
+
 ## Typescript Usage
 
 The Reservoir 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.
@@ -353,38 +403,26 @@ Through the [`@storybook/addon-jest`](https://www.npmjs.com/package/@storybook/a
 
 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 Reservoir 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 Reservoir 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">
+```html
+<link
+  href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css"
+/>
+<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.cjs.production.min.js" />
+<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.esm.js" />
 ```
 
 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">
+```html
+<link
+  href="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/styles.css"
+/>
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/design-system-react-components.cjs.production.min.js" />
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/design-system-react-components.esm.js" />
 ```
 
 You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).

package/dist/__tests__/mediaMatchMock.d.ts

@@ -0,0 +1,79 @@
+/**
+ * NYPL Note:
+ * This file is directly taken from Chakra:
+ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/media-query/tests/matchmedia-mock-plus.ts
+ *
+ * We need this to test the `useNYPLBreakpoints` hook and, unfortunately,
+ * this function is not exported by Chakra.
+ */
+/**
+ * This mock is a combination of jest-matchmedia-mock
+ * https://github.com/dyakovk/jest-matchmedia-mock and
+ * mq-polyfill https://github.com/bigslycat/mq-polyfill.
+ *
+ * A solution which allowed resizing and a more realistic implementation of
+ * matchMedia was the reason for its creation. Neither project provided a good
+ * solution. Combining their strong points does. The class will listen for a
+ * resize event which is provided by a resizeTo function defined in the test:
+ *
+ *  window.resizeTo = function resizeTo(width, height) {
+ *    Object.assign(this, {
+ *      innerWidth: width,
+ *      innerHeight: height,
+ *      outerWidth: width,
+ *      outerHeight: height,
+ *    }).dispatchEvent(new this.Event('resize'))
+ *  }
+ *
+ * Listeners are only called if there has been a change in the match
+ * status for their media query.
+ */
+declare type MediaQueryListener = (this: MediaQueryList) => void;
+interface MediaQueryList {
+    readonly matches: boolean;
+    readonly media: string;
+    onchange: MediaQueryListener | null;
+    addListener(listener: MediaQueryListener): void;
+    removeListener(listener: MediaQueryListener): void;
+    addEventListener(type: "change", listener: MediaQueryListener): void;
+    removeEventListener(type: "change", listener: MediaQueryListener): void;
+    dispatchEvent(event: Event): boolean;
+}
+export default class MatchMedia {
+    private mediaQueries;
+    private prevMatchMap;
+    private mediaQueryList;
+    constructor();
+    private compileQuery;
+    private evalQuery;
+    /**
+     *
+     * Adds a listener function for the window resize event
+     * @private
+     */
+    private handleResize;
+    private addListener;
+    private removeListener;
+    /**
+     * Returns an array listing the media queries for which the matchMedia has registered listeners
+     * @public
+     */
+    getMediaQueries(): string[];
+    /**
+     * Returns a copy of the array of listeners for the specified media query
+     * @public
+     */
+    getListeners(mediaQuery: string): MediaQueryListener[];
+    /**
+     * Clears all registered media queries and their listeners
+     * @public
+     */
+    clear(): void;
+    /**
+     * Clears all registered media queries and their listeners,
+     * and destroys the implementation of `window.matchMedia`
+     * @public
+     */
+    destroy(): void;
+}
+export {};

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

@@ -8,9 +8,15 @@ interface CardBaseProps {
      * Default is `"column"`. */
     layout?: LayoutTypes;
 }
-interface CardLinkBoxProps {
+interface CardWrapperProps {
+    /** Optional CSS class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Main link to use when the full `Card` component should be clickable. */
     mainActionLink?: string;
+    /** Additional object for styling the `Card`'s `div` wrapper. */
+    styles?: any;
 }
 interface CardImageProps extends ComponentImageProps {
     /** Optional boolean value to control the position of the `CardImage`. */
@@ -24,15 +30,11 @@ interface CardActionsProps extends CardBaseProps {
      * the card actions element */
     topBorder?: boolean;
 }
-export interface CardProps extends CardBaseProps, CardLinkBoxProps {
+export interface CardProps extends CardBaseProps, CardWrapperProps {
     /** Optional hex color value used to set the card background color. */
     backgroundColor?: string;
-    /** Optional CSS class name to add. */
-    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;
     /** Optional boolean value to control the visibility of a border around
      * the card. */
     isBordered?: boolean;

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

@@ -6,6 +6,12 @@ export interface HeadingProps {
     className?: string;
     /** Optional ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Optional prop used to show capitalized text */
+    isCapitalized?: boolean;
+    /** Optional prop used to show upper case text */
+    isUppercase?: boolean;
+    /** Optional prop used to show lower case text */
+    isLowercase?: boolean;
     /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
      * `Heading` will default to `<h2>` */
     level?: HeadingLevels;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 export declare type IconAlign = "left" | "right" | "none";
 export declare type IconColors = "ui.black" | "ui.white" | "brand.primary" | "brand.secondary" | "section.blogs.primary" | "section.blogs.secondary" | "section.books-and-more.primary" | "section.books-and-more.secondary" | "section.education.primary" | "section.education.secondary" | "section.locations.primary" | "section.locations.secondary" | "section.research.primary" | "section.research.secondary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.research-library.schwartzman" | "section.whats-on.primary" | "section.whats-on.secondary";
-export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "alertNotificationImportant" | "arrow" | "check" | "clock" | "close" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "minus" | "plus" | "search" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
+export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionCheckCircleFilled" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionRegistration" | "actionSettings" | "alertNotificationImportant" | "arrow" | "building" | "check" | "clock" | "close" | "decorativeEnvelope" | "decorativeLibraryCard" | "decorativeShoppingBag" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "locator" | "minus" | "plus" | "search" | "socialFacebook" | "socialInstagram" | "socialTumblr" | "socialTwitter" | "socialYoutube" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
 export declare type IconRotationTypes = "rotate0" | "rotate90" | "rotate180" | "rotate270";
 export declare type IconSizes = "default" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
 export declare type IconTypes = "default" | "breadcrumbs";

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

@@ -2,14 +2,23 @@ declare const _default: {
     accessibilityFull: string;
     accessibilityPartial: string;
     actionCheckCircle: string;
+    actionCheckCircleFilled: string;
+    actionExit: string;
     actionHelpDefault: string;
     actionHelpOutline: string;
     actionLaunch: string;
+    actionPower: string;
+    actionRegistration: string;
+    actionSettings: string;
     alertNotificationImportant: string;
     arrow: string;
+    building: string;
     check: string;
     clock: string;
     close: string;
+    decorativeEnvelope: string;
+    decorativeLibraryCard: string;
+    decorativeShoppingBag: string;
     download: string;
     errorFilled: string;
     errorOutline: string;
@@ -21,9 +30,15 @@ declare const _default: {
     fileTypeSpreadsheet: string;
     fileTypeVideo: string;
     headset: string;
+    locator: string;
     minus: string;
     plus: string;
     search: string;
+    socialFacebook: string;
+    socialInstagram: string;
+    socialTumblr: string;
+    socialTwitter: string;
+    socialYoutube: string;
     speakerNotes: string;
     utilityAccountFilled: string;
     utilityAccountUnfilled: string;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
+export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
 export declare type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
 export interface LogoProps {
     /** Optional className that will be added to the parent element */

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

@@ -13,11 +13,14 @@ declare const _default: {
     lpaColor: string;
     lpaWhite: string;
     mlnBlack: string;
+    mlnColor: string;
     mlnWhite: string;
     nyplFullBlack: string;
     nyplFullWhite: string;
     nyplLionBlack: string;
     nyplLionWhite: string;
+    nyplTextBlack: string;
+    nyplTextWhite: string;
     openebooksColor: string;
     openebooksNegative: string;
     openebooksWithTextColor: string;

package/dist/components/StyleGuide/ColorCard.d.ts

@@ -1,12 +1,30 @@
 import * as React from "react";
 export interface ColorCardProps {
-    /** backgroundColor of the color card */
+    /** The backgroundColor of the color card. */
     backgroundColor: string;
-    /** name of the CSS var */
+    /** The name of a color's javascript theme object. */
     colorName: string;
+    /** The name of the color that the current color is based on. */
+    colorSource: string;
+    /** Contrast and WCAG compliance data related to the color black when used
+     * with the current color. */
+    dataBlack: string[];
+    /** Contrast and WCAG compliance data related to the color white when used
+     * with the current color. */
+    dataWhite: string[];
+    /** The color to use for text in the color card. */
+    textColor: string;
 }
-/**
- * ColorCard
- * Component only used for Storybook.
- */
-export default function ColorCard(props: React.PropsWithChildren<ColorCardProps>): JSX.Element;
+export interface DataTableProps {
+    /** Contrast and WCAG compliance data related to the color black when used
+     * with the current color. */
+    dataBlack: string[];
+    /** Contrast and WCAG compliance data related to the color white when used
+     * with the current color. */
+    dataWhite: string[];
+    /** color to use for text in color card */
+    textColor: string;
+}
+export declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => JSX.Element;
+export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => JSX.Element;
+export default ColorCard;

package/dist/components/Table/Table.d.ts

@@ -2,8 +2,9 @@ import * as React from "react";
 export interface TableProps {
     /** Additional class name for the `Table` component. */
     className?: string;
-    /** Array of string values used to populate the `Table` column headers. */
-    columnHeaders?: string[];
+    /** Array of string values used to populate the `Table` column headers.
+     * For improved accessibility, column headers are required. */
+    columnHeaders: string[];
     /** Hex value to set the background color of the column headers. */
     columnHeadersBackgroundColor?: string;
     /** Hex value to set the text color of the column headers. */

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

@@ -7,6 +7,12 @@ export interface TextProps {
     isBold?: boolean;
     /** Optional prop used to show itlicized text */
     isItalic?: boolean;
+    /** Optional prop used to show capitalized text */
+    isCapitalized?: boolean;
+    /** Optional prop used to show upper case text */
+    isUppercase?: boolean;
+    /** Optional prop used to show lower case text */
+    isLowercase?: boolean;
     /** Optional prop used to remove default spacing */
     noSpace?: boolean;
     /** Optional prop to control the text styling */