import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import ImageColorSwiper from 'js/patterns/organisms/swiper/image-color-swiper'
import ProductSwiper from 'js/patterns/organisms/swiper/product-swiper'
import ColorSwiper from 'js/patterns/organisms/swiper/color-swiper'
import SizeSwiper from 'js/patterns/organisms/swiper/size-swiper'
import CategorySwiper from 'js/patterns/organisms/swiper/category-swiper'

<Meta title='4.Organisms|Swiper' />

# Swiper

## Image Color Swiper
Displays all available color options and shows how it looks like on real pictures. The user can swipe through it.

<Preview withToolbar>
    <Story name='Image Color Swiper'>
        <ImageColorSwiper />
    </Story>
</Preview>

## Product Swiper
Display a limited list of products in a row

<Preview withToolbar>
    <Story name='Product Swiper'>
        <ProductSwiper />
    </Story>
</Preview>

## Color Swiper
Displays a list of all available colors and mostly used in filters

<Preview withToolbar>
    <Story name='Color Swiper'>
        <ColorSwiper />
    </Story>
</Preview>

## Size Swiper
Displays available sizes of a product

<Preview withToolbar>
    <Story name='Size Swiper'>
        <SizeSwiper />
    </Story>
</Preview>

## Category Swiper
Displays available categories 
<Preview withToolbar>
    <Story name='Category Swiper'>
        <CategorySwiper />
    </Story>
</Preview>