import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { InlineStyledText } from './inline-styled-text.component';

<Meta title="One-off/InlineStyledText" component={InlineStyledText} />

# Inline Styled Text

`InlineStyledText` creates a chain of Spans allowing for inline styling that differs from the stlying of the other text.

The text prop passed in is the string to render, but with additional tokens to differentiate inline styling vs base styling (eg. '[[' and ']]')

## Default

<Canvas withToolbar>
  <Story id="one-off-inlinestyledtext--default" />
</Canvas>

## Bold

<Canvas withToolbar>
  <Story id="one-off-inlinestyledtext--bold" />
</Canvas>

## No Prefix

<Canvas withToolbar>
  <Story id="one-off-inlinestyledtext--no-prefix" />
</Canvas>

## NoSuffix

<Canvas withToolbar>
  <Story id="one-off-inlinestyledtext--no-suffix" />
</Canvas>

## No Styled Text

<Canvas withToolbar>
  <Story id="one-off-inlinestyledtext--no-styled-text" />
</Canvas>

## Long Wrapping Text

<Canvas withToolbar>
  <Story id="one-off-inlinestyledtext--long-wrapping-text" />
</Canvas>

## Multiple Styled Substrings

<Canvas withToolbar>
  <Story id="one-off-inlinestyledtext--multiple-styled-substrings" />
</Canvas>
