vue-styleguidist/lib/client/rsg-components/VsgStyleGuide/StyleGuideRenderer.js

Vue components style guide generator

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "core-js/modules/es.string.small.js";
import React from 'react';
import PropTypes from 'prop-types';
import Logo from 'rsg-components/Logo';
import StyleguideFooter from 'rsg-components/StyleguideFooter';
import Styled from 'rsg-components/Styled';
import cx from 'classnames';
import Ribbon from 'rsg-components/Ribbon';
import Version from 'rsg-components/Version';
import consts from '../../../scripts/consts';
var styles = function styles(_ref) {
  var _content;
  var color = _ref.color,
    sidebarWidth = _ref.sidebarWidth,
    mq = _ref.mq,
    space = _ref.space,
    maxWidth = _ref.maxWidth;
  return {
    root: {
      minHeight: '100vh',
      backgroundColor: color.baseBackground
    },
    hasSidebar: _defineProperty({
      paddingLeft: sidebarWidth
    }, mq.small, {
      paddingLeft: 0
    }),
    content: (_content = {
      maxWidth: maxWidth,
      padding: [[space[2], space[4]]],
      margin: [[0, 'auto']]
    }, _defineProperty(_content, mq.small, {
      padding: space[2]
    }), _defineProperty(_content, "display", 'block'), _content),
    sidebar: _defineProperty({
      backgroundColor: color.sidebarBackground,
      border: [[color.border, 'solid']],
      borderWidth: [[0, 1, 0, 0]],
      position: 'fixed',
      top: 0,
      left: 0,
      bottom: 0,
      width: sidebarWidth,
      overflow: 'auto',
      '-webkit-overflow-scrolling': 'touch'
    }, mq.small, {
      position: 'static',
      width: 'auto',
      borderWidth: [[1, 0, 0, 0]],
      paddingBottom: space[0]
    }),
    logo: {
      padding: space[2],
      borderBottom: [[1, color.border, 'solid']]
    }
  };
};
export function StyleGuideRenderer(_ref2) {
  var classes = _ref2.classes,
    title = _ref2.title,
    version = _ref2.version,
    children = _ref2.children,
    toc = _ref2.toc,
    hasSidebar = _ref2.hasSidebar;
  return /*#__PURE__*/React.createElement("div", {
    className: cx(classes.root, hasSidebar && classes.hasSidebar)
  }, /*#__PURE__*/React.createElement("main", {
    className: classes.content
  }, children, /*#__PURE__*/React.createElement(StyleguideFooter, {
    homepageUrl: consts.HOMEPAGE
  })), hasSidebar && /*#__PURE__*/React.createElement("div", {
    className: classes.sidebar
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.logo
  }, /*#__PURE__*/React.createElement(Logo, null, title), version && /*#__PURE__*/React.createElement(Version, null, version)), toc), /*#__PURE__*/React.createElement(Ribbon, null));
}
StyleGuideRenderer.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired,
  version: PropTypes.string,
  homepageUrl: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  toc: PropTypes.node.isRequired,
  hasSidebar: PropTypes.bool
};
export default Styled(styles)(StyleGuideRenderer);