sag_components 1.0.774 → 1.0.775

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 +10 -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",
@@ -316,6 +318,7 @@ const FilterPanel = props => {
316
318
  content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
317
319
  className: "Dropdown_Single",
318
320
  name: item.name,
321
+ key: item.reset,
319
322
  isMulti: false,
320
323
  placeHolder: item.placeHolder,
321
324
  label: item.label,
@@ -327,7 +330,7 @@ const FilterPanel = props => {
327
330
  xIconShow: item.xIconShow,
328
331
  error: false,
329
332
  errorMessage: "",
330
- selectedValue: item.selectedValue || item.defaultValue || [],
333
+ selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
331
334
  onChange: eventDropdown => onChangeDropdownSingleHandler(eventDropdown, item),
332
335
  options: item.dropdownOptions || [],
333
336
  width: "100%"
@@ -337,6 +340,7 @@ const FilterPanel = props => {
337
340
  content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
338
341
  className: "Dropdown_Multi",
339
342
  name: item.name,
343
+ key: item.reset,
340
344
  isMulti: true,
341
345
  placeHolder: item.placeHolder,
342
346
  label: item.label,
@@ -348,7 +352,7 @@ const FilterPanel = props => {
348
352
  xIconShow: item.xIconShow,
349
353
  error: false,
350
354
  errorMessage: "",
351
- selectedValue: item.selectedValue || item.defaultValue || [],
355
+ selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
352
356
  onChange: eventDropdownMulti => onChangeDropdownMultiHandler(eventDropdownMulti, item),
353
357
  options: item.dropdownOptions || [],
354
358
  width: "100%"
@@ -390,6 +394,7 @@ const FilterPanel = props => {
390
394
  }, /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
391
395
  className: "Dropdown_PeriodPicker",
392
396
  name: item.name,
397
+ key: item.reset,
393
398
  isMulti: false,
394
399
  placeHolder: item.placeHolder,
395
400
  label: item.label,
@@ -491,5 +496,6 @@ FilterPanel.defaultProps = {
491
496
  onResetClick: () => {},
492
497
  onItemValueChanged: () => {},
493
498
  disableOKButton: false,
494
- className: ''
499
+ className: '',
500
+ useExternalFilterState: false
495
501
  };
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.775",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {