import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import SecondaryNav from '../SecondaryNav';
import { getKnobs } from '../../../tools/knobsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';
import { secondaryNavMock } from '../../../../mocks/menu/secondary-nav';
import { categoriesMock } from '../../../../mocks/menu/categories';

export const data = {
    primaryNav: categoriesMock,
    secondaryNav: secondaryNavMock
};

export const secondaryNavSettings = {
    backgroundColor: 'The background color of the secondary navigation.'
};

export const secondaryNavSettingsMock = {
    backgroundColor: '#BBFAF4'
};

<Meta title="Components/Secondary Navigation" component={SecondaryNav} />

# SecondaryNav
<br />

## `SecondayNavs` are the navigation bars that enable you to browse in different product listing pages.
<br />

### Default
<Canvas>
    <Story name="Default">
        <SecondaryNav data={data} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <SecondaryNav data={data} settings={secondaryNavSettingsMock} />
    </Story>
</Canvas>

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

```jsx
import SecondaryNav from
    '@appdirect/sfb-theme-components/src/components/secondary-nav/SecondaryNav';

<ProductFeaturedCustomers settings={settingsData} />

```
## Props

<ArgsTable of={SecondaryNav} />

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

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