sag_components 1.0.357 → 1.0.359

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/stories/components/CheckBox.js +5 -3
  2. package/dist/stories/components/CheckBoxButton.js +3 -2
  3. package/dist/stories/components/KpiFilter.js +218 -115
  4. package/dist/stories/components/KpiFilter.style.js +17 -8
  5. package/dist/stories/components/TextField.js +7 -1
  6. package/package.json +1 -1
package/dist/stories/components/CheckBox.js CHANGED
@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
13
13
  var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
14
14
  var _CheckBoxStyle = require("./CheckBox.style.js");
15
- var _excluded = ["label", "checked", "disabled", "width", "height", "iconSize", "fontSize", "colorChecked", "colorUnchecked", "onClick"];
15
+ var _excluded = ["label", "checked", "disabled", "width", "height", "iconSize", "fontSize", "colorChecked", "colorUnchecked", "colorDisabled", "onClick"];
16
16
  /*CheckBox*/
17
17
  var CheckBox = exports.CheckBox = function CheckBox(_ref) {
18
18
  var label = _ref.label,
@@ -32,6 +32,8 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
32
32
  colorChecked = _ref$colorChecked === void 0 ? "#1B30AA" : _ref$colorChecked,
33
33
  _ref$colorUnchecked = _ref.colorUnchecked,
34
34
  colorUnchecked = _ref$colorUnchecked === void 0 ? "#212121" : _ref$colorUnchecked,
35
+ _ref$colorDisabled = _ref.colorDisabled,
36
+ colorDisabled = _ref$colorDisabled === void 0 ? "#D0D0D0" : _ref$colorDisabled,
35
37
  _onClick = _ref.onClick,
36
38
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
37
39
  var _useState = (0, _react.useState)(checked),
@@ -63,7 +65,7 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
63
65
  }, " ", /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
64
66
  width: iconSize,
65
67
  height: iconSize,
66
- color: disabled ? "#D0D0D0" : colorChecked
68
+ color: disabled ? colorDisabled : colorChecked
67
69
  })) : /*#__PURE__*/_react.default.createElement(_CheckBoxStyle.CheckBoxIconContainer, {
68
70
  id: "CheckBoxIconContainer",
69
71
  disabled: disabled,
@@ -79,7 +81,7 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
79
81
  }, /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
80
82
  width: iconSize,
81
83
  height: iconSize,
82
- color: disabled ? "#D0D0D0" : colorUnchecked
84
+ color: disabled ? colorDisabled : colorUnchecked
83
85
  })), /*#__PURE__*/_react.default.createElement(_CheckBoxStyle.Label, {
84
86
  id: "Label"
85
87
  }, label)));
package/dist/stories/components/CheckBoxButton.js CHANGED
@@ -11,10 +11,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _CheckBoxButtonCheckedIcon = require("./icons/CheckBoxButtonCheckedIcon");
13
13
  var _CheckBoxButton = require("./CheckBoxButton.style");
14
- var _excluded = ["label", "checked", "disabled", "showIconInCheckBoxButtons", "width", "height", "iconSize", "fontSize", "iconColor", "borderColor", "borderRadius", "textColorChecked", "textColorUnchecked", "backgroundColorChecked", "backgroundColorUnchecked", "onClick"];
14
+ var _excluded = ["label", "displayLabel", "checked", "disabled", "showIconInCheckBoxButtons", "width", "height", "iconSize", "fontSize", "iconColor", "borderColor", "borderRadius", "textColorChecked", "textColorUnchecked", "backgroundColorChecked", "backgroundColorUnchecked", "onClick"];
15
15
  /* CheckBoxButton */
16
16
  var CheckBoxButton = exports.CheckBoxButton = function CheckBoxButton(_ref) {
17
17
  var label = _ref.label,
18
+ displayLabel = _ref.displayLabel,
18
19
  _ref$checked = _ref.checked,
19
20
  checked = _ref$checked === void 0 ? false : _ref$checked,
20
21
  _ref$disabled = _ref.disabled,
@@ -81,6 +82,6 @@ var CheckBoxButton = exports.CheckBoxButton = function CheckBoxButton(_ref) {
81
82
  })) : '', /*#__PURE__*/_react.default.createElement(_CheckBoxButton.Label, {
82
83
  id: "Label",
83
84
  textColor: disabled ? '#B1B1B1' : checkedState ? textColorChecked : textColorUnchecked
84
- }, label)));
85
+ }, displayLabel ? displayLabel : label)));
85
86
  };
86
87
  var _default = exports.default = CheckBoxButton;
package/dist/stories/components/KpiFilter.js CHANGED
@@ -8,20 +8,17 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.KpiFilter = void 0;
9
9
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
- var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/readOnlyError"));
12
11
  var _react = _interopRequireWildcard(require("react"));
13
12
  var _CheckBox = require("./CheckBox");
14
13
  var _CheckBoxButton = require("./CheckBoxButton");
15
14
  var _KpiFilter = require("./KpiFilter.style");
16
- var DATATYPE_EVENT_ATTRUBUTES = 'EventAttributes';
17
- var DATATYPE_KPI = 'KPI';
18
-
19
15
  /* KpiFilter */
20
16
  var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
21
- var eventAttributesData = props.eventAttributesData,
17
+ var width = props.width,
18
+ height = props.height;
19
+ var mainTitle = props.mainTitle,
20
+ periodTitle = props.periodTitle,
22
21
  kpiData = props.kpiData,
23
- width = props.width,
24
- height = props.height,
25
22
  buttonsIconColor = props.buttonsIconColor,
26
23
  buttonsBorderColor = props.buttonsBorderColor,
27
24
  buttonsTextColorChecked = props.buttonsTextColorChecked,
@@ -29,39 +26,58 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
29
26
  buttonsBackgroundColorChecked = props.buttonsBackgroundColorChecked,
30
27
  buttonsBackgroundColorUnchecked = props.buttonsBackgroundColorUnchecked,
31
28
  onClick = props.onClick,
