import { action } from '@storybook/addon-actions';
import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { Typography } from '../src/index';

<Meta title="System|Typography" component={Typography} />

# Typography

Typography is divided into 3 seperate components:

1.  Title
2.  Paragraph
3.  Text

All of these components borrow styling elements from the core but this allows
us to have easily tweakable typography elements throughout the page.

## Title

<Props of={Typography.Title} />

<Story name="Title | default">
  <Typography.Title>
    We ignite opportunity by setting the world in motion.
  </Typography.Title>
</Story>


### Inverse

<Story name="Title | inverse">
  <div style={{ background: '#000' }}>
    <Typography.Title inverse>
      We ignite opportunity by setting the world in motion.
    </Typography.Title>
  </div>
</Story>

### Levels

<Preview>
  <Story name="Title | level">
    <>
      <Typography.Title level={1}>
        We ignite opportunity by setting the world in motion.
      </Typography.Title>
      <Typography.Title level={2}>
        We ignite opportunity by setting the world in motion.
      </Typography.Title>
      <Typography.Title level={3}>
        We ignite opportunity by setting the world in motion.
      </Typography.Title>
      <Typography.Title level={4}>
        We ignite opportunity by setting the world in motion.
      </Typography.Title>
      <Typography.Title level={5}>
        We ignite opportunity by setting the world in motion.
      </Typography.Title>
    </>
  </Story>
</Preview>

## Paragraph

<Props of={Typography.Paragraph} />

<Story name="Paragraph | default">
  <Typography.Paragraph>
    Good things happen when people can move, whether across town or towards
    their dreams. Opportunities appear, open up, become reality. What started as
    a way to tap a button to get a ride has led to billions of moments of human
    connection as people around the world go all kinds of places in all kinds of
    ways with the help of our technology.
  </Typography.Paragraph>
</Story>

### Ellipses

Using the ellipses prop, we can hide overflowing lines by either using a integer set as a maximum letter, or a simple boolean.

<Story name="Paragraph | ellipses">
  <Typography.Paragraph ellipses>
    Good things happen when people can move, whether across town or towards
    their dreams. Opportunities appear, open up, become reality. What started as
    a way to tap a button to get a ride has led to billions of moments of human
    connection as people around the world go all kinds of places in all kinds of
    ways with the help of our technology.
  </Typography.Paragraph>
</Story>

## Text

Text components are designed for small, functionable types of text such as links.

<Props of={Typography.Text} />

<Story name="Text | default">
  <Typography.Text>Good things happen when people can move.</Typography.Text>
</Story>

<Story name="Text | bold">
  <Typography.Text bold>
    Good things happen when people can move.
  </Typography.Text>
</Story>

<Story name="Text | marked">
  <Typography.Text mark>
    Good things happen when people can move.
  </Typography.Text>
</Story>

<Story name="Text | link">
  <Typography.Text link>
    Good things happen when people can move.
  </Typography.Text>
</Story>