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

import { color } from '../../_utils/branding'
import { TYPOGRAPHY } from '../../_utils/taxonomy'
import { TextSubHeaderStrong } from '../subHeaderStrong'
import { TextSubHeader } from '.'

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

# **SubHeader**

<Canvas>
  <Story name="Regular">
    <TextSubHeader isInverted={false} as="h1">
      {text('children', 'The quick\n brown fox jumps\n over the lazy\n dog')}
    </TextSubHeader>
  </Story>
</Canvas>

### Usage

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

<TextSubHeader>The quick brown fox jumps over the lazy dog</TextSubHeader>
```

<ArgsTable of={TextSubHeader} />

## *Strong*

<Canvas>
  <Story name="Medium">  
    <TextSubHeaderStrong isInverted={false} as="h1">
      The quick brown fox jumps over the lazy dog
    </TextSubHeaderStrong>    
  </Story>
</Canvas>

### Usage

```jsx
import { TextSubHeaderStrong } from '@blablacar/ui-library/build/typography/subHeaderStrong'

<TextSubHeaderStrong>The quick brown fox jumps over the lazy dog</TextSubHeaderStrong>
```

<ArgsTable of={TextSubHeaderStrong} />



### isInverted
<Canvas>
  <Story name="isInverted">
    <h1 style={{ backgroundColor: color.blue }}>
      <TextSubHeader isInverted>The quick brown fox jumps over the lazy dog</TextSubHeader>
    </h1>
  </Story>
</Canvas>