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

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

<Meta title="Components (Preview)/Product Variants/Atoms/VariantOptionList" component={VariantOptionList} />

# VariantOptionList
<br />

## `VariantOptionList` are used to display variant options as a list.
<br />

### Default
<Canvas>
    <Story name="Default">
        <VariantOptionList
            variantOption={variantOption}
        />
    </Story>
</Canvas>

### Default with disabled element
<Canvas>
    <Story name="Default with disabled">
        <VariantOptionList
            variantOption={variantOptionWithDisabled}
        />
    </Story>
</Canvas>

### Condensed
<Canvas>
    <Story name="Condensed">
        <VariantOptionList
            variantOption={variantOption}
            isCondensed
        />
    </Story>
</Canvas>

### Condensed with disabled element
<Canvas>
    <Story name="Condensed with disabled">
        <VariantOptionList
            variantOption={variantOptionWithDisabled}
            isCondensed
        />
    </Story>
</Canvas>

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