import { moduleMetadata }               from '@storybook/angular';
import { Canvas, Meta, Story,  Props }  from '@storybook/addon-docs';

import { TwigContainerComponent }       from '../../../../utils/twig-container/twig-container.component';
import { CarouselComponent }            from '../angular/carousel.component';

<Meta
    title='Components/Carousel'
    component={CarouselComponent}
    decorators={[
        moduleMetadata({ declarations: [CarouselComponent, TwigContainerComponent]}),
    ]}
    argTypes={{}}
/>

# Carousel



## Drupal implementation example

```js
    <div class='container py-5'>
        <div class='bf-carousel js-bf-carousel-demo {{ class|default('') }}'>
            {% include '@bf-components/card/twig/phone.twig' with {...} only %}
            {% include '@bf-components/card/twig/phone.twig' with {...} only %}
            {% include '@bf-components/card/twig/phone.twig' with {...} only %}
            {% include '@bf-components/card/twig/phone.twig' with {...} only %}
        </div>
    </div>

    <script>
        bfSlick.assignCarousel('.js-bf-carousel-demo', {
            // You are free to define your own Slick configuration.
            // Doc: https://kenwheeler.github.io/slick/
            arrows: true,
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            mobileFirst: true,
            prevArrow: bfSlick.getPrevSlickBtn(),
            nextArrow: bfSlick.getNextSlickBtn(),
            responsive: [
                {
                    breakpoint: (breakpoints.md-1),
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: breakpoints.lg,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3
                    }
                },
                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]
        }
    );
    </script>
```



## Drupal

> There is no Carousel Drupal component in Bifrost.
> Please use <a class='bf-link' target='_blank' href='https://kenwheeler.github.io/slick/'>Slick carousel</a>.

export const Drupal = (args) => ({
    component   : TwigContainerComponent,
    props       : args,
});

<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='800px'
        args={{
            elementPath : 'components/carousel/_doc/template.drupal',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>