sag_components 1.0.921 → 1.0.923

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

@@ -5,19 +5,112 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TotalsDataContainer = exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonContainer = exports.LegendTitle = exports.LegendColorRectangle = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n  &.NoData {\n    align-self: center;\n    display: flex;\n    align-items: center;\n    width: 50%;\n    margin: 10% auto 0;\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  width: 100%;\n  height: 100%;\n  padding: 24px 40px;\n  background: white;\n  @media (max-width: 1536px) {\n    padding: 12px 32px;\n  }\n"])));
-const SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 10px 0 0 10px;\n"])));
-const TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
-const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n"])));
-const LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 10px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 8px;\n  }\n"])));
-const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
-const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n  margin: 0 6px 0 0;\n"])));
-const TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  width: fit-content;\n  margin: 0;\n"])));
-const TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  margin: 0;\n"])));
-const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), props => props.color);
-const ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
-const LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-size: ${props => props.rootFont};
+  color: ${props => props.textColor};
+  width: ${props => props.width};
+  height: ${props => props.height};
+  border-radius: 12px;
+  align-self: center;
+  &.NoData {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    width: 50%;
+    margin: 10% auto 0;
+  }
+  > * {
+    box-sizing: border-box;
+  }
+`;
+const Controls = exports.Controls = _styledComponents.default.div`
+  width: 100%;
+  height: 100%;
+  padding: 24px 40px;
+  background: white;
+  @media (max-width: 1536px) {
+    padding: 12px 32px;
+  }
+`;
+const SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div`
+  display: flex;
+  padding: 10px 0 0 10px;
+`;
+const TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div``;
+const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
+  font-size: 16px;
+  @media (max-width: 1536px) {
+    font-size: 12px;
+  }
+`;
+const LabelText = exports.LabelText = _styledComponents.default.tspan`
+  font-size: 16px;
+  @media (max-width: 1536px) {
+    font-size: 10px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 8px;
+  }
+`;
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: #fff;
+  font-family: "Poppins", sans-serif;
+  border-radius: 5px;
+  padding: 8px 12px;
+  display: grid;
+`;
+const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p`
+  color: #212121;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  width: fit-content;
+  margin: 0 6px 0 0;
+`;
+const TooltipValue = exports.TooltipValue = _styledComponents.default.p`
+  color: #212121;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  width: fit-content;
+  margin: 0;
+`;
+const TooltipTitle = exports.TooltipTitle = _styledComponents.default.p`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  margin: 0;
+`;
+const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div`
+  width: 0.875rem;
+  min-width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 2px;
+  background: ${props => props.color};
+`;
+const ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const LegendTitle = exports.LegendTitle = _styledComponents.default.h5`
+  font-size: 16px;
+  @media (max-width: 1536px) {
+    font-size: 11px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
+  }
+`;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PerformanceAnalyticsTotals = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CommonFunctions = require("../../utils/CommonFunctions");
+var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals.style");
+/* PerformanceAnalyticsTotals */
+const PerformanceAnalyticsTotals = props => {
+  const {
+    textcolor,
+    width,
+    height,
+    totalsData
+  } = props;
+  const getGrowthPercent = (growthPercent, showGrowthPercentSign) => {
+    if (!growthPercent) {
+      return '';
+    }
+    const growthPercentSign = showGrowthPercentSign && growthPercent > 0 ? '+' : '';
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.GrowthPercent, {
+      id: "GrowthPercent"
+    }, "(", growthPercentSign, growthPercent, "%)");
+  };
+  const getTotalsData = () => /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TotalsDataContainer, {
+    id: "TotalsDataContainer"
+  }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map((item, i) => /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TitleAndValueContainer, {
+    id: "TitleAndValueContainer",
+    key: "".concat(item.title + i)
+  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Title, {
+    id: "Title",
+    width: width
+  }, item.title), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySignAndFormattedValueContainer, {
+    id: "CurrencySignAndFormattedValueContainer"
+  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.FormattedValue, {
+    id: "FormattedValue",
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySign, {
+    id: "CurrencySign"
+  }, item.currency ? (0, _CommonFunctions.getCurrencySign)(item.currencyType, item.value) : ''), item.dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), item.dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : '', item.growthPercent ? getGrowthPercent(item.growthPercent, item.showGrowthPercentSign) : '')))));
+  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.ControlsContainer, {
+    id: "ControlsContainer",
+    height: height,
+    width: width,
+    textcolor: textcolor
+  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Controls, {
+    id: "Controls",
+    height: height,
+    width: width
+  }, getTotalsData()) : '');
+};
+exports.PerformanceAnalyticsTotals = PerformanceAnalyticsTotals;
+var _default = exports.default = PerformanceAnalyticsTotals;
+PerformanceAnalyticsTotals.defaultProps = {
+  textcolor: '#212121',
+  width: '',
+  height: '',
+  totalsData: [{
+    title: '',
+    value: '',
+    dotCut: true,
+    currency: true,
+    currencyType: true,
+    growthPercent: true,
+    showGrowthPercentSign: true
+  }]
+};

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TotalCostSales = exports.NewExistingShoppers = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
+const totalsDataCostSales = [{
+  title: 'Total Cost',
+  value: 360000,
+  dotCut: true,
+  currency: true,
+  currencyType: 'USD',
+  growthPercent: 15.2,
+  showGrowthPercentSign: true
+}, {
+  title: 'Incremental Sales',
+  value: 960000,
+  dotCut: true,
+  currency: true,
+  currencyType: 'USD',
+  growthPercent: 13.5,
+  showGrowthPercentSign: true
+}, {
+  title: 'Incremental Sales ROI',
+  value: 2.7,
+  dotCut: true,
+  currency: false,
+  currencyType: null,
+  growthPercent: null,
+  showGrowthPercentSign: true
+}];
+const totalsDataShoppers = [{
+  title: 'Total Shoppers',
+  value: 3500000,
+  dotCut: true,
+  currency: false,
+  currencyType: null,
+  growthPercent: null,
+  showGrowthPercentSign: false
+}, {
+  title: 'New Shoppers',
+  value: 500500,
+  dotCut: true,
+  currency: false,
+  currencyType: null,
+  growthPercent: 14.3,
+  showGrowthPercentSign: false
+}, {
+  title: 'Existing Shoppers',
+  value: 2900000,
+  dotCut: true,
+  currency: false,
+  currencyType: null,
+  growthPercent: 85.7,
+  showGrowthPercentSign: false
+}];
+var _default = exports.default = {
+  title: 'SAG BI/PerformanceAnalyticsTotals',
+  component: _PerformanceAnalyticsTotals.PerformanceAnalyticsTotals,
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figspec',
+      accessToken: 'figd_vSza21Sk6g-JWb5K_GAQhRJhmuRhS6k1Ju1KNGpC'
+    }
+  },
+  argTypes: {
+    totalsData: {
+      name: 'totalsData',
+      description: 'array [] of objects representing totals data to display in component '
+    },
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the control (in px / %)'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the control (in px / %)'
+    }
+  }
+};
+const TotalCostSales = exports.TotalCostSales = {
+  args: {
+    totalsData: totalsDataCostSales
+  }
+};
+const NewExistingShoppers = exports.NewExistingShoppers = {
+  args: {
+    totalsData: totalsDataShoppers
+  }
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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"));
+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/PerformanceAnalyticsTotals.js

@@ -29,7 +29,7 @@ const PerformanceAnalyticsTotals = props => {
     id: "TotalsDataContainer"
   }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map((item, i) => /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TitleAndValueContainer, {
     id: "TitleAndValueContainer",
-    key: "".concat(item.title + i)
+    key: `${item.title + i}`
   }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Title, {
     id: "Title",
     width: width

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

@@ -5,16 +5,85 @@ 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"));
-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"])));
+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;
+`;

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: () => {}
+};