wix-style-react/dist/es/stories/Typography/TypographyStory.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, IncludedComponents, StoryLink } from '../UXStoryTemplate';

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

import BasicExample from './BasicExample';
import BasicExampleRaw from '!raw-loader!./BasicExample';

import HeadingExamples from './HeadingExamples';
import HeadingExamplesRaw from '!raw-loader!./HeadingExamples';

import TextExamples from './TextExamples';
import TextExamplesRaw from '!raw-loader!./TextExamples';

storiesOf(Category.FOUNDATION, module).add('1.2 Typography', function () {
  return React.createElement(
    'div',
    null,
    React.createElement(
      Title,
      null,
      '1.2 Typography'
    ),
    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/>\nYou can also use typography css classes directly. See Styling->Typography.\n'
    }),
    React.createElement(
      'p',
      null,
      'See ',
      React.createElement(StoryLink, { kind: 'Styling', story: '1.2 Typography Classes' })
    ),
    React.createElement(
      CodeExample,
      { title: 'Basic Usage', code: BasicExampleRaw, autoExpand: true },
      React.createElement(
        'div',
        { className: styles.codeExample },
        React.createElement(BasicExample, null)
      )
    ),
    React.createElement(IncludedComponents, { componentNames: ['Text', 'Heading'] }),
    React.createElement(
      CodeExample,
      { title: '<Heading/> Examples', code: HeadingExamplesRaw },
      React.createElement(
        'div',
        { className: styles.codeExample },
        React.createElement(HeadingExamples, null)
      )
    ),
    React.createElement(
      CodeExample,
      { title: '<Text/> Examples', code: TextExamplesRaw },
      React.createElement(
        'div',
        { className: styles.codeExample },
        React.createElement(TextExamples, null)
      )
    )
  );
});