import { Meta } from '@storybook/addon-docs/blocks';
import { CustomThemeProvider } from '../theme';

<Meta title="Foundations/Text Parser" />

<CustomThemeProvider>
  # Text Parser

  The Little World Text Parser allows for copy to include pre-defined tags that allows the rendered text to contain certain styling or functional elements.
  The Parser automatically converts html links included in the text into clickable html anchors, unless they are included as part of a pre-defined tag.

  ```
  https://little-world.com and little-world.com // both will be converted into html anchors
  ```

  Tags follow the html tag format and must be written as such:

  ```
  <highlight>This text will be highlighted</highlight>
  <bold>This text will be bold in the current color</bold>
  ```

  When using tags that correspond to html elements, attributes for that element can be included in a JSON object within the opening tag:

  ```
  <a {"href": "little-world"}>this is an anchor</a>
  <button {"data-cal-link":"www.validlink.com", "data-cal-config":"{ layout: stacked }"}>Click Me</button>
  ```

  The [Text](?path=/story/components-text--default) component has the text parser baked into it.
  Therefore it always recommended to wrap all text in the Text Component to benefit from the parser (plus get the correctly styling and types).

  ## Valid Little World tags

  | Tag       | Output                                | Requires       |
  | --------- | ------------------------------------- | -------------- |
  | a         | html anchor tag                       | href attribute |
  | button    | html button element                   |                |
  | bold      | bold text                             |                |
  | highlight | html strong tag and "highlight" color | -              |
</CustomThemeProvider>
