import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { editionsMockData as mockData } from '../../../../../mocks/product/productEditions';
import { CollapsibleJsonSnippet } from '../../../../tools/docTools';
import { ProductEditionListComponent as ProductEditionListV2 } from '../ProductEditionListV2';

export const editionsData = {
    editions: mockData.items,
    i18n: mockData.i18n,
    callToActions: {
        items: [{
            label: 'Buy Now'
        }]
    }
};

<Meta title="Components (Preview)/Product Configurator V2/Atoms/Product Edition List V2" component={ProductEditionListV2} />

# ProductEditionListV2
<br />

## `ProductEditionListsV2` are used to display all the editions available for a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductEditionListV2 data={editionsData} />
    </Story>
</Canvas>

### Carousel
<Canvas>
    <Story name="Carousel">
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
            <ProductEditionListV2
                data={{
                    ...editionsData,
                    editions: editionsData.editions.slice(0, 4)
                }}
                carouselEnabled
            />
        </div>
    </Story>
</Canvas>

### Configurator mode
<Canvas>
    <Story name="Configurator mode">
        <ProductEditionListV2 data={editionsData} configuratorMode />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet summary="editionsData" code={editionsData} />

```jsx
import ProductEditionListV2 from
    '@appdirect/sfb-theme-components/src/atoms/product-edition-v2/list/ProductEditionListV2';

<ProductEditionListV2 data={editionsData} />
```

## Props
<ArgsTable of={ProductEditionListV2} />
