@nypl/design-system-react-components 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -8,6 +8,59 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.4 (June 23, 2022)
+
+### Adds
+
+- Adds the `useNYPLBreakpoints` hook. This hook internally uses Chakra's `useMediaQuery` hook to get the current responsive media query breakpoint.
+- Adds `ui.gray.xx-dark` to the color palette.
+- Adds npm packages useful for lazy loading images in the `Image` component.
+- Adds text case styles for `Text` component.
+- Exports `ColorModeScript`, `cookieStorageManager`, `localStorageManager`, `useColorMode`, and `useColorModeValue` from Chakra UI for consuming application usage.
+- Adds a "Color Mode" documentation page in Storybook.
+- Adds `ui.white` as default background color to `Checkbox` and `Radio` components.
+- Adds text case styles for `Heading` component
+
+### Updates
+
+- Updates the `Logo` component to include a variant for `MLN Color`.
+- Updates the `Icon` component to include variants for `Facebook`, `Instagram`, `Tumblr`, `Twitter` and `YouTube`.
+- Updates the `Icon` component to include variants for `Building`, `Exit`, `Locator`, `Power` and `Settings`.
+- Updates to Storybook version 6.5.
+- Explicitly sets the default color mode value to `"light"`.
+- Updates how the `styles.scss` and `resources.scss` files are organized and compiled so that they can be imported in any tech stack.
+- Updates the docs for the `Table` commponent to remove the example that does not include column headers.
+- Updates the `Button`, `Select` and `TextInput` components to use NYPL standard minimum height in mobile viewport.
+- Updates the `SearchBar` component to change how the width of the internal `Select` component is handled.
+
+### Fixes
+
+- Fixes the styles for the sub-labels in the `DatePicker` component.
+
+## 1.0.3 (June 9, 2022)
+
+### Adds
+
+- Adds prop validation for the `TextInput` "number" type for the `min` and `max` props.
+- Adds `min` and `max` prop value validation for the `Slider` component, including in the "range" mode.
+
+### Updates
+
+- Updates the `TemplateAppContainer`'s responsive styles for its sidebar component.
+- Updates how the `Radio`'s label is hidden when the `showLabel` prop is set to "false" to fix the "no label" accessibility issue.
+- Updates the `Logo` component to include new variants for `NYPL Text Only`.
+- Updates the `Card`'s full-click functionality styling for its wrapper element.
+- Updates how the `Card`'s `Image` component is displayed in the mobile view; sizes and aspect ratios are maintained instead of always displaying as 100% width.
+- Updates hover style to add right border color on hover for `Select` element.
+- Updates the `Table` component to be responsive for a mobile viewport.
+- Updates the `Table` component to make the `columnHeaders` prop required.
+
+### Fixes
+
+- Fixes the border color for the `Accordion` button.
+- Fixes a false warning message logged from the `Table` component.
+- Fixes the background color for the `Toggle` button.
+
 ## 1.0.2 (June 1, 2022)
 
 ### Adds

package/README.md

@@ -6,8 +6,6 @@
 
 The Reservoir Design System (DS) is NYPL’s open-source extensible React library for products and experiences with the accessibility as its foundation. It ships functional, stateless components with consistent NYPL styling. You can learn more about the project and its goals [on the project's wiki](https://github.com/NYPL/nypl-design-system/wiki).
 
-_Note: This library is still in beta. Until we release the stable `1.0.0` version, we are loosely using semantic versioning._
-
 Storybook documentation
 
 - [Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page)
@@ -15,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.
 
@@ -140,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.
 
@@ -198,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.
@@ -269,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.
@@ -355,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" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionSettings" | "alertNotificationImportant" | "arrow" | "building" | "check" | "clock" | "close" | "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,11 +2,15 @@ declare const _default: {
     accessibilityFull: string;
     accessibilityPartial: string;
     actionCheckCircle: string;
+    actionExit: string;
     actionHelpDefault: string;
     actionHelpOutline: string;
     actionLaunch: string;
+    actionPower: string;
+    actionSettings: string;
     alertNotificationImportant: string;
     arrow: string;
+    building: string;
     check: string;
     clock: string;
     close: string;
@@ -21,9 +25,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/Slider/Slider.d.ts

@@ -4,8 +4,7 @@ export interface SliderProps {
     /** Additional class name for the Slider component. */
     className?: string;
     /** The initial value for the single `Slider` or an array of two number
-     * values for the `isRangeSlider` case.
-     */
+     * values for the `isRangeSlider` case. */
     defaultValue?: number | number[];
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;

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. */