import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductListingControls from '../ProductListingControls';
import { getKnobs } from '../../../tools/knobsHelper';
import { listingProductsMock } from '../../../../mocks/listingProducts';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

<Meta title="Components/Product Listing Controls" component={ProductListingControls} />

# ProductListingControls
<br />

## `ProductListingControls` control the order and layout of the products in the listing page.
<br />

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


## Usage Example
<CollapsibleJsonSnippet
    summary="listingProducts"
    code={listingProductsMock}
/>
<br />
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(ProductListingControls.schema().form)}
/>

```jsx
import ProductListingControls
from '@appdirect/sfb-theme-components/src/components/product-listing-controls/ProductListingControls';

<ProductListingControls data={listingProducts}  settings={settingsData} />

```
## Props
<ArgsTable of={ProductListingControls} />
