import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
import * as TypographyStories from './Typography.stories';

import Typography from '@/components/Typography';

import { variants } from './const';

import TypographyGroup from './TypographyGroup';

<Meta name="Typography Docs" of={TypographyStories} />

export const Template = (args) => <Typography {...args} />;

# Typography

Use typography to present your design and content as clearly and efficiently as possible.

## Usage

### Basic Typography

```tsx
import { Typography } from '@lunit/design-system';
// or
import Typography from '@lunit/design-system/Typography';

<Typography>AI will be the new standard of care. 123456789</Typography>;
```

### Variant

The typography component comes with variants below:

<Canvas of={TypographyStories.AllVariants} sourceState="none" />

### With styled utility

In some situations you might not be able to use the Typography component. Hopefully, you might be able to take advantage of the [typography](https://mui.com/material-ui/react-typography/#theme) keys of the theme.

<Canvas of={TypographyStories.Styled} />

### With the sx props

You can use all the variants with [the `sx` props](https://mui.com/system/getting-started/the-sx-prop/#typography).

<Canvas of={TypographyStories.SXProps} />

## Reference

- [Material-UI Typography](https://mui.com/material-ui/react-typography/)
- [Material-UI Typography API](https://mui.com/material-ui/api/typography/)
- [Lunit Design System Typography Figma](https://www.figma.com/design/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7?node-id=14801-193458&m=dev)

## Support

- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
- Slack: #tf_design_system