import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Table } from ".";
import * as TableStories from "./Table.stories";

<Meta of={TableStories} />

# Table

The `Table` component is used for displaying tabular data, in rows and columns. It can be comprised
of a head, body and foot, all of which are optional.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Table } from "@simplybusiness/mobius";
```

## Examples

### Default

<Canvas of={TableStories.Default} />

### Extended

<Canvas of={TableStories.Extended} />

## Accessibility

In order to make the structure of the table clear, every table should include a `Table.Head` with `Table.HeaderCell` cells. Each row should also have
a `Table.HeaderCell` to indicate what the data for that row is pertaining to.

## Table Props

<ArgTypes component={Table} />

## Component HTML Structure and Class names

The following HTML is rendered for a Table:

```html
<table class="mobius-table">
  <thead class="mobius-table__head">
    <tr class="mobius-table__row">
      <th class="mobius-table__cell">Header cell</th>
    </tr>
  </thead>
  <tbody class="mobius-table__body">
    <tr class="mobius-table__row">
      <td class="mobius-table__cell">Body cell</td>
    </tr>
  </tbody>
  <tfoot class="mobius-table__foot">
    <tr class="mobius-table__row">
      <td class="mobius-table__cell">Footer cell</td>
    </tr>
  </tfoot>
</table>
```
