sag_components 1.0.357 → 1.0.358

package/dist/stories/components/CheckBox.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
 var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
 var _CheckBoxStyle = require("./CheckBox.style.js");
-var _excluded = ["label", "checked", "disabled", "width", "height", "iconSize", "fontSize", "colorChecked", "colorUnchecked", "onClick"];
+var _excluded = ["label", "checked", "disabled", "width", "height", "iconSize", "fontSize", "colorChecked", "colorUnchecked", "colorDisabled", "onClick"];
 /*CheckBox*/
 var CheckBox = exports.CheckBox = function CheckBox(_ref) {
   var label = _ref.label,
@@ -32,6 +32,8 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
     colorChecked = _ref$colorChecked === void 0 ? "#1B30AA" : _ref$colorChecked,
     _ref$colorUnchecked = _ref.colorUnchecked,
     colorUnchecked = _ref$colorUnchecked === void 0 ? "#212121" : _ref$colorUnchecked,
+    _ref$colorDisabled = _ref.colorDisabled,
+    colorDisabled = _ref$colorDisabled === void 0 ? "#D0D0D0" : _ref$colorDisabled,
     _onClick = _ref.onClick,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(checked),
@@ -63,7 +65,7 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
   }, " ", /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
     width: iconSize,
     height: iconSize,
-    color: disabled ? "#D0D0D0" : colorChecked
+    color: disabled ? colorDisabled : colorChecked
   })) : /*#__PURE__*/_react.default.createElement(_CheckBoxStyle.CheckBoxIconContainer, {
     id: "CheckBoxIconContainer",
     disabled: disabled,
@@ -79,7 +81,7 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
     width: iconSize,
     height: iconSize,
-    color: disabled ? "#D0D0D0" : colorUnchecked
+    color: disabled ? colorDisabled : colorUnchecked
   })), /*#__PURE__*/_react.default.createElement(_CheckBoxStyle.Label, {
     id: "Label"
   }, label)));

package/dist/stories/components/CheckBoxButton.js

@@ -11,10 +11,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBoxButtonCheckedIcon = require("./icons/CheckBoxButtonCheckedIcon");
 var _CheckBoxButton = require("./CheckBoxButton.style");
-var _excluded = ["label", "checked", "disabled", "showIconInCheckBoxButtons", "width", "height", "iconSize", "fontSize", "iconColor", "borderColor", "borderRadius", "textColorChecked", "textColorUnchecked", "backgroundColorChecked", "backgroundColorUnchecked", "onClick"];
+var _excluded = ["label", "displayLabel", "checked", "disabled", "showIconInCheckBoxButtons", "width", "height", "iconSize", "fontSize", "iconColor", "borderColor", "borderRadius", "textColorChecked", "textColorUnchecked", "backgroundColorChecked", "backgroundColorUnchecked", "onClick"];
 /* CheckBoxButton */
 var CheckBoxButton = exports.CheckBoxButton = function CheckBoxButton(_ref) {
   var label = _ref.label,
+    displayLabel = _ref.displayLabel,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     _ref$disabled = _ref.disabled,
@@ -81,6 +82,6 @@ var CheckBoxButton = exports.CheckBoxButton = function CheckBoxButton(_ref) {
   })) : '', /*#__PURE__*/_react.default.createElement(_CheckBoxButton.Label, {
     id: "Label",
     textColor: disabled ? '#B1B1B1' : checkedState ? textColorChecked : textColorUnchecked
-  }, label)));
+  }, displayLabel ? displayLabel : label)));
 };
 var _default = exports.default = CheckBoxButton;

package/dist/stories/components/KpiFilter.js

@@ -8,20 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.KpiFilter = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/readOnlyError"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBox = require("./CheckBox");
 var _CheckBoxButton = require("./CheckBoxButton");
 var _KpiFilter = require("./KpiFilter.style");
-var DATATYPE_EVENT_ATTRUBUTES = 'EventAttributes';
-var DATATYPE_KPI = 'KPI';
-
 /* KpiFilter */
 var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
-  var eventAttributesData = props.eventAttributesData,
+  var width = props.width,
+    height = props.height;
+  var mainTitle = props.mainTitle,
+    periodTitle = props.periodTitle,
     kpiData = props.kpiData,
-    width = props.width,
-    height = props.height,
     buttonsIconColor = props.buttonsIconColor,
     buttonsBorderColor = props.buttonsBorderColor,
     buttonsTextColorChecked = props.buttonsTextColorChecked,
