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 = 'The evil rabbit jumps over the fence.'
  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>
   Our mission is to make cloud computing accessible to everyone. We build products for developers and designers. And those who aspire to become one.
  </Text>

  <Text p b>
   Our mission is to make cloud computing accessible to everyone. We build products for developers and designers. And those who aspire to become one.
  </Text>
</>
`} />

<Playground
  title="Small"
  scope={{ Text }}
  code={`
<>
  <Text small>
   Our mission is to make cloud computing accessible to everyone. We build products for developers and designers. And those who aspire to become one.
  </Text>

  <Text small i>
   Our mission is to make cloud computing accessible to everyone. We build products for developers and designers. And those who aspire to become one.
  </Text>
</>
`} />

<Playground
  title="Blockquote"
  scope={{ Text }}
  code={`
<Text blockquote>
  Our mission is to make cloud computing accessible to everyone.
</Text>
`}
/>

<Playground
  title="Types"
  scope={{ Text }}
  code={`
<>
  <Text type="success">
    Our mission is to make cloud computing accessible to everyone.
  </Text>
  <Text type="warning">
    Our mission is to make cloud computing accessible to everyone.
  </Text>
  <Text type="secondary">
    Our mission is to make cloud computing accessible to everyone.
  </Text>
  <Text type="error">
    Our mission is to make cloud computing accessible to everyone.
  </Text>
  <Text style={{ color: '#ccc' }}>
    Our mission is to make cloud computing accessible to everyone.
  </Text>
</>
`}
/>

<Playground
  title="Sizes"
  scope={{ Text }}
  code={`
<>
  <Text size={12}>Font Size: 12px;</Text>
  <Text size={14}>Font Size: 14px;</Text>
  <Text size="100%">Font Size: 100%;</Text>
  <Text size="1.25rem">Font Size: 1.25rem;</Text>
  <Text size="2em">Font Size: 2em;</Text>
</>
`}
/>

<Playground
  title="Compose"
  desc="Effect of multiple `Text` stacks"
  scope={{ Text }}
  code={`
<>
  <Text p>
   Our mission is to make cloud computing accessible to everyone. We build products for developers and designers. And those who aspire to become one.
  </Text>

  <Text>
    <Text small del>Our mission is to make cloud computing accessible to everyone.</Text>
    <Text small b>We build products for developers and designers. And those who aspire to become one.</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`         |
| **size**       | size of text   | `string` / `number` | -                        | follow elements |
| **type**       | text type      | `NormalTypes`       | [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>
