import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import FlexContainer from '../FlexContainer';
import FlexContainerSchema from '../../../constants/atoms/schema/flex-container';
import { getKnobs } from '../../../tools/knobsHelper';
import CardStyle from '../../product-group-tiles/card-style/CardStyle';
import { defaultValues } from '../../../constants/atoms/product-group-tiles';
import productGroupTilesMocks from '../../../../mocks/product/productGroupTiles';

<Meta title="Atoms (Preview)/Flex Container" component={FlexContainer} />

# Flex Container
<br />

## `FlexContainer` automatically re-arranges the components passed based on screen size

### Default
<Canvas>
    <Story name="Default">
        <FlexContainer
            component={CardStyle}
            itemList={productGroupTilesMocks}
            defaultValues={defaultValues}
            flexContainerSettings={getKnobs(FlexContainerSchema.schema().form)}
        />
    </Story>
</Canvas>
