import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { ComparableProducts } from '../ComparableProducts';
import { comparableProductsMock } from '../../../../mocks/comparableProducts';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';

export const comparableProductsSettings = {
    displayDividers: 'Show/Hide the dividers between the table rows and columns.',
    headingsPositions: 'The position of the headers (left or inline).',
    isStartingPriceVisible: 'Show/Hide the starting price of the products row.',
    isFeaturesVisible: 'Show/Hide the features of the products row.',
    isScreenshotsVisible: 'Show/Hide the screenshots of the products row.',
    isCategoriesVisible: 'Show/Hide the categories of the products row.',
    isDeveloperVisible: 'Show/Hide the developers of the products row.',
    isEditionsVisible: 'Show/Hide the editions of the products row.',
    isSpecificationsVisible: 'Show/Hide the specifications of the products row.',
    isTopReviewsVisible: 'Show/Hide the top reviews of the products row.',
    headerBackgroundColor: 'The background color of the headers.',
    dividersColor: 'The color of the dividers between the table rows and columns.'
};

<Meta title="Components/Comparable Products" component={ComparableProducts} />


# ComparableProducts
<br />

## `ComparableProducts` are used to compare selected products in a side by side grid
<br />

### Default
<Canvas>
    <Story name="Default">
        <ComparableProducts data={comparableProductsMock} settings={getKnobs(ComparableProducts.schema().form)} />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet
    summary="comparableProductsSettingsData"
    code={getKnobs(ComparableProducts.schema().form)}
/>

```jsx
import ComparableProducts from '@appdirect/sfb-theme-components/src/components/comparable-products/ComparableProducts';
<ComparableProducts settings={comparableProductsSettingsData} />
```
## Props

<ArgsTable of={ComparableProducts} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={comparableProductsSettings} />
</table>

### Form Output
<FormOutput code={ComparableProducts.schema().form} />
