import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";
import { StoryStateRow, StoryStateColumn, ComponentStateDescription, FlexLayout, Divider } from "../../components/storybook-helpers";
import { action } from '@storybook/addon-actions';
import { text, boolean, number, select } from "@storybook/addon-knobs";
import { typographyList } from "./typography-helpers"
import {
  buildColorsStory,
  textColors
} from "../colors/colors-helper";
import StoryWrapper from "../../StoryBookComponents/StoryWrapper/StoryWrapper";


import "./typography.scss";

<Meta title="Foundations|Typography" />

<Preview>
  <Story name="Typography">
      <StoryWrapper>
        <h1 className="element-type-h1">Typography</h1>
        <p>Like in other ui in compensas interface typography work by principle of accessibility before aesthetics therefore the text should be readable and help the user understand what important by well contrasted  size and colors hierarchy. Don’t use a text under 12 px, text should be easy to read.</p>
        <br />
        <br />
        <br />
        <h1 className="example-margin element-type-h1">{"<h1> Main heading (<Montserrat> 32px bold)"}</h1>
        <h2 className="example-margin element-type-h2">{"<h2> Secondary heading (<Montserrat> 24px bold)"}</h2>
        <h3 className="example-margin element-type-h3">{"<h3> Tertiary heading (<Montserrat> 24px light)"}</h3>
        <h4 className="example-margin element-type-h4">{"<h4> Fourth heading (<Montserrat> 18px bold)"}</h4>
        <h5 className="example-margin element-type-h5">{"<h5> Paragraph bold (<Montserrat> 16px bold)"}</h5>
        <h6 className="example-margin element-type-h6">{"<h6> UI labels / General text (Work Sans 14px normal)"}</h6>
        <p className="example-margin element-type-p">{"<p> Paragraph text (Work Sans 16px normal)"}</p>
        <small className="example-margin element-type-small">{"<small> Caption/Subtext (Work Sans 14px normal)"}</small>
        <div className="example-margin element-type-link">{"<link> Link text (Work Sans 14px normal)"}</div>
        <Divider />
        <h4 className="element-type-h4">Text Colors we use for text</h4>
        {buildColorsStory(textColors)}
        <Divider />
        <div className="typo-row typo-row-header">
            <div className={`style`}>Style</div>
            <div className={`weight`}>Weight</div>
            <div className={`line-height`}>Line Height</div>
            <div className={`spacing`}>Spacing</div>
            <div className={`size`}>Size</div>
            <div className={`comments`}>Usage</div>
        </div>
        {
        typographyList.map(({name, className, comments, spacing, lineheight, size, weight}) => {
        return <div className="typo-row">
            <div className={`style ${className}`}>{name}</div>
            <div className={`weight`}>{weight}</div>
            <div className={`line-height`}>{lineheight}</div>
            <div className={`spacing`}>{spacing}</div>
            <div className={`size`}>{size}</div>
            <div className={`comments`}>{comments}</div>
        </div>
        })
        }
    </StoryWrapper>
  </Story>
</Preview>