32
- onClickIncludeBenchmark = props.onClickIncludeBenchmark;
33
- var _useState = (0, _react.useState)(eventAttributesData),
29
+ onClickIncludeBenchmark = props.onClickIncludeBenchmark,
30
+ onClickPeriod = props.onClickPeriod;
31
+ var DEFAULT_PERIOD = "4 weeks";
32
+ var _useState = (0, _react.useState)(kpiData),
34
33
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
35
- stateEventAttributesData = _useState2[0],
36
- setStateEventAttributesData = _useState2[1];
37
- var _useState3 = (0, _react.useState)(kpiData),
34
+ KpiDataState = _useState2[0],
35
+ setKpiDataState = _useState2[1];
36
+ var _useState3 = (0, _react.useState)("4 weeks"),
38
37
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
39
- stateKpiData = _useState4[0],
40
- setStateKpiData = _useState4[1];
38
+ periodState = _useState4[0],
39
+ setPeriodSate = _useState4[1];
40
+
41
+ // ------------------------- CheckBox Buttons OnClick Handler - Begin ------------------
41
42
  (0, _react.useEffect)(function () {
42
- var eventAttributesSelectedData = stateEventAttributesData === null || stateEventAttributesData === void 0 ? void 0 : stateEventAttributesData.filter(function (item) {
43
- return item.checked === true;
44
- });
45
- var kpiSelectedData = stateKpiData === null || stateKpiData === void 0 ? void 0 : stateKpiData.filter(function (item) {
46
- return item.checked === true;
43
+ var kpiSelectedData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
44
+ var _itemColumn$buttonsAr;
45
+ return (_itemColumn$buttonsAr = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr === void 0 ? void 0 : _itemColumn$buttonsAr.filter(function (itemButton) {
46
+ return itemButton.checked === true || itemButton.secondButtonChecked === true;
47
+ });
47
48
  });
49
+ var kpiSelectedButtonsLabels = [];
50
+ for (var i = 0; i < (kpiSelectedData === null || kpiSelectedData === void 0 ? void 0 : kpiSelectedData.length); i++) {
51
+ for (var j = 0; j < ((_kpiSelectedData$i = kpiSelectedData[i]) === null || _kpiSelectedData$i === void 0 ? void 0 : _kpiSelectedData$i.length); j++) {
52
+ var _kpiSelectedData$i;
53
+ if (kpiSelectedData[i][j].label && kpiSelectedData[i][j].checked === true) {
54
+ kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
55
+ }
56
+ if (kpiSelectedData[i][j].secondButtonLabel && kpiSelectedData[i][j].secondButtonChecked === true) {
57
+ kpiSelectedButtonsLabels.push("".concat("", kpiSelectedData[i][j].label, ":", kpiSelectedData[i][j].secondButtonLabel));
58
+ }
59
+ }
60
+ }
48
61
  onClick({
49
- eventAttributesData: stateEventAttributesData,
50
- eventAttributesSelectedData: eventAttributesSelectedData,
51
- kpiData: stateKpiData,
52
- kpiSelectedData: kpiSelectedData
62
+ kpiSelectedButtonsLabels: kpiSelectedButtonsLabels,
63
+ kpiData: KpiDataState
53
64
  });
54
- }, [stateEventAttributesData, stateKpiData]);
55
- var dispalyEventAttributesButtons = function dispalyEventAttributesButtons(dataType, data, height) {
56
- var paddingBottom = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '5px';
65
+ }, [KpiDataState]);
66
+ // ------------------------- Buttons OnClick Handler - End ------------------
67
+
68
+ var dispalyColumnButtons = function dispalyColumnButtons(data, height) {
69
+ var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
57
70
  if (data && data.length > 0) {
58
71
  return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonsContainer, {
59
72
  id: "ButtonsContainer",
60
73
  height: height,
61
74
  paddingBottom: paddingBottom
62
75
  }, data === null || data === void 0 ? void 0 : data.map(function (item) {
76
+ var _item$marginBottom;
63
77
  return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
64
- id: "ButtonContainer"
78
+ id: "ButtonContainer",
79
+ className: item.marginBottom ? "marginBottom" : "",
80
+ marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : "0px"
65
81
  }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
66
82
  backgroundColorChecked: buttonsBackgroundColorChecked,
67
83
  backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
@@ -69,117 +85,204 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
69
85
  borderRadius: "12px",
70
86
  checked: item.checked,
71
87
  disabled: item.disabled,
72
- fontSize: "14px",
88
+ fontSize: "12px",
73
89
  height: "29px",
74
90
  iconColor: buttonsIconColor,
75
91
  iconSize: "12px",
76
92
  label: item.label,
77
93
  onClick: function onClick(props) {
78
- if (dataType === DATATYPE_EVENT_ATTRUBUTES) {
79
- var newData = stateEventAttributesData === null || stateEventAttributesData === void 0 ? void 0 : stateEventAttributesData.map(function (item) {
80
- return item.label === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
81
- checked: props.checked
82
- }) : (0, _objectSpread2.default)({}, item);
94
+ var newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
95
+ var _itemColumn$buttonsAr2;
96
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
97
+ buttonsArray: (_itemColumn$buttonsAr2 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr2 === void 0 ? void 0 : _itemColumn$buttonsAr2.map(function (itemButton) {
98
+ return itemButton.label === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
99
+ checked: props.checked
100
+ }) : (0, _objectSpread2.default)({}, itemButton);
101
+ })
83
102
  });
84
- setStateEventAttributesData(newData);
85
- } else if (dataType === DATATYPE_KPI) {
86
- var newDataKpi = stateKpiData === null || stateKpiData === void 0 ? void 0 : stateKpiData.map(function (item) {
87
- return item.label === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
88
- checked: props.checked
89
- }) : (0, _objectSpread2.default)({}, item);
103
+ });
104
+ console.log("newDataKpi", newDataKpi);
105
+ setKpiDataState(newDataKpi);
106
+ },
107
+ textColorChecked: buttonsTextColorChecked,
108
+ textColorUnchecked: buttonsTextColorUnchecked,
109
+ width: "100%"
110
+ }), item.secondButtonLabel ? /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
111
+ backgroundColorChecked: buttonsBackgroundColorChecked,
112
+ backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
113
+ borderColor: buttonsBorderColor,
114
+ borderRadius: "12px",
115
+ checked: item.secondButtonChecked,
116
+ disabled: item.secondButtonDisabled,
117
+ fontSize: "12px",
118
+ height: "29px",
119
+ iconColor: buttonsIconColor,
120
+ iconSize: "12px",
121
+ label: "".concat("", item.label, ":", item.secondButtonLabel),
122
+ displayLabel: item.secondButtonLabel,
123
+ onClick: function onClick(props) {
124
+ var newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
125
+ var _itemColumn$buttonsAr3;
126
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
127
+ buttonsArray: (_itemColumn$buttonsAr3 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr3 === void 0 ? void 0 : _itemColumn$buttonsAr3.map(function (itemButton) {
128
+ return "".concat("", itemButton.label, ":", itemButton.secondButtonLabel) === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
129
+ secondButtonChecked: props.checked
130
+ }) : (0, _objectSpread2.default)({}, itemButton);
131
+ })
90
132
  });
