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

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

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

# VariantOptionSwatch
<br />

## `VariantOptionSwatchs` are used to display variant options for colors.
<br />

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

### With disabled element
<Canvas>
    <Story name="With disabled element">
        <VariantOptionSwatch
            variantOption={variantOptionWithDisabled}
        />
    </Story>
</Canvas>

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