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

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

@@ -1,419 +0,0 @@
-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

@@ -1,272 +0,0 @@
-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>