import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
import { text } from '@storybook/addon-knobs'

import { BASIC } from '../_utils/taxonomy'
import { SubHeader } from './index'

<Meta title={`${BASIC}/SubHeader`} />

# **SubHeader**

<Canvas>
  <Story name="As h2 (default)">
    <SubHeader>{text('children', 'SubHeader Title')}</SubHeader>
  </Story>
</Canvas>

<Canvas>
  <Story name="As paragraph">
    <SubHeader as="p">{text('children', 'SubHeader Title')}</SubHeader>
  </Story>
</Canvas>

## Specifications

### Behavior

Use it to categorize groups of information.
Also used to give existing rides and bookings a date and chronological context.

- Max 2 lines of text
- Not clickable
- Can be a sticky header

This component can appear as a sticky date separator on search results feed.

### Dev Specifications

**Normal state**
This component can appear as a date separator on search results feed.
In which case it should stick to the top of the page while scrolling.

## Usage

```jsx
import { SubHeader } from '@blablacar/ui-library/build/subHeader'

;<SubHeader>SubHeader Title</SubHeader>
```

<ArgsTable of={SubHeader} />