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

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

@@ -0,0 +1,419 @@
+import { Canvas, Meta } from "@storybook/addon-docs";
+
+import Heading from "../Heading/Heading";
+import List from "../List/List";
+import Text from "../Text/Text";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta title={getCategory("Typography")} />
+
+# Typography
+
+| Table of Contents                              |
+| ---------------------------------------------- |
+| 1. [General Information](#general-information) |
+| 2. [Heading Component](#heading-component)     |
+| 3. [Text Component](#text-component)           |
+| 4. [Font Family](#font-family)                 |
+| 5. [Font Color](#font-color)                   |
+| 6. [Font Weight](#font-weight)                 |
+| 7. [Font Sizes](#font-sizes)                   |
+| 8. [Text Case](#text-case)                     |
+| 9. [Character Count](#character-count)         |
+| 10. [Figma Reference](#figma-reference)        |
+
+## General Information
+
+Consuming applications should utilize the Reservoir Design System (DS) standard
+text components as much as possible. In cases where that is not possible, the
+DS exposes CSS variables to assist with formatting text elements.
+
+The sizing of all text elements in the Design System is based on `1rem` being
+equal to `16px`.
+
+## Heading Component
+
+Use the DS [Heading](/docs/components-typography-styles-heading--heading-props)
+component to render a standard HTML `<h>` tag. The `level` prop can be used to
+set the specific `<h>` tag that you require.
+
+<Canvas>
+  <DSProvider>
+    <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>
+
+#### Heading Display Sizes
+
+<DSProvider>
+
+Each heading level has a default style and size, but those styles can be overridden
+using the `size` 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 `size` prop. Any `size` style can be
+applied to any `Heading` element.
+
+<Heading level="one" size="primary">
+  Primary Heading
+</Heading>
+
+|                 | 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="one" size="secondary">
+  Secondary Heading
+</Heading>
+
+|                 | 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="one" size="tertiary">
+  Tertiary Heading
+</Heading>
+
+|                 | 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="one" size="callout">
+  Callout Heading
+</Heading>
+
+|                 | 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 DS [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.
+
+<Canvas>
+  <DSProvider>
+    <Text>
+      Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet
+      fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas
+      faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac,
+      vestibulum at eros.
+    </Text>
+  </DSProvider>
+</Canvas>
+
+### Text Display Sizes
+
+<DSProvider>
+
+The `size` 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)
+- [Typography: Other Styles](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A100)
+
+<Text size="default">Default</Text>
+
+|                 | 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 size="caption">Caption</Text>
+
+|                 | 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 size="tag">Tag</Text>
+
+|                 | 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 size="mini">Mini</Text>
+
+|                 | 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:
+
+<Canvas>
+  <DSProvider>
+    <Text>system-ui, sans-serif</Text>
+  </DSProvider>
+</Canvas>
+
+The following CSS variables are available through the DS.
+
+```
+--nypl-fonts-heading: system-ui, sans-serif;
+--nypl-fonts-body: system-ui, sans-serif;
+```
+
+> **RECOMMENDATIONS**  
+> When making font selections for project based components outside the DS,
+> sans serif fonts display better on computers and mobile devices. Avoid
+> decorative or overly stylized fonts, as they are often difficult to read even
+> for users without visual impairments or reading Standard Text Default
+
+## Font Color
+
+All text within a project, unless specifically noted in mockups, should be
+black on a white background.
+
+<Canvas>
+  <DSProvider>
+    <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
+      et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
+      lacinia odio sem nec elit.
+    </Text>
+  </DSProvider>
+</Canvas>
+
+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/reservoir/v1/?path=/docs/style-guide-colors--page)
+section of the Style Guide for details.
+
+## Font Weight
+
+The DS uses four font weights to render text. The default font-weight is 300.
+
+<Canvas>
+  <>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-0)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+        fontFamily: "var(--nypl-fonts-body)",
+      }}
+    >
+      Light / 300 (default)
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-0)",
+        fontWeight: "var(--nypl-fontWeights-regular)",
+        fontFamily: "var(--nypl-fonts-body)",
+      }}
+    >
+      Regular / 400
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-0)",
+        fontWeight: "var(--nypl-fontWeights-medium)",
+        fontFamily: "var(--nypl-fonts-body)",
+      }}
+    >
+      Medium / 500
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-0)",
+        fontWeight: "var(--nypl-fontWeights-bold)",
+        fontFamily: "var(--nypl-fonts-body)",
+      }}
+    >
+      Bold / 700
+    </p>
+  </>
+</Canvas>
+
+The following design tokens are available through the DS.
+
+|             | 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
+
+Font sizing is based on a root font size of 16px (1rem = 16px).
+
+<Canvas>
+  <>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes--3)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size -3
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes--2)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size -2
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes--1)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size -1
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-0)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size 0 (default)
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-1)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size 1
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-2)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size 2
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-3)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size 3
+    </p>
+    <p
+      style={{
+        fontSize: "var(--nypl-fontSizes-4)",
+        fontWeight: "var(--nypl-fontWeights-light)",
+      }}
+    >
+      Font size 4
+    </p>
+  </>
+</Canvas>
+
+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
+
+In general, the New York Public Library uses Title Case for titles. This means
+only using capital letters for the principal words. Articles, conjunctions, and
+prepositions do not get capital letters unless they start the title. For example:
+
+<Canvas>
+  <DSProvider>
+    <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>
+      <li>The Future Teen Stars of America Live on TikTok</li>
+      <li>How Jacqueline Woodson Captures Every Side of Brooklyn</li>
+    </List>
+  </DSProvider>
+</Canvas>
+
+## Character Count
+
+### Titles
+
+80 characters max, 60 characters recommended
+
+<Canvas>
+  <DSProvider>
+    <Heading level="three">
+      This is a Long Title to Show What 58 Characters Looks Like
+    </Heading>
+  </DSProvider>
+</Canvas>
+
+### Summaries
+
+140 characters max<br />
+Note: Online Exhibitions, with their longer, legacy summaries are an exception
+to this.
+
+<Canvas>
+  <DSProvider>
+    <Text>
+      This block of text shows what 140 chacters and spaces looks like. Integer
+      posuere erat a ante venenatis dapibus posueret aliquet nullas non.
+    </Text>
+  </DSProvider>
+</Canvas>
+
+### Page Intros
+
+No max character count, 200 characters recommended
+
+<Canvas>
+  <DSProvider>
+    <Text>
+      This block of text shows what 200 chacters and spaces looks like. Integer
+      posuere erat a ante venenatis dapibus posueret aliquet nullas non. Aenean
+      eu leo quam. Pellentesque ornare sem quam venenatis.
+    </Text>
+  </DSProvider>
+</Canvas>
+
+## Figma Reference
+
+For additional spacing information, please refer to the Figma Main file.
+
+- [Typeface](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A0)
+- [Heading Styles](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A16)
+- [Text Styles (Part 1)](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A52)
+- [Text Styles (Part 2)](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10975%3A100)

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

@@ -0,0 +1,272 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} 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";
+
+<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            | `1.0.2`    |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [With a title](#with-a-title)
+- [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
+
+<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",
+  ],
+];
+
+## Component Props
+
+<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
+
+Internally, 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 above the `thead` element.
+
+This component should be used to render tabular data only and not used for layout
+purposes.
+
+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. If a table has two levels
+of headers (such as two levels of horizontal headers), break the data into two
+separate tables.
+
+Resources:
+
+- [W3C Tables Tutorial](https://www.w3.org/WAI/tutorials/tables/)
+- [MDN table: The Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
+- [MDN HTML table advance features and accessibility](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced)
+- [Chakra UI Table](https://chakra-ui.com/docs/components/data-display/table)
+
+## 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>
+
+## 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>