import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks';
import VariantOptionList from '../VariantOptionList';
import { disableOption, productVariantsMock } from '../../../../../../mocks/product/product-variants/productVariants';
import { parseProduct } from '../../../../../tools/parsers/productParser';
import * as VariantOptionListStories from './VariantOptionList.stories';

export const variantOption = parseProduct(productVariantsMock).variantOptions[0];
export const variantOptionWithDisabled = disableOption(variantOption);

<Meta of={VariantOptionListStories} />

# VariantOptionList

<br />

## `VariantOptionList` are used to display variant options as a list.

<br />

### Default

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

### Default with disabled element

<Canvas>
  <Story of={VariantOptionListStories.DefaultWithDisabled} />
</Canvas>

### Condensed

<Canvas>
  <Story of={VariantOptionListStories.Condensed} />
</Canvas>

### Condensed with disabled element

<Canvas>
  <Story of={VariantOptionListStories.CondensedWithDisabled} />
</Canvas>

## Props

<ArgsTable of={VariantOptionList} />
