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 { TextBodyStrikethrough } from '.'

<Meta title={`${TYPOGRAPHY}/Body/Strikethrough`} />

# **Body Strikethrough**

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

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

## Usage

```jsx
import { TextBodyStrikethrough } from '@blablacar/ui-library/build/typography/bodyStrikethrough'

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

<ArgsTable of={TextBodyStrikethrough} />