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="main-title">Typography</h1>
        <div className="paragraph">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.</div>
        <br />
        <br />
        <br />
        <div className="example-padding main-title" >Roboto 32px Main heading</div>
        <div className="example-padding title">Roboto 24px Title  + bold</div>
        <div className="example-padding sub-secondary">Roboto 24px Subsecondary</div>
        <div className="example-padding subtitle">Roboto 16px Subtitle</div>
        <div className="example-padding paragraph">Roboto 16px paragraph</div>
        <div className="example-padding input">Roboto 14px input</div>
        <Divider />
        <div className="subtitle">Text Colors we use for text</div>
        {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>