iguazio.dashboard-react-controls 2.2.24 → 3.0.0

package/dist/components/PopUpDialog/PopUpDialog.js

@@ -1,171 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactDom = require("react-dom");
-var _lodash = require("lodash");
-var _RoundedIcon = _interopRequireDefault(require("../RoundedIcon/RoundedIcon"));
-var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
-var _types = require("../../types");
-var _close = require("../../images/close.svg");
-require("./popUpDialog.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/*
-Copyright 2022 Iguazio Systems Ltd.
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
-const PopUpDialog = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className = '',
-    closePopUp = () => {},
-    customPosition = {},
-    headerIsHidden = false,
-    headerText = '',
-    showPopUpDialog = true,
-    style = {},
-    tooltipText = ''
-  } = _ref;
-  const [showPopUp, setShowPopUp] = (0, _react.useState)(showPopUpDialog ?? true);
-  const popUpOverlayRef = (0, _react.useRef)(null);
-  ref ??= popUpOverlayRef;
-  const popUpClassNames = (0, _classnames.default)(className, 'pop-up-dialog__overlay', customPosition.element && 'custom-position');
-  const handleClosePopUp = (0, _react.useCallback)(() => {
-    closePopUp && closePopUp();
-    setShowPopUp(false);
-  }, [closePopUp]);
-  const calculateCustomPopUpPosition = (0, _react.useCallback)(() => {
-    if (customPosition?.element?.current && ref?.current) {
-      const elementRect = customPosition.element.current.getBoundingClientRect();
-      const popUpRect = ref.current.getBoundingClientRect();
-      const [verticalPosition, horizontalPosition] = customPosition.position.split('-');
-      const popupMargin = 15;
-      const elementMargin = 5;
-      const isEnoughSpaceFromLeft = elementRect.right >= popUpRect.width + popupMargin;
-      const isEnoughSpaceFromRight = window.innerWidth - elementRect.left >= popUpRect.width + popupMargin;
-      const isEnoughSpaceFromTop = elementRect.top > popUpRect.height + popupMargin + elementMargin;
-      const isEnoughSpaceFromBottom = elementRect.bottom + popUpRect.height + popupMargin + elementMargin <= window.innerHeight;
-      let leftPosition = horizontalPosition === 'left' ? elementRect.right - popUpRect.width : elementRect.left;
-      let topPosition;
-      if (verticalPosition === 'top') {
-        topPosition = isEnoughSpaceFromTop ? elementRect.top - popUpRect.height - elementMargin : popupMargin;
-      } else {
-        topPosition = isEnoughSpaceFromBottom ? elementRect.bottom + elementMargin : window.innerHeight - popUpRect.height - popupMargin;
-      }
-      if (customPosition.autoVerticalPosition) {
-        if (verticalPosition === 'top') {
-          if (!isEnoughSpaceFromTop && isEnoughSpaceFromBottom) {
-            topPosition = elementRect.bottom + elementMargin;
-          }
-        } else {
-          if (isEnoughSpaceFromTop && !isEnoughSpaceFromBottom) {
-            topPosition = elementRect.top - popUpRect.height - elementMargin;
-          }
-        }
-      }
-      if (customPosition.autoHorizontalPosition) {
-        if (verticalPosition === 'left') {
-          if (!isEnoughSpaceFromLeft && isEnoughSpaceFromRight) {
-            leftPosition = elementRect.left;
-          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
-            leftPosition = popupMargin;
-          }
-        } else {
-          if (isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
-            leftPosition = elementRect.right - popUpRect.width;
-          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
-            leftPosition = window.innerWidth - popUpRect.width - popupMargin;
-          }
-        }
-      }
-      ref.current.style.top = `${topPosition}px`;
-      if (style.left && !(customPosition.autoHorizontalPosition && isEnoughSpaceFromRight)) {
-        ref.current.style.left = `calc(${leftPosition}px + ${style.left})`;
-      } else {
-        ref.current.style.left = `${leftPosition}px`;
-      }
-    }
-  }, [customPosition, style.left, ref]);
-  (0, _react.useLayoutEffect)(() => {
-    calculateCustomPopUpPosition();
-  }, [calculateCustomPopUpPosition]);
-  (0, _react.useEffect)(() => {
-    if (showPopUp) {
-      const throttledCalculatedCustomPopUpPosition = (0, _lodash.throttle)(calculateCustomPopUpPosition, 100, {
-        trailing: true,
-        leading: true
-      });
-      const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition);
-      const popupElement = ref.current;
-      popupObserver.observe(popupElement);
-      window.addEventListener('resize', throttledCalculatedCustomPopUpPosition);
-      return () => {
-        popupObserver.unobserve(popupElement);
-        window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition);
-      };
-    }
-  }, [calculateCustomPopUpPosition, ref, showPopUp]);
-  return showPopUp ? /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: ref,
-    className: popUpClassNames,
-    style: style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      "data-testid": "pop-up-dialog",
-      className: "pop-up-dialog",
-      children: [!headerIsHidden && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "pop-up-dialog__header",
-        children: [headerText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          "data-testid": "pop-up-dialog-header",
-          className: "pop-up-dialog__header-text",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-            template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
-              text: tooltipText || headerText
-            }),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: headerText
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoundedIcon.default, {
-          className: "pop-up-dialog__btn_close",
-          onClick: handleClosePopUp,
-          tooltipText: "Close",
-          "data-testid": "pop-up-close-btn",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
-        })]
-      }), children]
-    })
-  }), document.getElementById('overlay_container')) : null;
-});
-PopUpDialog.propTypes = {
-  className: _propTypes.default.string,
-  closePopUp: _propTypes.default.func,
-  customPosition: _types.POP_UP_CUSTOM_POSITION,
-  headerIsHidden: _propTypes.default.bool,
-  headerText: _propTypes.default.string,
-  showPopUpDialog: _propTypes.default.bool,
-  style: _propTypes.default.object,
-  tooltipText: _propTypes.default.string
-};
-var _default = exports.default = PopUpDialog;

package/dist/components/PopUpDialog/popUpDialog.scss

@@ -1,83 +0,0 @@
-@import '../../scss/variables';
-@import '../../scss/colors';
-@import '../../scss/borders';
-@import '../../scss/shadows';
-
-.pop-up-dialog {
-  position: relative;
-  width: 477px;
-  max-height: 90vh;
-  padding: 20px;
-  overflow-y: auto;
-  background-color: $white;
-  border-radius: $modalBorderRadius;
-  box-shadow: $previewBoxShadow;
-
-  &__buttons_wrapper {
-    display: flex;
-  }
-
-  &__overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: $mineshaftTwo;
-    z-index: 9;
-
-    &.custom-position {
-      width: auto;
-      height: auto;
-      background: unset;
-    }
-  }
-
-  &__header {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    min-height: 30px;
-    margin-bottom: 15px;
-
-    &-text {
-      width: 100%;
-      color: $primary;
-      font-size: 24px;
-      line-height: 28px;
-      word-break: break-word;
-    }
-
-    &-close {
-      width: 14px;
-      height: 14px;
-      margin: 5px 0 5px auto;
-      cursor: pointer;
-    }
-  }
-
-  &__footer-container {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
-
-  &__btn {
-    &_cancel {
-      margin: 0 10px;
-    }
-
-    &_close {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-    }
-  }
-
-  &__form-input {
-    width: 100%;
-  }
-}

package/dist/components/RoundedIcon/RoundedIcon.js

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
-require("./roundedIcon.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*
-Copyright 2022 Iguazio Systems Ltd.
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
-const RoundedIcon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className = '',
-    disabled = false,
-    id = '',
-    isActive = false,
-    onClick = () => {},
-    tooltipText = ''
-  } = _ref;
-  const wrapperClassNames = (0, _classnames.default)('round-icon-cp', className);
-  const IconClassNames = (0, _classnames.default)('round-icon-cp__circle', isActive && 'round-icon-cp__circle-active', disabled && 'round-icon-cp__circle-disabled');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: wrapperClassNames,
-    ref: ref,
-    "data-testid": id,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-      hidden: !tooltipText,
-      id: id,
-      template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
-        text: tooltipText
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        onClick: onClick,
-        disabled: disabled,
-        className: IconClassNames,
-        children: children
-      })
-    })
-  });
-});
-RoundedIcon.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  id: _propTypes.default.string,
-  isActive: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  tooltipText: _propTypes.default.string
-};
-var _default = exports.default = /*#__PURE__*/_react.default.memo(RoundedIcon);

package/dist/components/RoundedIcon/roundedIcon.scss

@@ -1,57 +0,0 @@
-@import '../../scss/colors.scss';
-
-.round-icon-cp {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: 0 0.2rem;
-
-  &__circle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    padding: 4px;
-
-    & > * {
-      position: relative;
-      z-index: 2;
-      display: inline-flex;
-      margin: 0 !important;
-    }
-
-    &::before {
-      position: absolute;
-      right: 0;
-      left: 0;
-      z-index: 1;
-      width: inherit;
-      height: inherit;
-      background-color: $mulledWineThree;
-      border-radius: 50%;
-      opacity: 0;
-      transition: opacity 0.3s ease-in-out;
-      content: '';
-    }
-
-    &:hover,
-    &-active {
-      &::before {
-        opacity: 1;
-      }
-    }
-
-    &-disabled {
-      path {
-        fill: $spunPearl;
-      }
-
-      &:hover {
-        &::before {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}

package/dist/components/Tip/Tip.js

@@ -1,116 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactDom = require("react-dom");
-var _questionMark = require("../../images/question-mark.svg");
-var _exclamationMark = require("../../images/exclamation-mark.svg");
-var _tip = _interopRequireDefault(require("./tip.scss"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/*
-Copyright 2022 Iguazio Systems Ltd.
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
-const arrowOffset = parseInt(_tip.default.arrowoffset);
-const arrowLength = parseInt(_tip.default.arrowlength);
-const iconLength = parseInt(_tip.default.iconlength);
-const minTextLength = 40;
-const Tip = _ref => {
-  let {
-    className = '',
-    text,
-    withExclamationMark
-  } = _ref;
-  const [isShow, setIsShow] = (0, _react.useState)(false);
-  const [tipClassName, setTipClassName] = (0, _react.useState)('tip_top tip_left');
-  const iconRef = (0, _react.useRef)();
-  const tipBodyRef = (0, _react.useRef)();
-  const tipContainerClassNames = (0, _classnames.default)(className, 'tip-container');
-  const tipClassNames = (0, _classnames.default)('tip', tipClassName, text.length <= minTextLength ? 'tip_small' : 'tip_big');
-  const handleMouseEnter = (0, _react.useCallback)(event => {
-    setIsShow(true);
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (isShow) {
-      const iconRect = iconRef.current.getBoundingClientRect();
-      const tipRect = tipBodyRef.current.getBoundingClientRect();
-      const widthPosition = iconRect.left > tipRect.width - arrowOffset ? 'tip_left' : 'tip_right';
-      const heightPosition = iconRect.top > tipRect.height + arrowLength ? 'tip_top' : 'tip_bottom';
-      setTipClassName(`${heightPosition} ${widthPosition}`);
-      if (widthPosition === 'tip_left') {
-        const computedArrowOffset = arrowOffset + (iconLength + arrowLength) / 2;
-        tipBodyRef.current.style.left = `${iconRect.left - (tipRect.width - computedArrowOffset)}px`;
-      } else {
-        const computedArrowOffset = arrowOffset - (iconLength - arrowLength) / 2;
-        tipBodyRef.current.style.left = `${iconRect.left - computedArrowOffset}px`;
-      }
-      tipBodyRef.current.style.top = heightPosition === 'tip_top' ? `${iconRect.top - tipRect.height - arrowLength}px` : `${iconRect.bottom + arrowLength}px`;
-    }
-  }, [isShow]);
-  const handleMouseLeave = () => {
-    setIsShow(false);
-  };
-  (0, _react.useEffect)(() => {
-    const node = iconRef.current;
-    if (iconRef.current) {
-      node.addEventListener('mouseenter', handleMouseEnter);
-      node.addEventListener('mouseleave', handleMouseLeave);
-      return () => {
-        node.removeEventListener('mouseenter', handleMouseEnter);
-        node.removeEventListener('mouseleave', handleMouseLeave);
-      };
-    }
-  }, [handleMouseEnter, isShow]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    "data-testid": "tip",
-    className: tipContainerClassNames,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: iconRef,
-      className: "tip-wrapper",
-      children: withExclamationMark ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_exclamationMark.ReactComponent, {
-        "data-testid": "tip-icon"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_questionMark.ReactComponent, {
-        "data-testid": "tip-icon"
-      })
-    }), /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-      nodeRef: tipBodyRef,
-      in: isShow,
-      timeout: 200,
-      classNames: "fade",
-      unmountOnExit: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: tipBodyRef,
-        "data-testid": "tip-text",
-        className: tipClassNames,
-        children: text
-      })
-    }), document.getElementById('overlay_container'))]
-  });
-};
-Tip.propTypes = {
-  className: _propTypes.default.string,
-  text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]).isRequired
-};
-var _default = exports.default = Tip;

package/dist/components/Tip/Tip.test.js

@@ -1,64 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _Tip = _interopRequireDefault(require("./Tip"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*
-Copyright 2022 Iguazio Systems Ltd.
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
-jest.mock('../../images/question-mark.svg', () => ({
-  ReactComponent: 'Question-icon'
-}));
-const renderComponent = props => (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
-  ...props
-}));
-describe('Tip component', () => {
-  let wrapper;
-  beforeEach(() => {
-    const props = {
-      text: 'Show tip component'
-    };
-    wrapper = renderComponent(props);
-  });
-  it('renders without crashing', () => {
-    expect(wrapper.queryByTestId('tip')).not.toBeNull();
-  });
-  it('should display tip text if mouse over the icon', () => {
-    const tipIcon = wrapper.getByTestId('tip-icon');
-    _react2.fireEvent.mouseEnter(tipIcon);
-    expect(wrapper.queryByTestId('tip-text')).not.toBeNull();
-  });
-  it('should hide tip text if mouse leave the icon', async () => {
-    const tipIcon = wrapper.getByTestId('tip-icon');
-    _react2.fireEvent.mouseEnter(tipIcon);
-    expect(wrapper.queryByTestId('tip-text')).not.toBeNull();
-    _react2.fireEvent.mouseLeave(tipIcon);
-    const tipText = await (0, _react2.waitForElementToBeRemoved)(() => wrapper.queryByTestId('tip-text'));
-    expect(tipText).toBeUndefined();
-  });
-  it('should add the class "tip_big" if the length of the prop text is more than 40 characters', () => {
-    wrapper.rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
-      text: "Lorem Ipsum is simply dummy text of the printing and typesetting"
-    }));
-    const tipIcon = wrapper.getByTestId('tip-icon');
-    _react2.fireEvent.mouseEnter(tipIcon);
-    const tipText = wrapper.getByTestId('tip-text');
-    expect(tipText.className).toMatch('tip_big');
-  });
-});

package/dist/components/Tip/tip.scss

@@ -1,94 +0,0 @@
-@import '../../scss/colors';
-
-$arrowLength: 10px;
-$iconLength: 16px;
-$arrowOffset: 20px;
-
-.tip-container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.tip {
-  position: fixed;
-  display: block;
-  padding: 10px;
-  color: $white;
-  white-space: pre-line;
-  background: $primary;
-  border-radius: 4px;
-  z-index: 9;
-
-  &-wrapper {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  &_top {
-    &::after {
-      bottom: calc(-#{$arrowLength} / 2);
-    }
-  }
-
-  &_bottom {
-    &::after {
-      top: calc(-#{$arrowLength} / 2);
-    }
-  }
-
-  &_left {
-    &::after {
-      right: calc(#{$arrowOffset});
-    }
-  }
-
-  &_right {
-    &::after {
-      left: calc(#{$arrowOffset});
-    }
-  }
-
-  &_small {
-    min-width: 100px;
-    max-width: 250px;
-  }
-
-  &_big {
-    min-width: 250px;
-    max-width: 400px;
-  }
-
-  &::after {
-    position: absolute;
-    width: $arrowLength;
-    height: $arrowLength;
-    background: $primary;
-    transform: rotate(45deg);
-    content: '';
-  }
-}
-
-.fade-enter {
-  opacity: 0;
-}
-
-.fade-enter-active {
-  opacity: 1;
-  transition: opacity 200ms;
-}
-
-.fade-exit {
-  opacity: 1;
-}
-
-.fade-exit-active {
-  opacity: 0;
-  transition: opacity 200ms;
-}
-
-:export {
-  arrowlength: $arrowLength;
-  iconlength: $iconLength;
-  arrowoffset: $arrowOffset;
-}