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

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

<Title>Avatar 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="Avatar Carousel">
    <AvatarCarousel />
  </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}>
  {avatarCarouselData.flatMap(item => (
    <Box p={2} pr={0} key={item.id}>
      <Box
        borderRadius="50%"
        style={{
          width: 96,
          height: 96,
          background: `url(${item.image}) no-repeat`,
          backgroundSize: '100% 100%',
          backgroundColor: colors.white,
          boxShadow: shadows.clientEllipse,
        }}
      />
    </Box>
  ))}
</Carousel>
```