mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
f0d989717c
* feat(ui): add Typography component with size, weight, variant, and truncation support * feat(ui): export Typography from package index * refactor: remove unused Comp variable * docs: add Typography storybook stories with usage examples and interactive playground * refactor: removed comments * docs: mdx file for typography instruction * refactor: rename data-testid to test-id * fix(typography): more props * chore(folder-rename): wrong folder name --------- Co-authored-by: Vinícius Lourenço <[email protected]>
97 lines
2.1 KiB
Plaintext
97 lines
2.1 KiB
Plaintext
import { Meta, Controls, Primary } from '@storybook/addon-docs/blocks';
|
|
import * as TypographyStories from './typography.stories';
|
|
|
|
<Meta of={TypographyStories} />
|
|
|
|
# Typography
|
|
|
|
A flexible Typography component for rendering text with consistent sizing, weight, alignment, and truncation. Supports two variants: `title` (heading) and `text` (body).
|
|
|
|
## How to use
|
|
|
|
```tsx
|
|
import { Typography } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
return <Typography>Hello World</Typography>;
|
|
}
|
|
```
|
|
|
|
This code above will render the following typography:
|
|
|
|
<Primary />
|
|
|
|
<Controls of={TypographyStories.Playground} />
|
|
|
|
## Variants
|
|
|
|
### Title variant
|
|
|
|
Use `variant="title"` for headings. It renders as `<h2>` by default with bold weight. Combine with `as` to control the heading level.
|
|
|
|
```tsx
|
|
<Typography variant="title" as="h1" size="5xl">
|
|
Main Heading
|
|
</Typography>
|
|
```
|
|
|
|
### Text variant
|
|
|
|
The default `variant="text"` renders as `<p>`. Use `as` to render as `<span>`, `<div>`, or `<label>`.
|
|
|
|
```tsx
|
|
<Typography size="lg">
|
|
This is a paragraph of body text.
|
|
</Typography>
|
|
```
|
|
|
|
## Sizes
|
|
|
|
Available sizes: `xs` | `sm` | `base` | `lg` | `xl` | `2xl` | `3xl` | `4xl` | `5xl` | `6xl` | `7xl` | `8xl` | `9xl`
|
|
|
|
```tsx
|
|
<Typography size="xs">Extra small</Typography>
|
|
<Typography size="base">Base (default)</Typography>
|
|
<Typography size="4xl">Extra large</Typography>
|
|
```
|
|
|
|
## Weights
|
|
|
|
Available weights: `thin` | `extralight` | `light` | `normal` | `medium` | `semibold` | `bold` | `extrabold` | `black`
|
|
|
|
```tsx
|
|
<Typography weight="thin">Thin - 100</Typography>
|
|
<Typography weight="normal">Normal - 400</Typography>
|
|
<Typography weight="bold">Bold - 700</Typography>
|
|
```
|
|
|
|
## Truncation
|
|
|
|
Use `truncate` to clamp text after N lines with an ellipsis.
|
|
|
|
```tsx
|
|
<Typography truncate={2}>
|
|
This long text will be clamped to 2 lines...
|
|
</Typography>
|
|
```
|
|
|
|
## Muted state
|
|
|
|
Use `muted` for secondary text like captions or helper text.
|
|
|
|
```tsx
|
|
<Typography muted>
|
|
Helper text or captions
|
|
</Typography>
|
|
```
|
|
|
|
## Alignment
|
|
|
|
Control text alignment with the `align` prop.
|
|
|
|
```tsx
|
|
<Typography align="center" size="xl">
|
|
Centered text
|
|
</Typography>
|
|
```
|