sag_components 1.0.396 → 1.0.397

package/dist/stories/components/KpiFilter.js

@@ -28,15 +28,19 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     onClick = props.onClick,
     onClickIncludeBenchmark = props.onClickIncludeBenchmark,
     onClickPeriod = props.onClickPeriod;
-  var DEFAULT_PERIOD = '4 weeks';
+  var DEFAULT_PERIOD = {
+    weeks4: true,
+    weeks8: false,
+    weeks13: false
+  };
   var _useState = (0, _react.useState)(kpiData),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     KpiDataState = _useState2[0],
     setKpiDataState = _useState2[1];
-  var _useState3 = (0, _react.useState)('4 weeks'),
+  var _useState3 = (0, _react.useState)(DEFAULT_PERIOD),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     periodState = _useState4[0],
-    setPeriodSate = _useState4[1];
+    setPeriodState = _useState4[1];
 
   // ------------------------- CheckBox Buttons OnClick Handler - Begin ------------------
   (0, _react.useEffect)(function () {
@@ -54,7 +58,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           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));
+          kpiSelectedButtonsLabels.push("".concat("", kpiSelectedData[i][j].label, ":", kpiSelectedData[i][j].secondButtonLabel));
         }
       }
     }
@@ -66,7 +70,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
   // ------------------------- Buttons OnClick Handler - End ------------------
 
   var dispalyColumnButtons = function dispalyColumnButtons(data, height) {
-    var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
+    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",
@@ -76,8 +80,8 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
         var _item$marginBottom;
         return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
           id: "ButtonContainer",
-          className: item.marginBottom ? 'marginBottom' : '',
-          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : '0px'
+          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,
@@ -101,7 +105,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
                 })
               });
             });
-            console.log('newDataKpi', newDataKpi);
+            console.log("newDataKpi", newDataKpi);
             setKpiDataState(newDataKpi);
           },
           textColorChecked: buttonsTextColorChecked,
@@ -118,26 +122,26 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           height: "29px",
           iconColor: buttonsIconColor,
           iconSize: "12px",
-          label: ''.concat('', item.label, ':', item.secondButtonLabel),
+          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), {}, {
+                  return "".concat("", itemButton.label, ":", itemButton.secondButtonLabel) === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
                     secondButtonChecked: props.checked
                   }) : (0, _objectSpread2.default)({}, itemButton);
                 })
               });
             });
             setKpiDataState(newDataKpi);
-            console.log('newDataKpi', newDataKpi, props);
+            console.log("newDataKpi", newDataKpi, props);
           },
           textColorChecked: buttonsTextColorChecked,
           textColorUnchecked: buttonsTextColorUnchecked,
           width: "100%"
-        }) : '');
+        }) : "");
       }));
     }
   };
@@ -188,9 +192,34 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     })));
   };
   var onClickPeriodHandler = function onClickPeriodHandler(props) {
-    setPeriodSate(props.checked ? props.label : DEFAULT_PERIOD);
+    var label = props.label,
+      checked = props.checked;
+    var newPeriod;
+    var periodCheckedArray = [];
+    switch (label) {
+      case "4 weeks":
+        newPeriod = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, periodState), {}, {
+          weeks4: checked
+        });
+        break;
+      case "8 weeks":
+        newPeriod = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, periodState), {}, {
+          weeks8: checked
+        });
+        break;
+      case "13 weeks":
+        newPeriod = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, periodState), {}, {
+          weeks13: checked
+        });
+        break;
+    }
+    console.log("onClickPeriodHandler", newPeriod);
+    setPeriodState(newPeriod);
+    if (newPeriod.weeks4) periodCheckedArray.push("4 weeks");
+    if (newPeriod.weeks8) periodCheckedArray.push("8 weeks");
+    if (newPeriod.weeks13) periodCheckedArray.push("13 weeks");
     onClickPeriod({
-      period: props.checked ? props.label : DEFAULT_PERIOD
+      periodChecked: periodCheckedArray
     });
   };
   var displayPeriod = function displayPeriod() {
@@ -199,45 +228,54 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "4 weeks",
-      checked: periodState === '4 weeks',
+      checked: periodState.weeks4,
       colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor,
-      colorDisabled: buttonsIconColor,
+      colorUnchecked: buttonsIconColor
+      //colorDisabled={buttonsIconColor}
+      ,
       fontSize: "14px",
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === '4 weeks',
+      disabled: false
+      //disabled={periodState === "4 weeks"}
+      ,
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "8 weeks",
-      checked: periodState === '8 weeks',
+      checked: periodState.weeks8,
       colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor,
-      colorDisabled: buttonsIconColor,
+      colorUnchecked: buttonsIconColor
+      //colorDisabled={buttonsIconColor}
+      ,
       fontSize: "12px",
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === '8 weeks',
+      disabled: false
+      //disabled={periodState === "8 weeks"}
+      ,
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "13 weeks",
-      checked: periodState === '13 weeks',
+      checked: periodState.weeks13,
       colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor,
-      colorDisabled: buttonsIconColor,
+      colorUnchecked: buttonsIconColor
+      //colorDisabled={buttonsIconColor}
+      ,
       fontSize: "12px",
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === '13 weeks',
+      disabled: false
+      //disabled={periodState === "13 weeks"}
+      ,
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
@@ -256,7 +294,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           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) : '');
+        }, 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) : "");
       }));
     }
   };
@@ -273,17 +311,17 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
 };
 var _default = exports.default = KpiFilter;
 KpiFilter.defaultProps = {
-  mainTitle: 'Select Table Columns',
-  periodTitle: 'Pre and Post Event Period',
+  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() {},
   onClickPeriod: function onClickPeriod() {}

package/package.json

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

package/.history/.eslintrc_20230928133439.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_20230928133458.js

@@ -1,29 +0,0 @@
-/* eslint-disable linebreak-style */
-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_20230928133500.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_20230928134009.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': 0,
-  },
-};

package/.history/.eslintrc_20230928135318.js

@@ -1,34 +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': 0,
-    "react/function-component-definition": [
-      2,
-      {
-        namedComponents: "function-declaration",
-      },
-    ],
-  },
-};

package/.history/.eslintrc_20230928135321.js

@@ -1,34 +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': 0,
-    'react/function-component-definition": [
-      2,
-      {
-        namedComponents: "function-declaration",
-      },
-    ],
-  },
-};

package/.history/.eslintrc_20230928135323.js

@@ -1,34 +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': 0,
-    'react/function-component-definition': [
-      2,
-      {
-        namedComponents: "function-declaration",
-      },
-    ],
-  },
-};