@lyra/components/lib/typography/story.js

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storybook = require('part:@lyra/storybook');

var _story = require('./styles/story.css');

var _story2 = _interopRequireDefault(_story);

var _headingsStyle = require('part:@lyra/base/theme/typography/headings-style');

var _headingsStyle2 = _interopRequireDefault(_headingsStyle);

var _textBlocksStyle = require('part:@lyra/base/theme/typography/text-blocks-style');

var _textBlocksStyle2 = _interopRequireDefault(_textBlocksStyle);

var _chance = require('chance');

var _chance2 = _interopRequireDefault(_chance);

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

const chance = new _chance2.default();

(0, _storybook.storiesOf)('Typography').add('Basic',
// `
//   ## Headings
//
//   ### Use in JS
//   import headings from 'part:@lyra/base/theme/typography/headings-style'
//   <h1 className={headings.heading1}>This is the big heading</h1>
//
//   ### Use in CSS
//   - composes: heading1 from "part:@lyra/base/theme/typography/headings-style"
//   - composes: heading2 from ...
//   - composes: heading3 from ...
//   - composes: heading4 from ...
//   - composes: heading5 from ...
//
//   ## Text blocks
//
//   ### Use in JS
//   import textBlocks from 'part:@lyra/base/theme/typography/text-blocks-style'
//   <p className={textBlocks.paragraph}</p>
//
//   ### Use in CSS
//   - composes: lead from "part:@lyra/base/theme/typography/text-blocks-style"
//   - composes: paragraph from ...
// `,
() => {
  return _react2.default.createElement(
    'article',
    { className: _story2.default.wrapper },
    _react2.default.createElement(
      'h1',
      { className: _headingsStyle2.default.heading1 },
      'Heading 1'
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.lead },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'h2',
      { className: _headingsStyle2.default.heading2 },
      'Heading 2'
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'h3',
      { className: _headingsStyle2.default.heading3 },
      'Heading 3'
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'h4',
      { className: _headingsStyle2.default.heading4 },
      'Heading 4'
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'h5',
      { className: _headingsStyle2.default.heading5 },
      'Heading 5'
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'h5',
      { className: _headingsStyle2.default.heading6 },
      'Heading 6'
    ),
    _react2.default.createElement(
      'p',
      { className: _textBlocksStyle2.default.paragraph },
      chance.paragraph({ sentences: 5 })
    ),
    _react2.default.createElement(
      'h5',
      { className: _headingsStyle2.default.heading5 },
      'Block Quote'
    ),
    _react2.default.createElement(
      'blockquote',
      { className: _textBlocksStyle2.default.blockquote },
      _react2.default.createElement(
        'p',
        null,
        chance.paragraph({ sentences: 3 })
      )
    )
  );
}, { inline: false });