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

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

<Meta of={ProductEditionListV2Stories} />

# ProductEditionListV2

<br />

## `ProductEditionListsV2` are used to display all the editions available for a product.

<br />

### Default

<Canvas>
  <Story of={ProductEditionListV2Stories.Default} />
</Canvas>

### Carousel

<Canvas>
  <Story of={ProductEditionListV2Stories.Carousel} />
</Canvas>

### Configurator mode

<Canvas>
  <Story of={ProductEditionListV2Stories.ConfiguratorMode} />
</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} />
