import { Meta } from "@storybook/addon-docs/blocks";
import { padding } from "../tokens/padding";
import { SimpleTable } from "../components/SimpleTable";

<Meta title="Tokens/Spacing" />

export const Table = ({ children, columns }) => (
  <SimpleTable className="w-1/2">
    <SimpleTable.Row>
      {columns.map((column) => (
        <SimpleTable.HeaderCell key={column} className="w-1/2">
          {column}
        </SimpleTable.HeaderCell>
      ))}
    </SimpleTable.Row>
    {children}
  </SimpleTable>
);

export const Row = ({ children }) => (
  <SimpleTable.Row className="border-b border-gray-300">
    {children}
  </SimpleTable.Row>
);

export const Cell = ({ children }) => (
  <SimpleTable.Cell>{children}</SimpleTable.Cell>
);

# Spacing

Spacing tokens use a 4px scale.

The follow values can be used for `margin`, `padding` and `gap`.

`margin` also includes a negative scale and the `auto` keyword.

<Table columns={["Key", "Value"]}>
  {Object.keys(padding).map((key) => (
    <Row key={key}>
      <Cell>
        <code>{key}</code>
      </Cell>
      <Cell>
        <code>{padding[key]}</code>
      </Cell>
    </Row>
  ))}
</Table>

## Using spacing tokens

### Margin

Margin controls the spacing on the outside of an element.

<Table columns={["Classname", "Description"]}>
  <Row>
    <Cell>
      <code>{`m-{key}`}</code>, <code>{`-m-{key}`}</code>
    </Cell>
    <Cell>All sides (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mx-{key}`}</code>, <code>{`-mx-{key}`}</code>
    </Cell>
    <Cell>Left and right (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`my-{key}`}</code>, <code>{`-my-{key}`}</code>
    </Cell>
    <Cell>Top and bottom (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mt-{key}`}</code>, <code>{`-mt-{key}`}</code>
    </Cell>
    <Cell>Top (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mb-{key}`}</code>, <code>{`-mb-{key}`}</code>
    </Cell>
    <Cell>Bottom (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`ml-{key}`}</code>, <code>{`-ml-{key}`}</code>
    </Cell>
    <Cell>Left (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mr-{key}`}</code>, <code>{`-mt-{key}`}</code>
    </Cell>
    <Cell>Right (positive, negative)</Cell>
  </Row>
</Table>

### Padding

Padding controls the spacing on the inside of an element.

<Table columns={["Classname", "Description"]}>
  <Row>
    <Cell>
      <code>{`p-{key}`}</code>
    </Cell>
    <Cell>All sides</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`px-{key}`}</code>
    </Cell>
    <Cell>Left and right</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`py-{key}`}</code>
    </Cell>
    <Cell>Top and bottom</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pt-{key}`}</code>
    </Cell>
    <Cell>Top</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pb-{key}`}</code>
    </Cell>
    <Cell>Bottom</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pl-{key}`}</code>
    </Cell>
    <Cell>Left</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pr-{key}`}</code>
    </Cell>
    <Cell>Right</Cell>
  </Row>
</Table>

### Gap

Gap is used to space items within grid and flexbox layouts.

<Table columns={["Classname", "Description"]}>
  <Row>
    <Cell>
      <code>{`gap-{key}`}</code>
    </Cell>
    <Cell>Both horizontal and vertical</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`gap-x-{key}`}</code>
    </Cell>
    <Cell>Horizontal</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`gap-y-{key}`}</code>
    </Cell>
    <Cell>Vertical</Cell>
  </Row>
</Table>