import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput } from '../../../../../tools/docTools';
import { commonMock } from '../../../../../../mocks/common';
import { navWithCategoriesMock } from '../../../../../../mocks/nav'
import HeaderNavigationBar from '../HeaderNavigationBar';

export const settingsDocs = {};

<Meta
    title="Global Components (Preview)/Header/Atoms/Header Navigation Bar"
    component={HeaderNavigationBar}
    parameters={{
        layout: 'fullscreen'
    }}
/>

# HeaderNavigationBar
<br />

## `HeaderNavigationBar` are used as the navigation in the header.
<br />

### Default
<Canvas>
    <Story name="Default">
        <HeaderNavigationBar
            searchBar={commonMock.searchBar}
            settings={getKnobs(HeaderNavigationBar.schema().form)}
        />
    </Story>
</Canvas>

### With category menu
<Canvas>
    <Story name="With category menu">
        <HeaderNavigationBar
            categories={navWithCategoriesMock.primary.categories}
            settings={getKnobs(HeaderNavigationBar.schema().form)}
        />
    </Story>
</Canvas>

### With search bar
<Canvas>
    <Story name="With Search Bar">
        <HeaderNavigationBar
            displaySearchBar
            searchBar={commonMock.searchBar}
            settings={getKnobs(HeaderNavigationBar.schema().form)}
        />
    </Story>
</Canvas>


## Usage Example
```jsx
import HeaderNavigationBar from
    '@appdirect/sfb-theme-components/src/components/Header/atoms/header-navigation-bar/HeaderNavigationBar';

<HeaderNavigationBar />
```

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

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

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