@nypl/design-system-react-components 0.25.0 → 0.25.4

package/CHANGELOG.md

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

package/README.md

@@ -6,6 +6,8 @@
 
 The NYPL 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/storybook-static/?path=/story/introduction--page)
@@ -17,11 +19,11 @@ Storybook documentation
 | 2.                | [Developing with NPM Link](#developing-with-npm-link)                               |
 | 3.                | [Using the Design System in Your Product](#using-the-design-system-in-your-product) |
 | 4.                | [Using Chakra UI Components](#using-chakra-ui-components)                           |
-| 5.                | [CDN](#cdn)                                                                         |
-| 6.                | [Accessibility Product Requirements](#accessibility-product-requirements)           |
-| 7.                | [Storybook](#storybook)                                                             |
-| 8.                | [Typescript Usage](#typescript-usage)                                               |
-| 9.                | [Unit Testing](#unit-testing)                                                       |
+| 5.                | [Storybook](#storybook)                                                             |
+| 6.                | [Typescript Usage](#typescript-usage)                                               |
+| 7.                | [Unit Testing](#unit-testing)                                                       |
+| 8.                | [Accessibility](#accessibility)                                                     |
+| 9.                | [CDN](#cdn)                                                                         |
 
 ## Contributing Quickstart
 
@@ -51,6 +53,12 @@ Information about active maintainers, how we run reviews, and more can be found
 
 Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branching convetions, component creation and update guidelines, testing methodoly, and documentation guidelines.
 
+### Node Version
+
+We recommend using Node version 12.22.x since the DS has some issues with versions higher than 12.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 12.x.
+
+If you are using `nvm`, the local `.nvmrc` file can be use to set your local Node version with the `nvm use` command (will be set to `12.22.x`).
+
 ## Developing with NPM Link
 
 To develop with a local version of the Design System:
@@ -108,32 +116,7 @@ $ npm install @nypl/design-system-react-components
 @import "~@nypl/design-system-react-components/dist/styles.css";
 ```
 
-3. Consult Storybook for the list of available components and props that they require.
-
-Here's an example with the `Link` component:
-
-```jsx
-import { Link } from "@nypl/design-system-react-components";
-
-function NewComponent(props) {
-  return <Link href="https://www.hathitrust.org/">HathiTrust</Link>;
-}
-```
-
-Sometimes you may have conflicts, perhaps with `React-Router`. In that case, you can alias your imports:
-
-```jsx
-import * as DS from "@nypl/design-system-react-components";
-import { Link } from "react-router";
-
-function NewComponent(props) {
-  return (
-    <DS.Link>
-      <Link to="/license">public domain</Link>
-    </DS.Link>
-  );
-}
-```
+3. Add the `nypl-ds` CSS class
 
 Some CSS rules in the Design System, such as the universal focus styling and the box-model, are namespaced to the `.nypl-ds` class. To include those in your app, add `.nypl-ds` to whichever wrapper tag makes sense in your application (e.g., `<div class="app">` or `<div class="container">`).
 
@@ -145,7 +128,7 @@ Some CSS rules in the Design System, such as the universal focus styling and the
 
 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.
+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.
 
 Once the following is completed, DS components that internally use Chakra UI will render styles properly.
 
@@ -167,9 +150,38 @@ const ApplicationContainer = (props) => {
 };
 ```
 
+5. Use DS components!
+
+Consult Storybook for the list of available components and props that they require.
+
+Here's an example with the `Link` component:
+
+```jsx
+import { Link } from "@nypl/design-system-react-components";
+
+function NewComponent(props) {
+  return <Link href="https://www.hathitrust.org/">HathiTrust</Link>;
+}
+```
+
+Sometimes you may have conflicts, perhaps with `React-Router`. In that case, you can alias your imports:
+
+```jsx
+import * as DS from "@nypl/design-system-react-components";
+import { Link } from "react-router";
+
+function NewComponent(props) {
+  return (
+    <DS.Link>
+      <Link to="/license">public domain</Link>
+    </DS.Link>
+  );
+}
+```
+
 ### NYPL DS, NYPL Header, and NYPL Footer
 
-Please note that the NYPL Header and Footer should be _outside_ of the `.nypl-ds` wrapper class.
+Please note that, if used, the NYPL Header and Footer components should be _outside_ of the `.nypl-ds` wrapper class.
 
 ```jsx
 <body>
@@ -185,13 +197,18 @@ Please note that the NYPL Header and Footer should be _outside_ of the `.nypl-ds
 
 ## 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 Chakra UI component library has been integrated into the NYPL Design System. We are still progressing towards 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](/src/index.ts) file. They include:
+
+- `Box`, `Center`, `Circle`, `Grid`, `GridItem`, `HStack`, `Square`, `Stack`, `VStack`
+
+Find more information about the Design System's internal use of Chakra to create and refactor components in the Storybook documentation page. The following two links have the same information but in different formats for your reading preference:
 
-The list of re-exported Chakra components can be found in the main
-[index.ts](/index.ts) file.
+- [MDX format](/src/docs/Chakra.stories.mdx)
+- [Storybook page](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page)
 
-Find more information about the Design System's use of [Chakra](/src/docs/Chakra.stories.mdx).
+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
 
@@ -209,12 +226,6 @@ If you need to reference a particular version you can do do by including the ver
 
 You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).
 
-## Accessibility Product Requirements
-
-The NYPL Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
-
-NYPL's Metronome instance is currently password protected. For access to Metronome, please contact NYPL's UX team or Design System team.
-
 ## Storybook
 
 The NYPL Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation can be found [here](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). For your convenience, the NYPL Design System components have been organized into logical categories based on both form and function. Please refer to the COMPONENTS section in the Storybook sidebar.
@@ -308,7 +319,7 @@ The NYPL DS implements snapshot testing with `react-test-renderer` and `jest`. U
 
 The `react-test-renderer` package, will create a directory and a file to hold `.snap` files after a unit test is created. Using the `Notification` component as an example, this is the basic layout for a snapshot test:
 
-```jsx
+```tsx
 import renderer from "react-test-renderer";
 
 // ...
@@ -316,10 +327,11 @@ import renderer from "react-test-renderer";
 it("Renders the UI snapshot correctly", () => {
   const tree = renderer
     .create(
-      <Notification id="notificationID">
-        <NotificationHeading>Notification Heading</NotificationHeading>
-        <NotificationContent>Notification content.</NotificationContent>
-      </Notification>
+      <Notification
+        id="notificationID"
+        notificationHeading="Notification Heading"
+        notificationContent={<>Notification content.</>}
+      />
     )
     .toJSON();
   expect(tree).toMatchSnapshot();
@@ -328,7 +340,7 @@ it("Renders the UI snapshot correctly", () => {
 
 If this is a new test and we run `npm test`, a [`/__snapshots__/Notification.test.tsx.snap`](/src/components/Notification/__snapshots__/Notification.test.tsx.snap) file is created. This holds the DOM structure as well as any inline CSS that was added.
 
-```jsx
+```tsx
 exports[`Notification Snapshot Renders the UI snapshot correctly 1`] = `
 <aside
   className="notification notification--standard "
@@ -354,3 +366,39 @@ Each snapshot file also includes a link to its [Jest Snapshot documentation](htt
 Through the [`@storybook/addon-jest`](https://www.npmjs.com/package/@storybook/addon-jest) plugin, we can see a component's suite of unit tests right Storybook. In the "Addons" panel, a "Test" tab will display all the tests for the current component and whether they pass or fail.
 
 After writing new tests, run `npm run test:generate-output` to create a new JSON file that is used by Storybook. This JSON file contains all the test suites for all the components and Storybook picks this up and automatically combines a component with its relevant unit tests. Make sure to commit this file although new builds on Github Pages will recreate this file for the production Storybook instance.
+
+## Accessibility
+
+### Development and Storybook
+
+The NYPL Design System is built with accessibility in mind. By using Chakra UI as our foundational base, the custom DS components built with Chakra have accessibility concerns already implemented. On top of built-in accessible elements, DS components internally work to link labels with input elements, to add correct `aria-*` attributes, to visually hide text but still associate it with the correct element for titles and descriptions, to auto-generate a random `id` attribute if none was passed, and much more.
+
+We make use of:
+
+- `eslint-plugin-jsx-a11y` for finding accessibility errors through linting and through IDE environments.
+- `jest-axe` for running [`axe-core`](https://github.com/dequelabs/axe-core) on _every_ component's unit test file. This is part of the automated tests that run in Github Actions through the `npm test` command.
+- `@storybook/addon-a11y` for real-time accessibility testing in the browser through Storybook. _Every_ component has a tab that displays violations, passes, and incomplete checks performed by `axe-core`.
+
+If applicable, DS components have section(s) on accessibility in their Storybook documentation. For example, in the `Slider`'s [Storybook file](/src/components/Slider/Slider.stories.mdx), there are two "Accessibility" sections for each of the two `Slider` types, "single" and "range". This gives an explanation on additional changes we made to make the combination of elements in the `Slider` component accessible.
+
+### Product Requirements
+
+The NYPL Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
+
+NYPL's Metronome instance is currently password protected. For access to Metronome, please contact NYPL's UX team or Design System team.
+
+## CDN
+
+You can also use the Design System styles in your project through the `unpkg` CDN:
+
+```jsx
+<link href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css">
+```
+
+If you need to reference a particular version you can do do by including the version number in the URL:
+
+```jsx
+<link href="https://unpkg.com/@nypl/design-system-react-components@0.9.1/dist/styles.css">
+```
+
+You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).

package/dist/components/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/Breadcrumbs/Breadcrumbs.d.ts

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

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

@@ -3,5 +3,7 @@ export declare enum ButtonTypes {
     Secondary = "secondary",
     Callout = "callout",
     Pill = "pill",
-    Link = "link"
+    Link = "link",
+    SearchBar = "searchBar",
+    NoBrand = "noBrand"
 }

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

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