import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import * as Stories from './examples';

<Meta title="Components|Text" />

# Text

Text is component for displaying text. It supports style, basic touch handling,
and inherits typographic styles from ancestor elements.

Text is unique relative to layout: child elements use text layout ("inline")
rather than flexbox layout. This means that elements inside of a Text are not
rectangles, as they wrap when reaching the edge of their container.

## Props

| Name                      | Type      | Default |
| ------------------------- | --------- | ------- |
| ...ViewProps              |           | |
| dir                       | ?string   | 'auto' |
| numberOfLines             | ?number   | |
| onPress                   | ?Function | |
| selectable                | ?boolean  | true |
| style                     | ?Style    | |

### children

Nested text components will inherit the typographic styles of their parents.

<Preview withSource='none'>
  <Story name="children">
    <Stories.children />
  </Story>
</Preview>

### numberOfLines

Truncates the text with an ellipsis after this many lines.

<Preview withSource='none'>
  <Story name="numberOfLines">
    <Stories.numberOfLines />
  </Story>
</Preview>

### onPress

Called when the `Text` is pressed.

<Preview withSource='none'>
  <Story name="onPress">
    <Stories.onPress />
  </Story>
</Preview>

### selectable

When `false`, the text is not selectable.

<Preview withSource='none'>
  <Story name="selectable">
    <Stories.selectable />
  </Story>
</Preview>

### style

Text supports typographic styles.

```js
{
  ...ViewStyle,
  color: color,
  fontFamily: string,
  fontFeatureSettings: string,
  fontSize: number | string,
  fontStyle: string,
  fontVariant: Array<string>,
  fontWeight: string,
  letterSpacing: string,
  lineHeight: string,
  textAlign: "center" | "end" | "inherit" | "justify" | "justify-all" | "left" | "right" | "start",
  textAlignVertical: string,
  textDecorationColor: color,
  textDecorationLine: string,
  textDecorationStyle: string,
  textIndent: string,
  textOverflow: string,
  textRendering: string,
  textShadowColor: color,
  textShadowOffset: { height: number, width: number },
  textShadowRadius: number | string,
  textTransform: string,
  unicodeBidi: string,
  whiteSpace: string,
  wordBreak: "normal" | "break-all" | "break-word" | "keep-all",
  wordWrap: string,
  writingDirection: string
}
```

<Preview withSource='none'>
  <Story name="style">
    <Stories.style />
  </Story>
</Preview>
