iguazio.dashboard-react-controls 0.0.1

package/dist/components/RoundedIcon/RoundedIcon.js

@@ -0,0 +1,73 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RoundedIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      id = _ref.id,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      tooltipText = _ref.tooltipText;
+  var wrapperClassNames = (0, _classnames.default)('round-icon-cp', className);
+  var IconClassNames = (0, _classnames.default)('round-icon-cp__circle', isActive && 'round-icon-cp__circle-active');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: wrapperClassNames,
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      hidden: !tooltipText,
+      template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
+        text: tooltipText
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: onClick,
+        disabled: disabled,
+        id: id,
+        className: IconClassNames,
+        children: children
+      })
+    })
+  });
+});
+
+RoundedIcon.defaultProps = {
+  className: '',
+  disabled: false,
+  id: '',
+  isActive: false,
+  onClick: function onClick() {},
+  tooltipText: ''
+};
+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 = /*#__PURE__*/_react.default.memo(RoundedIcon);
+
+exports.default = _default;

package/dist/components/RoundedIcon/roundedIcon.scss

@@ -0,0 +1,45 @@
+@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: 30px;
+    height: 30px;
+    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;
+      }
+    }
+  }
+}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,196 @@
+"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.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodash = require("lodash");
+
+var _common = require("../../utils/common.util");
+
+require("./tooltip.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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 _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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      hidden = _ref.hidden,
+      template = _ref.template,
+      textShow = _ref.textShow;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      style = _useState4[0],
+      setStyle = _useState4[1];
+
+  var tooltipClassNames = (0, _classnames.default)('data-ellipsis', 'tooltip-wrapper', className);
+  var duration = 200;
+  var parentRef = (0, _react.useRef)();
+  var tooltipRef = (0, _react.useRef)();
+  var offset = 10;
+  var defaultStyle = {
+    transition: "opacity ".concat(duration, "ms ease-in-out ").concat(duration, "ms")
+  };
+
+  var handleScroll = function handleScroll() {
+    setShow(false);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setShow(false);
+  };
+
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    var _parentRef$current$ch = _slicedToArray(parentRef.current.childNodes, 1),
+        child = _parentRef$current$ch[0];
+
+    var show = !hidden && (textShow ? true : !child ? false : child.nodeType !== Node.TEXT_NODE ||
+    /*
+    If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.
+    */
+    child.nodeType === Node.TEXT_NODE && parentRef.current.scrollWidth > parentRef.current.offsetWidth);
+
+    if (show) {
+      var _parentRef$current$ge, _parentRef$current, _tooltipRef$current$g, _tooltipRef$current;
+
+      setShow(true);
+
+      var _ref2 = (_parentRef$current$ge = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : {},
+          height = _ref2.height,
+          top = _ref2.top,
+          bottom = _ref2.bottom;
+
+      var _ref3 = (_tooltipRef$current$g = (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect()) !== null && _tooltipRef$current$g !== void 0 ? _tooltipRef$current$g : {
+        height: 0,
+        width: 0
+      },
+          tooltipHeight = _ref3.height,
+          tooltipWidth = _ref3.width;
+
+      var leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset);
+      var left = event.x + tooltipWidth + offset > window.innerWidth ? leftPosition > offset ? leftPosition : offset : event.x + offset;
+
+      if (top + height + offset + tooltipHeight >= window.innerHeight) {
+        setStyle({
+          top: bottom - height - offset - tooltipHeight,
+          left: left
+        });
+      } else {
+        setStyle({
+          top: top + height + offset,
+          left: left
+        });
+      }
+    }
+  }, [hidden, textShow]);
+  var clearStyles = (0, _lodash.debounce)(function () {
+    if (!(0, _common.isEveryObjectValueEmpty)(style)) {
+      setStyle({});
+    }
+  }, 100);
+  (0, _react.useEffect)(function () {
+    var node = parentRef.current;
+
+    if (node) {
+      node.addEventListener('mouseenter', handleMouseEnter);
+      node.addEventListener('mouseleave', handleMouseLeave);
+      return function () {
+        node.removeEventListener('mouseenter', handleMouseEnter);
+        node.removeEventListener('mouseleave', handleMouseLeave);
+      };
+    }
+  }, [parentRef, handleMouseEnter]);
+  (0, _react.useEffect)(function () {
+    if (show) {
+      window.addEventListener('scroll', handleScroll, true);
+    }
+
+    return function () {
+      return window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [show]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', clearStyles);
+    return function () {
+      window.removeEventListener('resize', clearStyles);
+    };
+  }, [clearStyles, style]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": "tooltip-wrapper",
+      ref: parentRef,
+      className: tooltipClassNames,
+      children: children
+    }), !hidden && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+      classNames: "fade",
+      in: show,
+      timeout: duration,
+      unmountOnExit: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "tooltip",
+        ref: tooltipRef,
+        style: _objectSpread(_objectSpread({}, defaultStyle), style),
+        className: "tooltip",
+        children: template
+      })
+    }), document.getElementById('overlay_container'))]
+  });
+};
+
+Tooltip.defaultProps = {
+  hidden: false,
+  textShow: false
+};
+Tooltip.propTypes = {
+  className: _propTypes.default.string,
+  hidden: _propTypes.default.bool,
+  template: _propTypes.default.element.isRequired,
+  textShow: _propTypes.default.bool
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Tooltip);
+
+exports.default = _default;

package/dist/components/Tooltip/Tooltip.test.js

@@ -0,0 +1,139 @@
+// todo: rewrite existing tests
+// import {
+//   cleanup,
+//   fireEvent,
+//   render,
+//   waitForElementToBeRemoved
+// } from '@testing-library/react'
+// import React from 'react'
+// import Tooltip from './Tooltip'
+//
+// const renderComponent = props =>
+//   render(
+//     <Tooltip {...props}>
+//       <div>tooltip</div>
+//     </Tooltip>
+//   )
+//
+// window.resizeTo = function resizeTo(width, height) {
+//   Object.assign(this, {
+//     innerWidth: width,
+//     innerHeight: height,
+//     outerWidth: width,
+//     outerHeight: height
+//   }).dispatchEvent(new this.Event('resize'))
+// }
+//
+// describe('Tooltip', () => {
+//   let wrapper
+//   beforeEach(() => {
+//     const props = {
+//       template: <div>It's tooltip</div>
+//     }
+//     wrapper = renderComponent(props)
+//   })
+//
+//   afterEach(cleanup)
+//
+//   it('renders without crashing', () => {
+//     expect(wrapper.queryByTestId('tooltip-wrapper')).not.toBeNull()
+//   })
+//
+//   it('should hide tooltip while scrolling', async () => {
+//     const tooltipWrapper = wrapper.getByTestId('tooltip-wrapper')
+//
+//     fireEvent.mouseEnter(tooltipWrapper)
+//
+//     const tooltip = wrapper.getByTestId('tooltip')
+//
+//     expect(tooltip).not.toBeNull()
+//
+//     fireEvent.scroll(window)
+//
+//     const removeTooltip = await waitForElementToBeRemoved(
+//       wrapper.getByTestId('tooltip')
+//     )
+//     expect(removeTooltip).toBeUndefined()
+//   })
+//
+//   it('should hide tooltip when mouse leave', async () => {
+//     const tooltipWrapper = wrapper.getByTestId('tooltip-wrapper')
+//
+//     fireEvent.mouseEnter(tooltipWrapper)
+//
+//     const tooltip = wrapper.getByTestId('tooltip')
+//
+//     expect(tooltip).not.toBeNull()
+//
+//     fireEvent.mouseLeave(tooltipWrapper)
+//
+//     const removeTooltip = await waitForElementToBeRemoved(
+//       wrapper.getByTestId('tooltip')
+//     )
+//     expect(removeTooltip).toBeUndefined()
+//   })
+//
+//   it('should show tooltip on the top', () => {
+//     window.resizeTo(800, 10)
+//
+//     wrapper.rerender(
+//       <Tooltip template={<div>It's tooltip 123</div>}>
+//         <div>tooltip</div>
+//       </Tooltip>
+//     )
+//     const tooltipWrapper = wrapper.getByTestId('tooltip-wrapper')
+//
+//     fireEvent.mouseEnter(tooltipWrapper)
+//
+//     const tooltip = wrapper.getByTestId('tooltip')
+//
+//     expect(tooltip.style.top).toBe('-10px')
+//   })
+//
+//   it('should always show tooltip if textShow set to "true"', () => {
+//     wrapper.rerender(
+//       <Tooltip template={<div>It's tooltip 123</div>} textShow={true}>
+//         tooltip
+//       </Tooltip>
+//     )
+//
+//     const tooltipWrapper = wrapper.getByTestId('tooltip-wrapper')
+//
+//     fireEvent.mouseEnter(tooltipWrapper)
+//
+//     const tooltip = wrapper.getByTestId('tooltip')
+//
+//     expect(tooltip).not.toBeNull()
+//   })
+//
+//   it('should not show tooltip if children is empty', () => {
+//     const children = null
+//     wrapper.rerender(
+//       <Tooltip template={<div>tooltip</div>}>{children}</Tooltip>
+//     )
+//
+//     const tooltipWrapper = wrapper.getByTestId('tooltip-wrapper')
+//
+//     fireEvent.mouseEnter(tooltipWrapper)
+//
+//     const tooltip = wrapper.queryByTestId('tooltip')
+//
+//     expect(tooltip).toBeNull()
+//   })
+//
+//   it('should show tooltip if children is a "Node"', () => {
+//     const children = <div>children</div>
+//     wrapper.rerender(
+//       <Tooltip template={<div>tooltip</div>}>{children}</Tooltip>
+//     )
+//
+//     const tooltipWrapper = wrapper.getByTestId('tooltip-wrapper')
+//
+//     fireEvent.mouseEnter(tooltipWrapper)
+//
+//     const tooltip = wrapper.queryByTestId('tooltip')
+//
+//     expect(tooltip).not.toBeNull()
+//   })
+// })
+"use strict";

package/dist/components/Tooltip/tooltip.scss

@@ -0,0 +1,9 @@
+.tooltip {
+  position: fixed;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 1.4;
+  display: flex;
+  max-width: 400px;
+  z-index: 7;
+}

package/dist/components/TooltipTemplate/ProducerTooltipTemplate.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("./producerTooltipTemplate.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ProducerTooltipTemplate = function ProducerTooltipTemplate(_ref) {
+  var kind = _ref.kind,
+      owner = _ref.owner;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "tooltip-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tooltip-container__kind",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "Kind:"
+      }), " ", kind]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tooltip-container__owner",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "Owner:"
+      }), " ", owner]
+    })]
+  });
+};
+
+ProducerTooltipTemplate.defaultProps = {
+  kind: '',
+  owner: ''
+};
+ProducerTooltipTemplate.propTypes = {
+  kind: _propTypes.default.string.isRequired,
+  owner: _propTypes.default.string.isRequired
+};
+var _default = ProducerTooltipTemplate;
+exports.default = _default;

package/dist/components/TooltipTemplate/TextTooltipTemplate.js

@@ -0,0 +1,47 @@
+"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.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./textTooltipTemplate.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+var TextTooltipTemplate = function TextTooltipTemplate(_ref) {
+  var text = _ref.text,
+      warning = _ref.warning;
+  var textRef = (0, _react.useRef)();
+  var tooltipClassNames = (0, _classnames.default)('tooltip-template', 'tooltip__text', warning && 'tooltip__warning');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: tooltipClassNames,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      ref: textRef,
+      children: text
+    })
+  });
+};
+
+TextTooltipTemplate.propTypes = {
+  text: ''
+};
+TextTooltipTemplate.propTypes = {
+  text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element, _propTypes.default.number])
+};
+var _default = TextTooltipTemplate;
+exports.default = _default;

package/dist/components/TooltipTemplate/producerTooltipTemplate.scss

@@ -0,0 +1,23 @@
+@import '../../scss/shadows';
+@import '../../scss/colors';
+
+.tooltip-container {
+  display: flex;
+  flex-direction: column;
+  padding: 15px 10px;
+  background-color: $white;
+  border-radius: 4px;
+  box-shadow: $tooltipShadow;
+
+  &__kind,
+  &__owner {
+    color: $doveGray;
+
+    span {
+      color: $doveGrayTwo;
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+}

package/dist/components/TooltipTemplate/textTooltipTemplate.scss

@@ -0,0 +1,21 @@
+@import '../../scss/colors';
+@import '../../scss/shadows';
+
+.tooltip {
+  &-template {
+    padding: 6px 8px;
+    word-break: break-word;
+  }
+
+  &__text {
+    color: $white;
+    background-color: $primary;
+    border-radius: 4px;
+  }
+
+  &__warning {
+    color: $amaranth;
+    background-color: $white;
+    box-shadow: $tooltipShadow;
+  }
+}

package/dist/components/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "PopUpDialog", {
+  enumerable: true,
+  get: function get() {
+    return _PopUpDialog.default;
+  }
+});
+Object.defineProperty(exports, "RoundedIcon", {
+  enumerable: true,
+  get: function get() {
+    return _RoundedIcon.default;
+  }
+});
+Object.defineProperty(exports, "TextTooltipTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _TextTooltipTemplate.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.default;
+  }
+});
+
+var _Button = _interopRequireDefault(require("./Button/Button"));
+
+var _PopUpDialog = _interopRequireDefault(require("./PopUpDialog/PopUpDialog"));
+
+var _RoundedIcon = _interopRequireDefault(require("./RoundedIcon/RoundedIcon"));
+
+var _TextTooltipTemplate = _interopRequireDefault(require("./TooltipTemplate/TextTooltipTemplate"));
+
+var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.LABEL_BUTTON = exports.DANGER_BUTTON = void 0;
+
+/*=========== BUTTONS =============*/
+var PRIMARY_BUTTON = 'primary';
+exports.PRIMARY_BUTTON = PRIMARY_BUTTON;
+var SECONDARY_BUTTON = 'secondary';
+exports.SECONDARY_BUTTON = SECONDARY_BUTTON;
+var TERTIARY_BUTTON = 'tertiary';
+exports.TERTIARY_BUTTON = TERTIARY_BUTTON;
+var DANGER_BUTTON = 'danger';
+exports.DANGER_BUTTON = DANGER_BUTTON;
+var LABEL_BUTTON = 'label';
+exports.LABEL_BUTTON = LABEL_BUTTON;

package/dist/fonts/roboto-v27-latin-300.svg

@@ -0,0 +1 @@
+<html lang=en><meta charset=utf-8><meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width"><title>Error 500 (Server Error)!!1</title><style>*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{color:#222;text-align:unset;margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px;}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}pre{white-space:pre-wrap;}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}</style><div id="af-error-container"><a href=//www.google.com><span id=logo aria-label=Google></span></a><p><b>500.</b> <ins>That’s an error.</ins><p>There was an error. Please try again later. <ins>That’s all we know.</ins></div>