@@ -29,39 +26,58 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     buttonsBackgroundColorChecked = props.buttonsBackgroundColorChecked,
     buttonsBackgroundColorUnchecked = props.buttonsBackgroundColorUnchecked,
     onClick = props.onClick,
-    onClickIncludeBenchmark = props.onClickIncludeBenchmark;
-  var _useState = (0, _react.useState)(eventAttributesData),
+    onClickIncludeBenchmark = props.onClickIncludeBenchmark,
+    onClickPeriod = props.onClickPeriod;
+  var DEFAULT_PERIOD = "4 weeks";
+  var _useState = (0, _react.useState)(kpiData),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    stateEventAttributesData = _useState2[0],
-    setStateEventAttributesData = _useState2[1];
-  var _useState3 = (0, _react.useState)(kpiData),
+    KpiDataState = _useState2[0],
+    setKpiDataState = _useState2[1];
+  var _useState3 = (0, _react.useState)("4 weeks"),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    stateKpiData = _useState4[0],
-    setStateKpiData = _useState4[1];
+    periodState = _useState4[0],
+    setPeriodSate = _useState4[1];
+
+  // ------------------------- CheckBox Buttons OnClick Handler - Begin ------------------
   (0, _react.useEffect)(function () {
-    var eventAttributesSelectedData = stateEventAttributesData === null || stateEventAttributesData === void 0 ? void 0 : stateEventAttributesData.filter(function (item) {
-      return item.checked === true;
-    });
-    var kpiSelectedData = stateKpiData === null || stateKpiData === void 0 ? void 0 : stateKpiData.filter(function (item) {
-      return item.checked === true;
+    var kpiSelectedData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
+      var _itemColumn$buttonsAr;
+      return (_itemColumn$buttonsAr = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr === void 0 ? void 0 : _itemColumn$buttonsAr.filter(function (itemButton) {
+        return itemButton.checked === true || itemButton.secondButtonChecked === true;
+      });
     });
+    var kpiSelectedButtonsLabels = [];
+    for (var i = 0; i < (kpiSelectedData === null || kpiSelectedData === void 0 ? void 0 : kpiSelectedData.length); i++) {
+      for (var j = 0; j < ((_kpiSelectedData$i = kpiSelectedData[i]) === null || _kpiSelectedData$i === void 0 ? void 0 : _kpiSelectedData$i.length); j++) {
+        var _kpiSelectedData$i;
+        if (kpiSelectedData[i][j].label && kpiSelectedData[i][j].checked === true) {
+          kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
+        }
+        if (kpiSelectedData[i][j].secondButtonLabel && kpiSelectedData[i][j].secondButtonChecked === true) {
+          kpiSelectedButtonsLabels.push("".concat("", kpiSelectedData[i][j].label, ":", kpiSelectedData[i][j].secondButtonLabel));
+        }
+      }
+    }
     onClick({
-      eventAttributesData: stateEventAttributesData,
-      eventAttributesSelectedData: eventAttributesSelectedData,
-      kpiData: stateKpiData,
-      kpiSelectedData: kpiSelectedData
+      kpiSelectedButtonsLabels: kpiSelectedButtonsLabels,
+      kpiData: KpiDataState
     });
-  }, [stateEventAttributesData, stateKpiData]);
-  var dispalyEventAttributesButtons = function dispalyEventAttributesButtons(dataType, data, height) {
-    var paddingBottom = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '5px';
+  }, [KpiDataState]);
+  // ------------------------- Buttons OnClick Handler - End ------------------
+
+  var dispalyColumnButtons = function dispalyColumnButtons(data, height) {
+    var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
     if (data && data.length > 0) {
       return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonsContainer, {
         id: "ButtonsContainer",
         height: height,
         paddingBottom: paddingBottom
       }, data === null || data === void 0 ? void 0 : data.map(function (item) {
+        var _item$marginBottom;
         return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
-          id: "ButtonContainer"
+          id: "ButtonContainer",
+          className: item.marginBottom ? "marginBottom" : "",
+          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : "0px"
         }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
           backgroundColorChecked: buttonsBackgroundColorChecked,
           backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
@@ -69,117 +85,204 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           borderRadius: "12px",
           checked: item.checked,
           disabled: item.disabled,
-          fontSize: "14px",
+          fontSize: "12px",
           height: "29px",
           iconColor: buttonsIconColor,
           iconSize: "12px",
           label: item.label,
           onClick: function onClick(props) {
-            if (dataType === DATATYPE_EVENT_ATTRUBUTES) {
-              var newData = stateEventAttributesData === null || stateEventAttributesData === void 0 ? void 0 : stateEventAttributesData.map(function (item) {
-                return item.label === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-                  checked: props.checked
-                }) : (0, _objectSpread2.default)({}, item);
+            var newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
+              var _itemColumn$buttonsAr2;
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
+                buttonsArray: (_itemColumn$buttonsAr2 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr2 === void 0 ? void 0 : _itemColumn$buttonsAr2.map(function (itemButton) {
+                  return itemButton.label === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
+                    checked: props.checked
+                  }) : (0, _objectSpread2.default)({}, itemButton);
+                })
               });
-              setStateEventAttributesData(newData);
-            } else if (dataType === DATATYPE_KPI) {
-              var newDataKpi = stateKpiData === null || stateKpiData === void 0 ? void 0 : stateKpiData.map(function (item) {
-                return item.label === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-                  checked: props.checked
-                }) : (0, _objectSpread2.default)({}, item);
+            });
+            console.log("newDataKpi", newDataKpi);
+            setKpiDataState(newDataKpi);
+          },
+          textColorChecked: buttonsTextColorChecked,
+          textColorUnchecked: buttonsTextColorUnchecked,
+          width: "100%"
+        }), item.secondButtonLabel ? /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
+          backgroundColorChecked: buttonsBackgroundColorChecked,
+          backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
+          borderColor: buttonsBorderColor,
+          borderRadius: "12px",
+          checked: item.secondButtonChecked,
+          disabled: item.secondButtonDisabled,
+          fontSize: "12px",
+          height: "29px",
+          iconColor: buttonsIconColor,
+          iconSize: "12px",
+          label: "".concat("", item.label, ":", item.secondButtonLabel),
+          displayLabel: item.secondButtonLabel,
+          onClick: function onClick(props) {
+            var newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
+              var _itemColumn$buttonsAr3;
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
+                buttonsArray: (_itemColumn$buttonsAr3 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr3 === void 0 ? void 0 : _itemColumn$buttonsAr3.map(function (itemButton) {
+                  return "".concat("", itemButton.label, ":", itemButton.secondButtonLabel) === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
+                    secondButtonChecked: props.checked
+                  }) : (0, _objectSpread2.default)({}, itemButton);
+                })
               });
