@catho/quantum-storybook-ui/dist/components/AutoExample/AutoExample.js

A **Design System** is the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards. Over time, these 'systems' are growing in popularity - a very popular one is [Q

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Heading = _interopRequireDefault(require("../Heading"));

var _AutoPropsApi = _interopRequireDefault(require("../AutoPropsApi"));

var _ComponentPanel = _interopRequireDefault(require("../ComponentPanel"));

var _TabbedView = require("../TabbedView");

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

/* eslint-disable */
var AutoExample = function AutoExample(_ref) {
  var Component = _ref.component,
      props = _ref.componentProps,
      description = _ref.description,
      _ref$element = _ref.element,
      element = _ref$element === void 0 ? /*#__PURE__*/_react["default"].createElement(Component, props) : _ref$element,
      _ref$name = _ref.name,
      name = _ref$name === void 0 ? element.type.displayName || element.type.name || element.type : _ref$name,
      _ref$importModules = _ref.importModules,
      importModules = _ref$importModules === void 0 ? name : _ref$importModules,
      additionalTabs = _ref.additionalTabs;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
    name: name
  }, description), /*#__PURE__*/_react["default"].createElement(_TabbedView.TabbedView, null, /*#__PURE__*/_react["default"].createElement(_TabbedView.Tab, {
    title: "Usage"
  }, /*#__PURE__*/_react["default"].createElement(_ComponentPanel["default"], {
    component: element,
    importModules: importModules
  })), /*#__PURE__*/_react["default"].createElement(_TabbedView.Tab, {
    title: "API"
  }, /*#__PURE__*/_react["default"].createElement(_AutoPropsApi["default"], {
    component: element.type
  })), additionalTabs));
};

AutoExample.defaultProps = {
  componentProps: {},
  description: '',
  additionalTabs: null
};
AutoExample.propTypes = {
  component: _propTypes["default"].instanceOf(Object).isRequired,
  componentProps: _propTypes["default"].instanceOf(Object),
  description: _propTypes["default"].string,
  element: _propTypes["default"].instanceOf(Object),
  name: _propTypes["default"].string,
  importModules: _propTypes["default"].string,
  additionalTabs: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node])
};
AutoExample.displayName = 'AutoExample';
var _default = AutoExample;
exports["default"] = _default;