import { Meta, Story, Canvas, Title, Subtitle, ArgsTable, Source, Description } from '@storybook/addon-docs';
import { RichText } from './RichText';
import * as stories from './RichText.stories.tsx';
import { TITLE_COMPONENTS_DECOMISSIONED } from '../../../../../docs/content.ts';

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/Typography/Rich text`} component={RichText} />

<Title>Rich text content</Title>
<Subtitle>This component is designed mostly for WYSIWYG content from a CMS, where you are handling simple html text elements (not styled components) but want to inherit generic spacing and typography styles automatically.
</Subtitle>


## Usage

<Source language='tsx' dark={true} code={`import { RichText } from '@lendi/ui/Typography';`} />

Note: It's important that you wrap the RichText directly around your HTML content. We are styling direct children of the component only ie `> h2 { }`. This is so that any component inside the RichText can be styled without inheriting long form text styles and spacing.

<Source language='tsx' dark={true} code={`<RichText>
  <h2>Heading</h2>
  <p>Paragraph sits as direct child of RichText</p>
</RichText>`} />

<Canvas>
  <Story name="Default" story={stories.RichTextBlock} />
</Canvas>

## Make the body text larger
This larger font size will apply to body text elements only eg. `<p>` `<li>` `<a>`

<Canvas>
  <Story name="Larger text" story={stories.RichTextBlockLarge} />
</Canvas>

## Props
<ArgsTable />