import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput } from '../../../../../../tools/docTools';
import { categoriesMultiLevelMock as headerCategoriesMock } from '../../../../../../../mocks/nav/primary-nav/categories';
import HeaderCategoriesMenu from '../HeaderCategoriesMenu';

export const settingsDocs = {};

<Meta
    title="Global Components/Header/Atoms/Header Categories Menu"
    component={HeaderCategoriesMenu}
    parameters={{
        layout: 'fullscreen'
    }}
/>

# HeaderCategoriesMenu
<br />

## `HeaderCategoriesMenu` are used to show all category links
<br />

### Default
<Canvas>
    <Story name="Default">
        <HeaderCategoriesMenu
            categories={headerCategoriesMock}
            settings={getKnobs(HeaderCategoriesMenu.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
```jsx
import HeaderCategoriesMenu
from '@appdirect/sfb-theme-components/src/components/header/atoms/common/header-categories-menu/HeaderCategoriesMenu';

<HeaderCategoriesMenu />
```

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

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

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