@eureca/eureca-ui/src/components/Carousel/stories/basic-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 { BasicCarousel } from './basic-carousel.stories.js';

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

<Title>Basic 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="Basic Carousel">
    <BasicCarousel />
  </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 |
| boxProps | Props aceitas pelo componente Box do Material a serem passadas para o container do Carousel <br /> 'object' | { } |

<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>
  {photoCarouselData.flatMap(item => (
    <div key={item.id}>
      <Box
        width={1}
        height="304px"
        style={{
          background: `url(${item.image}) no-repeat`,
          backgroundSize: 'cover',
          cursor: 'pointer',
        }}
      />
    </div>
  ))}
</Carousel>
```