-              setStateKpiData(newDataKpi);
-            }
+            });
+            setKpiDataState(newDataKpi);
+            console.log("newDataKpi", newDataKpi, props);
           },
           textColorChecked: buttonsTextColorChecked,
           textColorUnchecked: buttonsTextColorUnchecked,
           width: "100%"
-        }));
+        }) : "");
       }));
     }
   };
+  var displayMainTitle = function displayMainTitle() {
+    return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitleContainer, {
+      id: "MainTitleContainer"
+    }, /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitle, {
+      id: "MainTitle"
+    }, mainTitle), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
+      id: "CheckBoxContainer"
+    }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+      checked: false,
+      colorChecked: buttonsIconColor,
+      colorUnchecked: buttonsIconColor,
+      fontSize: "14px",
+      height: "20px",
+      width: "100%",
+      iconSize: "14px",
+      label: "Select All",
+      onClick: function onClick(props) {
+        var newData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
+          var _itemColumn$buttonsAr4;
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
+            buttonsArray: (_itemColumn$buttonsAr4 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr4 === void 0 ? void 0 : _itemColumn$buttonsAr4.map(function (itemButton) {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
+                checked: props.checked
+              });
+            })
+          });
+        });
+        setKpiDataState(newData);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+      checked: false,
+      colorChecked: buttonsIconColor,
+      colorUnchecked: buttonsIconColor,
+      fontSize: "14px",
+      height: "20px",
+      width: "100%",
+      iconSize: "14px",
+      label: "Include Benchmarks",
+      onClick: function onClick(props) {
+        onClickIncludeBenchmark({
+          label: props.label,
+          checked: props.checked
+        });
+      }
+    })));
+  };
+  var onClickPeriodHandler = function onClickPeriodHandler(props) {
+    setPeriodSate(props.checked ? props.label : DEFAULT_PERIOD);
+    onClickPeriod({
+      period: props.checked ? props.label : DEFAULT_PERIOD
+    });
+  };
+  var displayPeriod = function displayPeriod() {
+    return /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxPeriodContainer, {
+      id: "CheckBoxPeriodContainer"
+    }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+      id: "CheckBox",
+      label: "4 weeks",
+      checked: periodState === "4 weeks" ? true : false,
+      colorChecked: buttonsIconColor,
+      colorUnchecked: buttonsIconColor,
+      colorDisabled: buttonsIconColor,
+      fontSize: "14px",
+      height: "20px",
+      width: "100%",
+      iconSize: "14px",
+      disabled: periodState === "4 weeks" ? true : false,
+      onClick: function onClick(props) {
+        onClickPeriodHandler(props);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+      id: "CheckBox",
+      label: "8 weeks",
+      checked: periodState === "8 weeks" ? true : false,
+      colorChecked: buttonsIconColor,
+      colorUnchecked: buttonsIconColor,
+      colorDisabled: buttonsIconColor,
+      fontSize: "12px",
+      height: "20px",
+      width: "100%",
+      iconSize: "14px",
+      disabled: periodState === "8 weeks" ? true : false,
+      onClick: function onClick(props) {
+        onClickPeriodHandler(props);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+      id: "CheckBox",
+      label: "13 weeks",
+      checked: periodState === "13 weeks" ? true : false,
+      colorChecked: buttonsIconColor,
+      colorUnchecked: buttonsIconColor,
+      colorDisabled: buttonsIconColor,
+      fontSize: "12px",
+      height: "20px",
+      width: "100%",
+      iconSize: "14px",
+      disabled: periodState === "13 weeks" ? true : false,
+      onClick: function onClick(props) {
+        onClickPeriodHandler(props);
+      }
+    }));
+  };
+  var displayColumns = function displayColumns() {
+    if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
+      id: "AllColumnsContainer"
+    }, KpiDataState.map(function (item, i) {
+      return /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnAndLineContainer, {
+        id: "ColumnAndLineContainer"
+      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
+        id: "ColumnContainer"
+      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
+        id: "ColumnTitleContainer"
+      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
+        id: "ColumnTitle"
+      }, item.columnTitle)), dispalyColumnButtons(item.buttonsArray, height = "160px", "0px"), i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? /*#__PURE__*/_react.default.createElement(_KpiFilter.PeriodColumnTitle, null, periodTitle) : "", i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? displayPeriod() : ""), item.rightBorder ? /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnRightLineSeporator, null) : "");
+    }));
+  };
+
+  //========================================= MAIN RETURN ====================================
   return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainContainer, {
     id: "MainContainer",
     height: height,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_KpiFilter.PanelContainer, {
     id: "PanelContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.EventAttributesTitleContainer, {
-    id: "EventAttributesTitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.EventAttributesTitle, {
-    id: "EventAttributesTitle"
-  }, "Select Event Atributes"), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
-    id: "CheckBoxContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-    checked: true,
-    colorChecked: buttonsIconColor,
-    colorUnchecked: buttonsIconColor,
-    fontSize: "14px",
-    height: "20px",
-    iconColor: buttonsIconColor,
-    iconSize: "14px",
-    label: "Select All",
-    onClick: function onClick(props) {
-      var newData = stateEventAttributesData === null || stateEventAttributesData === void 0 ? void 0 : stateEventAttributesData.map(function (item) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-          checked: props.checked
-        });
-      });
-      setStateEventAttributesData(newData);
-    },
-    width: "100%"
-  }))), dispalyEventAttributesButtons(DATATYPE_EVENT_ATTRUBUTES, stateEventAttributesData, ('60px', (0, _readOnlyError2.default)("height")), '25px'), /*#__PURE__*/_react.default.createElement(_KpiFilter.KpiTitleContainer, {
-    id: "KpiTitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.EventAttributesTitle, {
-    id: "EventAttributesTitle"
-  }, "Select KPIs"), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
-    id: "CheckBoxContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-    checked: false,
-    colorChecked: buttonsIconColor,
-    colorUnchecked: buttonsIconColor,
-    fontSize: "14px",
-    height: "20px",
-    width: "100%",
-    iconSize: "14px",
-    label: "Select All",
-    onClick: function onClick(props) {
-      var newData = stateKpiData === null || stateKpiData === void 0 ? void 0 : stateKpiData.map(function (item) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-          checked: props.checked
-        });
-      });
-      setStateKpiData(newData);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-    checked: false,
-    colorChecked: buttonsIconColor,
-    colorUnchecked: buttonsIconColor,
-    fontSize: "14px",
-    height: "20px",
-    width: "100%",
-    iconSize: "14px",
-    label: "Include Benchmarks",
-    onClick: function onClick(props) {
-      onClickIncludeBenchmark({
-        label: props.label,
-        checked: props.checked
-      });
-    }
-  }))), dispalyEventAttributesButtons(DATATYPE_KPI, stateKpiData, ('160px', (0, _readOnlyError2.default)("height")), '0px')));
+  }, displayMainTitle(), displayColumns()));
+  //========================================= MAIN RETURN END====================================
 };
 var _default = exports.default = KpiFilter;
 KpiFilter.defaultProps = {
-  eventAttributesData: [],
+  mainTitle: "Select Table Columns",
+  periodTitle: "Pre and Post Event Period",
   kpiData: [],
-  width: '100%',
-  height: '100%',
-  buttonsIconColor: '#1B30AA',
-  buttonsBorderColor: '#1B30AA',
-  buttonsTextColorChecked: '#212121',
-  buttonsTextColorUnchecked: '#212121',
-  buttonsBackgroundColorChecked: '#E9F1FF',
-  buttonsBackgroundColorUnchecked: '#F2F2F2',
+  width: "100%",
+  height: "100%",
+  buttonsIconColor: "#1B30AA",
+  buttonsBorderColor: "#1B30AA",
+  buttonsTextColorChecked: "#212121",
+  buttonsTextColorUnchecked: "#212121",
+  buttonsBackgroundColorChecked: "#E9F1FF",
+  buttonsBackgroundColorUnchecked: "#F2F2F2",
   onClick: function onClick() {},
-  onClickIncludeBenchmark: function onClickIncludeBenchmark() {}
+  onClickIncludeBenchmark: function onClickIncludeBenchmark() {},
+  onClickPeriod: function onClickPeriod() {}
 };

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

