import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as TextStories from './Text.stories'

<Meta of={TextStories} />

# Text

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Text"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph"

/>

<KAIOInstallation exportNames="Text" />

## Overview

Applies styling for text. Renders a paragraph element by default.

<Canvas of={TextStories.Playground} />
<Controls of={TextStories.Playground} />

## Bolding

When you need to bold text, first ask if you are bolding to add emphasis or for stylistic reasons.

If you are adding emphasis to the text, use the `<strong>` tag. E.g. `<Text>The quick brown fox jumps over the <strong>lazy</strong> dog.</Text>`

If you are just bolding for style, use Tailwind with `classNameOverride` instead. E.g. `<Text variant="body" classNameOverride="font-weight-paragraph-bold">The quick brown fox jumps over the lazy dog.</Text>`