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

<Meta
  title="Components/Structural/Card"
  component={Card}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A10368',
    },
  }}
/>

# Card

A Card component is used to encapsulate pieces of UI that share a common concept or action.

<Canvas>
  <Story name="default">
    <Card>Hello, this is a card</Card>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Card} />

### Stories

#### With link

If a `to` or `href` prop is passed into the Card component, it will render the `Link` component, which provides additional link-based props.

<Canvas>
  <Story name="with link">
    <Card href="https://www.helpscout.net/">
      Link to: https://www.helpscout.net/
    </Card>
  </Story>
</Canvas>

#### Floating

<Canvas>
  <Story name="Floating">
    <Card floating hover>
      Hello, this is a floating hoverable card
    </Card>
  </Story>
</Canvas>

## Card.Block

A Card.Block component is used to section content within a [`<Card>`](../Card).

Note: It is highly recommended the `seamless` prop is used for the container `<Card>`. This allows for the `<Card.Block>` components to flow all the way to the inner-edges of `<Card>`.

<Canvas>
  <Story name="Card Blocks">
    <Card seamless>
      <Card.Block>Frank "The Tank"</Card.Block>
      <Card.Block>You're my boy, Blue!</Card.Block>
    </Card>
  </Story>
</Canvas>

<ArgsTable of={Card.Block} />
