import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { InnerParagraph, Paragraph } from "@components/typography";

<Meta
    title="Components/Paragraph"
    id="paragraph"
/>

# Paragraph

<Tagline>A paragraph is used to render blocks of text.</Tagline>

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

## Usage

### Size

You can alter the size of the paragraph by specifying a `size` prop.

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

## API

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

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

