import { Meta } from '@storybook/addon-docs'

<Meta title="@baseapp-frontend | designSystem/Typographies/TypographyWithEllipsis" />

# Component Documentation

## TypographyWithEllipsis

- **Purpose**: A styled Typography component that handles text overflow with ellipsis, with optional multi-line clamping support.
- **Expected Behavior**: Renders text with a max width of 300px. By default shows single line with ellipsis, but can display multiple lines when lineClamp prop is provided.

## Use Cases

- **Current Usage**: 
  - Single line text truncation
  - Multi-line text clamping with ellipsis
  - Fixed width containers where text may overflow
  - Responsive layouts requiring text truncation

## Props

- Inherits all props from MUI Typography component
- **lineClamp** (number, optional): Number of lines to show before truncating with ellipsis. When not provided, defaults to single line truncation.
- **maxWidth** (number): Fixed at 300px by default

## Notes

- **Related Components**:
  - Typography: Base MUI component that provides core text styling
  - Box: Can be used as container to control width constraints

## Example Usage

```javascript
import { TypographyWithEllipsis } from '@baseapp-frontend/design-system/web'

const MyComponent = () => {
  return (
    <TypographyWithEllipsis lineClamp={2}>
      This is a long text that should be truncated with an ellipsis.
    </TypographyWithEllipsis>
  )
}
export default MyComponent
```