@@ -4,21 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PanelContainer = exports.MainContainer = exports.KpiTitleContainer = exports.EventAttributesTitleContainer = exports.EventAttributesTitle = exports.CheckBoxContainer = exports.ButtonsContainer = exports.ButtonContainer = void 0;
+exports.PeriodColumnTitle = exports.PanelContainer = exports.MainTitleContainer = exports.MainTitle = exports.MainContainer = exports.ColumnTitleContainer = exports.ColumnTitle = exports.ColumnRightLineSeporator = exports.ColumnContainer = exports.ColumnAndLineContainer = exports.CheckBoxPeriodContainer = exports.CheckBoxContainer = exports.ButtonsContainer = exports.ButtonContainer = exports.AllColumnsContainer = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 var MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 });
 var PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem 1rem 1rem 1rem;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
-var EventAttributesTitleContainer = exports.EventAttributesTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
-var EventAttributesTitle = exports.EventAttributesTitle = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var CheckBoxContainer = exports.CheckBoxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n"])));
-var KpiTitleContainer = exports.KpiTitleContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid #ccc;\n  width: 100%;\n  padding: 20px 0 0 0;\n"])));
-var ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  padding-bottom: ", "; \n"])), function (props) {
+var MainTitleContainer = exports.MainTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var MainTitle = exports.MainTitle = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+var ColumnTitle = exports.ColumnTitle = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+var PeriodColumnTitle = exports.PeriodColumnTitle = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 50px 5px 5px 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+var CheckBoxContainer = exports.CheckBoxContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n"])));
+var AllColumnsContainer = exports.AllColumnsContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
+var ColumnAndLineContainer = exports.ColumnAndLineContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 20px 0 0 0; \n  height: 100%;\n"])));
+var ColumnContainer = exports.ColumnContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var ColumnRightLineSeporator = exports.ColumnRightLineSeporator = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #b1b1b1;\n  width: 0.5px;\n  height: 95%;  \n  margin-left: 40px;\n  @media (max-width: 1536px) {\n    margin-left: 25px;\n  }\n  @media (max-width: 1366px) {\n    margin-left: 15px;\n  }\n"])));
+var ColumnTitleContainer = exports.ColumnTitleContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column; \n  white-space: nowrap;\n  padding-bottom: ", ";\n"])), function (props) {
   return props.paddingBottom;
 });
-var ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0;\n  padding: 6px;\n"])));
+var ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  padding: 6px;\n  gap: 10px;\n  &.marginBottom {\n    margin-bottom: ", ";\n  }\n"])), function (props) {
+  return props.marginBottom;
+});
+var CheckBoxPeriodContainer = exports.CheckBoxPeriodContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  //gap: 20px;\n  margin: 5px;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.357",
+  "version": "1.0.358",
   "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"]
-  },
-};