wix-style-react/dist/stories/Typography/TypographyStory.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _Markdown = require('wix-storybook-utils/Markdown');

var _Markdown2 = _interopRequireDefault(_Markdown);

var _storiesHierarchy = require('../storiesHierarchy');

var _UXStoryTemplate = require('../UXStoryTemplate');

var _styles = require('./styles.scss');

var _styles2 = _interopRequireDefault(_styles);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _BasicExample = require('./BasicExample');

var _BasicExample2 = _interopRequireDefault(_BasicExample);

var _BasicExample3 = require('!raw-loader!./BasicExample');

var _BasicExample4 = _interopRequireDefault(_BasicExample3);

var _HeadingExamples = require('./HeadingExamples');

var _HeadingExamples2 = _interopRequireDefault(_HeadingExamples);

var _HeadingExamples3 = require('!raw-loader!./HeadingExamples');

var _HeadingExamples4 = _interopRequireDefault(_HeadingExamples3);

var _TextExamples = require('./TextExamples');

var _TextExamples2 = _interopRequireDefault(_TextExamples);

var _TextExamples3 = require('!raw-loader!./TextExamples');

var _TextExamples4 = _interopRequireDefault(_TextExamples3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react3.storiesOf)(_storiesHierarchy.Category.FOUNDATION, module).add('1.2 Typography', function () {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _UXStoryTemplate.Title,
      null,
      '1.2 Typography'
    ),
    _react2.default.createElement(_Markdown2.default, {
      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'
    }),
    _react2.default.createElement(
      'p',
      null,
      'See ',
      _react2.default.createElement(_UXStoryTemplate.StoryLink, { kind: 'Styling', story: '1.2 Typography Classes' })
    ),
    _react2.default.createElement(
      _CodeExample2.default,
      { title: 'Basic Usage', code: _BasicExample4.default, autoExpand: true },
      _react2.default.createElement(
        'div',
        { className: _styles2.default.codeExample },
        _react2.default.createElement(_BasicExample2.default, null)
      )
    ),
    _react2.default.createElement(_UXStoryTemplate.IncludedComponents, { componentNames: ['Text', 'Heading'] }),
    _react2.default.createElement(
      _CodeExample2.default,
      { title: '<Heading/> Examples', code: _HeadingExamples4.default },
      _react2.default.createElement(
        'div',
        { className: _styles2.default.codeExample },
        _react2.default.createElement(_HeadingExamples2.default, null)
      )
    ),
    _react2.default.createElement(
      _CodeExample2.default,
      { title: '<Text/> Examples', code: _TextExamples4.default },
      _react2.default.createElement(
        'div',
        { className: _styles2.default.codeExample },
        _react2.default.createElement(_TextExamples2.default, null)
      )
    )
  );
});