@nypl/design-system-react-components 0.25.5 → 0.25.9

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,66 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+
+import Table from "./Table";
+import DSProvider from "../../theme/provider";
+import { getCategory } from "../../utils/componentCategories";
+
+<Description of={Table} />
+
+The `Table` component is used to organize and display tabular data in rows and columns.
+
+<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: [],
+    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.9`   |
+
+<Description of={Table} />
+
+<Canvas withToolbar>
+  <Story
+    name="Table"
+    args={{
+      columnHeaders: ["First Name", "Last Name", "Nick Name", "Address1", "City", "Zipcode", "State"],
+      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" ], ],
+      useRowHeaders: false,
+      showRowDividers: false,
+    }}
+  >
+    {(args) => (
+      <Table {...args}>
+      </Table>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Table" />

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+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 table data", () => {
+    render(<Table tableData={tableData} columnHeaders={columnHeaders} />);
+    expect(screen.getByText("Tom")).toBeInTheDocument();
+    expect(screen.getByText("First Name")).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."
+    );
+  });
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import {
+  Table as ChakraTable,
+  Thead as ChakraTHead,
+  Tbody as ChakraTbody,
+  Tr as ChakraTr,
+  Th as ChakraTh,
+  Td as ChakraTd,
+  TableCaption as ChakraTableCaption,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+
+import generateUUID from "../../helpers/generateUUID";
+
+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[];
+  /** Hex value to set the background color of the column headers. */
+  columnHeadersBackgroundColor?: string;
+  /** Hex value to set the text color of the column headers. */
+  columnHeadersTextColor?: string;
+  /** ID that other components can cross reference for accessibility purposes. */
+  id?: string;
+  /** If true, the first cell of each row in the `Table` component will be visually styled as a header.  The default value is false */
+  useRowHeaders?: boolean;
+  /** If true, a border will be displayed between each row in the `Table` component.  The default value is false. */
+  showRowDividers?: boolean;
+  /** Two-dimensional array used to populate the table rows. */
+  tableData: string[][];
+  /** Displays `Table` title element. */
+  titleText?: string;
+}
+
+function Table(props: React.PropsWithChildren<TableProps>) {
+  const {
+    className,
+    columnHeaders,
+    columnHeadersBackgroundColor,
+    columnHeadersTextColor,
+    id = generateUUID(),
+    useRowHeaders = false,
+    showRowDividers = false,
+    tableData,
+    titleText,
+  } = props;
+
+  const customColors = {};
+
+  columnHeadersBackgroundColor &&
+    (customColors["backgroundColor"] = columnHeadersBackgroundColor);
+  columnHeadersTextColor && (customColors["color"] = columnHeadersTextColor);
+
+  const styles = useMultiStyleConfig("CustomTable", {
+    columnHeadersTextColor,
+    showRowDividers,
+    useRowHeaders,
+  });
+
+  const columnHeadersElems = columnHeaders && (
+    <ChakraTHead>
+      <ChakraTr>
+        {columnHeaders.map((child, key) => (
+          <ChakraTh scope="col" key={key} sx={customColors}>
+            {child}
+          </ChakraTh>
+        ))}
+      </ChakraTr>
+    </ChakraTHead>
+  );
+
+  const tableBodyElems = () => {
+    /** tableData value should be two dimensional array */
+    if (
+      !Array.isArray(tableData) ||
+      tableData.length <= 0 ||
+      tableData[0].constructor !== Array
+    ) {
+      console.warn(`Table data should be two dimensional array.`);
+      return null;
+    }
+
+    return (
+      <ChakraTbody>
+        {tableData.map((row, index) => (
+          <ChakraTr key={index}>
+            {row.map((column, key) =>
+              key === 0 && useRowHeaders ? (
+                <ChakraTh scope="row" key={key}>
+                  {column}
+                </ChakraTh>
+              ) : (
+                <ChakraTd key={key}>{column}</ChakraTd>
+              )
+            )}
+          </ChakraTr>
+        ))}
+      </ChakraTbody>
+    );
+  };
+
+  const tableCaption = titleText && (
+    <ChakraTableCaption>{titleText}</ChakraTableCaption>
+  );
+
+  return (
+    <ChakraTable id={id} sx={styles} className={className}>
+      {tableCaption}
+      {columnHeadersElems}
+      {tableBodyElems()}
+    </ChakraTable>
+  );
+}
+
+export default Table;