import { Layout, Playground, Attributes } from 'lib/components'
import { Text } from 'components'

export const meta = {
  title: 'Text',
  group: 'General',
  index: 10,
}

## Text

Display text using well-defined typographic styles.

<Playground
  title="Headings"
  desc="Use `Text` to standardize text content."
  scope={{ Text }}
  code={`
() => {
  const text = 'Geist UI Components'
  return (
    <>
      <Text h1>{text}</Text>
      <Text h2>{text}</Text>
      <Text h3>{text}</Text>
      <Text h4>{text}</Text>
      <Text h5>{text}</Text>
      <Text h6>{text}</Text>
    </>
  )
}
`}
/>

<Playground
  title="Paragraph"
  desc="Add `p` and `b` attributes to a `Text`."
  scope={{ Text }}
  code={`
<>
  <Text p>
   Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.
  </Text>
  <Text p b>
   A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.
  </Text>
</>
`}
/>

<Playground
  title="Small"
  scope={{ Text }}
  code={`
<>
  <Text small>
   HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
  </Text>
  <Text small i>
   HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
  </Text>
</>
`}
/>

<Playground
  title="Blockquote"
  scope={{ Text }}
  code={`
<Text blockquote my={0}>
  Send cookies from the server to the user-agent.
</Text>
`}
/>

<Playground
  title="Types"
  scope={{ Text }}
  code={`
<Text b i style={{ letterSpacing: '0.6px' }}>
  <Text span type="success">G</Text>
  <Text span type="warning">e</Text>
  <Text span type="secondary">i</Text>
  <Text span type="error">s</Text>
  <Text span style={{ color: '#ccc' }}>t</Text>
  <Text span type="success" ml="5px">UI</Text>
</Text>
`}
/>

<Playground
  title="Sizes"
  scope={{ Text }}
  code={`
<>
  <Text font="12px" mt={0}>Font Size: 12px;</Text>
  <Text font="14px">Font Size: 14px;</Text>
  <Text font="1rem">Font Size: 1rem;</Text>
  <Text scale={1.25} mb={0}>Font Size Scale: 1.25;</Text>
</>
`}
/>

<Playground
  title="Compose"
  desc="Effect of multiple `Text` stacks"
  scope={{ Text }}
  code={`
<>
  <Text p mt={0}>
   Specifies origins that are allowed to see values of attributes retrieved via features of the Resource Timing API, which would otherwise be reported as zero due to cross-origin restrictions.
  </Text>

  <Text mb={0}>
    <Text small del>Indicates if the resource transmitted should be displayed inline (default behavior without the header),</Text>
    <Text small b>or if it should be handled like a download and the browser should present a “Save As” dialog.</Text>
  </Text>
</>
`} />

<Attributes edit="/pages/en-us/components/text.mdx">
<Attributes.Title>Text.Props</Attributes.Title>

| Attribute      | Description    | Type             | Accepted values          | Default   |
| -------------- | -------------- | ---------------- | ------------------------ | --------- |
| **p**          | component name | `boolean`        | -                        | `true`    |
| **h1 - h6**    | component name | `boolean`        | -                        | `false`   |
| **small**      | component name | `boolean`        | -                        | `false`   |
| **span**       | component name | `boolean`        | -                        | `false`   |
| **del**        | component name | `boolean`        | -                        | `false`   |
| **i**          | component name | `boolean`        | -                        | `false`   |
| **em**         | component name | `boolean`        | -                        | `false`   |
| **b**          | component name | `boolean`        | -                        | `false`   |
| **blockquote** | component name | `boolean`        | -                        | `false`   |
| **type**       | text type      | `TextTypes`      | [TextTypes](#texttypes)  | `default` |
| ...            | native props   | `HTMLAttributes` | `'id', 'className', ...` | -         |

<Attributes.Title>TextTypes</Attributes.Title>

```ts
type TextTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
