sag_components 1.0.581 → 1.0.582

package/dist/stories/components/PopupCharts.js

@@ -8,22 +8,21 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _TotalDoughnutChart = require("./TotalDoughnutChart");
 var _CloseXIcon = require("./icons/CloseXIcon");
-var _FoodLionIcon = require("./icons/FoodLionIcon");
-var _HannafordNewIcon = require("./icons/HannafordNewIcon");
-var _StopAndShopIcon = require("./icons/StopAndShopIcon");
-var _GiantFoodIcon = require("./icons/GiantFoodIcon");
-var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
+var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
+var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
+var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
+var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
+var _HannafordIcon_new = require("./icons/HannafordIcon_new");
 var _PopupCharts = require("./PopupCharts.style");
 const PopupCharts = props => {
   const {
     title,
-    PopupChartsItemsData,
+    popupChartsItemsData,
     isPopupChartsOpen,
     width,
     height,
-    borderColor,
     subtitleTextColor,
-    onOverlayClick
+    onCloseClick
   } = props;
   const [IsPopupChartsOpen, setIsPopupChartsOpen] = (0, _react.useState)(isPopupChartsOpen);
   const divRef = (0, _react.useRef)(null);
@@ -34,79 +33,62 @@ const PopupCharts = props => {
         top,
         bottom
       } = divRef.current.getBoundingClientRect();
-      const height = bottom - top;
-      setDivHeight(height);
+      const newHeight = bottom - top;
+      setDivHeight(newHeight);
     }
   }, [height]);
   (0, _react.useEffect)(() => {
     setIsPopupChartsOpen(isPopupChartsOpen);
   }, [isPopupChartsOpen]);
-  const openPopupCharts = () => {
-    setIsPopupChartsOpen(true);
-  };
   const closePopupCharts = e => {
     setIsPopupChartsOpen(false);
-    onOverlayClick(e);
+    onCloseClick(e);
   };
   const displayRetailerIcon = retailer => {
     switch (retailer) {
-      case "Food Lion":
-        return /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, null);
-      case "Hannaford":
-        return /*#__PURE__*/_react.default.createElement(_HannafordNewIcon.HannafordNewIcon, null);
-      case "Stop&Shop":
-        return /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
-          width: 80,
-          height: 25,
-          viewBox: "0 0 1400.000000 160.000000"
-        });
-      case "The Giant Company":
-        return /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, null);
-      case "Giant Food":
-        return /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
-          width: 80,
-          height: 25,
-          viewBox: "0 0 1300.000000 350.000000"
-        });
+      case 'Food Lion':
+        return /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null);
+      case 'Hannaford':
+        return /*#__PURE__*/_react.default.createElement(_HannafordIcon_new.HannafordNewIcon, null);
+      case 'Stop&Shop':
+        return /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null);
+      case 'The Giant Company':
+        return /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null);
+      case 'Giant Food':
+        return /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null);
       default:
-        return "";
+        return '';
     }
   };
-  const displayDoughnutChart = rowsData => {
-    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
-      currencySign: true,
-      dotCut: true,
-      legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
-      noDataText: rowsData.noDataText,
-      title: rowsData.title,
-      value: rowsData.value,
-      width: "500px",
-      height: "290px",
-      itemsValuesSeparateLine: false,
-      isPercent: true
-    });
-  };
-  const ChartItem = _ref => {
-    let {
-      title,
-      rowsData
-    } = _ref;
+  const displayDoughnutChart = rowsData => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
+    currencySign: true,
+    dotCut: true,
+    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
+    noDataText: rowsData.noDataText,
+    title: rowsData.title,
+    value: rowsData.value,
+    width: "100%",
+    height: "100%",
+    itemsValuesSeparateLine: false,
+    isPercent: true
+  });
+  const displayChartItem = item => {
+    var _item$rowsData;
     return /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
-      id: "ChartItemMainContainer",
-      borderColor: borderColor
+      id: "ChartItemMainContainer"
     }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
       id: "ChartItemContainer",
       style: {
-        cursor: "pointer"
+        cursor: 'pointer'
       }
     }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
       id: "ChartItemIconContainer"
-    }, displayRetailerIcon(title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
+    }, displayRetailerIcon(item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
       id: "ChartItemTitle",
       subtitleTextColor: subtitleTextColor
-    }, title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
+    }, item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
       id: "ChartContentContainer"
-    }, displayDoughnutChart(rowsData === null || rowsData === void 0 ? void 0 : rowsData.TotalDoughnutChartDetails)));
+    }, displayDoughnutChart((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.TotalDoughnutChartDetails)));
   };
   return /*#__PURE__*/_react.default.createElement(_PopupCharts.MainContainer, {
     id: "MainContainer"
@@ -125,21 +107,18 @@ const PopupCharts = props => {
   }, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
     id: "CloseXIconContainer",
     onClick: e => closePopupCharts(e)
-  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContainer, {
-    id: "ChartContainer",
-    maxHeight: divHeight ? (divHeight - 160).toString().concat("", "px") : null
-  }, PopupChartsItemsData.map((item, index) => /*#__PURE__*/_react.default.createElement(ChartItem, {
-    key: index,
-    title: item.title,
-    rowsData: item.rowsData
-  }))))));
+  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartsContainer, {
+    id: "ChartsContainer",
+    maxHeight: divHeight ? (divHeight - 160).toString().concat('', 'px') : null,
+    height: (popupChartsItemsData === null || popupChartsItemsData === void 0 ? void 0 : popupChartsItemsData.length) < 4 ? '45%' : '100%'
+  }, popupChartsItemsData.map(item => displayChartItem(item))))));
 };
 var _default = exports.default = PopupCharts;
 PopupCharts.defaultProps = {
+  title: 'Switching Pattern',
   isPopupChartsOpen: true,
-  width: "1700px",
-  height: "800px",
-  onSaveClick: () => {},
-  onCancelClick: () => {},
-  onOverlayClick: () => {}
+  width: '1700px',
+  height: '800px',
+  onCloseClick: () => {},
+  subtitleTextColor: '#7E7E7E'
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = exports.ChartContainer = void 0;
+exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartsContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = 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;
@@ -13,10 +13,10 @@ const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templ
 const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 18px;\n  background-color: #fefefe;\n  padding: 30px 30px 60px 40px;\n  border: 1px solid #888;\n  border-radius: 10px;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
 const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 0 20px 0;\n  margin: 0 0 30px 0;\n  border-bottom: 1px solid #b1b1b1;\n"])));
 const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 24px;\n  margin: 0;\n"])));
-const ChartContainer = exports.ChartContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  overflow-y: auto;\n  padding: 0 10px 0 0;\n  max-height: ", ";\n"])), props => props.maxHeight);
-const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 10px 10px 10px 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  border-radius: 12px;\n  /* width: 565px;\n  height: 365px;\n  max-width: 565px;\n  max-height: 365px;  */\n\n"])));
+const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr); /* 3 columns */\n  flex-wrap: wrap;  \n  overflow-y: auto;\n  padding: 0 10px 0 0;\n  max-height: ", ";\n  height: ", ";\n \n"])), props => props.maxHeight, props => props.height);
+const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 10px 10px 10px 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  border-radius: 12px;\n"])));
 const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px 10px 10px 10px;\n"])));
 const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0 10px;\n  color: ", ";\n"])), props => props.subtitleTextColor);
 const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 10px;\n"])));
-const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 0;\n  \n"])));
-const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 20px 0 0 0;\n  cursor: pointer;\n \n"])));
+const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 0;\n  border-radius: 12px;\n"])));
+const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 20px 0 0 0;\n  cursor: pointer;\n"])));

package/dist/stories/components/ProductsVariety.js

@@ -20,31 +20,29 @@ const ProductsVariety = props => {
     onClickBannersDropdown
   } = props;
   const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
-  const displayBannersDropdown = () => {
-    return /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
-      banners: [{
-        checked: true,
-        name: "StopAndShop"
-      }, {
-        checked: true,
-        name: "FoodLion"
-      }, {
-        checked: true,
-        name: "GiantFood"
-      }, {
-        checked: true,
-        name: "TheGiantCompany"
-      }, {
-        checked: true,
-        name: "Hannaford"
-      }],
-      onClick: banners => {
-        onClickBannersDropdown({
-          banners
-        });
-      }
-    });
-  };
+  const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
+    banners: [{
+      checked: true,
+      name: 'StopAndShop'
+    }, {
+      checked: true,
+      name: 'FoodLion'
+    }, {
+      checked: true,
+      name: 'GiantFood'
+    }, {
+      checked: true,
+      name: 'TheGiantCompany'
+    }, {
+      checked: true,
+      name: 'Hannaford'
+    }],
+    onClick: banners => {
+      onClickBannersDropdown({
+        banners
+      });
+    }
+  });
   return /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyMainContainer, {
     id: "ProductsVarietyMainContainer"
   }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContainer, {
@@ -57,7 +55,7 @@ const ProductsVariety = props => {
     id: "ProductsVarietySubTitle"
   }, "|"), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
     id: "ProductsVarietySubTitle"
-  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ""), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
     id: "ProductButtonContainer",
     onClick: () => {
       setIsProductsListOpen(!IsProductsListOpen);
@@ -77,18 +75,18 @@ const ProductsVariety = props => {
   }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
     id: "ProductButtonContainer",
     background: "#F8CD00",
-    onClick: e => {
+    onClick: () => {
       onSpotlightProductClick({
         value: item.value,
         label: item.label
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ""))));
+  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
 };
 var _default = exports.default = ProductsVariety;
 ProductsVariety.defaultProps = {
-  title: "Products Variety",
-  subTitle: "Product Name",
+  title: 'Products Variety',
+  subTitle: 'Product Name',
   onSpotlightProductClick: () => {},
-  onBannersDropdownClick: () => {}
+  onClickBannersDropdown: () => {}
 };

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

@@ -13,8 +13,8 @@ const ProductsVarietyContainer = exports.ProductsVarietyContainer = _styledCompo
 const ProductsVarietyTitleContainer = exports.ProductsVarietyTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px;\n  gap: 15px;\n"])));
 const ProductsVarietyTitle = exports.ProductsVarietyTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 20px;\n\n  margin: 0;\n"])));
 const ProductsVarietySubTitle = exports.ProductsVarietySubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #757171;\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
-const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 0 0 50px;\n"])));
-const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  //margin: 0 5px 0 10px;\n  margin: 10px 0;\n"])));
-const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 50%;\n  //border-radius: 12px;\n  gap: 20px;\n"])));
+const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 20px 20px 50px;\n"])));
+const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 10px 0;\n"])));
+const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 100%;\n  gap: 20px;\n"])));
 const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  border-radius: 12px;\n"])));
-const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: ", ";\n  border-radius: 12px;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n  gap: 10px;\n"])), props => props.background || "#ffffff");
+const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: ", ";\n  border-radius: 12px;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n  gap: 10px;\n"])), props => props.background || '#ffffff');

package/dist/stories/components/SalesAndROI.js

@@ -20,10 +20,22 @@ const SalesAndROI = props => {
     height,
     textColor,
     salesData,
-    showOutgoingBanner,
+    showBanner,
     noDataText,
-    onBannerClick
+    onBannerClick,
+    showBorderShadow
   } = props;
+  const getTextBefore = dataItem => {
+    let newTextBefore = '';
+    if (dataItem.textBefore) {
+      newTextBefore = dataItem.textBefore;
+    } else if (currencySign) {
+      newTextBefore = (0, _CommonFunctions.getCurrencySign)(currencyType, dataItem.value);
+    } else {
+      newTextBefore = '';
+    }
+    return newTextBefore;
+  };
   const displayItem = dataItem => {
     var _dataItem$value;
     return /*#__PURE__*/_react.default.createElement(_SalesAndROI.ItemContainer, {
@@ -34,18 +46,19 @@ const SalesAndROI = props => {
       id: "FormattedValue"
     }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, {
       id: "TextBeforeAndAfterValue"
-    }, dataItem.textBefore ? dataItem.textBefore : currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, dataItem.value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value) : (0, _CommonFunctions.getNumberWithCommas)(dataItem.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(dataItem.value) : '', /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, null, dataItem.textAfter)));
+    }, getTextBefore(dataItem)), dotCut ? (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value) : (0, _CommonFunctions.getNumberWithCommas)(dataItem.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(dataItem.value) : '', /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, null, dataItem.textAfter)));
   };
   return /*#__PURE__*/_react.default.createElement(_SalesAndROI.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
     width: width,
-    textColor: textColor
+    textColor: textColor,
+    showBorderShadow: showBorderShadow
   }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
   }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.Title, {
     id: "Title"
-  }, title), showOutgoingBanner && /*#__PURE__*/_react.default.createElement(_SalesAndROI.OutBanner, {
+  }, title), showBanner && /*#__PURE__*/_react.default.createElement(_SalesAndROI.OutBanner, {
     id: "OutBanner",
     onClick: () => onBannerClick({
       eventName: 'onBannerClick'
@@ -69,7 +82,8 @@ SalesAndROI.defaultProps = {
   width: '100%',
   height: '100%',
   textColor: '#212121',
-  showOutgoingBanner: true,
-  noDataText: 'No Data',
-  onBannerClick: () => {}
+  showBanner: true,
+  noDataText: '',
+  onBannerClick: () => {},
+  showBorderShadow: true
 };

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

@@ -8,9 +8,8 @@ exports.TitleAndValueContainer = exports.Title = exports.TextBeforeAndAfterValue
 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;
-const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height);
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  margin: 0 0 30px 0;\n  padding: 20px;\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  box-shadow: ", ";\n  border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height, props => props.showBorderShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null);
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  margin: 0 0 30px 0;\n  padding: 20px;\n  gap: 20px;\n"])));
 const ItemsContainer = exports.ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr); /* Two columns */\n  padding: 20px;\n  gap: 30px;\n"])));
 const ItemContainer = exports.ItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  flex-wrap: wrap;\n"])));
 const Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  font-weight: 400;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 18px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 16px;\n  }\n"])));

package/dist/stories/components/TabMenu.js

@@ -27,7 +27,9 @@ const TabMenu = props => {
     onTabChange(index);
     setActiveTab(index);
   };
-  return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, null, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab, {
+  return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, null, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab
+  // eslint-disable-next-line react/no-array-index-key
+  , {
     key: index,
     isActive: index === activeTab,
     className: "tab ".concat(index === activeTab ? 'active' : ''),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.581",
+  "version": "1.0.582",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/.history/.env_20231001120613

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_YdAmQQKQ2B6ZngEijA0JiqNNUdJvP23G46NK7-fc

package/.history/.env_20231003143620

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_MOcc8-aS91XJ3mFdtNlH4oPVY73ChHlmw6-hKhsb

package/.history/.eslintrc_20230928112617.js

@@ -1,26 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-  },
-};

package/.history/.eslintrc_20230928130534.js

@@ -1,27 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-  },
-};

package/.history/.eslintrc_20230928133400.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    /*eslint linebreak-style: ["error", "windows"]*/
-  },
-};

package/.history/.eslintrc_20230928133404.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    eslint linebreak-style: ["error", "windows"]
-  },
-};

package/.history/.eslintrc_20230928133416.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    linebreak-style: ["error", "windows"]
-  },
-};

package/.history/.eslintrc_20230928133419.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    'linebreak-style': ["error", "windows"]
-  },
-};

package/.history/.eslintrc_20230928133432.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    'linebreak-style': ['error', 'windows']
-  },
-};