91
- setStateKpiData(newDataKpi);
92
- }
133
+ });
134
+ setKpiDataState(newDataKpi);
135
+ console.log("newDataKpi", newDataKpi, props);
93
136
  },
94
137
  textColorChecked: buttonsTextColorChecked,
95
138
  textColorUnchecked: buttonsTextColorUnchecked,
96
139
  width: "100%"
97
- }));
140
+ }) : "");
98
141
  }));
99
142
  }
100
143
  };
144
+ var displayMainTitle = function displayMainTitle() {
145
+ return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitleContainer, {
146
+ id: "MainTitleContainer"
147
+ }, /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitle, {
148
+ id: "MainTitle"
149
+ }, mainTitle), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
150
+ id: "CheckBoxContainer"
151
+ }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
152
+ checked: false,
153
+ colorChecked: buttonsIconColor,
154
+ colorUnchecked: buttonsIconColor,
155
+ fontSize: "14px",
156
+ height: "20px",
157
+ width: "100%",
158
+ iconSize: "14px",
159
+ label: "Select All",
160
+ onClick: function onClick(props) {
161
+ var newData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
162
+ var _itemColumn$buttonsAr4;
163
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
164
+ buttonsArray: (_itemColumn$buttonsAr4 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr4 === void 0 ? void 0 : _itemColumn$buttonsAr4.map(function (itemButton) {
165
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
166
+ checked: props.checked
167
+ });
168
+ })
169
+ });
170
+ });
171
+ setKpiDataState(newData);
172
+ }
173
+ }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
174
+ checked: false,
175
+ colorChecked: buttonsIconColor,
176
+ colorUnchecked: buttonsIconColor,
177
+ fontSize: "14px",
178
+ height: "20px",
179
+ width: "100%",
180
+ iconSize: "14px",
181
+ label: "Include Benchmarks",
182
+ onClick: function onClick(props) {
183
+ onClickIncludeBenchmark({
184
+ label: props.label,
185
+ checked: props.checked
186
+ });
187
+ }
188
+ })));
189
+ };
190
+ var onClickPeriodHandler = function onClickPeriodHandler(props) {
191
+ setPeriodSate(props.checked ? props.label : DEFAULT_PERIOD);
192
+ onClickPeriod({
193
+ period: props.checked ? props.label : DEFAULT_PERIOD
194
+ });
195
+ };
196
+ var displayPeriod = function displayPeriod() {
197
+ return /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxPeriodContainer, {
198
+ id: "CheckBoxPeriodContainer"
199
+ }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
200
+ id: "CheckBox",
201
+ label: "4 weeks",
202
+ checked: periodState === "4 weeks" ? true : false,
203
+ colorChecked: buttonsIconColor,
204
+ colorUnchecked: buttonsIconColor,
205
+ colorDisabled: buttonsIconColor,
206
+ fontSize: "14px",
207
+ height: "20px",
208
+ width: "100%",
209
+ iconSize: "14px",
210
+ disabled: periodState === "4 weeks" ? true : false,
211
+ onClick: function onClick(props) {
212
+ onClickPeriodHandler(props);
213
+ }
214
+ }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
215
+ id: "CheckBox",
216
+ label: "8 weeks",
217
+ checked: periodState === "8 weeks" ? true : false,
218
+ colorChecked: buttonsIconColor,
219
+ colorUnchecked: buttonsIconColor,
220
+ colorDisabled: buttonsIconColor,
221
+ fontSize: "12px",
222
+ height: "20px",
223
+ width: "100%",
224
+ iconSize: "14px",
225
+ disabled: periodState === "8 weeks" ? true : false,
226
+ onClick: function onClick(props) {
227
+ onClickPeriodHandler(props);
228
+ }
229
+ }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
230
+ id: "CheckBox",
231
+ label: "13 weeks",
232
+ checked: periodState === "13 weeks" ? true : false,
233
+ colorChecked: buttonsIconColor,
234
+ colorUnchecked: buttonsIconColor,
235
+ colorDisabled: buttonsIconColor,
236
+ fontSize: "12px",
237
+ height: "20px",
238
+ width: "100%",
239
+ iconSize: "14px",
240
+ disabled: periodState === "13 weeks" ? true : false,
241
+ onClick: function onClick(props) {
242
+ onClickPeriodHandler(props);
243
+ }
244
+ }));
245
+ };
246
+ var displayColumns = function displayColumns() {
247
+ if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
248
+ id: "AllColumnsContainer"
249
+ }, KpiDataState.map(function (item, i) {
250
+ return /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnAndLineContainer, {
251
+ id: "ColumnAndLineContainer"
252
+ }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
253
+ id: "ColumnContainer"
254
+ }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
255
+ id: "ColumnTitleContainer"
256
+ }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
257
+ id: "ColumnTitle"
258
+ }, 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) : "");
259
+ }));
260
+ };
261
+
262
+ //========================================= MAIN RETURN ====================================
101
263
  return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainContainer, {
102
264
  id: "MainContainer",
103
265
  height: height,
104
266
  width: width
105
267
  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.PanelContainer, {
106
268
  id: "PanelContainer"
107
- }, /*#__PURE__*/_react.default.createElement(_KpiFilter.EventAttributesTitleContainer, {
108
- id: "EventAttributesTitleContainer"
109
- }, /*#__PURE__*/_react.default.createElement(_KpiFilter.EventAttributesTitle, {
110
- id: "EventAttributesTitle"
111
- }, "Select Event Atributes"), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
112
- id: "CheckBoxContainer"
113
- }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
114
- checked: true,
115
- colorChecked: buttonsIconColor,
116
- colorUnchecked: buttonsIconColor,
117
- fontSize: "14px",
118
- height: "20px",
119
- iconColor: buttonsIconColor,
120
- iconSize: "14px",
121
- label: "Select All",
122
- onClick: function onClick(props) {
123
- var newData = stateEventAttributesData === null || stateEventAttributesData === void 0 ? void 0 : stateEventAttributesData.map(function (item) {
124
- return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
125
- checked: props.checked
126
- });
127
- });
128
- setStateEventAttributesData(newData);
129
- },
130
- width: "100%"
131
- }))), dispalyEventAttributesButtons(DATATYPE_EVENT_ATTRUBUTES, stateEventAttributesData, ('60px', (0, _readOnlyError2.default)("height")), '25px'), /*#__PURE__*/_react.default.createElement(_KpiFilter.KpiTitleContainer, {
132
- id: "KpiTitleContainer"
133
- }, /*#__PURE__*/_react.default.createElement(_KpiFilter.EventAttributesTitle, {
134
- id: "EventAttributesTitle"
135
- }, "Select KPIs"), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
136
- id: "CheckBoxContainer"
137
- }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
138
- checked: false,
139
- colorChecked: buttonsIconColor,
140
- colorUnchecked: buttonsIconColor,
141
- fontSize: "14px",
142
- height: "20px",
143
- width: "100%",
144
- iconSize: "14px",
145
- label: "Select All",
146
- onClick: function onClick(props) {
147
- var newData = stateKpiData === null || stateKpiData === void 0 ? void 0 : stateKpiData.map(function (item) {
148
- return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
149
- checked: props.checked
150
- });
151
- });
152
- setStateKpiData(newData);
153
- }
154
- }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
155
- checked: false,
156
- colorChecked: buttonsIconColor,
157
- colorUnchecked: buttonsIconColor,
158
- fontSize: "14px",
159
- height: "20px",
160
- width: "100%",
161
- iconSize: "14px",
162
- label: "Include Benchmarks",
163
- onClick: function onClick(props) {
164
- onClickIncludeBenchmark({
165
- label: props.label,
166
- checked: props.checked
167
- });
168
- }
169
- }))), dispalyEventAttributesButtons(DATATYPE_KPI, stateKpiData, ('160px', (0, _readOnlyError2.default)("height")), '0px')));
269
+ }, displayMainTitle(), displayColumns()));
270
+ //========================================= MAIN RETURN END====================================
170
271
  };
