monday-ui-react-core/src/general-stories/typography/typography.stories.mdx

Official monday.com UI resources for application development in React.js

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 mondays 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 (Roboto 32px bold)"}</h1>
        <h2 className="example-margin element-type-h2">{"<h2> Secondary heading (Roboto 24px bold)"}</h2>
        <h3 className="example-margin element-type-h3">{"<h3> Tertiary heading (Roboto 24px light)"}</h3>
        <h4 className="example-margin element-type-h4">{"<h4> Fourth heading (Roboto 18px bold)"}</h4>
        <h5 className="example-margin element-type-h5">{"<h5> Paragraph bold (Roboto 16px bold)"}</h5>
        <h6 className="example-margin element-type-h6">{"<h6> UI labels / General text (Roboto 14px normal)"}</h6>
        <p className="example-margin element-type-p">{"<p> Paragraph text (Roboto 16px normal)"}</p>
        <small className="example-margin element-type-small">{"<small> Caption/Subtext (Roboto 14px normal)"}</small>
        <div className="example-margin element-type-link">{"<link> Link text (Roboto 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>