import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks';
import { Card } from './card.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Components/LayoutContainersCard and Sections" component={Card} />

# Cards and Sections

`Cards` give you a box with a drop-shadow to put stuff in. They support the `spacing` props for margins and padding as well as the `stacked`, `justify`, and `align` properties for layout control.

`Cards` can also be interactive; if you add an `onClick` or a `href` to them you will get keyboard focus and button/link functionality.

`CardSections` give you visually separated, vertically stacked sections inside a given card. They support the `spacing` props for padding.

`CardSections` can also be made interactive individually by giving them `onClick` properties. This is helpful for making clickable lists of things for example.

## Stories

### Default

<Canvas>
  <Story id="components-layout-containers-card--default" />
</Canvas>

### Clickable With Href

<Canvas>
  <Story id="components-layout-containers-card--with-href" />
</Canvas>

### With onClick

<Canvas>
  <Story id="components-layout-containers-card--with-on-click" />
</Canvas>

### Card with Sections

<Canvas>
  <Story id="components-layout-containers-card--card-with-sections" />
</Canvas>

### Card with Clickable Sections (onClick)

<Canvas>
  <Story id="components-layout-containers-card--card-with-clickable-sections" />
</Canvas>

## Supported Property Mixins - Card

Spacing:

<Canvas>
  <Story id="components-layout-containers-card--mixins-spacing" />
</Canvas>

Stacked:

<Canvas>
  <Story id="components-layout-containers-card--mixins-stacked" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-layout-containers-card--mixins-stackee" />
</Canvas>

## Supported Property Mixins - CardSection

Spacing:

<Canvas>
  <Story id="components-layout-containers-card--mixins-section-spacing" />
</Canvas>

Stacking:

<Canvas>
  <Story id="components-layout-containers-card--mixins-section-stacked" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Card} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/structures/card"
  type="github"
/>