171
272
  var _default = exports.default = KpiFilter;
172
273
  KpiFilter.defaultProps = {
173
- eventAttributesData: [],
274
+ mainTitle: "Select Table Columns",
275
+ periodTitle: "Pre and Post Event Period",
174
276
  kpiData: [],
175
- width: '100%',
176
- height: '100%',
177
- buttonsIconColor: '#1B30AA',
178
- buttonsBorderColor: '#1B30AA',
179
- buttonsTextColorChecked: '#212121',
180
- buttonsTextColorUnchecked: '#212121',
181
- buttonsBackgroundColorChecked: '#E9F1FF',
182
- buttonsBackgroundColorUnchecked: '#F2F2F2',
277
+ width: "100%",
278
+ height: "100%",
279
+ buttonsIconColor: "#1B30AA",
280
+ buttonsBorderColor: "#1B30AA",
281
+ buttonsTextColorChecked: "#212121",
282
+ buttonsTextColorUnchecked: "#212121",
283
+ buttonsBackgroundColorChecked: "#E9F1FF",
284
+ buttonsBackgroundColorUnchecked: "#F2F2F2",
183
285
  onClick: function onClick() {},
184
- onClickIncludeBenchmark: function onClickIncludeBenchmark() {}
286
+ onClickIncludeBenchmark: function onClickIncludeBenchmark() {},
287
+ onClickPeriod: function onClickPeriod() {}
185
288
  };
