"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.placement = exports.default = exports.controlled = exports.Default = void 0;

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

var TooltipStories = _interopRequireWildcard(require("./Tooltip.stories.mdx"));

var _utils = require("../../chromatic/utils");

var _Tooltip = _interopRequireDefault(require("./Tooltip"));

var _Text = _interopRequireDefault(require("../text/Text"));

var _Flex = _interopRequireDefault(require("../flex/Flex"));

var _Icon = _interopRequireDefault(require("../icons/Icon"));

var _Counter = _interopRequireDefault(require("../counters/Counter"));

var _Checkbox = _interopRequireDefault(require("../form-elements/checkbox/Checkbox"));

var _Button = _interopRequireDefault(require("../buttons/Button"));

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

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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var Placement = function Placement() {
  var RenderTooltip = function RenderTooltip(_ref) {
    var placement = _ref.placement;
    return /*#__PURE__*/React.createElement(_Tooltip.default, {
      placement: placement,
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(_Tooltip.default.Element, {
      label: "Report this"
    }), /*#__PURE__*/React.createElement(_Tooltip.default.Trigger, null, /*#__PURE__*/React.createElement(_Button.default, {
      icon: /*#__PURE__*/React.createElement(_Icon.default, {
        color: "adaptive",
        type: "report_flag_outlined"
      }),
      iconOnly: true,
      variant: "solid-light"
    })));
  };

  return /*#__PURE__*/React.createElement(_Flex.default, {
    justifyContent: "center",
    style: {
      paddingTop: '100px'
    }
  }, /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "column",
    alignItems: "center",
    style: {
      width: '300px',
      gap: '20px'
    }
  }, /*#__PURE__*/React.createElement(RenderTooltip, {
    placement: "top"
  }), /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['top-end', 'top-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['left', 'right'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['bottom-end', 'bottom-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(RenderTooltip, {
    placement: "bottom"
  })));
};

var TypesOfTriggers = function TypesOfTriggers() {
  var RenderTooltip = function RenderTooltip(_ref2) {
    var trigger = _ref2.trigger;
    return /*#__PURE__*/React.createElement(_Tooltip.default, {
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(_Tooltip.default.Element, {
      label: "Here's tooltip"
    }), /*#__PURE__*/React.createElement(_Tooltip.default.Trigger, null, trigger));
  };

  return /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "column",
    style: {
      gap: '30px',
      marginTop: '50px'
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Text.default, null, "Button component:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement(_Button.default, null, "Hover me")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Text.default, null, "Checkbox component:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement(_Checkbox.default, null, "Hover me")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Text.default, null, "<button>", " tag:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement("button", null, "Hover me to trigger the tooltip")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Text.default, null, "<p>", " tag:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement("p", null, "Hover me to trigger the tooltip")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Text.default, null, "Counter component:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement(_Counter.default, {
      icon: "points",
      size: "xs"
    }, "+15", /*#__PURE__*/React.createElement(_Text.default, {
      as: "span",
      color: "text-gray-60",
      inherited: true
    }, ' ', "pts", ' '))
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '300px'
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", ' ', /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: "Hover me to trigger the tooltip."
  }), " Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."));
};

var TextLengths = function TextLengths() {
  var RenderShortTooltip = function RenderShortTooltip(_ref3) {
    var placement = _ref3.placement;
    return /*#__PURE__*/React.createElement(_Tooltip.default, {
      placement: placement,
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(_Tooltip.default.Element, {
      label: "0"
    }), /*#__PURE__*/React.createElement(_Tooltip.default.Trigger, null, /*#__PURE__*/React.createElement(_Button.default, {
      icon: /*#__PURE__*/React.createElement(_Icon.default, {
        color: "adaptive",
        type: "report_flag_outlined"
      }),
      iconOnly: true,
      variant: "solid-light"
    })));
  };

  var RenderLongTooltip = function RenderLongTooltip(_ref4) {
    var placement = _ref4.placement;
    return /*#__PURE__*/React.createElement(_Tooltip.default, {
      placement: placement,
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(_Tooltip.default.Element, {
      label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }), /*#__PURE__*/React.createElement(_Tooltip.default.Trigger, null, /*#__PURE__*/React.createElement(_Button.default, {
      icon: /*#__PURE__*/React.createElement(_Icon.default, {
        color: "adaptive",
        type: "report_flag_outlined"
      }),
      iconOnly: true,
      variant: "solid-light"
    })));
  };

  return /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "column"
  }, /*#__PURE__*/React.createElement(_Text.default, {
    weight: "bold"
  }, "Short text:"), /*#__PURE__*/React.createElement(_Flex.default, {
    justifyContent: "center",
    style: {
      paddingTop: '50px'
    }
  }, /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "column",
    alignItems: "center",
    style: {
      width: '300px',
      gap: '20px'
    }
  }, /*#__PURE__*/React.createElement(RenderShortTooltip, {
    placement: "top"
  }), /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['top-end', 'top-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderShortTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['left', 'right'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderShortTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['bottom-end', 'bottom-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderShortTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(RenderShortTooltip, {
    placement: "bottom"
  }))), /*#__PURE__*/React.createElement(_Text.default, {
    weight: "bold",
    style: {
      paddingTop: '100px'
    }
  }, "Long text:"), /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "column",
    style: {
      padding: '140px 0'
    },
    fullWidth: true
  }, /*#__PURE__*/React.createElement(_Flex.default, {
    direction: "column",
    justifyContent: "center",
    alignItems: "center",
    style: {
      gap: '140px',
      paddingBottom: '140px'
    }
  }, /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "top"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "top-end"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "top-start"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "bottom"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "bottom-end"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "bottom-start"
  })), /*#__PURE__*/React.createElement(_Flex.default, {
    justifyContent: "flex-end",
    style: {
      padding: '60px 0'
    },
    fullWidth: true
  }, /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "left"
  })), /*#__PURE__*/React.createElement(_Flex.default, {
    justifyContent: "flex-start",
    style: {
      padding: '60px 0'
    },
    fullWidth: true
  }, /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "right"
  }))));
};

var placement = TooltipStories.placement,
    controlled = TooltipStories.controlled,
    restStories = _objectWithoutProperties(TooltipStories, ["placement", "controlled"]);

exports.controlled = controlled;
exports.placement = placement;
var Default = (0, _utils.generateChromaticStory)(_objectSpread(_objectSpread({}, restStories), {}, {
  TypesOfTriggers: TypesOfTriggers,
  Placement: Placement,
  TextLengths: TextLengths
}));
exports.Default = Default;

var _TooltipStories$defau = TooltipStories.default,
    includeStories = _TooltipStories$defau.includeStories,
    meta = _objectWithoutProperties(_TooltipStories$defau, ["includeStories"]);

var _default = meta;
exports.default = _default;