wix-style-react/dist/stories/Typography/TypographyClassesStory.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 _BasicClassesExample = require('./BasicClassesExample');

var _BasicClassesExample2 = _interopRequireDefault(_BasicClassesExample);

var _BasicClassesExample3 = require('!raw-loader!./BasicClassesExample');

var _BasicClassesExample4 = _interopRequireDefault(_BasicClassesExample3);

var _BasicClassesSassExample = require('./BasicClassesSassExample.js');

var _BasicClassesSassExample2 = _interopRequireDefault(_BasicClassesSassExample);

var _BasicClassesSassExample3 = require('!raw-loader!./BasicClassesSassExample.js');

var _BasicClassesSassExample4 = _interopRequireDefault(_BasicClassesSassExample3);

var _BasicClassesSassExample5 = require('!raw-loader!./BasicClassesSassExample.scss');

var _BasicClassesSassExample6 = _interopRequireDefault(_BasicClassesSassExample5);

var _TypographyClassesTable = require('!raw-loader!./TypographyClassesTable.md');

var _TypographyClassesTable2 = _interopRequireDefault(_TypographyClassesTable);

var _TypographyClassesMigration = require('!raw-loader!./TypographyClassesMigration.md');

var _TypographyClassesMigration2 = _interopRequireDefault(_TypographyClassesMigration);

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

(0, _react3.storiesOf)(_storiesHierarchy.Category.STYLING, module).add('1.2 Typography Classes', function () {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _UXStoryTemplate.Title,
      null,
      '1.2 Typography Classes'
    ),
    _react2.default.createElement(
      _UXStoryTemplate.Section,
      { title: 'Typography Components' },
      _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/>\n'
      }),
      _react2.default.createElement(
        'p',
        null,
        'See ',
        _react2.default.createElement(_UXStoryTemplate.StoryLink, { kind: _storiesHierarchy.Category.FOUNDATION, story: '1.2 Typography' })
      )
    ),
    _react2.default.createElement(
      _UXStoryTemplate.Section,
      { title: 'Typography Classes' },
      _react2.default.createElement(_Markdown2.default, {
        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'
      }),
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'Basic Example (JS)',
          code: _BasicClassesExample4.default,
          autoExpand: true
        },
        _react2.default.createElement(
          'div',
          { className: _styles2.default.codeExample },
          _react2.default.createElement(_BasicClassesExample2.default, null)
        )
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'Basic Example (Sass)',
          code: _BasicClassesSassExample4.default + _BasicClassesSassExample6.default,
          autoExpand: true
        },
        _react2.default.createElement(
          'div',
          { className: _styles2.default.codeExample },
          _react2.default.createElement(_BasicClassesSassExample2.default, null)
        )
      ),
      _react2.default.createElement(_Markdown2.default, { source: _TypographyClassesTable2.default }),
      _react2.default.createElement(
        _UXStoryTemplate.Section,
        { title: 'Typography Classes Migration (from preior to WSR 5.6.x)' },
        _react2.default.createElement(_Markdown2.default, { source: _TypographyClassesMigration2.default })
      )
    )
  );
});