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

wix-style-react

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; }

import React from 'react';
import { string, array, any } from 'prop-types';
import LinkTo from '@storybook/addon-links/react';
import Markdown from 'wix-storybook-utils/Markdown';
import TextLink from 'wix-style-react/TextLink';
import ChevronRight from 'wix-style-react/new-icons/ChevronRight';

import { description } from 'wix-storybook-utils/Sections';

export var Title = function Title(props) {
  return React.createElement(Markdown, { source: '# ' + props.children });
};
Title.propTypes = {
  children: string
};

export var SubTitle = function SubTitle(props) {
  return React.createElement(Markdown, { source: '### ' + props.children });
};
SubTitle.propTypes = {
  children: string
};

export var Section = function Section(_ref) {
  var title = _ref.title,
      children = _ref.children;
  return React.createElement(
    'div',
    null,
    React.createElement(Markdown, { source: '## ' + title }),
    children
  );
};
Section.propTypes = {
  children: any,
  title: string
};

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

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

  return React.createElement(
    LinkTo,
    rest,
    React.createElement(
      TextLink,
      null,
      child
    )
  );
};
export { StoryLink };
StoryLink.propTypes = LinkTo.propTypes;

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

IncludedComponents.propTypes = {
  componentNames: array
};

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

TLDRSection.propTypes = {
  children: any
};

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

ExamplesSection.propTypes = {
  children: any
};

export function renderSection(children) {
  return description({ text: children });
}