import { Meta, Story, Canvas, Title, Subtitle, ArgsTable, Source, Description } from '@storybook/addon-docs';
import dedent from 'ts-dedent';
import { Text, P, A } from '@lendi/ui/Typography';
import * as stories from './Text.stories.tsx';
import { TITLE_COMPONENTS_DECOMISSIONED } from '../../../../../docs/content.ts';

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/Typography/Text`} component={Text} />

<Title>Text</Title>
<Subtitle>Display of headings, paragraphs, links, etc.</Subtitle>

<Canvas withSource="open">
  <Story name="Text component" story={stories.Interactive} />
</Canvas>

<ArgsTable story="Text component" include={['tag', 'align', 'variant', 'isMobile', 'appearance', 'isInverse']} />

Note: this props table is not complete. See <a href="#props">below</a> for full props.

## Usage

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

### Using as a wrapper
In most cases, you should directly use the `Text` component to wrap your content. However, if you are in a situation where you need to style a component that is provided through a framework or library that doesn't allow you to replace it, then you can use the `styleTarget` prop and pass a css selector, which the Text styles will apply to. For example, in order to style the built-in headings in Storybook, we use it like so:

<Source language='tsx' dark={true} code={dedent`
  ...
  components: {
    ...
    h3: (props) => (
      <Text variant="subtitle1" tag="span" styleTarget="h3" {...props}>
        <HeaderMdx as="h3" id={props.id}>
          {props.children}
        </HeaderMdx>
      </Text>
    ),
  }
`
} />

This applies the `subtitle1` styles to the h3 element that is rendered by the `HeaderMdx` component.

## Options

### Paragraph alias
You can use the `<P>` component for a shortcut to using `Text`. It automatically renders a paragraph with a `body1` style. The only difference to the normal `Text` component is that `<a>` tags within a `<P>` are automatically styled as LUI links.
<Canvas withSource="open">
  <Story name="P component" story={stories.Paragraph} />
</Canvas>

<ArgsTable of={P} />

### Links
Use the `A` component to render an anchor tag with LUI styling.

**Not using an href ?**
If you need to perform an action on click, use the text variant of [Button](/docs/components-components-next-button-overview--variants) instead `<Button variant="text">`.
<Canvas withSource="open">
  <Story name="A component" story={stories.Link} />
</Canvas>

## Props
<ArgsTable />

## LUI Now Migration
- We don't add any padding or margin to typography anymore. We recommend using the new Spacer component to space out components.
- We don't ship any CSS mixins, use the Text component directly. Having only one typography API makes it easier to maintain and reduces duplicate CSS. If you think you have a use case that is an exception, please contact Design Ops to discuss.
- We've eliminated some unnecessary type styles and sizes. If you have questions about which to use, reference the design guidelines or ask a designer.
- Link styles are only for html anchor links. Use the Text variant of Button if you need a `<button>` styled like a link.