sag_components 1.0.774 → 1.0.776

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 (7) hide show
  1. package/dist/stories/components/EventInfo.js +92 -0
  2. package/dist/stories/components/EventInfo.style.js +20 -0
  3. package/dist/stories/components/FilterButton.js +4 -10
  4. package/dist/stories/components/FilterButton.style.js +1 -1
  5. package/dist/stories/components/FilterPanel.js +11 -4
  6. package/dist/stories/components/TotalDoughnutChart.js +3 -8
  7. package/package.json +1 -1
package/dist/stories/components/EventInfo.js ADDED
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
10
+ var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
11
+ var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
12
+ var _BannersDropdown = require("./BannersDropdown");
13
+ var _EventInfo = require("./EventInfo.style");
14
+ const EventInfo = props => {
15
+ const {
16
+ title,
17
+ subTitle,
18
+ productsData,
19
+ onSpotlightProductClick,
20
+ onClickBannersDropdown
21
+ } = props;
22
+ const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
23
+ const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
24
+ banners: [{
25
+ checked: true,
26
+ name: 'StopAndShop'
27
+ }, {
28
+ checked: true,
29
+ name: 'FoodLion'
30
+ }, {
31
+ checked: true,
32
+ name: 'GiantFood'
33
+ }, {
34
+ checked: true,
35
+ name: 'TheGiantCompany'
36
+ }, {
37
+ checked: true,
38
+ name: 'Hannaford'
39
+ }],
40
+ onClick: banners => {
41
+ onClickBannersDropdown({
42
+ banners
43
+ });
44
+ }
45
+ });
46
+ return /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoMainContainer, {
47
+ id: "EventInfoMainContainer"
48
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
49
+ id: "EventInfoContainer"
50
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
51
+ id: "EventInfoTitleContainer"
52
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
53
+ id: "EventInfoTitle"
54
+ }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
55
+ id: "EventInfoSubTitle"
56
+ }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
57
+ id: "EventInfoSubTitle"
58
+ }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
59
+ id: "ProductButtonContainer",
60
+ onClick: () => {
61
+ setIsProductsListOpen(!IsProductsListOpen);
62
+ }
63
+ }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
64
+ color: "#212121"
65
+ }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
66
+ color: "#212121"
67
+ }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContentContainer, {
68
+ id: "EventInfoContentContainer"
69
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
70
+ id: "ProductsTitle"
71
+ }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
72
+ id: "ProductContainer"
73
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
74
+ id: "Product"
75
+ }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
76
+ id: "ProductButtonContainer",
77
+ background: "#F8CD00",
78
+ onClick: () => {
79
+ onSpotlightProductClick({
80
+ value: item.value,
81
+ label: item.label
82
+ });
83
+ }
84
+ }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
85
+ };
86
+ var _default = exports.default = EventInfo;
87
+ EventInfo.defaultProps = {
88
+ title: 'Products Variety',
89
+ subTitle: 'Product Name',
90
+ onSpotlightProductClick: () => {},
91
+ onClickBannersDropdown: () => {}
92
+ };
package/dist/stories/components/EventInfo.style.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
+ const EventInfoMainContainer = exports.EventInfoMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin: 0;\n padding: 10px;\n border-radius: 12px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
12
+ const EventInfoContainer = exports.EventInfoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 10px;\n"])));
13
+ const EventInfoTitleContainer = exports.EventInfoTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 20px;\n line-height: 25px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 10px;\n gap: 15px;\n"])));
14
+ const EventInfoTitle = exports.EventInfoTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 20px;\n\n margin: 0;\n"])));
15
+ const EventInfoSubTitle = exports.EventInfoSubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #757171;\n font-weight: 500;\n font-size: 20px;\n margin: 0;\n"])));
16
+ const EventInfoContentContainer = exports.EventInfoContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 20px;\n line-height: 25px;\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n margin: 10px;\n padding: 10px 20px 20px 50px;\n"])));
17
+ const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 14px;\n margin: 10px 0;\n"])));
18
+ const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: 1px solid #00000010;\n width: 100%;\n gap: 20px;\n"])));
19
+ const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n"])));
20
+ const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: ", ";\n border-radius: 12px;\n height: 25px;\n padding: 0 15px;\n user-select: none;\n &:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n }\n gap: 10px;\n"])), props => props.background || '#ffffff');
package/dist/stories/components/FilterButton.js CHANGED
@@ -1,33 +1,29 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.FilterButton = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = _interopRequireDefault(require("react"));
9
9
  var _FilterButton = require("./FilterButton.style");
10
10
  var _FilterIcon = require("./icons/FilterIcon");
11
11
  const FilterButton = props => {
12
12
  const {
13
13
  color,
14
- activeColor,
15
14
  height,
16
15
  buttonText,
17
16
  iconWidth,
18
17
  iconHeight,
19
18
  disabled,
20
- openState,
21
19
  onButtonClick
22
20
  } = props;
23
- const [activeState, setActiveState] = (0, _react.useState)(openState);
24
21
  const onClickHandler = event => {
25
22
  onButtonClick(event);
26
- setActiveState(!activeState);
27
23
  };
28
24
  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
29
25
  height: height,
30
- color: activeState ? activeColor : color,
26
+ color: color,
31
27
  disabled: disabled,
32
28
  onClick: event => {
33
29
  onClickHandler(event);
@@ -35,7 +31,7 @@ const FilterButton = props => {
35
31
  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
36
32
  width: iconWidth,
37
33
  height: iconHeight,
38
- color: activeState ? activeColor : color
34
+ color: color
39
35
  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
40
36
  };
41
37
  exports.FilterButton = FilterButton;
@@ -44,10 +40,8 @@ FilterButton.defaultProps = {
44
40
  buttonText: 'Filter',
45
41
  height: '40px',
46
42
  color: '#212121',
47
- activeColor: '#229E38',
48
43
  iconHeight: 12,
49
44
  iconWidth: 12,
50
- openState: false,
51
45
  disabled: false,
52
46
  onButtonClick: () => {}
53
47
  };
package/dist/stories/components/FilterButton.style.js CHANGED
@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2;
11
- const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n padding: 8px 18px;\n color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n background: transparent;\n transition: box-shadow 0.3s ease;\n &:hover, &:focus {\n cursor: pointer;\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])), props => props.height, props => props.color, props => props.color);
11
+ const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n padding: 8px 18px;\n color: ", ";\n border-radius: 8px;\n border: 1px solid #B1B1B1;\n background: transparent;\n transition: box-shadow 0.3s ease;\n &:hover, &:focus {\n cursor: pointer;\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])), props => props.height, props => props.color);
12
12
  const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
