@storybook/design-system/dist/components/CodeSnippets.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CodeSnippets = CodeSnippets;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

var _theming = require("@storybook/theming");

var _Clipboard = require("./clipboard/Clipboard");

var _Highlight = require("./Highlight");

var _styles = require("./shared/styles");

var _LinkTabs = require("./LinkTabs");

var _excluded = ["snippets"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var Wrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e7d06zb5"
} : {
  target: "e7d06zb5",
  label: "Wrapper"
})();
var Background = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e7d06zb4"
} : {
  target: "e7d06zb4",
  label: "Background"
})("background-color:#f7f9fc;border:1px solid ", _styles.color.border, ";border-radius:", _styles.spacing.borderRadius.small, "px;box-shadow:0 2px 5px 0 ", _styles.color.tr10, ";");
var StyledHighlight = ( /*#__PURE__*/0, _theming.styled)(_Highlight.Highlight, process.env.NODE_ENV === "production" ? {
  target: "e7d06zb3"
} : {
  target: "e7d06zb3",
  label: "StyledHighlight"
})("position:relative;border-radius:", _styles.spacing.borderRadius.small, "px;overflow:hidden;code{font-size:", _styles.typography.size.s2, "px;}&& pre[class*='language-']{background-color:transparent;padding:1em;padding-right:2em;margin:0;background:transparent;}");
var StyledClipboard = ( /*#__PURE__*/0, _theming.styled)(_Clipboard.Clipboard, process.env.NODE_ENV === "production" ? {
  target: "e7d06zb2"
} : {
  target: "e7d06zb2",
  label: "StyledClipboard"
})("position:absolute;bottom:-1px;right:-1px;border:1px solid ", _styles.color.border, ";border-radius:", _styles.spacing.borderRadius.small, "px 0 0 0;background-color:", _styles.color.lightest, ";font-size:", _styles.typography.size.s1, "px;font-weight:", _styles.typography.weight.bold, ";letter-spacing:0;line-height:14px;padding:5px 13px;&:focus{box-shadow:", _styles.color.secondary, " 0 -3px 0 0 inset;}");

function Snippet(_ref) {
  var snippet = _ref.snippet;
  var PreSnippetComponent = snippet.PreSnippet,
      SnippetComponent = snippet.Snippet;
  var snippetRef = (0, _react.useRef)();

  var getCopyContent = function getCopyContent() {
    return snippetRef.current && snippetRef.current.textContent;
  };

  return /*#__PURE__*/_react["default"].createElement(StyledHighlight, {
    withHTMLChildren: false
  }, PreSnippetComponent && /*#__PURE__*/_react["default"].createElement(PreSnippetComponent, null), /*#__PURE__*/_react["default"].createElement("div", {
    ref: snippetRef
  }, /*#__PURE__*/_react["default"].createElement(SnippetComponent, null)), /*#__PURE__*/_react["default"].createElement(StyledClipboard, {
    getCopyContent: getCopyContent
  }, function (copied) {
    return copied ? 'Copied' : 'Copy';
  }));
}

var TabsWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e7d06zb1"
} : {
  target: "e7d06zb1",
  label: "TabsWrapper"
})("background:", _styles.color.lightest, ";border-top-left-radius:", _styles.spacing.borderRadius.small, "px;border-top-right-radius:", _styles.spacing.borderRadius.small, "px;border-bottom:1px solid ", _styles.color.border, ";");
var StyledTabs = ( /*#__PURE__*/0, _theming.styled)(_LinkTabs.LinkTabs, process.env.NODE_ENV === "production" ? {
  target: "e7d06zb0"
} : {
  target: "e7d06zb0",
  label: "StyledTabs"
})(process.env.NODE_ENV === "production" ? {
  name: "1l77kfp",
  styles: "&&{transform:translateY(1px);margin:0;padding:0;li{margin:0;}}"
} : {
  name: "1l77kfp",
  styles: "&&{transform:translateY(1px);margin:0;padding:0;li{margin:0;}}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

function SnippetList(_ref2) {
  var snippets = _ref2.snippets;

  var _useState = (0, _react.useState)(snippets[0]),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      activeSnippet = _useState2[0],
      setActiveSnippet = _useState2[1];

  var tabItems = snippets.map(function (snippet, index) {
    var isActive = activeSnippet.id === snippet.id;
    return {
      key: snippet.id,
      isActive: isActive,
      isButton: true,
      label: snippet.renderTabLabel({
        isActive: isActive
      }),
      onClick: function onClick() {
        return setActiveSnippet(snippets[index]);
      }
    };
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TabsWrapper, null, /*#__PURE__*/_react["default"].createElement(StyledTabs, {
    items: tabItems
  })), /*#__PURE__*/_react["default"].createElement(Snippet, {
    key: activeSnippet.id,
    snippet: activeSnippet
  }));
}

function CodeSnippets(_ref3) {
  var snippets = _ref3.snippets,
      rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
  return /*#__PURE__*/_react["default"].createElement(Wrapper, rest, /*#__PURE__*/_react["default"].createElement(Background, null, snippets.length === 1 ? /*#__PURE__*/_react["default"].createElement(Snippet, {
    snippet: snippets[0]
  }) : /*#__PURE__*/_react["default"].createElement(SnippetList, {
    snippets: snippets
  })));
}