sag_components 1.0.950 → 1.0.951

package/dist/stories/components/PerformanceAnalyticsTotals.style.js

@@ -5,85 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TotalsDataContainer = exports.TitleAndValueContainer = exports.Title = exports.LegendFormatedValueContainer = exports.GrowthPercent = exports.FormattedValue = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-size: ${props => props.rootFont};
-  color: ${props => props.textColor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  border-radius: 12px;
-  align-self: center;
-
-  > * {
-    box-sizing: border-box;
-  }
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  display: flex;
-  gap: 20px;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: white;
-`;
-const TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-`;
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 20px;
-`;
-const Title = exports.Title = _styledComponents.default.h4`
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 27px;
-  margin: 0;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-`;
-const CurrencySign = exports.CurrencySign = _styledComponents.default.span`
-  font-weight: 500;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;
-const GrowthPercent = exports.GrowthPercent = _styledComponents.default.span`
-  font-weight: 500;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;
-const FormattedValue = exports.FormattedValue = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 40px;
-  @media (max-width: 1536px) {
-    font-size: 24px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 20px;
-  }
-`;
-const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div`
-  font-size: 0.875rem;
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.rootFont, props => props.textColor, props => props.width, props => props.height);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
+const TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
+const Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  line-height: 27px;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
+const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+const GrowthPercent = exports.GrowthPercent = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.875rem;\n"])));

package/dist/stories/components/Popup/Popup.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _MenuItemClosedIcon = require("../../icons/MenuItemClosedIcon");
+var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
+var _PopupContent = _interopRequireDefault(require("../PopupContent/PopupContent"));
+var _SagButton = _interopRequireDefault(require("../SagButton/SagButton"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Popup = require("./Popup.style");
+const Popup = props => {
+  const {
+    title,
+    popupItemsData,
+    isPopupOpen,
+    width,
+    height,
+    borderColor,
+    subtitleTextColor,
+    onOverlayClick,
+    children,
+    onChange
+  } = props;
+  const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
+  const useFormMethods = (0, _reactHookForm.useForm)({
+    mode: 'onChange'
+  });
+  const divRef = (0, _react.useRef)(null);
+  const [divHeight, setDivHeight] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (divRef.current) {
+      const {
+        top,
+        bottom
+      } = divRef.current.getBoundingClientRect();
+      const height = bottom - top;
+      setDivHeight(height);
+    }
+  }, [height]);
+  (0, _react.useEffect)(() => {
+    setIsPopupOpen(isPopupOpen);
+  }, [isPopupOpen]);
+  const openPopup = () => {
+    setIsPopupOpen(true);
+  };
+  const closePopup = e => {
+    setIsPopupOpen(false);
+    onOverlayClick(e);
+  };
+  const AccordionItem = _ref => {
+    var _children$props, _children$props2;
+    let {
+      title,
+      rowsData,
+      children
+    } = _ref;
+    const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
+    const handleToggle = () => {
+      setIsItemOpen(!IsItemOpen);
+    };
+    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, {
+      id: "AccordionItemMainContainer",
+      borderColor: borderColor
+    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
+      id: "AccordionItemContainer",
+      onClick: handleToggle,
+      style: {
+        cursor: 'pointer'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
+      id: "AccordionItemIconContainer"
+    }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, null) : /*#__PURE__*/_react.default.createElement(_MenuItemClosedIcon.MenuItemClosedIcon, null)), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
+      id: "AccordionItemTitle",
+      subtitleTextColor: subtitleTextColor
+    }, title)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
+      id: "AccordionContentContainer"
+    }, title === 'Campaigns' ? children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[0] : title === 'Products' ? children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.children[1] : '', /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
+      id: "PopupContent",
+      width: "100%",
+      height: "100%",
+      rowsData: rowsData,
+      borderColor: borderColor,
+      onClick: () => {},
+      onChange: onChange
+    })));
+  };
+  const Accordion = _ref2 => {
+    let {
+      items,
+      children
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
+      id: "AccordionContainer",
+      maxHeight: divHeight ? (divHeight - 190).toString().concat('', 'px') : null
+    }, items.map((item, index) => {
+      var _item$rowsData;
+      return /*#__PURE__*/_react.default.createElement(AccordionItem, {
+        key: index,
+        title: item.title,
+        rowsData: ((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.length) > 0 ? item.rowsData : []
+      }, children);
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
+    id: "MainContainer"
+  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, useFormMethods, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: useFormMethods.handleSubmit(submittedValues => console.log('submittedValues', submittedValues))
+  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
+    id: "ModalOverlay",
+    className: "modal-overlay",
+    onClick: e => closePopup(e)
+  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalContent, {
+    id: "ModalContent",
+    ref: divRef,
+    className: "modal-content",
+    height: height,
+    width: width,
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, {
+    id: "TitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
+    id: "Close",
+    className: "close",
+    onClick: e => closePopup(e)
+  }, "\xD7")), /*#__PURE__*/_react.default.createElement(Accordion, {
+    items: popupItemsData
+  }, children), /*#__PURE__*/_react.default.createElement(_Popup.ButtonsContainer, {
+    id: "ButtonsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Popup.InputCommit, {
+    value: "Save",
+    type: "submit",
+    style: {
+      backgroundColor: '#BCC6DA',
+      color: 'white',
+      transition: 'background-color 0.3s, color 0.3s'
+    },
+    borderColor: borderColor
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Save",
+    type: "primary",
+    size: "medium",
+    isSubmitButton: true
+  }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
+    textColor: "#212121",
+    backgroundColor: "#ffffff",
+    borderColor: borderColor,
+    onClickColor: "#B1B1B1",
+    radius: "8px",
+    text: "Cancel",
+    height: "40px",
+    width: "100px",
+    fontSize: "14px",
+    fontWeight: "500",
+    disabled: false,
+    onClick: e => closePopup(e)
+  })))))));
+};
+var _default = exports.default = Popup;
+Popup.defaultProps = {
+  isPopupOpen: true,
+  width: '800px',
+  height: '600px',
+  onSaveClick: () => {},
+  onCancelClick: () => {},
+  onOverlayClick: () => {}
+};