wix-style-react/dist/es/stories/Typography/TypographyClassesStory.js

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';

import Markdown from 'wix-storybook-utils/Markdown';
import { Category } from '../storiesHierarchy';
import { Title, Section, StoryLink } from '../UXStoryTemplate';

import styles from './styles.scss';
import CodeExample from 'wix-storybook-utils/CodeExample';

import BasicClassesExample from './BasicClassesExample';
import BasicClassesExampleRaw from '!raw-loader!./BasicClassesExample';

import BasicClassesSassExampleJs from './BasicClassesSassExample.js';
import BasicClassesSassExampleJsRaw from '!raw-loader!./BasicClassesSassExample.js';
import BasicClassesSassExampleSassRaw from '!raw-loader!./BasicClassesSassExample.scss';

import TypographyClassesTableRaw from '!raw-loader!./TypographyClassesTable.md';
import TypographyClassesMigration from '!raw-loader!./TypographyClassesMigration.md';

storiesOf(Category.STYLING, module).add('1.2 Typography Classes', function () {
  return React.createElement(
    'div',
    null,
    React.createElement(
      Title,
      null,
      '1.2 Typography Classes'
    ),
    React.createElement(
      Section,
      { title: 'Typography Components' },
      React.createElement(Markdown, {
        source: '\nThe recommended way to use Wix-Style-React typography is via components: `<Text/>` and `<Heading/>`.<br/>\nUsing these components gives you also ellipsis with tooptip.<br/>\n'
      }),
      React.createElement(
        'p',
        null,
        'See ',
        React.createElement(StoryLink, { kind: Category.FOUNDATION, story: '1.2 Typography' })
      )
    ),
    React.createElement(
      Section,
      { title: 'Typography Classes' },
      React.createElement(Markdown, {
        source: '\nIn case the `<Text/>` and `<Heading/>` components do not suit your need, you can use the Typography classes directly.\n> Note: some styles are available only by using typography CSS classes (like link and disabled text colors)\n'
      }),
      React.createElement(
        CodeExample,
        {
          title: 'Basic Example (JS)',
          code: BasicClassesExampleRaw,
          autoExpand: true
        },
        React.createElement(
          'div',
          { className: styles.codeExample },
          React.createElement(BasicClassesExample, null)
        )
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Basic Example (Sass)',
          code: BasicClassesSassExampleJsRaw + BasicClassesSassExampleSassRaw,
          autoExpand: true
        },
        React.createElement(
          'div',
          { className: styles.codeExample },
          React.createElement(BasicClassesSassExampleJs, null)
        )
      ),
      React.createElement(Markdown, { source: TypographyClassesTableRaw }),
      React.createElement(
        Section,
        { title: 'Typography Classes Migration (from preior to WSR 5.6.x)' },
        React.createElement(Markdown, { source: TypographyClassesMigration })
      )
    )
  );
});