import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import TextIntroduction from './content/TextIntroduction.mdx';
import TextTypestylesExample from './content/TextTypestyles';

import {
  iconColors,
  parametersDefault,
  argTypesDefault,
} from './config';

import MText from '../../Text';

<Meta title="Text" component={MText} />

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MText },
  template: `
    <m-text
      :text="text"
      :type="type"
    />
  `
});

# Text

<TextIntroduction />

## Things to note

1. Never end a header or label with a period (.)
2. Only use a period (.) for sentences, paragraphs and copy.
3. Always use sentence case for header, title, sentences.
4. Pages usually have Page title and Stage title.
5. Page title must always uses `<h1>`. (not `<div>` or `<p>`)
6. Stage title must always uses `<h2>`. (not `<div>` or `<p>`)
7. In summary, always use heading tags (`<h1>, <h2>,` and `<h3>`) for all title related texts.

<br />

<Anchor storyId="text--page-title"></Anchor>

## Page Title

Must be used only once in one page. In code, this will be translated as `<h1>`.

<Canvas>
  <Story
    name="Page Title"
    args={{
      type: 'page-title'
    }}
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault('page-title') }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Anchor storyId="text--stage-title"></Anchor>

## Stage Title

Used inside the Page Title scope to explain the subpart of the contents of Page Title. In code, this will be translated as `<h2>`.

<Canvas>
  <Story
    name="Stage Title"
    args={{
      type: 'stage-title'
    }}
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault('stage-title') }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Anchor storyId="text--section"></Anchor>

## Section

Used inside the Stage Title scope to explain the subpart of the contents of Stage Title. In code, this will be translated as `<h3>`.

<Canvas>
  <Story
    name="Section"
    args={{
      type: 'section'
    }}
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault('section') }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Anchor storyId="text--large-title"></Anchor>

## First Run Title

This title is special case. On some page, there is a need to use this title.

<Canvas>
  <Story
    name="First Run Title"
    args={{
      type: 'large-title'
    }}
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault('large-title') }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Anchor storyId="text--body"></Anchor>

## Body

Translated as paragraph or `<p>`. Will have a content to explain some scope to user.

<Canvas>
  <Story
    name="Body"
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault() }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Anchor storyId="text--caption"></Anchor>

## Caption

Translated as `<small>`. Usually used to explain the detail content on paragrah or hint on form input.

<Canvas>
  <Story
    name="Caption"
    args={{
      type: 'caption'
    }}
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault('caption') }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Anchor storyId="text--default-story"></Anchor>

## Summary

<Story name="example-text-types">
  {TextTypestylesExample.bind({})}
</Story>