@storybook/design-system/dist/components/tooltip/Tooltip.js

Storybook design system

"use strict";

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

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

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

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

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

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

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

var _excluded = ["placement", "hasChrome", "children", "arrowProps", "tooltipRef", "arrowRef", "zIndex"];

var ifPlacementEquals = function ifPlacementEquals(props, placement, value) {
  var fallback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
  return props['data-placement'].split('-')[0] === placement ? value : fallback;
};

var ArrowSpacing = 8;
var Arrow = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1sfricw1"
} : {
  target: "e1sfricw1",
  label: "Arrow"
})("position:absolute;border-style:solid;display:", function (props) {
  return props.isVisible ? 'block' : 'none';
}, ";", function (props) {
  return /*#__PURE__*/(0, _theming.css)("margin-bottom:", ifPlacementEquals(props, 'top', 0, ArrowSpacing), "px;margin-top:", ifPlacementEquals(props, 'bottom', 0, ArrowSpacing), "px;margin-right:", ifPlacementEquals(props, 'left', 0, ArrowSpacing), "px;margin-left:", ifPlacementEquals(props, 'right', 0, ArrowSpacing), "px;bottom:", ifPlacementEquals(props, 'top', ArrowSpacing * -1, 'auto'), "px;top:", ifPlacementEquals(props, 'bottom', ArrowSpacing * -1, 'auto'), "px;right:", ifPlacementEquals(props, 'left', ArrowSpacing * -1, 'auto'), "px;left:", ifPlacementEquals(props, 'right', ArrowSpacing * -1, 'auto'), "px;border-bottom-width:", ifPlacementEquals(props, 'top', 0, ArrowSpacing), "px;border-top-width:", ifPlacementEquals(props, 'bottom', 0, ArrowSpacing), "px;border-right-width:", ifPlacementEquals(props, 'left', 0, ArrowSpacing), "px;border-left-width:", ifPlacementEquals(props, 'right', 0, ArrowSpacing), "px;border-top-color:", ifPlacementEquals(props, 'top', 'white', 'transparent'), ";border-bottom-color:", ifPlacementEquals(props, 'bottom', 'white', 'transparent'), ";border-left-color:", ifPlacementEquals(props, 'left', 'white', 'transparent'), ";border-right-color:", ifPlacementEquals(props, 'right', 'white', 'transparent'), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"));
}, ";");
var TooltipWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1sfricw0"
} : {
  target: "e1sfricw0",
  label: "TooltipWrapper"
})("display:", function (props) {
  return props.hidden ? 'none' : 'inline-block';
}, ";z-index:", function (props) {
  return props.zIndex;
}, ";", function (props) {
  return !props.hasChrome && "\n      margin-bottom: ".concat(ifPlacementEquals(props, 'top', 8), "px;\n      margin-bottom: ").concat(ifPlacementEquals(props, 'top-start', 8), "px;\n      margin-top: ").concat(ifPlacementEquals(props, 'bottom', 8), "px;\n      margin-top: ").concat(ifPlacementEquals(props, 'bottom-start', 8), "px;\n      margin-left: ").concat(ifPlacementEquals(props, 'right', 8), "px;\n      margin-right: ").concat(ifPlacementEquals(props, 'left', 8), "px;\n    ");
}, ";", function (props) {
  return props.hasChrome && "\n      margin-bottom: ".concat(ifPlacementEquals(props, 'top', ArrowSpacing + 2), "px;\n      margin-top: ").concat(ifPlacementEquals(props, 'bottom', ArrowSpacing + 2), "px;\n      margin-left: ").concat(ifPlacementEquals(props, 'right', ArrowSpacing + 2), "px;\n      margin-right: ").concat(ifPlacementEquals(props, 'left', ArrowSpacing + 2), "px;\n\n      background: rgba(255, 255, 255, 0.97);\n\n      filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.05)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));\n      border-radius: ").concat(_styles.spacing.borderRadius.small, "px;\n      font-size: ").concat(_styles.typography.size.s1, "px;\n    ");
}, ";");

var Tooltip = function Tooltip(_ref) {
  var _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'top' : _ref$placement,
      _ref$hasChrome = _ref.hasChrome,
      hasChrome = _ref$hasChrome === void 0 ? true : _ref$hasChrome,
      children = _ref.children,
      arrowProps = _ref.arrowProps,
      tooltipRef = _ref.tooltipRef,
      arrowRef = _ref.arrowRef,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? _styles.zIndex.tooltip : _ref$zIndex,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(TooltipWrapper, (0, _extends2["default"])({
    hasChrome: hasChrome,
    "data-placement": placement,
    ref: tooltipRef,
    zIndex: zIndex
  }, props), /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
    isVisible: hasChrome,
    "data-placement": placement,
    ref: arrowRef
  }, arrowProps)), children);
};

exports.Tooltip = Tooltip;