wix-style-react/dist/stories/UXStoryTemplate.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExamplesSection = exports.TLDRSection = exports.IncludedComponents = exports.StoryLink = exports.Section = exports.SubTitle = exports.Title = undefined;
exports.renderSection = renderSection;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

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

var _react4 = _interopRequireDefault(_react3);

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

var _Markdown2 = _interopRequireDefault(_Markdown);

var _TextLink = require('wix-style-react/TextLink');

var _TextLink2 = _interopRequireDefault(_TextLink);

var _ChevronRight = require('wix-style-react/new-icons/ChevronRight');

var _ChevronRight2 = _interopRequireDefault(_ChevronRight);

var _Sections = require('wix-storybook-utils/Sections');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var Title = exports.Title = function Title(props) {
  return _react2.default.createElement(_Markdown2.default, { source: '# ' + props.children });
};
Title.propTypes = {
  children: _propTypes.string
};

var SubTitle = exports.SubTitle = function SubTitle(props) {
  return _react2.default.createElement(_Markdown2.default, { source: '### ' + props.children });
};
SubTitle.propTypes = {
  children: _propTypes.string
};

var Section = exports.Section = function Section(_ref) {
  var title = _ref.title,
      children = _ref.children;
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(_Markdown2.default, { source: '## ' + title }),
    children
  );
};
Section.propTypes = {
  children: _propTypes.any,
  title: _propTypes.string
};

var StoryLink = function StoryLink(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  var child = children ? children : _react2.default.createElement(
    'span',
    { style: { display: 'flex', alignItems: 'center' } },
    props.kind,
    _react2.default.createElement(_ChevronRight2.default, null),
    props.story
  );

  return _react2.default.createElement(
    _react4.default,
    rest,
    _react2.default.createElement(
      _TextLink2.default,
      null,
      child
    )
  );
};
exports.StoryLink = StoryLink;
StoryLink.propTypes = _react4.default.propTypes;

/** Sections */
var IncludedComponents = exports.IncludedComponents = function IncludedComponents(props) {
  return _react2.default.createElement(
    Section,
    { title: 'Included Components' },
    _react2.default.createElement(
      'lu',
      null,
      props.componentNames.map(function (compName) {
        return _react2.default.createElement(
          'li',
          { key: compName },
          _react2.default.createElement(
            StoryLink,
            { kind: 'Components', story: compName },
            '<' + compName + '/>'
          )
        );
      })
    )
  );
};

IncludedComponents.propTypes = {
  componentNames: _propTypes.array
};

var TLDRSection = exports.TLDRSection = function TLDRSection(_ref2) {
  var children = _ref2.children;
  return _react2.default.createElement(
    Section,
    { title: 'Basic Usage' },
    children
  );
};

TLDRSection.propTypes = {
  children: _propTypes.any
};

var ExamplesSection = exports.ExamplesSection = function ExamplesSection(_ref3) {
  var children = _ref3.children;
  return _react2.default.createElement(
    Section,
    { title: 'Examples' },
    children
  );
};

ExamplesSection.propTypes = {
  children: _propTypes.any
};

function renderSection(children) {
  return (0, _Sections.description)({ text: children });
}