function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import { Box, Flexbox, Drawer, Input, PersistentTooltip, Typography, OldIcon, AccordionItem } from '../..';
export default {
  title: 'Molecules / Persistent Tooltip'
};
var StoryWrapper = function StoryWrapper(_ref) {
  var children = _ref.children;
  return React.createElement("div", {
    style: {
      backgroundColor: 'maroon',
      marginBottom: '500px'
    }
  }, React.createElement(Box, {
    mb: 4
  }, React.createElement(Typography, {
    type: "title2"
  }, "This component is used to let the user discover new features")), children);
};
export var MovingTooltip = function MovingTooltip() {
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isAccordionExpanded = _useState4[0],
    setIsAccordionExpanded = _useState4[1];
  var updateFnRef = useRef();
  useEffect(function () {
    setTimeout(function () {
      setIsAccordionExpanded(true);
    }, 1000);
  }, []);
  useEffect(function () {
    setTimeout(function () {
      var _updateFnRef$current, _updateFnRef$current$;
      (_updateFnRef$current = updateFnRef.current) === null || _updateFnRef$current === void 0 || (_updateFnRef$current$ = _updateFnRef$current.update) === null || _updateFnRef$current$ === void 0 || _updateFnRef$current$.call(_updateFnRef$current);
    }, 160);
  }, [isAccordionExpanded]);
  return React.createElement(StoryWrapper, null, React.createElement(AccordionItem, {
    key: 123123,
    title: "I will expand after 1500ms",
    disableFocusOutline: true,
    expanded: isAccordionExpanded,
    onClick: function onClick() {
      return setIsAccordionExpanded(!isAccordionExpanded);
    }
  }, "This is accordion content, will this push down the Tooltip?"), React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "Default persistent tooltip",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    ref: updateFnRef
  }, React.createElement(Input.Text, {
    label: "Label",
    placeholder: "This is wrapped by a tooltip"
  })));
};
export var DefaultStory = function DefaultStory() {
  var _useState5 = useState(true),
    _useState6 = _slicedToArray(_useState5, 2),
    isOpen = _useState6[0],
    setIsOpen = _useState6[1];
  return React.createElement(StoryWrapper, null, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "Default persistent tooltip",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  })));
};
export var WithoutPointerArrow = function WithoutPointerArrow() {
  var _useState7 = useState(true),
    _useState8 = _slicedToArray(_useState7, 2),
    isOpen = _useState8[0],
    setIsOpen = _useState8[1];
  return React.createElement(StoryWrapper, null, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "Persistent tooltip without arrow",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    maxWidth: 30,
    pointerArrow: false
  }, React.createElement(Input.Text, {
    label: "Label"
  })));
};
export var WithMaxWidth = function WithMaxWidth() {
  var _useState9 = useState(true),
    _useState10 = _slicedToArray(_useState9, 2),
    isOpen = _useState10[0],
    setIsOpen = _useState10[1];
  return React.createElement(StoryWrapper, null, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "Persistent tooltip with Max Width",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    maxWidth: 30
  }, React.createElement(Input.Text, {
    label: "Label"
  })));
};
export var WithMaxWidthAuto = function WithMaxWidthAuto() {
  var _useState11 = useState(true),
    _useState12 = _slicedToArray(_useState11, 2),
    isOpen = _useState12[0],
    setIsOpen = _useState12[1];
  return React.createElement(StoryWrapper, null, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "Persistent tooltip with max width auto",
    description: "Observe that the width might get very long. The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    maxWidth: "auto"
  }, React.createElement(Input.Text, {
    label: "Label"
  })));
};
export var CustomTitleAndDescription = function CustomTitleAndDescription() {
  var _useState13 = useState(true),
    _useState14 = _slicedToArray(_useState13, 2),
    isOpen = _useState14[0],
    setIsOpen = _useState14[1];
  return React.createElement(StoryWrapper, null, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: React.createElement(Box, {
      mb: 4
    }, React.createElement(Typography, {
      color: function color(t) {
        return t.color.negative;
      }
    }, "I'm in a box")),
    description: React.createElement(Flexbox, {
      container: true,
      gap: 4
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      color: function color(t) {
        return t.color.textLight;
      }
    }, "I am in a custom jsx description.")), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      color: function color(t) {
        return t.color.textLight;
      }
    }, "I am in a custom jsx description too!"))),
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  })));
};
export var DifferentPositions = function DifferentPositions() {
  var _useState15 = useState(true),
    _useState16 = _slicedToArray(_useState15, 2),
    openOne = _useState16[0],
    setOpenOne = _useState16[1];
  var _useState17 = useState(true),
    _useState18 = _slicedToArray(_useState17, 2),
    openTwo = _useState18[0],
    setOpenTwo = _useState18[1];
  var _useState19 = useState(true),
    _useState20 = _slicedToArray(_useState19, 2),
    openThree = _useState20[0],
    setOpenThree = _useState20[1];
  var _useState21 = useState(true),
    _useState22 = _slicedToArray(_useState21, 2),
    openFour = _useState22[0],
    setOpenFour = _useState22[1];
  return React.createElement(StoryWrapper, null, React.createElement(Box, {
    mb: 40
  }, React.createElement(PersistentTooltip, {
    isOpen: openOne,
    title: "Different Positions - Right",
    description: "This tooltip is positioned on the right",
    closeButtonTitle: "Close by clicking X",
    position: "right",
    onClose: function onClose() {
      return setOpenOne(false);
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  }))), React.createElement(Box, {
    mb: 40
  }, React.createElement(PersistentTooltip, {
    isOpen: openTwo,
    title: "Different Positions - Bottom",
    description: "This tooltip is positioned on the bottom",
    closeButtonTitle: "Close by clicking X",
    position: "bottom",
    onClose: function onClose() {
      return setOpenTwo(false);
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  }))), React.createElement(Box, {
    mb: 40
  }, React.createElement(PersistentTooltip, {
    isOpen: openThree,
    title: "Different Positions - Left",
    description: "This tooltip is positioned on the left, as you can see it's still positioned on the right. This is because it's dynamically repositioned. It does not fit  on left side of target.",
    closeButtonTitle: "Close by clicking X",
    position: "left",
    onClose: function onClose() {
      return setOpenThree(false);
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  }))), React.createElement(Box, {
    mb: 40
  }, React.createElement(PersistentTooltip, {
    isOpen: openFour,
    title: "Different Positions - Top",
    description: "This tooltip is positioned on the top",
    closeButtonTitle: "Close by clicking X",
    position: "top",
    onClose: function onClose() {
      return setOpenFour(false);
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  }))));
};
export var PersistentTooltipInDrawer = function PersistentTooltipInDrawer() {
  var _useState23 = useState(false),
    _useState24 = _slicedToArray(_useState23, 2),
    isOpen = _useState24[0],
    setIsOpen = _useState24[1];
  return React.createElement(StoryWrapper, null, React.createElement(Drawer, {
    onAnimationComplete: function onAnimationComplete() {
      setIsOpen(true);
    },
    preventOnClickOutsideDataAttributes: ['data-specific-drawer-prevent-click-outside']
  }, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "This is persistent tooltip",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    "data-specific-drawer-prevent-click-outside": true
  }, React.createElement(Input.Text, {
    label: "Label"
  }))));
};
var StyledPersistentTooltipWithMargin = styled(PersistentTooltip).withConfig({
  displayName: "PersistentTooltipstories__StyledPersistentTooltipWithMargin",
  componentId: "sc-zc49au-0"
})(["margin-right:20px;"]);
export var StyledPersistentTooltipInDrawer = function StyledPersistentTooltipInDrawer() {
  var _useState25 = useState(false),
    _useState26 = _slicedToArray(_useState25, 2),
    isOpen = _useState26[0],
    setIsOpen = _useState26[1];
  return React.createElement(StoryWrapper, null, React.createElement(Drawer, {
    onAnimationComplete: function onAnimationComplete() {
      setIsOpen(true);
    },
    preventOnClickOutsideDataAttributes: ['data-specific-drawer-prevent-click-outside']
  }, React.createElement(Box, {
    mt: 50
  }, React.createElement(StyledPersistentTooltipWithMargin, {
    isOpen: isOpen,
    title: "This is a styled persistent tooltip",
    description: "If you want to slightly re-position the tooltip, style it and add some margin!",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    "data-specific-drawer-prevent-click-outside": true,
    position: "left"
  }, React.createElement(Input.Text, {
    label: "Label"
  })))));
};
var StyledPersistentTooltipSubComponents = styled(PersistentTooltip).withConfig({
  displayName: "PersistentTooltipstories__StyledPersistentTooltipSubComponents",
  componentId: "sc-zc49au-1"
})(["", "{fill:", ";width:", "px;height:", "px;}"], PersistentTooltip.components.CloseButtonIcon, function (p) {
  return p.theme.color.text;
}, function (p) {
  return p.theme.spacing.unit(2);
}, function (p) {
  return p.theme.spacing.unit(2);
});
export var StyledSubcomponents = function StyledSubcomponents() {
  var _useState27 = useState(true),
    _useState28 = _slicedToArray(_useState27, 2),
    isOpen = _useState28[0],
    setIsOpen = _useState28[1];
  return React.createElement(StoryWrapper, null, React.createElement(StyledPersistentTooltipSubComponents, {
    isOpen: isOpen,
    title: React.createElement(Typography, {
      type: "title2"
    }, "I'm in a box"),
    description: React.createElement(Typography, null, "The max width is set with a prop for this tooltip. Also, it's subcomponents styled \u2013 different color, smaller close button."),
    closeButtonTitle: "Close by clicking X",
    backgroundColor: function backgroundColor(t) {
      return t.color.warning;
    },
    borderColor: function borderColor(t) {
      return t.color.negative;
    },
    onClose: function onClose() {
      return setIsOpen(false);
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  })));
};
export var WrapChild = function WrapChild() {
  var _useState29 = useState(true),
    _useState30 = _slicedToArray(_useState29, 2),
    isOpen = _useState30[0],
    setIsOpen = _useState30[1];
  return React.createElement(StoryWrapper, null, React.createElement(Flexbox, {
    container: true
  }, React.createElement(Box, {
    mt: 20
  }, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "With wrapchild prop",
    description: "With the wrapChiild prop, a DOM element of type span wraps the children, this guarantees a element in the DOM to work properly with ref (and thus positioning).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    position: "right",
    wrapChild: true
  }, React.createElement(OldIcon.Pen, null)))), React.createElement(Flexbox, {
    container: true
  }, React.createElement(Box, {
    mt: 40
  }, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "With a proper DOM-node as children",
    description: "This tooltip doesn't use the wrapChild prop, but has a children that correctly handles refs.",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    position: "right"
  }, React.createElement("div", null, React.createElement(OldIcon.Pen, null))))));
};
export var BrokenPositioning = function BrokenPositioning() {
  var _useState31 = useState(true),
    _useState32 = _slicedToArray(_useState31, 2),
    isOpen = _useState32[0],
    setIsOpen = _useState32[1];
  return React.createElement(StoryWrapper, null, React.createElement(Flexbox, {
    container: true
  }, React.createElement(Box, {
    mt: 40
  }, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "Broken positioning",
    description: "This tooltip has children which doesn't handle refs correctly. Thus, it's positioning doesn't work properly. See wrapChild for examples of how to fix this.",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    position: "right"
  }, React.createElement(OldIcon.Pen, null)))));
};
export var CustomTextAndCrossIconColors = function CustomTextAndCrossIconColors() {
  var _useState33 = useState(true),
    _useState34 = _slicedToArray(_useState33, 2),
    isOpen = _useState34[0],
    setIsOpen = _useState34[1];
  return React.createElement(StoryWrapper, null, React.createElement(PersistentTooltip, {
    isOpen: isOpen,
    title: "Default persistent tooltip",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    textColor: function textColor(t) {
      return t.color.labelTextPink;
    }
  }, React.createElement(Input.Text, {
    label: "Label"
  })));
};