import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Heading } from "../Heading";
import { Truncate } from "./Truncate";

<Meta title="Components/Typography/Truncate" component={Truncate} />

<ComponentHeading
  componentName="Truncate"
  description=""
  sourcePath="src/components/Truncate/Truncate.tsx"
/>

## Installation

```jsx
import { Truncate } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Truncate">
    <Truncate>
      This is the Truncate component. It keeps text to a specific number of
      lines and is the full width of the container. This is the Truncate
      component. It keeps text to a specific number of lines and is the full
      width of the container. This is the Truncate component. It keeps text to a
      specific number of lines and is the full width of the container.
    </Truncate>
  </Story>
</Canvas>

## API

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<ArgsTable of={Truncate} />

## Demos

### Multiline

<Canvas>
  <Story name="Multiline">
    <Truncate lines={2}>
      This is the Truncate component. It keeps text to a specific number of
      lines and is the full width of the container. This is the Truncate
      component. It keeps text to a specific number of lines and is the full
      width of the container. This is the Truncate component. It keeps text to a
      specific number of lines and is the full width of the container. This is
      the Truncate component. It keeps text to a specific number of lines and is
      the full width of the container. This is the Truncate component. It keeps
      text to a specific number of lines and is the full width of the container.
      This is the Truncate component. It keeps text to a specific number of
      lines and is the full width of the container. This is the Truncate
      component. It keeps text to a specific number of lines and is the full
      width of the container. This is the Truncate component. It keeps text to a
      specific number of lines and is the full width of the container. This is
      the Truncate component. It keeps text to a specific number of lines and is
      the full width of the container.
    </Truncate>
  </Story>
</Canvas>

### Typography

`Truncate` can be used in combination with other text components

<Canvas isColumn>
  <Story name="HeadingH1">
    <Truncate lines={2}>
      <Heading.H1>
        This is the Truncate component. It keeps text to a specific number of
        lines and is the full width of the container. This is the Truncate
        component. It keeps text to a specific number of lines and is the full
        width of the container. This is the Truncate component. It keeps text to
        a specific number of lines and is the full width of the container.
      </Heading.H1>
    </Truncate>
  </Story>
  <Story name="HeadingH2">
    <Truncate>
      <Heading.H2>
        This is the Truncate component. It keeps text to a specific number of
        lines and is the full width of the container. This is the Truncate
        component. It keeps text to a specific number of lines and is the full
        width of the container. This is the Truncate component. It keeps text to
        a specific number of lines and is the full width of the container.
      </Heading.H2>
    </Truncate>
  </Story>
  <Story name="HeadingH3">
    <Truncate>
      <Heading.H3>
        This is the Truncate component. It keeps text to a specific number of
        lines and is the full width of the container. This is the Truncate
        component. It keeps text to a specific number of lines and is the full
        width of the container. This is the Truncate component. It keeps text to
        a specific number of lines and is the full width of the container.
      </Heading.H3>
    </Truncate>
  </Story>
</Canvas>