import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { TableContentFromObject, FormOutput } from '../../../tools/docTools';
import { getKnobs } from '../../../tools/knobsHelper';
import { headerDataMock, headerDataMockLoggedIn } from '../../../../mocks/components/header';
import Header from '../Header';

export const settingsDocs = {};

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

# Header
<br />

## `Headers` are used as the main Header for a document or page.
<br />

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

### With user logged in
<Canvas>
    <Story name="With user logged in">
        <Header
            data={headerDataMockLoggedIn}
            settings={getKnobs(Header.schema().form)}
        />
    </Story>
</Canvas>


## Usage Example
```jsx
import Header from '@appdirect/sfb-theme-components/src/components/Header/Header';

<Header />
```

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

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

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