import { Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import PageHeader from './PageHeader';
import { TabNav, TabNavItem } from '../TabNav/TabNav';

<Meta title="Layout/PageHeader" component={PageHeader} />

# PageHeader

Page title and short additional intro text for a non-article page.

It takes optional children, which should be navigation elements (tabs, search bars, etc).

## Props

<Canvas>
	<Story
		args={{
			title: "Good morning, USA"
		}}
		name="Default"
	>
		{ args => <PageHeader {...args} /> }
	</Story>
</Canvas>

<ArgsTable story="Default" />

## Usage guidelines

- **Do not** use this on a page where an H1 already exists
- **Do not** use the optional children for general page content

## Examples

### With intro, no border

<Canvas>
	<Story
		args={{
			border: false,
			intro: "I’ve got a feeling that it’s gonna be a wonderful day.",
			title: "Good morning, USA",
		}}
		name="With intro"
	>
		{ args => <PageHeader {...args} /> }
	</Story>
</Canvas>

### With tagline

<Canvas>
	<Story
		args={{
			title: "Good morning, USA",
			tagline: "Last updated 3 hours ago",
		}}
		name="With tagline"
	>
		{ args => <PageHeader {...args} /> }
	</Story>
</Canvas>

### With nested navigation

<Canvas>
	<Story
		args={{
			showPadding: false,
			title: "Good morning, USA",
			children: (
				<TabNav>
					<TabNavItem isActive={true}>Stan</TabNavItem>
					<TabNavItem>Francine</TabNavItem>
					<TabNavItem>Roger</TabNavItem>
					<TabNavItem>Klaus</TabNavItem>
				</TabNav>
			),
		}}
		name="With navigation"
	>
		{ args => <PageHeader {...args} /> }
	</Story>
</Canvas>

### “Fully dressed”

<Canvas>
	<Story
		args={{
			intro: "I’ve got a feeling that it’s gonna be a wonderful day.",
			showPadding: false,
			title: "Good morning, USA",
			tagline: "Last updated 3 hours ago",
			children: (
				<TabNav>
					<TabNavItem isActive={true}>Stan</TabNavItem>
					<TabNavItem>Francine</TabNavItem>
					<TabNavItem>Roger</TabNavItem>
					<TabNavItem>Klaus</TabNavItem>
				</TabNav>
			),
		}}
		name="Fully dressed"
	>
		{ args => <PageHeader {...args} /> }
	</Story>
</Canvas>