import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';

import Typography from './Typography';
import Title from './Title';
import Paragraph from './Paragraph';
import Text from './Text';

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

# Typography

Basic text writing, including headings, body text, lists, and more.

## When To Use
- When need to display a title or paragraph contents in Articles/Blogs/Notes.
- When you need copyable/editable/ellipsis texts.

<Preview>
  <Story name="Index" parameters={{ name: 0 }}>
    <Typography>
      <Title>Introduction</Title>
      <Paragraph>In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.</Paragraph>
      <Paragraph>
        After massive project practice and summaries, <Text weight="semiBold">Norbit Design</Text>, a design language for background applications, is refined by <Text weight="semiBold">Norbit Team</Text>, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.
      </Paragraph>
    </Typography>
  </Story>
</Preview>

### TITLE

<Preview>
  <Story name="Title" parameters={{ storySort: () => 0 }}>
    <div>
      <Title>Level 1 Title Norbit Design</Title>
      <Title level={2}>Level 2 Title Norbit Design</Title>
      <Title level={3}>Level 3 Title Norbit Design</Title>
      <Title level={4}>Level 4 Title Norbit Design</Title><br /><br />
      <Title size={50} color="green" weight="normal" style={{ padding: 20 }}>Custom Title</Title>
    </div>
  </Story>
</Preview>

<Props of={Title} />

### PARAGRAPH

<Preview>
  <Story name="Paragraph">
    <>
      <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Paragraph><br /><br />
      <Paragraph size={20} color="green" weight="medium" style={{ padding: 20 }}>Custom Paragraph. Custom Paragraph. Custom Paragraph. Custom Paragraph. Custom Paragraph</Paragraph>
    </>
  </Story>
</Preview>

<Props of={Paragraph} />

### TEXT

<Preview>
  <Story name="Text">
    <div>
      <Text>Norbit Design Default Text</Text><br />
      <Text type="primary">Norbit Primary Text</Text><br />
      <Text type="warning">Norbit Warning Text</Text><br />
      <Text type="danger">Norbit Danger Text</Text><br />
      <Text disabled>Norbit Disabled Text</Text><br /><br />
      <Text size={20} color="green" weight="medium" style={{ padding: 20 }}>Norbit Custom Text</Text><br />
    </div>
  </Story>
</Preview>

<Props of={Text} />