import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import Sortable from './'
import { Card } from '../index'

<Meta title="Utilities/UI Interactive/Sortable" component={Sortable} />

# Sortable

This component provides the ability to drag sort child components. This component is built on top of [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) and enhanced to make it easier to use.

Any child components placed inside this component automatically become sortable.

<Canvas>
  <Story name="default">
    <Sortable>
      <Card>Jacobim Mugatu</Card>
      <Card>Lord Business</Card>
      <Card>Brennan Huff</Card>
    </Sortable>
  </Story>
</Canvas>

#### Reference

- **Engineering**: Juan Pablo
- **Usage**: Beacon embed

<br />
<br />

### Props

This component accepts all props used by [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc).

<ArgsTable of={Sortable} />