package/dist/stories/components/FilterPanel.js CHANGED
@@ -32,7 +32,8 @@ const FilterPanel = props => {
32
32
  width,
33
33
  height,
34
34
  disableOKButton,
35
- className
35
+ className,
36
+ useExternalFilterState
36
37
  } = props;
37
38
  const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
38
39
  const [Reset, setReset] = (0, _react.useState)(false);
@@ -277,6 +278,7 @@ const FilterPanel = props => {
277
278
  content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
278
279
  className: "Dropdown_Year",
279
280
  name: ''.concat(item.name, '_Year'),
281
+ key: item.reset,
280
282
  isMulti: false,
281
283
  placeHolder: "Select Year ...",
282
284
  label: "Year",
@@ -310,12 +312,14 @@ const FilterPanel = props => {
310
312
  return content;
311
313
  };
312
314
  const displayField = item => {
315
+ console.log('item', item);
313
316
  let content;
314
317
  switch (item.inputType) {
315
318
  case 'dropdown':
316
319
  content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
317
320
  className: "Dropdown_Single",
318
321
  name: item.name,
322
+ key: item.reset,
319
323
  isMulti: false,
320
324
  placeHolder: item.placeHolder,
321
325
  label: item.label,
@@ -327,7 +331,7 @@ const FilterPanel = props => {
327
331
  xIconShow: item.xIconShow,
328
332
  error: false,
329
333
  errorMessage: "",
330
- selectedValue: item.selectedValue || item.defaultValue || [],
334
+ selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
331
335
  onChange: eventDropdown => onChangeDropdownSingleHandler(eventDropdown, item),
332
336
  options: item.dropdownOptions || [],
333
337
  width: "100%"
@@ -337,6 +341,7 @@ const FilterPanel = props => {
337
341
  content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
338
342
  className: "Dropdown_Multi",
339
343
  name: item.name,
344
+ key: item.reset,
340
345
  isMulti: true,
341
346
  placeHolder: item.placeHolder,
342
347
  label: item.label,
@@ -348,7 +353,7 @@ const FilterPanel = props => {
348
353
  xIconShow: item.xIconShow,
349
354
  error: false,
350
355
  errorMessage: "",
351
- selectedValue: item.selectedValue || item.defaultValue || [],
356
+ selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
352
357
  onChange: eventDropdownMulti => onChangeDropdownMultiHandler(eventDropdownMulti, item),
353
358
  options: item.dropdownOptions || [],
354
359
  width: "100%"
@@ -390,6 +395,7 @@ const FilterPanel = props => {
390
395
  }, /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
391
396
  className: "Dropdown_PeriodPicker",
392
397
  name: item.name,
398
+ key: item.reset,
393
399
  isMulti: false,
394
400
  placeHolder: item.placeHolder,
395
401
  label: item.label,
@@ -491,5 +497,6 @@ FilterPanel.defaultProps = {
491
497
  onResetClick: () => {},
492
498
  onItemValueChanged: () => {},
493
499
  disableOKButton: false,
494
- className: ''
500
+ className: '',
501
+ useExternalFilterState: false
495
502
  };
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -8,7 +8,6 @@ exports.default = exports.TotalDoughnutChart = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _recharts = require("recharts");
10
10
  var _CommonFunctions = require("./CommonFunctions");
11
- var _NoDataFoundMessage = require("./NoDataFoundMessage");
12
11
  var _TotalDoughnutChart = require("./TotalDoughnutChart.style");
13
12
  var _Benchmark = require("./Benchmark");
14
13
  const TotalDoughnutChart = props => {
@@ -29,8 +28,7 @@ const TotalDoughnutChart = props => {
29
28
  height,
30
29
  textcolor,
31
30
  isPercent,
32
- hideTitleAndValue,
33
- noDataText
31
+ hideTitleAndValue
34
32
  } = props;
35
33
  const [DoughnutChartRadius, setDoughnutChartRadius] = (0, _react.useState)(0);
36
34
  const [zoomResolution, setZoomResolution] = (0, _react.useState)(1);
@@ -88,9 +86,7 @@ const TotalDoughnutChart = props => {
88
86
  height: height,
89
87
  width: width,
90
88
  textcolor: textcolor
91
- }, legendData.length === 0 || !value ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
92
- noDataText: noDataText
93
- }) : /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Controls, {
89
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Controls, {
94
90
  id: "Controls",
95
91
  height: height,
96
92
  width: width
@@ -147,8 +143,7 @@ TotalDoughnutChart.defaultProps = {
147
143
  height: '100%',
148
144
  textcolor: '#212121',
149
145
  isPercent: false,
150
- hideTitleAndValue: false,
151
- noDataText: 'No Data'
146
+ hideTitleAndValue: false
152
147
  };
153
148
  function CustomTooltip(_ref) {
154
149
  let {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.774",
3
+ "version": "1.0.776",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {