@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/popup/popup.js

@@ -1,66 +1,41 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n  margin: 0;\n'], ['\n  margin: 0;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  margin: 0;\n  background: ', ';\n  border-color: ', ';\n  color: ', ';\n  transition: all 0.4s ease-in-out;\n  &:hover {\n    background: ', ';\n    border-color: ', ';\n    box-shadow: none;\n    color: ', ';\n  }\n'], ['\n  margin: 0;\n  background: ', ';\n  border-color: ', ';\n  color: ', ';\n  transition: all 0.4s ease-in-out;\n  &:hover {\n    background: ', ';\n    border-color: ', ';\n    box-shadow: none;\n    color: ', ';\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n'], ['\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  background: ', ';\n  width: 100%;\n  height: 100%;\n'], ['\n  background: ', ';\n  width: 100%;\n  height: 100%;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: 440px;\n  border-radius: 10px;\n  background: ', ';\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ', ';\n    }\n    .display-flex {\n      display: flex;\n      .pr-20 {\n        padding-right: 20px;\n      }\n    }\n    .cursor-p {\n      cursor: pointer;\n    }\n\n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #afb2ba;\n      font-family: \'SFUIText-Light\';\n    }\n    ', ' {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ', ';\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n\n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ', ';\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n'], ['\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: 440px;\n  border-radius: 10px;\n  background: ', ';\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ', ';\n    }\n    .display-flex {\n      display: flex;\n      .pr-20 {\n        padding-right: 20px;\n      }\n    }\n    .cursor-p {\n      cursor: pointer;\n    }\n\n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #afb2ba;\n      font-family: \'SFUIText-Light\';\n    }\n    ', ' {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ', ';\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n\n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ', ';\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _button = require('../button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _loader = require('../../atoms/loader');
-
-var _loader2 = _interopRequireDefault(_loader);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-// import {colors} from '../../../tokens'
-
-
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _button = _interopRequireDefault(require("../button"));
+var _tokens = require("@desynova-digital/tokens");
+var _loader = _interopRequireDefault(require("../../atoms/loader"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // import {colors} from '../../../tokens'
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var propTypes = {
-  title: _propTypes2.default.string,
-  showPopup: _propTypes2.default.bool,
-  messageBody: _propTypes2.default.string,
-  popupContent: _propTypes2.default.string,
-  acceptButtonText: _propTypes2.default.string,
-  cancelButtonText: _propTypes2.default.string,
-  onAcceptClick: _propTypes2.default.func,
-  onCancelClick: _propTypes2.default.func,
-  theme: _propTypes2.default.string
+  title: _propTypes["default"].string,
+  showPopup: _propTypes["default"].bool,
+  messageBody: _propTypes["default"].string,
+  popupContent: _propTypes["default"].string,
+  acceptButtonText: _propTypes["default"].string,
+  cancelButtonText: _propTypes["default"].string,
+  onAcceptClick: _propTypes["default"].func,
+  onCancelClick: _propTypes["default"].func,
+  theme: _propTypes["default"].string
 };
-
-var AcceptButton = (0, _styledComponents2.default)(_button2.default)(_templateObject);
-
-var CancelButton = (0, _styledComponents2.default)(_button2.default)(_templateObject2, function (props) {
+var AcceptButton = (0, _styledComponents["default"])(_button["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0;\n"])));
+var CancelButton = (0, _styledComponents["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0;\n  background: ", ";\n  border-color: ", ";\n  color: ", ";\n  transition: all 0.4s ease-in-out;\n  &:hover {\n    background: ", ";\n    border-color: ", ";\n    box-shadow: none;\n    color: ", ";\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].popup.cancleButtonBackground;
 }, function (props) {
   return _tokens.colors[props.theme].popup.cancleButtonBackground;
@@ -71,181 +46,121 @@ var CancelButton = (0, _styledComponents2.default)(_button2.default)(_templateOb
 }, function (props) {
   return _tokens.colors[props.theme].popup.cancleHoverText;
 });
-
-var PopupBlock = _styledComponents2.default.div(_templateObject3);
-
-var PopupOverlay = _styledComponents2.default.div(_templateObject4, function (props) {
+var PopupBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n"])));
+var PopupOverlay = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  width: 100%;\n  height: 100%;\n"])), function (props) {
   return _tokens.colors[props.theme].popup.overlayColor;
 });
-var PopupBox = _styledComponents2.default.div(_templateObject5, function (props) {
+var PopupBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: 440px;\n  border-radius: 10px;\n  background: ", ";\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ", ";\n    }\n    .display-flex {\n      display: flex;\n      .pr-20 {\n        padding-right: 20px;\n      }\n    }\n    .cursor-p {\n      cursor: pointer;\n    }\n\n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #afb2ba;\n      font-family: 'SFUIText-Light';\n    }\n    ", " {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ", ";\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n\n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ", ";\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].popup.popupBoxBackground;
 }, function (props) {
   return _tokens.colors[props.theme].popup.messageText;
-}, _button2.default.Element, function (props) {
+}, _button["default"].Element, function (props) {
   return _tokens.colors[props.theme].popup.cancleIconColor;
 }, _tokens.colors.common.base.white);
-
-var Popup = function (_Component) {
-  _inherits(Popup, _Component);
-
+var Popup = /*#__PURE__*/function (_Component) {
   function Popup(props) {
-    _classCallCheck(this, Popup);
-
-    return _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
+    (0, _classCallCheck2["default"])(this, Popup);
+    return _callSuper(this, Popup, [props]);
   }
-
-  _createClass(Popup, [{
-    key: 'acceptClick',
+  (0, _inherits2["default"])(Popup, _Component);
+  return (0, _createClass2["default"])(Popup, [{
+    key: "acceptClick",
     value: function acceptClick() {
       var onAcceptClick = this.props.onAcceptClick;
-
       onAcceptClick();
     }
   }, {
-    key: 'cancelClick',
+    key: "cancelClick",
     value: function cancelClick() {
       var onCancelClick = this.props.onCancelClick;
-
       onCancelClick();
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          theme = _props.theme,
-          title = _props.title,
-          showPopup = _props.showPopup,
-          messageBody = _props.messageBody,
-          popupContent = _props.popupContent,
-          acceptButtonText = _props.acceptButtonText,
-          cancelButtonText = _props.cancelButtonText,
-          loading = _props.loading,
-          loaderName = _props.loaderName,
-          showSharedUsers = _props.showSharedUsers,
-          sharedUserCount = _props.sharedUserCount,
-          openPopup = _props.openPopup;
-
-
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        showPopup ? _react2.default.createElement(
-          PopupBlock,
-          { theme: this.props.theme },
-          _react2.default.createElement(PopupOverlay, { theme: this.props.theme }),
-          _react2.default.createElement(
-            PopupBox,
-            { theme: this.props.theme },
-            _react2.default.createElement(
-              'div',
-              { className: 'popup-header' },
-              _react2.default.createElement(
-                'p',
-                { className: 'header-title' },
-                title
-              ),
-              _react2.default.createElement(
-                'div',
-                { className: 'display-flex' },
-                showSharedUsers && sharedUserCount > 0 ? _react2.default.createElement(
-                  'div',
-                  {
-                    className: 'display-flex pr-20 cursor-p',
-                    onClick: function onClick() {
-                      openPopup('SHARED_USERS');
-                    }
-                  },
-                  _react2.default.createElement(_button2.default, {
-                    appearance: 'cta',
-                    iconWidth: 18,
-                    iconHeight: 18,
-                    icon: 'users',
-                    iconBackground: false,
-                    theme: this.props.theme
-                  }),
-                  _react2.default.createElement(
-                    'p',
-                    { className: 'count-wrapper' },
-                    sharedUserCount
-                  )
-                ) : null,
-                _react2.default.createElement(_button2.default, {
-                  theme: this.props.theme,
-                  appearance: 'cta',
-                  iconWidth: 12,
-                  iconHeight: 12,
-                  icon: 'cross',
-                  iconBackground: false,
-                  onClick: function onClick() {
-                    _this2.cancelClick();
-                  }
-                })
-              )
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: 'popup-body' },
-              messageBody ? _react2.default.createElement(
-                'p',
-                { className: 'popup-message' },
-                messageBody
-              ) : null,
-              popupContent ? _react2.default.createElement(
-                'div',
-                { className: 'popup-content' },
-                popupContent
-              ) : null,
-              _react2.default.createElement(
-                'div',
-                { className: 'popup-action-block' },
-                cancelButtonText ? _react2.default.createElement(
-                  CancelButton,
-                  {
-                    display: 'rounded',
-                    onClick: function onClick() {
-                      _this2.cancelClick();
-                    },
-                    theme: this.props.theme
-                  },
-                  cancelButtonText
-                ) : null,
-                acceptButtonText ? _react2.default.createElement(
-                  AcceptButton,
-                  {
-                    theme: this.props.theme,
-                    display: 'rounded',
-                    onClick: function onClick() {
-                      _this2.acceptClick();
-                    }
-                  },
-                  acceptButtonText
-                ) : null
-              )
-            ),
-            loading ? _react2.default.createElement(
-              'div',
-              { className: 'loading-box' },
-              typeof loading == 'boolean' ? _react2.default.createElement(_loader2.default, { theme: this.props.theme, loaderName: loaderName ? loaderName : null }) : loading
-            ) : null
-          )
-        ) : null
-      );
+      var _this = this;
+      var _this$props = this.props,
+        theme = _this$props.theme,
+        title = _this$props.title,
+        showPopup = _this$props.showPopup,
+        messageBody = _this$props.messageBody,
+        popupContent = _this$props.popupContent,
+        acceptButtonText = _this$props.acceptButtonText,
+        cancelButtonText = _this$props.cancelButtonText,
+        loading = _this$props.loading,
+        loaderName = _this$props.loaderName,
+        showSharedUsers = _this$props.showSharedUsers,
+        sharedUserCount = _this$props.sharedUserCount,
+        openPopup = _this$props.openPopup;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showPopup ? /*#__PURE__*/_react["default"].createElement(PopupBlock, {
+        theme: this.props.theme
+      }, /*#__PURE__*/_react["default"].createElement(PopupOverlay, {
+        theme: this.props.theme
+      }), /*#__PURE__*/_react["default"].createElement(PopupBox, {
+        theme: this.props.theme
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "popup-header"
+      }, /*#__PURE__*/_react["default"].createElement("p", {
+        className: "header-title"
+      }, title), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "display-flex"
+      }, showSharedUsers && sharedUserCount > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "display-flex pr-20 cursor-p",
+        onClick: function onClick() {
+          openPopup('SHARED_USERS');
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        appearance: "cta",
+        iconWidth: 18,
+        iconHeight: 18,
+        icon: "users",
+        iconBackground: false,
+        theme: this.props.theme
+      }), /*#__PURE__*/_react["default"].createElement("p", {
+        className: "count-wrapper"
+      }, sharedUserCount)) : null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        theme: this.props.theme,
+        appearance: "cta",
+        iconWidth: 12,
+        iconHeight: 12,
+        icon: "cross",
+        iconBackground: false,
+        onClick: function onClick() {
+          _this.cancelClick();
+        }
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "popup-body"
+      }, messageBody ? /*#__PURE__*/_react["default"].createElement("p", {
+        className: "popup-message"
+      }, messageBody) : null, popupContent ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "popup-content"
+      }, popupContent) : null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "popup-action-block"
+      }, cancelButtonText ? /*#__PURE__*/_react["default"].createElement(CancelButton, {
+        display: "rounded",
+        onClick: function onClick() {
+          _this.cancelClick();
+        },
+        theme: this.props.theme
+      }, cancelButtonText) : null, acceptButtonText ? /*#__PURE__*/_react["default"].createElement(AcceptButton, {
+        theme: this.props.theme,
+        display: "rounded",
+        onClick: function onClick() {
+          _this.acceptClick();
+        }
+      }, acceptButtonText) : null)), loading ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "loading-box"
+      }, typeof loading == 'boolean' ? /*#__PURE__*/_react["default"].createElement(_loader["default"], {
+        theme: this.props.theme,
+        loaderName: loaderName ? loaderName : null
+      }) : loading) : null)) : null);
     }
   }]);
-
-  return Popup;
-}(_react.Component);
-
-// Popup.propTypes = propTypes;
-
+}(_react.Component); // Popup.propTypes = propTypes;
 Popup.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 Popup.defaultProps = {
   theme: 'dark'
 };
-
-exports.default = Popup;
+var _default = exports["default"] = Popup;

package/atoms/popup/popup.story.js

@@ -1,136 +1,102 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _popup = require('./popup');
-
-var _popup2 = _interopRequireDefault(_popup);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('Popup').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_popup2.default, {
-        showPopup: true,
-        title: 'hi i am popup Title!!!',
-        messageBody: 'Did you like this popup?',
-        acceptButtonText: 'Yes',
-        cancelButtonText: 'No',
-        onAcceptClick: function onAcceptClick() {
-          console.log('onAcceptClick func() called...');
-        },
-        onCancelClick: function onCancelClick() {
-          console.log('onCancelClick func() called...');
-        },
-        theme: 'dark',
-        showSharedUsers: true,
-        sharedUserCount: 5,
-        openPopup: function openPopup(view) {
-          return console.log(view);
-        }
-      })
-    )
-  );
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../_helpers/story-helpers");
+var _popup = _interopRequireDefault(require("./popup"));
+(0, _react2.storiesOf)('Popup').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    showPopup: true,
+    title: 'hi i am popup Title!!!',
+    messageBody: 'Did you like this popup?',
+    acceptButtonText: 'Yes',
+    cancelButtonText: 'No',
+    onAcceptClick: function onAcceptClick() {
+      console.log('onAcceptClick func() called...');
+    },
+    onCancelClick: function onCancelClick() {
+      console.log('onCancelClick func() called...');
+    },
+    theme: 'dark',
+    showSharedUsers: true,
+    sharedUserCount: 5,
+    openPopup: function openPopup(view) {
+      return console.log(view);
+    }
+  })));
 });
-
-(0, _react3.storiesOf)('Popup').add('nexc theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_popup2.default, {
-        showPopup: true,
-        title: 'hi i am popup Title!!!',
-        messageBody: 'Did you like this popup?',
-        acceptButtonText: 'Yes',
-        cancelButtonText: 'No',
-        onAcceptClick: function onAcceptClick() {
-          console.log('onAcceptClick func() called...');
-        },
-        onCancelClick: function onCancelClick() {
-          console.log('onCancelClick func() called...');
-        },
-        theme: 'nexc',
-        showSharedUsers: true,
-        sharedUserCount: 5,
-        openPopup: function openPopup(view) {
-          return console.log(view);
-        }
-      })
-    )
-  );
+(0, _react2.storiesOf)('Popup').add('nexc theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    showPopup: true,
+    title: 'hi i am popup Title!!!',
+    messageBody: 'Did you like this popup?',
+    acceptButtonText: 'Yes',
+    cancelButtonText: 'No',
+    onAcceptClick: function onAcceptClick() {
+      console.log('onAcceptClick func() called...');
+    },
+    onCancelClick: function onCancelClick() {
+      console.log('onCancelClick func() called...');
+    },
+    theme: 'nexc',
+    showSharedUsers: true,
+    sharedUserCount: 5,
+    openPopup: function openPopup(view) {
+      return console.log(view);
+    }
+  })));
 });
-
-(0, _react3.storiesOf)('Popup').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances light', background: 'light' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_popup2.default, {
-        showPopup: true,
-        title: 'hi i am popup Title!!!',
-        messageBody: 'Did you like this popup?',
-        acceptButtonText: 'Yes',
-        cancelButtonText: 'No',
-        onAcceptClick: function onAcceptClick() {
-          console.log('onAcceptClick func() called...');
-        },
-        onCancelClick: function onCancelClick() {
-          console.log('onCancelClick func() called...');
-        },
-        theme: 'light'
-      })
-    )
-  );
+(0, _react2.storiesOf)('Popup').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances light",
+    background: "light"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    showPopup: true,
+    title: 'hi i am popup Title!!!',
+    messageBody: 'Did you like this popup?',
+    acceptButtonText: 'Yes',
+    cancelButtonText: 'No',
+    onAcceptClick: function onAcceptClick() {
+      console.log('onAcceptClick func() called...');
+    },
+    onCancelClick: function onCancelClick() {
+      console.log('onCancelClick func() called...');
+    },
+    theme: 'light'
+  })));
 });
-
-(0, _react3.storiesOf)('Popup').add('popup-with div', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_popup2.default, {
-        showPopup: true,
-        title: 'hi i am popup Title!!!'
-        // messageBody= {'Did you like this popup?'}
-        , popupContent: _react2.default.createElement(
-          'div',
-          {
-            style: {
-              height: '300px',
-              background: 'red',
-              width: '100%'
-            }
-          },
-          'HI'
-        )
-        // acceptButtonText= {'Yes'}
-        // cancelButtonText= {'No'}
-        , onAcceptClick: function onAcceptClick() {
-          console.log('onAcceptClick func() called...');
-        },
-        onCancelClick: function onCancelClick() {
-          console.log('onCancelClick func() called...');
-        },
-        theme: 'dark'
-      })
-    )
-  );
+(0, _react2.storiesOf)('Popup').add('popup-with div', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    showPopup: true,
+    title: 'hi i am popup Title!!!'
+    // messageBody= {'Did you like this popup?'}
+    ,
+    popupContent: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '300px',
+        background: 'red',
+        width: '100%'
+      }
+    }, "HI")
+    // acceptButtonText= {'Yes'}
+    // cancelButtonText= {'No'}
+    ,
+    onAcceptClick: function onAcceptClick() {
+      console.log('onAcceptClick func() called...');
+    },
+    onCancelClick: function onCancelClick() {
+      console.log('onCancelClick func() called...');
+    },
+    theme: 'dark'
+  })));
 });