import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { InnerText, Text } from "@components/typography";
import { Stack } from "@components/layout";

<Meta
    title="Components/Text"
    id="text"
/>

# Text

<Tagline>A primitive text component matching Orbit typography type scale.</Tagline>

<ComponentInfo
    usage={"import { Text } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/text/src"
/>

## Usage

> Use this component if more specific Orbit typographic components like [span](?path=/docs/html-span--example) or [paragraph](?path=/docs/paragraph--size) doesn't meet your needs.

### Size

You can alter the size of the text by specifying a `size` prop. The available sizes match Orbit typography type scale (a type scale is a set of [font-size](?path=/docs/tokens--page#font-sizes) and [line-height](?path=/docs/tokens--page#line-heights) pairs).

<Preview>
    <Story name="size">
        <Stack>
            <Text>If two pieces of the same type of metal touch in space they will permanently bond.</Text>
            <Text size="sm">If two pieces of the same type of metal touch in space they will permanently bond.</Text>
        </Stack>
    </Story>
</Preview>

## API

<ComponentInfo
    usage={"import { Text } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerText.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerText} sort="alpha" />
