@nypl/design-system-react-components 0.26.1 → 1.0.0

package/src/components/StyleGuide/Forms.stories.mdx

@@ -2,7 +2,6 @@ import { Meta } from "@storybook/addon-docs";
 
 import Card from "../Card/Card";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta title={getCategory("Forms")} />
@@ -19,7 +18,8 @@ import { getCategory } from "../../utils/componentCategories";
 
 ## General Information
 
-Use the [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/form-elements-form--form) component to control the placement and spacing for standard HTML forms.
+Use the [Form](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-form--form-with-controls)
+component to control the placement and spacing for standard HTML forms.
 
 ## Form Layout
 

package/src/components/StyleGuide/Iconography.stories.mdx

@@ -2,7 +2,6 @@ import { Stack } from "@chakra-ui/react";
 import { Canvas, Meta } from "@storybook/addon-docs";
 
 import Icon from "../Icons/Icon";
-import { IconColors, IconSizes, IconNames } from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -21,124 +20,107 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the Reservoir Design System (DS) [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+Use the Reservoir Design System (DS) [Icon](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-media-icons-icon--icon-with-controls)
 component to render and control icons as `<svg>` elements within consuming apps.
 
 The DS utilizes the `Filled` icons available in the [Material UI Design System](https://material-ui.com/components/material-icons/).
 
 ## Icon Examples
 
-The graphic of the `Icon` component is handled through the `IconNames` enum. To see all graphic options
-for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+The graphic of the `Icon` component is handled through the `name` prop. To see
+all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-media-icons-icon--icon-with-controls)
 Storybook page.
 
 <Canvas>
   <DSProvider>
     <Stack spacing="s" direction="row">
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.Check}
-      />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.Close}
-      />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.ErrorOutline}
-      />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={IconNames.SpeakerNotes}
-      />
+      <Icon decorative size="xxxlarge" name="check" />
+      <Icon decorative size="xxxlarge" name="close" />
+      <Icon decorative size="xxxlarge" name="errorOutline" />
+      <Icon decorative size="xxxlarge" name="speakerNotes" />
     </Stack>
   </DSProvider>
 </Canvas>
 
-| Enum Values for Examples Above |
-| ------------------------------ |
-| `IconNames.Check`              |
-| `IconNames.Close`              |
-| `IconNames.ErrorOutline`       |
-| `IconNames.SpeakerNotes`       |
+| Values for Examples Above |
+| ------------------------- |
+| `check`                   |
+| `close`                   |
+| `errorOutline`            |
+| `speakerNotes`            |
 
 ## Icon Sizes
 
-The size of the `Icon` component is handled through the `IconSizes` enum.
+The size of the `Icon` component is handled through the `size` prop.
 
 <Canvas>
   <DSProvider>
     <Stack spacing="s" direction="row" alignItems="center">
-      <Icon size={IconSizes.Small} name={IconNames.Check} />
-      <Icon size={IconSizes.Medium} name={IconNames.Check} />
-      <Icon size={IconSizes.Large} name={IconNames.Check} />
-      <Icon size={IconSizes.ExtraLarge} name={IconNames.Check} />
-      <Icon size={IconSizes.ExtraExtraLarge} name={IconNames.Check} />
-      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
+      <Icon size="small" name="check" />
+      <Icon size="medium" name="check" />
+      <Icon size="large" name="check" />
+      <Icon size="xlarge" name="check" />
+      <Icon size="xxlarge" name="check" />
+      <Icon size="xxxlarge" name="check" />
     </Stack>
   </DSProvider>
 </Canvas>
 
-| IconSizes Enum Value             | CSS Value         | CSS Variable       |
-| -------------------------------- | ----------------- | ------------------ |
-| `IconSizes.Small`                | `0.875rem` (14px) | n/a                |
-| `IconSizes.Medium`               | `1.125rem` (18px) | n/a                |
-| `IconSizes.Large`                | `1.5rem` (24px)   | `--nypl-space-m`   |
-| `IconSizes.ExtraLarge`           | `2rem` (32px)     | `--nypl-space-l`   |
-| `IconSizes.ExtraExtraLarge`      | `3rem` (48px)     | `--nypl-space-xl`  |
-| `IconSizes.ExtraExtraExtraLarge` | `4rem` (64px)     | `--nypl-space-xxl` |
+| Value      | CSS Value         | CSS Variable       |
+| ---------- | ----------------- | ------------------ |
+| `small`    | `0.875rem` (14px) | n/a                |
+| `medium`   | `1.125rem` (18px) | n/a                |
+| `large`    | `1.5rem` (24px)   | `--nypl-space-m`   |
+| `xlarge`   | `2rem` (32px)     | `--nypl-space-l`   |
+| `xxlarge`  | `3rem` (48px)     | `--nypl-space-xl`  |
+| `xxxlarge` | `4rem` (64px)     | `--nypl-space-xxl` |
 
 ## Icon Colors
 
-The color of the `Icon` component is handled through the `IconColors` enum.
-Icons in NYPL projects should always be rendered with one color.
+The color of the `Icon` component is handled through the `color` prop. Icons in
+NYPL projects should always be rendered with one color.
 
 <Canvas>
   <DSProvider>
     <Stack spacing="s" direction="row">
-      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
-      <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.BrandPrimary}
-      />
-      <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.SectionResearchPrimary}
-      />
+      <Icon size="xxxlarge" name="check" />
+      <Icon name="check" size="xxxlarge" color="brand.primary" />
+      <Icon name="check" size="xxxlarge" color="section.research.primary" />
       <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.SectionResearchLibrarySchwartzman}
+        name="check"
+        size="xxxlarge"
+        color="section.research-library.schwartzman"
       />
       <Icon
-        name={IconNames.Check}
-        size={IconSizes.ExtraExtraExtraLarge}
-        color={IconColors.SectionResearchLibrarySchomburg}
+        name="check"
+        size="xxxlarge"
+        color="section.research-library.schomburg"
       />
     </Stack>
   </DSProvider>
 </Canvas>
 
-| IconColors Enum Value                          | CSS Variable                                         |
-| ---------------------------------------------- | ---------------------------------------------------- |
-| `IconColors.UiBlack`                           | `--nypl-colors-ui-black`                             |
-| `IconColors.UiWhite`                           | `--nypl-colors-ui-white`                             |
-| `IconColors.BrandPrimary`                      | `--nypl-colors-brand-primary`                        |
-| `IconColors.BrandSecondary`                    | `--nypl-colors-brand-secondary`                      |
-| `IconColors.SectionWhatsOnPrimary`             | `--nypl-colors-section-whats-on-primary`             |
-| `IconColors.SectionBooksAndMorePrimary`        | `--nypl-colors-section-books-and-more-primary`       |
-| `IconColors.SectionResearchPrimary`            | `--nypl-colors-section-research-primary`             |
-| `IconColors.SectionResearchSecondary`          | `--nypl-colors-section-research-secondary`           |
-| `IconColors.SectionLocationsPrimary`           | `--nypl-colors-section-locations-primary`            |
-| `IconColors.SectionResearchLibraryLpa`         | `--nypl-colors-section-research-library-lpa`         |
-| `IconColors.SectionResearchLibrarySchomburg`   | `--nypl-colors-section-research-library-schomburg`   |
-| `IconColors.SectionResearchLibrarySchwartzman` | `--nypl-colors-section-research-library-schwartzman` |
+| Value                                  | CSS Variable                                         |
+| -------------------------------------- | ---------------------------------------------------- |
+| `ui.black`                             | `--nypl-colors-ui-black`                             |
+| `ui.white`                             | `--nypl-colors-ui-white`                             |
+| `brand.primary`                        | `--nypl-colors-brand-primary`                        |
+| `brand.secondary`                      | `--nypl-colors-brand-secondary`                      |
+| `section.blogs.primary`                | `--nypl-colors-section-blogs-primary`                |
+| `section.blogs.secondary`              | `--nypl-colors-section-blogs-secondary`              |
+| `section.books-and-more.primary`       | `--nypl-colors-section-books-and-more-primary`       |
+| `section.books-and-more.secondary`     | `--nypl-colors-section-books-and-more-secondary`     |
+| `section.education.primary`            | `--nypl-colors-section-education-primary`            |
+| `section.education.secondary`          | `--nypl-colors-section-education-secondary`          |
+| `section.locations.primary`            | `--nypl-colors-section-locations-primary`            |
+| `section.locations.secondary`          | `--nypl-colors-section-locations-secondary`          |
+| `section.research.primary`             | `--nypl-colors-section-research-primary`             |
+| `section.research.secondary`           | `--nypl-colors-section-research-secondary`           |
+| `section.research-library.lpa`         | `--nypl-colors-section-research-library-lpa`         |
+| `section.research.library.schomburg`   | `--nypl-colors-section-research-library-schomburg`   |
+| `section.research.library.schwartzman` | `--nypl-colors-section-research-library-schwartzman` |
+| `section.whats-on.primary`             | `--nypl-colors-section-whats-on-primary`             |
+| `section.whats-on.secondary`           | `--nypl-colors-section-whats-on-secondary`           |
 
 ## Development Notes
 

package/src/components/StyleGuide/Spacing.stories.mdx

@@ -2,7 +2,6 @@ import { Meta } from "@storybook/addon-docs";
 
 import Card from "../Card/Card";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -69,7 +68,7 @@ between elements, both horizontal and vertical, should be `2rem`.
 
 Form input components should have a `2rem` space between each form input
 component. This includes both vertical (column) and horizontal (row) stacking.
-The DS [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-form--form-with-controls)
+The DS [Form](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-form--form-with-controls)
 component has correct spacing incorporated into its UI structure and should
 always be used when building forms. Please note that the spacing in the `Form`
 component is identical to the spacing in the `Grid` component.

package/src/components/StyleGuide/Typography.stories.mdx

@@ -1,11 +1,8 @@
 import { Canvas, Meta } from "@storybook/addon-docs";
 
 import Heading from "../Heading/Heading";
-import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import Text from "../Text/Text";
-import { TextSizes } from "../Text/TextTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -43,10 +40,10 @@ set the specific `<h>` tag that you require.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.One}>Heading Level 1</Heading>
-    <Heading level={HeadingLevels.Two}>Heading Level 2</Heading>
-    <Heading level={HeadingLevels.Three}>Heading Level 3</Heading>
-    <Heading level={HeadingLevels.Four}>Heading Level 4</Heading>
+    <Heading level="one">Heading Level 1</Heading>
+    <Heading level="two">Heading Level 2</Heading>
+    <Heading level="three">Heading Level 3</Heading>
+    <Heading level="four">Heading Level 4</Heading>
   </DSProvider>
 </Canvas>
 
@@ -61,7 +58,7 @@ elements. For example, the `h1` element has the `Primary` style applied by defau
 but a new style can be applied through the `size` prop. Any `size` style can be
 applied to any `Heading` element.
 
-<Heading level={HeadingLevels.One} size={HeadingSizes.Primary}>
+<Heading level="one" size="primary">
   Primary Heading
 </Heading>
 
@@ -71,7 +68,7 @@ applied to any `Heading` element.
 | **Font Weight** | `300`     | `fontWeight: "heading.primary"` | `font-weight: var(--nypl-fontWeights-heading-primary)` |
 | **Line Height** | `1.1`     | n/a                             | n/a                                                    |
 
-<Heading level={HeadingLevels.One} size={HeadingSizes.Secondary}>
+<Heading level="one" size="secondary">
   Secondary Heading
 </Heading>
 
@@ -81,7 +78,7 @@ applied to any `Heading` element.
 | **Font Weight** | `500`     | `fontWeight: "heading.secondary"` | `font-weight: var(--nypl-fontWeights-heading-secondary)` |
 | **Line Height** | `1.25`    | n/a                               | n/a                                                      |
 
-<Heading level={HeadingLevels.One} size={HeadingSizes.Tertiary}>
+<Heading level="one" size="tertiary">
   Tertiary Heading
 </Heading>
 
@@ -91,7 +88,7 @@ applied to any `Heading` element.
 | **Font Weight** | `500`      | `fontWeight: "heading.tertiary"` | `font-weight: var(--nypl-fontWeights-heading-tertiary)` |
 | **Line Height** | `1.25`     | n/a                              | n/a                                                     |
 
-<Heading level={HeadingLevels.One} size={HeadingSizes.Callout}>
+<Heading level="one" size="callout">
   Callout Heading
 </Heading>
 
@@ -129,7 +126,7 @@ The `size` prop can be used to render a specific style from the DS default text
 - [Typography: Body Styles](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A52)
 - [Typography: Other Styles](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A100)
 
-<Text size={TextSizes.Default}>Default</Text>
+<Text size="default">Default</Text>
 
 |                 | Value  | JS Theme Object              | CSS Variable                                        |
 | --------------- | ------ | ---------------------------- | --------------------------------------------------- |
@@ -137,7 +134,7 @@ The `size` prop can be used to render a specific style from the DS default text
 | **Font Weight** | `300`  | `fontWeight: "text.default"` | `font-weight: var(--nypl-fontWeights-text-default)` |
 | **Line Height** | `1.5`  | `fontWeight: 1.5`            | `font-weight: 1.5`                                  |
 
-<Text size={TextSizes.Caption}>Caption</Text>
+<Text size="caption">Caption</Text>
 
 |                 | Value      | JS Theme Object              | CSS Variable                                        |
 | --------------- | ---------- | ---------------------------- | --------------------------------------------------- |
@@ -145,7 +142,7 @@ The `size` prop can be used to render a specific style from the DS default text
 | **Font Weight** | `300`      | `fontWeight: "text.caption"` | `font-weight: var(--nypl-fontWeights-text-caption)` |
 | **Line Height** | `1.25`     | `fontWeight: 1.25`           | `font-weight: 1.25`                                 |
 
-<Text size={TextSizes.Tag}>Tag</Text>
+<Text size="tag">Tag</Text>
 
 |                 | Value     | JS Theme Object          | CSS Variable                                    |
 | --------------- | --------- | ------------------------ | ----------------------------------------------- |
@@ -153,7 +150,7 @@ The `size` prop can be used to render a specific style from the DS default text
 | **Font Weight** | `400`     | `fontWeight: "text.tag"` | `font-weight: var(--nypl-fontWeights-text-tag)` |
 | **Line Height** | `1.5`     | `fontWeight: 1.5`        | `font-weight: 1.5`                              |
 
-<Text size={TextSizes.Mini}>Mini</Text>
+<Text size="mini">Mini</Text>
 
 |                 | Value      | JS Theme Object           | CSS Variable                                     |
 | --------------- | ---------- | ------------------------- | ------------------------------------------------ |
@@ -195,7 +192,7 @@ black on a white background.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>Default Heading Color</Heading>
+    <Heading level="three">Default Heading Color</Heading>
     <Text>
       This paragraph shows the default body text color. Curabitur blandit tempus
       porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur
@@ -208,7 +205,7 @@ black on a white background.
 
 In cases where specific colors must be applied to text elements, the DS
 provides CSS variables for the full NYPL color palette. Refer to the
-[Colors](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/style-guide-colors--colors-brand)
+[Colors](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--page)
 section of the Style Guide for details.
 
 ## Font Weight
@@ -359,7 +356,7 @@ prepositions do not get capital letters unless they start the title. For example
 
 <Canvas>
   <DSProvider>
-    <List type={ListTypes.Unordered}>
+    <List type="ul">
       <li>Snow White and the Seven Dwarfs</li>
       <li>The Last of the Mohicans</li>
       <li>Spooky Books for Kids: The Ultimate Creepy Guide</li>
@@ -377,7 +374,7 @@ prepositions do not get capital letters unless they start the title. For example
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>
+    <Heading level="three">
       This is a Long Title to Show What 58 Characters Looks Like
     </Heading>
   </DSProvider>

package/src/components/Table/Table.stories.mdx

@@ -7,6 +7,7 @@ import {
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
+import Image from "../Image/Image";
 import Table from "./Table";
 import DSProvider from "../../theme/provider";
 import { getCategory } from "../../utils/componentCategories";
@@ -36,7 +37,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -47,6 +48,7 @@ import { getCategory } from "../../utils/componentCategories";
 - [With Row Dividers](#with-row-dividers)
 - [With Row Headers](#with-row-headers)
 - [With Custom Header Colors](#with-custom-header-colors)
+- [With JSX Elements](#with-jsx-elements)
 
 ## Overview
 
@@ -190,3 +192,85 @@ color contrast.
     />
   </DSProvider>
 </Canvas>
+
+## With JSX Elements
+
+export const characterHeaders = ["First Name", "Last Name", "Avatar"];
+export const charactersData = [
+  [
+    "Tom",
+    "Nook",
+    <Image
+      alt="Tom Nook"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "Isabelle",
+    "-",
+    ,
+    <Image
+      alt="Isabelle"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "K.K.",
+    "Slider",
+    ,
+    <Image
+      alt="K.K Slider"
+      size="small"
+      src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+];
+
+It's possible to pass in JSX elements in the `tableData` prop.
+
+```jsx
+export const charactersData = [
+  [
+    "Tom",
+    "Nook",
+    <Image
+      alt="Tom Nook"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "Isabelle",
+    "-",
+    ,
+    <Image
+      alt="Isabelle"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "K.K.",
+    "Slider",
+    ,
+    <Image
+      alt="K.K Slider"
+      size="small"
+      src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+];
+```
+
+<Canvas>
+  <DSProvider>
+    <Table
+      columnHeaders={characterHeaders}
+      id="jsx-example"
+      showRowDividers
+      tableData={charactersData}
+    />
+  </DSProvider>
+</Canvas>

package/src/components/Table/Table.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
+import Image from "../Image/Image";
 import Table from "./Table";
 
 export const columnHeaders = [
@@ -14,7 +15,6 @@ export const columnHeaders = [
   "Zipcode",
   "State",
 ];
-
 export const tableData = [
   ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "23458", "NY"],
   ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "23458", "NY"],
@@ -29,6 +29,41 @@ export const tableData = [
     "NY",
   ],
 ];
+export const characterHeaders = ["First Name", "Last Name", "Avatar"];
+export const charactersData = [
+  [
+    "Tom",
+    "Nook",
+    <Image
+      alt="Tom Nook"
+      key="tom"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "Isabelle",
+    "-",
+    ,
+    <Image
+      alt="Isabelle"
+      key="isa"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "K.K.",
+    "Slider",
+    ,
+    <Image
+      alt="K.K Slider"
+      key="kk"
+      size="small"
+      src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+];
 
 describe("Table Accessibility", () => {
   it("passes axe accessibility test with the columnHeaders and tableData prop", async () => {
@@ -80,6 +115,17 @@ describe("Table", () => {
     );
   });
 
+  it("renders JSX elements from the data array", () => {
+    render(
+      <Table
+        columnHeaders={characterHeaders}
+        id="jsx-example"
+        tableData={charactersData}
+      />
+    );
+    expect(screen.getAllByRole("img")).toHaveLength(3);
+  });
+
   it("renders the UI snapshot correctly", () => {
     const basic = renderer
       .create(<Table id="basic" tableData={tableData} />)
@@ -140,6 +186,15 @@ describe("Table", () => {
     const withOtherProps = renderer
       .create(<Table id="props" tableData={tableData} data-testid="props" />)
       .toJSON();
+    const withJSXData = renderer
+      .create(
+        <Table
+          columnHeaders={characterHeaders}
+          id="jsx-example"
+          tableData={charactersData}
+        />
+      )
+      .toJSON();
 
     expect(basic).toMatchSnapshot();
     expect(withCaption).toMatchSnapshot();
@@ -148,5 +203,6 @@ describe("Table", () => {
     expect(withCustomHeaderColors).toMatchSnapshot();
     expect(withChakraProps).toMatchSnapshot();
     expect(withOtherProps).toMatchSnapshot();
+    expect(withJSXData).toMatchSnapshot();
   });
 });

package/src/components/Table/Table.tsx

@@ -11,6 +11,10 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
+interface CustomColors {
+  backgroundColor?: string;
+  color?: string;
+}
 export interface TableProps {
   /** Additional class name for the `Table` component. */
   className?: string;
@@ -26,7 +30,7 @@ export interface TableProps {
    * component. The default value is false. */
   showRowDividers?: boolean;
   /** Two-dimensional array used to populate the table rows. */
-  tableData: string[][];
+  tableData: (string | JSX.Element)[][];
   /** Displays `Table` title element. */
   titleText?: string;
   /** If true, the first cell of each row in the `Table` component will be
@@ -41,7 +45,7 @@ export interface TableProps {
 export const Table = chakra((props: React.PropsWithChildren<TableProps>) => {
   const {
     className,
-    columnHeaders,
+    columnHeaders = [],
     columnHeadersBackgroundColor,
     columnHeadersTextColor,
     id,
@@ -51,8 +55,7 @@ export const Table = chakra((props: React.PropsWithChildren<TableProps>) => {
     useRowHeaders = false,
     ...rest
   } = props;
-
-  const customColors = {};
+  const customColors: CustomColors = {};
 
   columnHeadersBackgroundColor &&
     (customColors["backgroundColor"] = columnHeadersBackgroundColor);