'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactHtmlParser = require('react-html-parser');

var _reactHtmlParser2 = _interopRequireDefault(_reactHtmlParser);

var _markdownIt = require('markdown-it');

var _markdownIt2 = _interopRequireDefault(_markdownIt);

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

var _addonKnobs = require('@storybook/addon-knobs');

var _Heading = require('../../atoms/headings/Heading');

var _Heading2 = _interopRequireDefault(_Heading);

var _SidebarHeading = require('../../atoms/headings/SidebarHeading');

var _SidebarHeading2 = _interopRequireDefault(_SidebarHeading);

var _DecorativeLink = require('../../atoms/links/DecorativeLink');

var _DecorativeLink2 = _interopRequireDefault(_DecorativeLink);

var _typography = require('./typography.json');

var _TypographyKnobs = require('./Typography.knobs.options');

var _TypographyKnobs2 = _interopRequireDefault(_TypographyKnobs);

var _typography2 = require('../../../../../docs/style/typography.md');

var _typography3 = _interopRequireDefault(_typography2);

require('./styles.css');

require('../../../markdown.css');

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

var slugifyStyle = function slugifyStyle(style) {
  var _style$split = style.split(' '),
      weight = _style$split[0],
      italic = _style$split[1];

  return italic ? weight.toLowerCase() + '--' + italic.toLowerCase() : weight.toLowerCase();
};

var md = new _markdownIt2.default();
var reg = /\(\.\.\/(\.gitbook\/assets\/.*)\)/g;
var githubImageTypographyDocsFixed = _typography3.default.replace(reg, function (match, contents) {
  return '(https://raw.githubusercontent.com/massgov/mayflower/develop/docs/' + contents + ')';
});
var result = md.render(githubImageTypographyDocsFixed);

(0, _react3.storiesOf)('brand|typography', module).addDecorator((0, _addonKnobs.withKnobs)({ escapeHTML: false })).add('About', function () {
  return _react2.default.createElement(
    'div',
    { className: 'main-content main-content--two' },
    _react2.default.createElement(
      'div',
      { className: 'page-content' },
      _react2.default.createElement(
        'div',
        { className: 'markdown-body' },
        (0, _reactHtmlParser2.default)(result)
      )
    )
  );
}).add('Texta (Main Font)', function () {
  var props = {
    text: (0, _addonKnobs.text)('custom text', 'Type something in the text knob, and use other knobs to change text styles.'),
    style: (0, _addonKnobs.select)('custom style', _typography.styles, 'Medium Italic'),
    size: (0, _addonKnobs.select)('custom size', _TypographyKnobs2.default.size, 'p')
  };
  var CustomElement = props.size;
  return _react2.default.createElement(
    'div',
    { className: 'main-content main-content--two' },
    _react2.default.createElement(
      'div',
      { className: 'page-content' },
      _react2.default.createElement(_Heading2.default, { text: 'Texta', level: 1 }),
      _react2.default.createElement(_SidebarHeading2.default, { title: 'Characters', level: 2 }),
      _react2.default.createElement(
        'div',
        { className: 'sb-block' },
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.letters.toUpperCase()
        ),
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.letters
        ),
        _react2.default.createElement('hr', null),
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.numbers
        ),
        _react2.default.createElement('hr', null),
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.characters
        ),
        _react2.default.createElement('hr', null)
      ),
      _react2.default.createElement(_SidebarHeading2.default, { title: 'Custom Sentence', level: 2 }),
      _react2.default.createElement(
        'div',
        { className: 'sb-block' },
        _react2.default.createElement(
          CustomElement,
          { className: 'ma-texta-' + slugifyStyle(props.style) },
          props.text
        )
      ),
      _react2.default.createElement(_SidebarHeading2.default, { title: 'Styles', level: 2 }),
      _react2.default.createElement(
        'div',
        { className: 'sb-block sb-grid' },
        _typography.styles.map(function (style) {
          var className = 'ma-texta-' + slugifyStyle(style);
          return _react2.default.createElement(
            _react.Fragment,
            null,
            _react2.default.createElement(
              'span',
              { className: className },
              style
            ),
            _react2.default.createElement(
              'span',
              { className: 'markdown-body' },
              _react2.default.createElement(
                'code',
                null,
                '.' + className
              )
            )
          );
        })
      ),
      _react2.default.createElement(_SidebarHeading2.default, { title: 'Sizes', level: 2 }),
      _react2.default.createElement(
        'div',
        { className: 'sb-block' },
        Object.keys(_TypographyKnobs2.default.size).map(function (key) {
          var Element = _TypographyKnobs2.default.size[key];
          return _react2.default.createElement(
            Element,
            null,
            key
          );
        })
      )
    )
  );
}).add('Source Code Pro (Monospace Font)', function () {
  return _react2.default.createElement(
    'div',
    { className: 'main-content main-content--two' },
    _react2.default.createElement(
      'div',
      { className: 'page-content' },
      _react2.default.createElement(_Heading2.default, { text: 'Source Code Pro', level: 1 }),
      _react2.default.createElement(_SidebarHeading2.default, { title: 'Characters', level: 2 }),
      _react2.default.createElement(
        'div',
        { className: 'sb-block sb-block--mono' },
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.letters.toUpperCase()
        ),
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.letters
        ),
        _react2.default.createElement('hr', null),
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.numbers
        ),
        _react2.default.createElement('hr', null),
        _react2.default.createElement(
          'div',
          { className: 'sb-text' },
          _typography.characters
        ),
        _react2.default.createElement('hr', null)
      ),
      _react2.default.createElement(
        'div',
        { className: 'sb-block' },
        'Source Code Pro is an open source font available on Google Fonts.',
        _react2.default.createElement(_DecorativeLink2.default, {
          text: 'Download the fonts or see more information on Google Fonts',
          href: 'https://fonts.google.com/specimen/Source+Code+Pro'
        })
      )
    )
  );
});