package/dist/stories/components/KpiFilter.style.js CHANGED
@@ -4,21 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.PanelContainer = exports.MainContainer = exports.KpiTitleContainer = exports.EventAttributesTitleContainer = exports.EventAttributesTitle = exports.CheckBoxContainer = exports.ButtonsContainer = exports.ButtonContainer = void 0;
7
+ 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;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
11
11
  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) {
12
12
  return props.width;
13
13
  }, function (props) {
14
14
  return props.height;
15
15
  });
16
16
  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"])));
17
- 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"])));
18
- 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"])));
19
- var CheckBoxContainer = exports.CheckBoxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 20px;\n"])));
20
- 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"])));
21
- 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) {
17
+ 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"])));
18
+ 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"])));
19
+ 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"])));
20
+ 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"])));
21
+ var CheckBoxContainer = exports.CheckBoxContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 20px;\n"])));
22
+ 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"])));
23
+ 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"])));
24
+ var ColumnContainer = exports.ColumnContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
25
+ 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"])));
26
+ 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"])));
27
+ 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) {
22
28
  return props.paddingBottom;
23
29
  });
24
- var ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0;\n padding: 6px;\n"])));
30
+ 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) {
31
+ return props.marginBottom;
32
+ });
33
+ var CheckBoxPeriodContainer = exports.CheckBoxPeriodContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n //gap: 20px;\n margin: 5px;\n"])));
package/dist/stories/components/TextField.js CHANGED
@@ -32,7 +32,7 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
32
32
  shape = _ref.shape,
33
33
  size = _ref.size,
34
34
  _ref$placeHolder = _ref.placeHolder,
35
- placeHolder = _ref$placeHolder === void 0 ? 'Type...' : _ref$placeHolder,
35
+ placeHolder = _ref$placeHolder === void 0 ? 'Enter your email address' : _ref$placeHolder,
36
36
  _ref$passwordField = _ref.passwordField,
37
37
  passwordField = _ref$passwordField === void 0 ? false : _ref$passwordField,
38
38
  defaultValue = _ref.defaultValue,
@@ -124,6 +124,12 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
124
124
  paddingRight: 0,
125
125
  background: 'white',
126
126
  paddingTop: 0
127
+ },
128
+ '& .MuiInputLabel-root': {
129
+ fontFamily: 'Poppins'
130
+ },
131
+ '& .MuiInputBase-inputSizeSmall': {
132
+ fontFamily: 'Poppins'
127
133
  }
128
134
  };
129
135
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.357",
3
+ "version": "1.0.359",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {