@nypl/design-system-react-components 0.25.7 → 0.25.10

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

@@ -1,21 +1,10 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Description,
-} from "@storybook/addon-docs/blocks";
-import { withDesign } from "storybook-addon-designs";
 import { Stack } from "@chakra-ui/react";
+import { Canvas, Meta } from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
 
-import { getCategory } from "../../utils/componentCategories";
 import Icon from "../Icons/Icon";
-import {
-  IconColors,
-  IconSizes,
-  IconNames,
-  LogoNames,
-} from "../Icons/IconTypes";
+import { IconColors, IconSizes, IconNames } from "../Icons/IconTypes";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta
@@ -24,8 +13,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10975%3A16",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10975%3A16",
     },
   }}
 />
@@ -44,16 +32,14 @@ import DSProvider from "../../theme/provider";
 ## General Information
 
 Use the NYPL Design System [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
-component to render and control icons and NYPL logos as `<svg>` elements within
-consuming apps.
+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` and
-`LogoNames` enums. 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 `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)
 Storybook page.
 
 <Canvas>
@@ -79,16 +65,6 @@ Storybook page.
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.SpeakerNotes}
       />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={LogoNames.LogoNypl}
-      />
-      <Icon
-        decorative
-        size={IconSizes.ExtraExtraExtraLarge}
-        name={LogoNames.LogoBrooklyn}
-      />
     </Stack>
   </DSProvider>
 </Canvas>
@@ -99,8 +75,6 @@ Storybook page.
 | `IconNames.Close`              |
 | `IconNames.ErrorOutline`       |
 | `IconNames.SpeakerNotes`       |
-| `LogoNames.LogoNypl`           |
-| `LogoNames.LogoBrooklyn`       |
 
 ## Icon Sizes
 

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

@@ -1,18 +1,10 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Preview,
-  Description,
-} from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { getCategory } from "../../utils/componentCategories";
-import getCSSVariable from "../../helpers/getCSSVariable";
 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";
 
 <Meta
@@ -21,8 +13,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17249%3A13",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17249%3A13",
     },
   }}
 />
@@ -48,7 +39,6 @@ The DS spacing values are based on a root font size of `16px` (`1rem` = `16px`).
 <DSProvider>
 The following CSS variables are available through the DS.
 
-
 | Variable Name       | REM Equivalent | Pixel Equivalent | Visual Reference                                                                                              |
 | ------------------- | -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------- |
 | `--nypl-space-xxs`  | `0.25rem`      | `4px`            | <div style={{ width: "var(--nypl-space-xxs)", backgroundColor: "var(--nypl-colors-ui-focus)" }}>&nbsp;</div>  |
@@ -62,7 +52,6 @@ The following CSS variables are available through the DS.
 
 </DSProvider>
 
-
 ## Section Spacing
 
 In consuming apps, the major page sections should be separated vertically by `3rem` `(--nypl-space-xl`). This includes the space after the page global `header` and the space before the global `footer`.

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

@@ -1,20 +1,13 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Preview,
-  Description,
-} from "@storybook/addon-docs/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { getCategory } from "../../utils/componentCategories";
 import Heading from "../Heading/Heading";
 import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
 import List from "../List/List";
 import { ListTypes } from "../List/ListTypes";
 import Text from "../Text/Text";
 import { TextDisplaySizes } from "../Text/TextTypes";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta
@@ -23,8 +16,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10975%3A16",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10975%3A16",
     },
   }}
 />
@@ -67,52 +59,50 @@ Use the NYPL Design System [Heading](/docs/components-typography-styles-heading-
 
 <DSProvider>
 
-
 Each heading level has a default style and size, but those styles can be overridden using the `displaySize` prop. The display sizes are separate from semantic elements and may be used to override the default size and styling of the semantic HTML heading elements. For example, the `h1` element has the `Primary` style applied by default, but a new style can be applied through the `displaySize` prop. Any `displaySize` style can be applied to any `Heading` element.
 
 <Heading level={HeadingLevels.One} displaySize={HeadingDisplaySizes.Primary}>
   Primary Heading
 </Heading>
 
-| CSS Attribute | Value     | CSS Variable               |
-| ------------- | --------- | -------------------------- |
-| `font-size`   | `2.25rem` | `--nypl-fontSizes-4`       |
-| `font-weight` | `300`     | `--nypl-fontWeights-light` |
-| `line-height` | `1.1`     | n/a                        |
+|                 | Value     | JS Theme Object                 | CSS Variable                                           |
+| --------------- | --------- | ------------------------------- | ------------------------------------------------------ |
+| **Font Size**   | `2.25rem` | `fontSize: "heading.primary"`   | `font-size: var(--nypl-fontSizes-heading-primary)`     |
+| **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} displaySize={HeadingDisplaySizes.Secondary}>
   Secondary Heading
 </Heading>
 
-| CSS Attribute | Value     | CSS Variable                |
-| ------------- | --------- | --------------------------- |
-| `font-size`   | `1.75rem` | `--nypl-fontSizes-3`        |
-| `font-weight` | `500`     | `--nypl-fontWeights-medium` |
-| `line-height` | `1.25`    | n/a                         |
+|                 | Value     | JS Theme Object                   | CSS Variable                                             |
+| --------------- | --------- | --------------------------------- | -------------------------------------------------------- |
+| **Font Size**   | `1.75rem` | `fontSize: "heading.secondary"`   | `font-size: var(--nypl-fontSizes-heading-secondary)`     |
+| **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} displaySize={HeadingDisplaySizes.Tertiary}>
   Tertiary Heading
 </Heading>
 
-| CSS Attribute | Value      | CSS Variable                |
-| ------------- | ---------- | --------------------------- |
-| `font-size`   | `1.375rem` | `--nypl-fontSizes-2`        |
-| `font-weight` | `500`      | `--nypl-fontWeights-medium` |
-| `line-height` | `1.25`     | n/a                         |
+|                 | Value      | JS Theme Object                  | CSS Variable                                            |
+| --------------- | ---------- | -------------------------------- | ------------------------------------------------------- |
+| **Font Size**   | `1.375rem` | `fontSize: "heading.tertiary"`   | `font-size: var(--nypl-fontSizes-heading-tertiary)`     |
+| **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} displaySize={HeadingDisplaySizes.Callout}>
   Callout Heading
 </Heading>
 
-| CSS Attribute | Value     | CSS Variable                 |
-| ------------- | --------- | ---------------------------- |
-| `font-size`   | `1.25rem` | `--nypl-fontSizes-1`         |
-| `font-weight` | `400`     | `--nypl-fontWeights-regular` |
-| `line-height` | `1.25`    | n/a                          |
+|                 | Value     | JS Theme Object                 | CSS Variable                                           |
+| --------------- | --------- | ------------------------------- | ------------------------------------------------------ |
+| **Font Size**   | `1.25rem` | `fontSize: "heading.callout"`   | `font-size: var(--nypl-fontSizes-heading-callout)`     |
+| **Font Weight** | `500`     | `fontWeight: "heading.callout"` | `font-weight: var(--nypl-fontWeights-heading-callout)` |
+| **Line Height** | `1.25`    | n/a                             | n/a                                                    |
 
 </DSProvider>
 
-
 ## Text Component
 
 Use the NYPL Design System [Text](/docs/components-typography-styles-text--text) component to render a standard HTML `<p>` tag. The Text component is generally used for body copy, captions and secondary captions.
@@ -132,7 +122,6 @@ Use the NYPL Design System [Text](/docs/components-typography-styles-text--text)
 
 <DSProvider>
 
-
 The `displaySize` prop can be used to render a specific style from the DS default text styles.
 
 - [Typography: Body Styles](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A52)
@@ -140,39 +129,38 @@ The `displaySize` prop can be used to render a specific style from the DS defaul
 
 <Text displaySize={TextDisplaySizes.Default}>Default</Text>
 
-| CSS Attribute | Value  | CSS Variable               |
-| ------------- | ------ | -------------------------- |
-| `font-size`   | `1rem` | `--nypl-fontSizes-0`       |
-| `font-weight` | `300`  | `--nypl-fontWeights-light` |
-| `line-height` | `1.5`  | n/a                        |
+|                 | Value  | JS Theme Object              | CSS Variable                                        |
+| --------------- | ------ | ---------------------------- | --------------------------------------------------- |
+| **Font Size**   | `1rem` | `fontSize: "text.default"`   | `font-size: var(--nypl-fontSizes-text-default)`     |
+| **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 displaySize={TextDisplaySizes.Caption}>Caption</Text>
 
-| CSS Attribute | Value      | CSS Variable               |
-| ------------- | ---------- | -------------------------- |
-| `font-size`   | `0.875rem` | `--nypl-fontSizes--1`      |
-| `font-weight` | `300`      | `--nypl-fontWeights-light` |
-| `line-height` | `1.25`     | n/a                        |
+|                 | Value      | JS Theme Object              | CSS Variable                                        |
+| --------------- | ---------- | ---------------------------- | --------------------------------------------------- |
+| **Font Size**   | `0.875rem` | `fontSize: "text.caption"`   | `font-size: var(--nypl-fontSizes-text-caption)`     |
+| **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 displaySize={TextDisplaySizes.Tag}>Tag</Text>
 
-| CSS Attribute | Value     | CSS Variable                 |
-| ------------- | --------- | ---------------------------- |
-| `font-size`   | `0.75rem` | `--nypl-fontSizes--2`        |
-| `font-weight` | `400`     | `--nypl-fontWeights-regular` |
-| `line-height` | `1.5`     | n/a                          |
+|                 | Value     | JS Theme Object          | CSS Variable                                    |
+| --------------- | --------- | ------------------------ | ----------------------------------------------- |
+| **Font Size**   | `0.75rem` | `fontSize: "text.tag"`   | `font-size: var(--nypl-fontSizes-text-tag)`     |
+| **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 displaySize={TextDisplaySizes.Mini}>Mini</Text>
 
-| CSS Attribute | Value      | CSS Variable                 |
-| ------------- | ---------- | ---------------------------- |
-| `font-size`   | `0.625rem` | `--nypl-fontSizes--3`        |
-| `font-weight` | `400`      | `--nypl-fontWeights-regular` |
-| `line-height` | `1.5`      | n/a                          |
+|                 | Value      | JS Theme Object           | CSS Variable                                     |
+| --------------- | ---------- | ------------------------- | ------------------------------------------------ |
+| **Font Size**   | `0.625rem` | `fontSize: "text.mini"`   | `font-size: var(--nypl-fontSizes-text-mini)`     |
+| **Font Weight** | `400`      | `fontWeight: "text.mini"` | `font-weight: var(--nypl-fontWeights-text-mini)` |
+| **Line Height** | `1.5`      | `fontWeight: 1.5`         | `font-weight: 1.5`                               |
 
 </DSProvider>
 
-
 ## Font Family
 
 With website accessibility in mind, font choices for the DS were made with an eye toward clarity and readability. Headings and body content use the following font family assignment:
@@ -225,7 +213,7 @@ The DS uses four font weights to render text. The default font-weight is 300.
         fontFamily: "var(--nypl-fonts-body)",
       }}
     >
-      Light / 300
+      Light / 300 (default)
     </p>
     <p
       style={{
@@ -257,14 +245,14 @@ The DS uses four font weights to render text. The default font-weight is 300.
   </>
 </Canvas>
 
-The following CSS variables are available through the DS.
+The following design tokens are available through the DS.
 
-```
---nypl-fontWeights-light: 300; /* default */
---nypl-fontWeights-regular: 400;
---nypl-fontWeights-medium: 500;
---nypl-fontWeights-bold: 700;
-```
+|             | Value | JS Theme Object         | CSS Variable                                   |
+| ----------- | ----- | ----------------------- | ---------------------------------------------- |
+| **Light**   | `300` | `fontWeight: "light"`   | `font-weight: var(--nypl-fontWeights-light)`   |
+| **Regular** | `400` | `fontWeight: "regular"` | `font-weight: var(--nypl-fontWeights-regular)` |
+| **Medium**  | `500` | `fontWeight: "medium"`  | `font-weight: var(--nypl-fontWeights-medium)`  |
+| **Bold**    | `700` | `fontWeight: "bold"`    | `font-weight: var(--nypl-fontWeights-bold)`    |
 
 ## Font Sizes
 
@@ -302,7 +290,7 @@ Font sizing is based on a root font size of 16px (1rem = 16px).
         fontWeight: "var(--nypl-fontWeights-light)",
       }}
     >
