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

<Meta
  title="Components/Typography/InlineStyledText 🔬"
  component={InlineStyledText}
/>

# Inline Styled Text 🔬

> 🔬 This component does not map to anything in figma and should be considered **experimental**.

`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>
  <Story id="components-typography-inlinestyledtext-🔬--default" />
</Canvas>

## Bold

<Canvas>
  <Story id="components-typography-inlinestyledtext-🔬--bold" />
</Canvas>

## No Prefix

<Canvas>
  <Story id="components-typography-inlinestyledtext-🔬--no-prefix" />
</Canvas>

## NoSuffix

<Canvas>
  <Story id="components-typography-inlinestyledtext-🔬--no-suffix" />
</Canvas>

## No Styled Text

<Canvas>
  <Story id="components-typography-inlinestyledtext-🔬--no-styled-text" />
</Canvas>

## Long Wrapping Text

<Canvas>
  <Story id="components-typography-inlinestyledtext-🔬--long-wrapping-text" />
</Canvas>

## Multiple Styled Substrings

<Canvas>
  <Story id="components-typography-inlinestyledtext-🔬--multiple-styled-substrings" />
</Canvas>