@eureca/eureca-ui/src/components/Carousel/stories/cards-carousel.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { Carousel } from '../';
import { CardsCarousel } from './cards-carousel.stories.js';

<Meta title='Originals/Carousel' component={Carousel} decorators={[withKnobs]}/>

<Title>Cards Carousel</Title>

<Description>
  Carousel com avatars dos aplicativos Eureca.
  É baseado na biblioteca [React Slick](https://react-slick.neostack.com/) e aceita todas suas props padrão.
</Description>

<Description>
É uma aplicação do componente Carousel.
</Description>

<Preview>
  <Story name="Cards Carousel">
    <CardsCarousel />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| variant | Escolha entre setas e paginação <br /> 'dots' \| 'default' | 'default' |
| children | Items a serem exibidos pelo carousel <br /> 'string' | null |

<Subtitle>Arquivos de CSS</Subtitle>

Os arquivos de CSS da biblioteca do Carousel devem ser adicionados no Header do app.
No caso do Next.JS podem ser incluídos no _document.js.

```jsx
<link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
```

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Carousel variant="dots" variableWidth={true}>
  {cardsCarouselData.flatMap((data, index) => (
    <Box p={2} pr={0} key={index}>
      <JourneyCard {...data} />
    </Box>
  ))}
</Carousel>
```