import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import imgTheming from './images/theming.jpg'

<Meta title='1.Docs|12-Utilities/Text Helpers'/>

# Text Helpers

| Class        | Description    
| ------------- |:-------------:
| `.u-text-normal`      | Normal font weight for text
| `.u-text-strong`      | Strong font weight for text
| `.u-text-left` | Align text to left
| `.u-text-center` | Align text to center
| `.u-text-right` | Align text to right
| `.u-text-nowrap` | Nowrap text
| `.u-text-one-liner` | Put a text in only one line without a break and add dots to the end
| `.u-text-uppercase` | Uppercase text
| `.u-line-height-reset` | Reset the line-height to 1

<Preview>
    <Story name='Text Normal'>
        <div>
            <p className='u-text-normal'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-normal'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

<Preview>
    <Story name='Text Strong'>
        <div>
            <p className='u-text-strong'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-strong'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

<Preview>
    <Story name='Text Left'>
        <div>
            <p className='u-text-left'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-left'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

<Preview>
    <Story name='Text Center'>
        <div>
            <p className='u-text-center'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-center'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

<Preview>
    <Story name='Text Right'>
        <div>
            <p className='u-text-right'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-right'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

<Preview>
    <Story name='Text One Liner'>
        <div>
            <p className='u-text-one-liner'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-one-liner'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

<Preview>
    <Story name='Text Uppercase'>
        <div>
            <p className='u-text-uppercase'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-text-uppercase'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```

<Preview>
    <Story name='Line Height Reset'>
        <div>
            <p className='u-line-height-reset'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
        </div>
    </Story>
</Preview>

```html
<p className='u-line-height-reset'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, quibusdam dignissimos. Fugit commodi earum mollitia iste illum repellendus, explicabo, odio recusandae, est rem dolorem consequuntur saepe reprehenderit ad perferendis dolorum.</p>
```