import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, text, number } from '@storybook/addon-knobs'
import { faker } from '@helpscout/helix'
import { ArticleCard } from '../index'
import CardList from './'

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

# CardList

A CardList component displays an array of `Card`s.

The children must be an `ArticleCard` or `Card` components.

<Canvas>
  <Story name="default">
    <div style={{ margin: 'auto', maxWidth: 420 }}>
      <CardList
        animationDelay={number('animationDelay', 0)}
        animationEasing={text('animationEasing', 'ease')}
        animationSequence={text('animationSequence', 'fade up')}
        animationStagger={number('animationStagger', 60)}
        stagger={boolean('stagger', true)}
      >
        <ArticleCard
          title={faker.lorem.sentence()()}
          content={faker.lorem.paragraph()()}
          id={faker.datatype.uuid()()}
          key={faker.datatype.uuid()()}
        />
        <ArticleCard
          title={faker.lorem.sentence()()}
          content={faker.lorem.paragraph()()}
          id={faker.datatype.uuid()()}
          key={faker.datatype.uuid()()}
        />
        <ArticleCard
          title={faker.lorem.sentence()()}
          content={faker.lorem.paragraph()()}
          id={faker.datatype.uuid()()}
          key={faker.datatype.uuid()()}
        />
      </CardList>
    </div>
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

<ArgsTable of={CardList} />
