import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { productEditionListMockData as editionsData, productEditionListSkipConfiguratorMockData } from '../../../../../mocks/product/productEditions';
import { CollapsibleJsonSnippet } from '../../../../tools/docTools';
import { ProductEditionListComponent as ProductEditionList } from '../ProductEditionList';
import * as ProductEditionListStories from './ProductEditionList.stories';

<Meta of={ProductEditionListStories} />

# ProductEditionList

<br />

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

<br />

### Default

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

### Carousel

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

### Configurator mode

<Canvas>
  <Story of={ProductEditionListStories.ConfiguratorMode} />
</Canvas>

### Skip configurator mode - Add to Cart

<Canvas>
  <Story of={ProductEditionListStories.SkipConfiguratorModeAddToCart} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="editionsData" code={editionsData} />

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

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

## Props

<ArgsTable of={ProductEditionList} />
