sag_components 1.0.739 → 1.0.741

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/PopupCharts.js +9 -3
  6. package/dist/stories/components/PopupCharts.style.js +1 -1
  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/PopupCharts.js CHANGED
@@ -75,7 +75,8 @@ const PopupCharts = props => {
75
75
  itemsValuesSeparateLine: false,
76
76
  isPercent: true
77
77
  });
78
- const displayBarChartsByWeeks = rowsData => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarChartsByWeeks, {
78
+ const displayBarChartsByWeeks = (rowsData, showTwoBars) => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarChartsByWeeks, {
79
+ showTwoBars: showTwoBars,
79
80
  legendData: [{
80
81
  iconColor: '#90CE9C',
81
82
  iconType: 'Square',
@@ -95,6 +96,8 @@ const PopupCharts = props => {
95
96
  height: "240px",
96
97
  width: "100%",
97
98
  xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor // "#C7E7CD"
99
+ ,
100
+ t: true
98
101
  });
99
102
  const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
100
103
  currencySign: true,
@@ -108,7 +111,7 @@ const PopupCharts = props => {
108
111
  width: "100%"
109
112
  });
110
113
  const displayChart = item => {
111
- var _item$rowsData, _item$rowsData2, _item$rowsData3;
114
+ var _item$rowsData, _item$rowsData2, _item$rowsData3, _item$rowsData4;
112
115
  let content;
113
116
  switch (chartType) {
114
117
  case 'TotalDoughnutChart':
@@ -118,7 +121,10 @@ const PopupCharts = props => {
118
121
  content = displayTotalHorizontalCharts((_item$rowsData2 = item.rowsData) === null || _item$rowsData2 === void 0 ? void 0 : _item$rowsData2.TotalHorizontalChartsDetails);
119
122
  break;
120
123
  case 'BarChartsByWeeks':
121
- content = displayBarChartsByWeeks((_item$rowsData3 = item.rowsData) === null || _item$rowsData3 === void 0 ? void 0 : _item$rowsData3.BarChartsByWeeksDetails);
124
+ content = displayBarChartsByWeeks((_item$rowsData3 = item.rowsData) === null || _item$rowsData3 === void 0 ? void 0 : _item$rowsData3.BarChartsByWeeksDetails, false);
125
+ break;
126
+ case 'BarChartsByWeeksTwoBars':
127
+ content = displayBarChartsByWeeks((_item$rowsData4 = item.rowsData) === null || _item$rowsData4 === void 0 ? void 0 : _item$rowsData4.BarChartsByWeeksDetails, true);
122
128
  break;
123
129
  default:
124
130
  content = '';
package/dist/stories/components/PopupCharts.style.js CHANGED
@@ -14,7 +14,7 @@ const ModalContent = exports.ModalContent = _styledComponents.default.div(_templ
14
14
  const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 0 20px 0;\n margin: 0 0 30px 0;\n border-bottom: 1px solid #b1b1b1;\n"])));
15
15
  const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 24px;\n margin: 0;\n"])));
16
16
  const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(3, 1fr); /* 3 columns */\n flex-wrap: wrap; \n overflow-y: auto;\n padding: 0 10px 0 0;\n max-height: ", ";\n height: ", ";\n \n"])), props => props.maxHeight, props => props.height);
17
- const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin: 10px 10px 10px 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n"])));
17
+ const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin: 10px 10px 10px 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n padding-right: 10px\n"])));
18
18
  const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 20px 10px;\n"])));
19
19
  const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n margin: 0 10px;\n color: ", ";\n"])), props => props.subtitleTextColor);
20
20
  const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 0 10px;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.739",
3
+ "version": "1.0.741",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {