sag_components 1.0.811 → 1.0.812

package/dist/stories/components/OneColumnContainer.js

@@ -64,7 +64,7 @@ const OneColumnContainer = props => {
     onClick: () => onBannerClick({
       eventName: 'onBannerClick'
     })
-  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.ExportIcon, null), "View By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.ExportIcon, null), "View By Banner")), !isLoading && !hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.Content, null, children), !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
     className: "IconContainer",
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false)

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

@@ -4,17 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.ColumnTitle = exports.BannerContainer = void 0;
+exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.Content = exports.ColumnTitle = exports.BannerContainer = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  height: ", ";\n  overflow: ", ";\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background-color: white; \n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.width, props => props.height, props => props.overflow);
-const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* align-items: flex-start; */\n  justify-content: center; \n  background-color: white;\n  width: ", ";\n  height: ", ";\n  display: ", ";\n  grid-template-columns: ", ";\n  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
-const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  overflow: auto;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
-const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 18px;\n  line-height: 32px;\n"])));
-const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
-const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  display: inline-block;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 20px 20px 0;\n"])));
-const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n  height: 20px;\n  top: 10px;\n  right: 10px;\n  position: absolute;\n"])));
-const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 10px;\n"])));
-const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  z-index: 99;\n  top: 18px;\n  right: ", ";  \n  user-select: none;\n"])), props => props.right);
-const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["  \n  display: flex;\n  justify-content: flex-end;\n  align-items: center; \n  gap: 8px; \n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 13px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 13px;\n      height: 13px;\n    }\n    @media (max-width: 1366px) {\n      width: 12px;\n      height: 12px;\n    }\n  }\n"])), props => props.textColor);
+const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* align-items: flex-start; */\n  justify-content: center; \n  background-color: white;\n  width: ", ";\n  height: ", ";\n  display: ", ";\n  grid-template-columns: ", ";\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
+const Content = exports.Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n"])));
+const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  overflow: auto;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
+const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 18px;\n  line-height: 32px;\n"])));
+const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
+const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  display: inline-block;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 20px 20px 0;\n"])));
+const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n  height: 20px;\n  top: 10px;\n  right: 10px;\n  position: absolute;\n"])));
+const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 10px;\n"])));
+const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  z-index: 99;\n  top: 18px;\n  right: ", ";  \n  user-select: none;\n"])), props => props.right);
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["  \n  display: flex;\n  justify-content: flex-end;\n  align-items: center; \n  gap: 8px; \n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 13px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 13px;\n      height: 13px;\n    }\n    @media (max-width: 1366px) {\n      width: 12px;\n      height: 12px;\n    }\n  }\n"])), props => props.textColor);

package/dist/stories/components/PopupCharts.js

@@ -101,6 +101,7 @@ const PopupCharts = props => {
   const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
     currencySign: true,
     dotCut: true,
+    AvgROI: rowsData === null || rowsData === void 0 ? void 0 : rowsData.AvgROI,
     chartsData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.chartsData,
     noDataText: rowsData.noDataText,
     title: rowsData.title,

package/dist/stories/components/ReportTable.js

@@ -11,6 +11,7 @@ var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon")
 var _Duplicate = _interopRequireDefault(require("./icons/Duplicate"));
 var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
 var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
+var _LinkButton = _interopRequireDefault(require("./LinkButton"));
 var _ReportTable = require("./ReportTable.style");
 var _InfoIcon = require("./icons/InfoIcon");
 /* eslint-disable import/no-unresolved */
@@ -45,10 +46,10 @@ const ReportTable = props => {
     };
 
     // column heading - checkbox
-    if (useCheckBoxes && !((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'checkbox' && item.key === 'checkbox'))) {
+    if (useCheckBoxes && !((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === "checkbox" && item.key === "checkbox"))) {
       newTableData.columnsHeadings.push({
-        label: 'checkbox',
-        key: 'checkbox'
+        label: "checkbox",
+        key: "checkbox"
       });
     }
 
@@ -58,21 +59,21 @@ const ReportTable = props => {
     });
 
     // column heading - select button
-    if (useSelectButtons && !((_newTableData$columns2 = newTableData.columnsHeadings) !== null && _newTableData$columns2 !== void 0 && _newTableData$columns2.some(item => item.label === 'button' && item.key === 'button'))) {
+    if (useSelectButtons && !((_newTableData$columns2 = newTableData.columnsHeadings) !== null && _newTableData$columns2 !== void 0 && _newTableData$columns2.some(item => item.label === "button" && item.key === "button"))) {
       newTableData.columnsHeadings.push({
-        label: 'button',
-        key: 'button'
+        label: "button",
+        key: "button"
       });
     }
 
     // rowsValues
     const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map(item => useCheckBoxes ? {
-      checkbox: 'checkbox',
+      checkbox: "checkbox",
       ...item
     } : item);
     const newRowValuesStep2 = newRowValues === null || newRowValues === void 0 ? void 0 : newRowValues.map(item => useSelectButtons ? {
       ...item,
-      button: 'button'
+      button: "button"
     } : item);
     const newRowValuesStep3 = newRowValuesStep2 === null || newRowValuesStep2 === void 0 ? void 0 : newRowValuesStep2.map(item => useCheckBoxes ? {
       ...item,
@@ -139,20 +140,14 @@ const ReportTable = props => {
     } = rest;
     onCheckRowClick(rest2);
   };
-  const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
-    className: "SelectButtonContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
-    className: "SelectButtonSubContainer",
-    selectTextColor: disableSelectButtons ? '#B1B1B1' : selectTextColor,
-    backgroundColor: disableSelectButtons ? '#E3E4E5' : '#ffffff',
-    cursor: disableSelectButtons ? 'default' : 'pointer',
-    onClick: () => disableSelectButtons ? null : handleSelectButtonRowClick(rowData)
-  }, buttonText || 'Select', ' ', buttonIconName === 'duplicate' ? /*#__PURE__*/_react.default.createElement(_Duplicate.default, {
-    color: disableSelectButtons ? '#B1B1B1' : selectTextColor
-  }) : /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
-    className: "ArrowSelectIcon",
-    color: disableSelectButtons ? '#B1B1B1' : selectTextColor
-  })));
+  const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    disabled: disableSelectButtons,
+    onClick: handleSelectButtonRowClick(rowData),
+    rightIcon: buttonIconName,
+    size: "medium",
+    text: buttonText || "Select",
+    textColor: selectTextColor
+  });
   const displayCheckBox = (rowData, isHeader) => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxContainer, {
     className: "SelectCheckboxContainer"
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxSubContainer, {
@@ -189,13 +184,13 @@ const ReportTable = props => {
     className: "headerRow"
   }, FormattedTableData.columnsHeadings.map((headline, index) => {
     // eslint-disable-next-line react/no-array-index-key
-    if (headline.label === 'checkbox') {
+    if (headline.label === "checkbox") {
       return /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
         key: index
       }, displayCheckBox(headline, true));
     }
     // eslint-disable-next-line react/no-array-index-key
-    if (headline.label === 'button') {
+    if (headline.label === "button") {
       return /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
         key: index
       });
@@ -213,13 +208,13 @@ const ReportTable = props => {
     useColorLinearGradient: useColorLinearGradient
   }, Object.values(rowData).map((value, dataIndex) =>
   // eslint-disable-next-line no-nested-ternary
-  value === 'checkbox' ?
+  value === "checkbox" ?
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   _react.default.createElement(_ReportTable.Td, {
     className: "checkbox",
     key: index
-  }, displayCheckBox(rowData, false)) : value === 'button' ?
+  }, displayCheckBox(rowData, false)) : value === "button" ?
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   _react.default.createElement(_ReportTable.Td, {
@@ -233,47 +228,47 @@ const ReportTable = props => {
     key: dataIndex
   }, value))))))), !disableInfo ? /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     color: "#1B30AA"
-  }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")) : '');
+  }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")) : "");
 };
 exports.ReportTable = ReportTable;
 var _default = exports.default = ReportTable;
 ReportTable.defaultProps = {
-  buttonText: 'Select',
-  buttonIconName: 'duplicate',
+  buttonText: "Select",
+  buttonIconName: "select",
   tableData: {
     columnsHeadings: [{
-      label: 'Event Name',
-      key: 'eventName'
+      label: "Event Name",
+      key: "eventName"
     }, {
-      label: 'Retailer',
-      key: 'retailer'
+      label: "Retailer",
+      key: "retailer"
     }, {
-      label: 'Total Cost',
-      key: 'totalCost'
+      label: "Total Cost",
+      key: "totalCost"
     }, {
-      label: 'Inc. Baseline Sales',
-      key: 'incBaselineSales'
+      label: "Inc. Baseline Sales",
+      key: "incBaselineSales"
     }],
     rowsValues: [{
-      retailer: 'Large Selling Event P2 2023',
-      eventDescription: 'Food',
-      totalCost: 'Food Lion',
-      incBaselineSales: '50K'
+      retailer: "Large Selling Event P2 2023",
+      eventDescription: "Food",
+      totalCost: "Food Lion",
+      incBaselineSales: "50K"
     }, {
-      retailer: 'Large Selling Event P2 2023',
-      eventDescription: 'Food',
-      totalCost: '$500K',
-      incBaselineSales: '50K'
+      retailer: "Large Selling Event P2 2023",
+      eventDescription: "Food",
+      totalCost: "$500K",
+      incBaselineSales: "50K"
     }, {
-      retailer: 'Large Selling Event P2 2023',
-      eventDescription: 'Food',
-      totalCost: '$500K',
-      incBaselineSales: '50K'
+      retailer: "Large Selling Event P2 2023",
+      eventDescription: "Food",
+      totalCost: "$500K",
+      incBaselineSales: "50K"
     }, {
-      retailer: 'Large Selling Event P2 2023',
-      eventDescription: 'Food',
-      totalCost: '$500K',
-      incBaselineSales: '50K'
+      retailer: "Large Selling Event P2 2023",
+      eventDescription: "Food",
+      totalCost: "$500K",
+      incBaselineSales: "50K"
     }]
   },
   maxColumnsNumber: 4,
@@ -281,7 +276,7 @@ ReportTable.defaultProps = {
   useSelectButtons: false,
   disableSelectButtons: false,
   disableInfo: false,
-  selectTextColor: '#229E38',
+  selectTextColor: "#229E38",
   onSelectRowClick: () => {},
   onCheckRowClick: () => {},
   onAllRowsCheckBoxClick: () => {},

package/dist/stories/components/TotalHorizontalCharts.js

@@ -21,6 +21,7 @@ const TotalHorizontalCharts = props => {
     title,
     value,
     dotCut,
+    AvgROI,
     currencySign,
     currencyType,
     width,
@@ -135,7 +136,7 @@ const TotalHorizontalCharts = props => {
     id: "FormattedValue"
   }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
     id: "CurrencySign"
-  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''))), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
+  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : '', AvgROI ? 'AVG OF X ' : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''))), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
     ref: chartContainerRef
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     height: heightChartContainer - 10,
@@ -196,6 +197,7 @@ TotalHorizontalCharts.defaultProps = {
   title: 'SALES',
   value: 0,
   dotCut: false,
+  AvgROI: false,
   currencySign: false,
   currencyType: 'USD',
   chartsData: [],

package/package.json

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

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -1,284 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ExamplePopupContent = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
-const FieldsDataRow1 = [{
-  name: "FundationSource",
-  label: "Fundation Source",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Source",
-  dropdownOptions: [{
-    value: 1,
-    label: "Source 1"
-  }, {
-    value: 2,
-    label: "Source 2"
-  }, {
-    value: 3,
-    label: "Source 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Category",
-  label: "Category",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Category",
-  dropdownOptions: [{
-    value: 1,
-    label: "Category 1"
-  }, {
-    value: 2,
-    label: "Category 2"
-  }, {
-    value: 3,
-    label: "Category 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Supplier",
-  label: "Supplier",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Supplier",
-  dropdownOptions: [{
-    value: 1,
-    label: "Supplier 1"
-  }, {
-    value: 2,
-    label: "Supplier 2"
-  }, {
-    value: 3,
-    label: "Supplier 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "ContactName",
-  label: "Contact Name",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Name",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const FieldsDataRow2 = [{
-  name: "BrandName",
-  label: "Brand Name",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Brand",
-  dropdownOptions: [{
-    value: 1,
-    label: "Brand 1"
-  }, {
-    value: 2,
-    label: "Brand 2"
-  }, {
-    value: 3,
-    label: "Brand 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Budget",
-  label: "Budget",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Budget",
-  dropdownOptions: [{
-    value: 1,
-    label: "Budget 1"
-  }, {
-    value: 2,
-    label: "Budget 2"
-  }, {
-    value: 3,
-    label: "Budget 3"
-  }],
-  dropdownDefaultValue: {
-    value: 1,
-    label: "Budget 1"
-  }
-}, {
-  name: "CategoryManager",
-  label: "Category Manager",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Category Manager",
-  dropdownOptions: [{
-    value: 1,
-    label: "Category Manager 1"
-  }, {
-    value: 2,
-    label: "Category Manager 2"
-  }, {
-    value: 3,
-    label: "Category Manager 3"
-  }],
-  dropdownDefaultValue: {
-    value: 3,
-    label: "Category Manager 3"
-  }
-}, {
-  name: "ContactEmail",
-  label: "Contact Email",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Email",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const FieldsDataRow3 = [{
-  name: "Broker",
-  label: "Broker",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Broker",
-  dropdownOptions: [{
-    value: 1,
-    label: "Broker 1"
-  }, {
-    value: 2,
-    label: "Broker 2"
-  }, {
-    value: 3,
-    label: "Broker 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "SupplierOfferID",
-  label: "Supplier Offer ID",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Supplier Offer ID",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}, {
-  name: "VendorID",
-  label: "Vendor ID",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Vendor ID",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}, {
-  name: "ContactPhone",
-  label: "Contact Phone",
-  disabled: false,
-  required: true,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Phone",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const RowsData1 = [{
-  fieldsArray: FieldsDataRow1
-}, {
-  fieldsArray: FieldsDataRow2
-}, {
-  fieldsArray: FieldsDataRow3
-}];
-var _default = exports.default = {
-  title: "Campaign Tool/PopupContent",
-  component: _PopupContent.default,
-  tags: ["autodocs"],
-  argTypes: {
-    FieldsData: {
-      name: "FieldsData",
-      control: {
-        type: "object"
-      },
-      description: " object: to fill kpi columns and buttons "
-    },
-    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 / % )"
-    },
-    onClick: {
-      action: "onClick",
-      description: "onClick event - returns an object of check box {true/false} "
-    },
-    onChange: {
-      action: "onChange",
-      description: "onChange event  "
-    },
-    borderColor: {
-      name: "borderColor",
-      description: "Sets the border color",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
-const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
-ExamplePopupContent.args = {
-  rowsData: RowsData1,
-  borderColor: "#066768",
-  width: "100%",
-  height: "100%"
-};

package/dist/stories/components/BannerEventBoxTest.js

@@ -1,42 +0,0 @@
-"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 _BannerEventBoxTest = require("./BannerEventBoxTest.style");
-var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
-const BannerEventBoxTest = props => {
-  const {
-    width,
-    height
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_BannerEventBoxTest.MainContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
-    banner: "Stop&Shop"
-  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
-    banner: "Hannaford",
-    data: [{
-      name: 'asdf',
-      items: ['coca', 'haim']
-    }, {
-      name: 'Brazxcvnds',
-      items: ['coca', 'bola', 'spring', 'cola']
-    }, {
-      name: 'xcvb Lines',
-      items: ['spring']
-    }]
-  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
-    banner: "Giant Food"
-  }));
-};
-BannerEventBoxTest.defaultProps = {
-  width: 'auto',
-  height: 'auto'
-};
-var _default = exports.default = BannerEventBoxTest;

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

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MainContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: ", ";\n    height: ", ";\n    display: flex;\n    gap: 20px;\n"])), props => props.width, props => props.height);