import { Canvas, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as TableStories from './Table.stories'

<Meta of={TableStories} />

# Table

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Table"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37841&t=P1w10jr2cpPuaayw-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929256/Table"

/>

<KAIOInstallation
  exportNames={[
    'TableCard',
    'TableContainer',
    'TableHeader',
    'TableHeaderRow',
    'TableHeaderRowCell',
    'TableRow',
    'TableRowCell',
  ]}
/>

## Overview

A table displays rows of data, including all data in a set, making it efficient to look up values.

<Canvas of={TableStories.Playground} />

## TableContainer API

### Variant

Controls the spacing in each cell within the table. Options available are `compact`, `default` and `data`.

#### Compact

<Canvas of={TableStories.Data} />

#### Default

<Canvas of={TableStories.Default} />

#### Data

<Canvas of={TableStories.Data} />

## TableHeaderRowCell API

### Sorting

<Canvas of={TableStories.Sorting} />

### Checkbox

To ensure there appropriate context for users of assistive technologies, when using a `checkable` `TableHeaderRowCell`, we advise in the `checkboxLabel`. This will be passed to the a checkbox aria-label and be announce to screen reader users when focused.

<Canvas of={TableStories.CheckboxVariant} />

### Icon

When using providing `icon` to `TableHeaderRowCell` the `labelText` will be passed to the `aria-label` of the SVG.

<Canvas of={TableStories.IconVariant} />

### Align and wrapping

<Canvas of={TableStories.HeaderAlignmentAndWrapping} />

### Tooltips

While Tooltip content can be passed to any table header via the `tooltipInfo` prop, it is strong advised to avoid this if the header is not an interactive element as the tooltip content will be unreadable to keyboard users or those that use assistive technologies.

<Canvas of={TableStories.Tooltip} />

You can read more about the Tooltip component and accessibility limitation [here](https://cultureamp.design/?path=/docs/components-tooltip--docs#screen-reader-accessibility).

### Reversed

<Canvas of={TableStories.Reversed} />

## TableCard API

### Link

<Canvas of={TableStories.LinkVariant} />

### Expandable

The `expandable` prop introduces known accessibility issues with nesting interactive elements as children of a `button` or `anchor` tag. We recommend avoiding this pattern if possible, or creating a tier 3 component that adheres to correct WCAG hierarchy.

<Canvas of={TableStories.Expandable} />