import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Card from './Card';
import Icon from '../Icon';
import Input from '../Input';

<Meta title="Data Display|Card" component={Card} />

# Card

Simple rectangular container.

## When To Use

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

<Preview>
  <Story name="Index">
    <Card title="Card Title" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." actions={<Icon.Button name="toggle-active" color="#00aeef" />}>
        <Input placeholder="Placeholder" />
    </Card>
  </Story>
</Preview>

### Disabled Card

<Preview>
  <Story name="Disabled">
    <Card disabled title="Card Title" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." actions={<Icon.Button name="toggle" />}>
        <Input disabled />
    </Card>
  </Story>
</Preview>

#### Props

<Props of={Card} />