@wfp/react/src/components/Text/README.mdx

WFP UI Kit

The **Text** component adds a default style, formatting and spacing for a text.

More information can be found in the [typography documentation](?path=/story/documentation-general--typography).
You can specify the `kind` prop to apply font styles to Text. If you do not specify the variant prop, by default, Text applies the styling from specifying the variant value to medium.
You can specify block to enable block and nowrap to enable nowrap. For ellipsis on overflow to work properly, block and nowrap should be manually set to true.

### Usage with react

```js
import { Story } from '@wfp/react';
<Story>Content</Story>;
```

### Usage with HTML

```js
<div class="story">
  <h1 class="wfp--story__title">Story Title</h1>
  <h2 class="wfp--story__subtitle">The Sub Title</h2>
  <p>
    Some <a href="#">text</a>
  </p>
  <ul>
    <li>A list</li>
    <li>Another list item</li>
  </ul>
</div>
```

### Elements

When applying the story classes the margins between the elements will be calculated automatically.

### Selectors

| kind property | css class                       | html-tag        | Role                                            |
| ------------- | ------------------------------- | --------------- | ----------------------------------------------- |
| `title`       | `.wfp--story__title`            | `h1`            | The main title of the story                     |
| `subtitle`    | `.wfp--story__subtitle`         | `h3`            | A subtitle placed directly under the main title |
| `h1`          | `.wfp--story__h1`               | `h1`            | A primary heading                               |
| `h2`          | `.wfp--story__h2`               | `h2`            | A secondary heading                             |
| `h3`          | `.wfp--story__h3`               | `h3`            | A tertiary heading                              |
| `h4`          | `.wfp--story__h4`               | `h4`            | A heading 4                                     |
| `h5`          | `.wfp--story__h5`               | `h5`            | A heading 5                                     |
| `p`           | `.wfp--story__p`                | `p`             | regular paragraph                               |
| `i`           | `.wfp--story__i`                | `p`             | italic text                                     |
| `bold`        | `.wfp--story__bold`             | `bold` `strong` | bold text                                       |
| `code`        | `.wfp--story__code`             | `div`           | code block                                      |
| `sup`         | `.wfp--story__sup`              | `p`             | sup                                             |
| `a`           | `.wfp--story__a`                | `a`             | link element                                    |
| `highlight`   | `.wfp--story__inline-highlight` | `none`          | inline highlighted text                         |
| `list`        | `.wfp--story__list`             | `none`          | default story list                              |
| `img`         | `none`                          | `none`          | image shown as a block element                  |

### HTML Usage

By adding `<div class="wfp--story"></div>` the story styling will be applied to all containing elements.