import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { Truncate } from "./Truncate";
import { Heading } from "../Heading";

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

# Truncate

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

<Preview 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>
</Preview>

## Custom Props

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

<Props of={Truncate} />

## Demos

### Multiline

<Preview>
  <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>
</Preview>

### Typography

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

<Preview 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>
</Preview>