-      Font size 0
+      Font size 0 (default)
     </p>
     <p
       style={{
@@ -339,18 +327,18 @@ Font sizing is based on a root font size of 16px (1rem = 16px).
   </>
 </Canvas>
 
-The following CSS variables are available through the DS.
-
-```
---nypl-fontSizes--3: 0.625rem;
---nypl-fontSizes--2: 0.75rem;
---nypl-fontSizes--1: 0.875rem;
---nypl-fontSizes-0: 1rem; /* default */
---nypl-fontSizes-1: 1.125rem;
---nypl-fontSizes-2: 1.375rem;
---nypl-fontSizes-3: 1.75rem;
---nypl-fontSizes-4: 2.25rem;
-```
+The following font size design tokens are available through the DS.
+
+|        | Value      | JS Theme Object  | CSS Variable                          |
+| ------ | ---------- | ---------------- | ------------------------------------- |
+| **-3** | `0.625rem` | `fontSize: "-3"` | `font-size: var(--nypl-fontSizes--3)` |
+| **-2** | `0.75rem`  | `fontSize: "-2"` | `font-size: var(--nypl-fontSizes--2)` |
+| **-1** | `0.875rem` | `fontSize: "-1"` | `font-size: var(--nypl-fontSizes--1)` |
+| **0**  | `1rem`     | `fontSize: "0"`  | `font-size: var(--nypl-fontSizes-0)`  |
+| **1**  | `1.125rem` | `fontSize: "1"`  | `font-size: var(--nypl-fontSizes-1)`  |
+| **2**  | `1.375rem` | `fontSize: "2"`  | `font-size: var(--nypl-fontSizes-2)`  |
+| **3**  | `1.75rem`  | `fontSize: "3"`  | `font-size: var(--nypl-fontSizes-3)`  |
+| **4**  | `2.25rem`  | `fontSize: "4"`  | `font-size: var(--nypl-fontSizes-4)`  |
 
 ## Text Case
 

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

@@ -0,0 +1,165 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Table from "./Table";
+import DSProvider from "../../theme/provider";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta
+  title={getCategory("Table")}
+  component={Table}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=46780%3A27675",
+    },
+    jest: ["Table.test.tsx"],
+  }}
+  argTypes={{
+    columnHeaders: { control: { disable: true } },
+    columnHeadersBackgroundColor: { control: { type: "color" } },
+    columnHeadersTextColor: { control: { type: "color" } },
+    id: { control: false },
+    tableData: { control: false },
+  }}
+/>
+
+# Table
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.9`   |
+| Latest            | `0.25.10`  |
+
+<Description of={Table} />
+
+export const columnHeaders = [
+  "First Name",
+  "Last Name",
+  "Nick Name",
+  "Address1",
+  "City",
+  "State",
+  "Zipcode",
+];
+export const tableData = [
+  ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "NY", "23458"],
+  ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "NY", "23458"],
+  ["K.K.", "Slider", "Totakeke", "Niper Place", "New York", "NY", "98765"],
+  [
+    "Sonny",
+    "Resetti",
+    "Risetto san",
+    "Village Road",
+    "New York",
+    "NY",
+    "09873",
+  ],
+];
+
+<Canvas withToolbar>
+  <Story
+    name="Table"
+    args={{
+      className: undefined,
+      columnHeaders,
+      columnHeadersBackgroundColor: undefined,
+      columnHeadersTextColor: undefined,
+      id: undefined,
+      showRowDividers: false,
+      tableData,
+      titleText: undefined,
+      useRowHeaders: false,
+    }}
+  >
+    {(args) => <Table {...args}></Table>}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Table" />
+
+## Accessibility
+
+- The HTML for the `Table` element is structured with proper semantic use of the
+  `table`, `caption`, `thead`, `tbody`, `tr`, and `td` HTML elements.
+- When titles are added through the `titleText` prop, the `caption` element will
+  be rendered on the page.
+- The first row and/or the first cell in a `tr` row can be headers. Each `th`
+  header cell has an appropriate scope attribute set to either `scope="col"` or
+  `scope="row"`. For example, every `th` cell in a `thead` `tr` row will have
+  `scope="col"`. Every `th` cell in a `tbody` `tr` row will have `scope="row"`.
+  These headers are visually different from the data. Use the `useRowHeaders`
+  prop to render the first cell in every row as a header.
+
+## With a title
+
+Use the `titleText` prop to add a title to the table.
+
+<Canvas>
+  <DSProvider>
+    <Table
+      columnHeaders={columnHeaders}
+      id="title-table"
+      tableData={tableData}
+      titleText="Table with a title"
+    />
+  </DSProvider>
+</Canvas>
+
+## With Row Dividers
+
+Use the `showRowDividers` prop to render a divider between each row.
+
+<Canvas>
+  <DSProvider>
+    <Table
+      columnHeaders={columnHeaders}
+      id="showRowDividers-table"
+      showRowDividers
+      tableData={tableData}
+    />
+  </DSProvider>
+</Canvas>
+
+## With Row Headers
+
+Use the `useRowHeaders` prop to render the first cell in every row as a header.
+Notice that they turn bold.
+
+<Canvas>
+  <DSProvider>
+    <Table
+      columnHeaders={columnHeaders}
+      id="rowHeaders-table"
+      tableData={tableData}
+      useRowHeaders
+    />
+  </DSProvider>
+</Canvas>
+
+## With Custom Header Colors
+
+It's possible to customize the header colors by using the `columnHeadersBackgroundColor`
+and `columnHeadersTextColor` props. Note that the colors need to have sufficient
+color contrast.
+
+<Canvas>
+  <DSProvider>
+    <Table
+      columnHeaders={columnHeaders}
+      columnHeadersBackgroundColor="var(--nypl-colors-ui-link-secondary)"
+      columnHeadersTextColor="var(--nypl-colors-ui-white)"
+      id="rowHeaders-table"
+      showRowDividers
+      tableData={tableData}
+      useRowHeaders
+    />
+  </DSProvider>
+</Canvas>

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

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Table from "./Table";
+
+export const columnHeaders = [
+  "First Name",
+  "Last Name",
+  "Nick Name",
+  "Address1",
+  "City",
+  "Zipcode",
+  "State",
+];
+
+export const tableData = [
+  ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "23458", "NY"],
+  ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "23458", "NY"],
+  ["K.K.", "Slider", "Totakeke", "Niper Place", "New York", "98765", "NY"],
+  [
+    "Sonny",
+    "Resetti",
+    "Risetto san",
+    "Village Road",
+    "New York",
+    "09873",
+    "NY",
+  ],
+];
+
+describe("Table Accessibility", () => {
+  it("passes axe accessibility test with the columnHeaders and tableData prop", async () => {
+    const { container } = render(
+      <Table columnHeaders={columnHeaders} tableData={tableData} />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test with tableData prop", async () => {
+    const { container } = render(<Table tableData={tableData} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Table", () => {
+  it("renders a caption", () => {
+    render(<Table tableData={tableData} titleText="this is the caption" />);
+    expect(screen.getByText("this is the caption")).toBeInTheDocument();
+  });
+
+  it("renders a table header", () => {
+    render(
+      <Table
+        columnHeaders={columnHeaders}
+        tableData={tableData}
+        titleText="this is the caption"
+      />
+    );
+
+    expect(screen.getByText("First Name")).toBeInTheDocument();
+    expect(screen.getByText("Last Name")).toBeInTheDocument();
+    expect(screen.getByText("Nick Name")).toBeInTheDocument();
+  });
+
+  it("renders table data", () => {
+    render(<Table tableData={tableData} columnHeaders={columnHeaders} />);
+
+    expect(screen.getByText("Tom")).toBeInTheDocument();
+    expect(screen.getByText("Nook")).toBeInTheDocument();
+    expect(screen.getByText("Village Road")).toBeInTheDocument();
+  });
+
+  it("logs a warning when the `tableData` prop is an empty array", async () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Table tableData={[]} />);
+    expect(warn).toHaveBeenCalledWith(
+      "Table: data should be two dimensional array."
+    );
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(<Table id="basic" tableData={tableData} />)
+      .toJSON();
+    const withCaption = renderer
+      .create(
+        <Table
+          id="withCaption"
+          tableData={tableData}
+          titleText="this is the caption"
+        />
+      )
+      .toJSON();
+    const withHeaders = renderer
+      .create(
+        <Table
+          columnHeaders={columnHeaders}
+          id="withHeaders"
+          tableData={tableData}
+          titleText="this is the caption"
+        />
+      )
+      .toJSON();
+    const withRowHeaders = renderer
+      .create(
+        <Table
+          columnHeaders={columnHeaders}
+          id="withHeaders"
+          tableData={tableData}
+          titleText="this is the caption"
+          useRowHeaders
+        />
+      )
+      .toJSON();
+    const withCustomHeaderColors = renderer
+      .create(
+        <Table
+          columnHeadersBackgroundColor="var(--nypl-colors-ui-link-primary)"
+          columnHeadersTextColor="var(--nypl-colors-ui-white)"
+          columnHeaders={columnHeaders}
+          id="withHeaders"
+          tableData={tableData}
+          titleText="this is the caption"
+          useRowHeaders
+        />
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(withCaption).toMatchSnapshot();
+    expect(withHeaders).toMatchSnapshot();
+    expect(withRowHeaders).toMatchSnapshot();
+    expect(withCustomHeaderColors).toMatchSnapshot();
+  });
+});