sag_components 1.0.684 → 1.0.685

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 (8) hide show
  1. package/dist/stories/components/BannerEventBox.js +3 -42
  2. package/dist/stories/components/DropdownMultiNew.style.js +2 -2
  3. package/dist/stories/components/DropdownSingleNew.style.js +3 -3
  4. package/dist/stories/components/FilterButton.js +10 -4
  5. package/dist/stories/components/FilterButton.style.js +1 -1
  6. package/package.json +1 -1
  7. package/dist/stories/components/EventInfo.js +0 -92
  8. package/dist/stories/components/EventInfo.style.js +0 -20
package/dist/stories/components/BannerEventBox.js CHANGED
@@ -1,20 +1,17 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.BannerEventBox = void 0;
9
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = _interopRequireDefault(require("react"));
10
9
  var _BannerEventBox = require("./BannerEventBox.style");
11
10
  var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
12
11
  var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
13
12
  var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
14
13
  var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
15
14
  var _HannafordIcon_new = require("./icons/HannafordIcon_new");
16
- var _InfoIcon = _interopRequireDefault(require("./icons/InfoIcon"));
17
- var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
18
15
  const BannerEventBox = props => {
19
16
  const {
20
17
  width,
@@ -25,11 +22,6 @@ const BannerEventBox = props => {
25
22
  data,
26
23
  onInfoClick
27
24
  } = props;
28
- const [tooltipPos, setTooltipPos] = (0, _react.useState)({
29
- x: 0,
30
- y: 0
31
- });
32
- const [showItemTooltip, setShowItemTooltip] = (0, _react.useState)(Array(data.length).fill(false));
33
25
  const formatedBanners = () => {
34
26
  switch (banner) {
35
27
  case 'Stop&Shop':
@@ -64,47 +56,16 @@ const BannerEventBox = props => {
64
56
  const onInfoClickHandler = event => {
65
57
  onInfoClick(event);
66
58
  };
67
- const handleItemMouseEnter = (index, e) => {
68
- const iconBounds = e.target.getBoundingClientRect();
69
- setShowItemTooltip(prevState => {
70
- const newState = [...prevState];
71
- newState[index] = true;
72
- return newState;
73
- });
74
- setTooltipPos({
75
- x: iconBounds.left + iconBounds.width / 2,
76
- y: iconBounds.top
77
- });
78
- };
79
- const handleItemMouseLeave = () => {
80
- setShowItemTooltip(Array(data.length).fill(false));
81
- };
82
59
  return /*#__PURE__*/_react.default.createElement(_BannerEventBox.MainContainer, {
83
60
  height: height,
84
61
  width: width
85
62
  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.TitleWrapper, null, formatedBanners(banner).icon, "|", /*#__PURE__*/_react.default.createElement(_BannerEventBox.CardTitle, null, formatedBanners(banner).name)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Description"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, description)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Dates:"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, dates.join(' - '))), /*#__PURE__*/_react.default.createElement(_BannerEventBox.MoreInfo, {
86
63
  onClick: () => onInfoClickHandler(banner)
87
64
  }, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => {
88
- var _item$items, _item$items2;
65
+ var _item$items;
89
66
  return item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
90
67
  key: item.name
91
- }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, {
92
- onMouseEnter: e => handleItemMouseEnter(index, e),
93
- onMouseLeave: handleItemMouseLeave
94
- }, item.name, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
95
- width: "12",
96
- height: "12"
97
- }), showItemTooltip[index] && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
98
- direction: "top",
99
- content: /*#__PURE__*/_react.default.createElement("ul", null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(i => /*#__PURE__*/_react.default.createElement("li", {
100
- key: i
101
- }, i))),
102
- top: tooltipPos.y,
103
- left: tooltipPos.x,
104
- style: {
105
- pointerEvents: 'none'
106
- }
107
- })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, (_item$items2 = item.items) === null || _item$items2 === void 0 ? void 0 : _item$items2.length)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null));
68
+ }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, null, item.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null));
108
69
  })));
109
70
  };
110
71
  exports.BannerEventBox = BannerEventBox;
package/dist/stories/components/DropdownMultiNew.style.js CHANGED
@@ -11,10 +11,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  /* eslint-disable no-nested-ternary */
12
12
  const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '27px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
14
- const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n margin-bottom: 8px;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff; \n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
14
+ const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff; \n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
15
15
  const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
16
16
  const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 20px);\n height: 25px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none; \n"])), props => props.disabled ? '#888' : '#212121');
17
- const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%; \n background-color: #fff; \n display: ", "; \n\n"])), props => {
17
+ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n\n"])), props => {
18
18
  var _props$filteredoption;
19
19
  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
20
20
  });
package/dist/stories/components/DropdownSingleNew.style.js CHANGED
@@ -9,12 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
11
  /* eslint-disable no-nested-ternary */
12
- const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px; \n"])), props => props.width || '300px');
12
+ const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
14
- const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n margin-bottom: 8px;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
14
+ const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
15
15
  const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
16
16
  const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 10px);\n height: 20px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none;\n"])), props => props.disabled ? '#888' : '#212121');
17
- const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n background-color: #fff; \n display: ", "; \n"])), props => {
17
+ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n"])), props => {
18
18
  var _props$filteredoption;
19
19
  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
20
20
  });
package/dist/stories/components/FilterButton.js CHANGED
@@ -1,29 +1,33 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.FilterButton = void 0;
8
- var _react = _interopRequireDefault(require("react"));
8
+ var _react = _interopRequireWildcard(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,
14
15
  height,
15
16
  buttonText,
16
17
  iconWidth,
17
18
  iconHeight,
18
19
  disabled,
20
+ openState,
19
21
  onButtonClick
20
22
  } = props;
23
+ const [activeState, setActiveState] = (0, _react.useState)(openState);
21
24
  const onClickHandler = event => {
22
25
  onButtonClick(event);
26
+ setActiveState(!activeState);
23
27
  };
24
28
  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
25
29
  height: height,
26
- color: color,
30
+ color: activeState ? activeColor : color,
27
31
  disabled: disabled,
28
32
  onClick: event => {
29
33
  onClickHandler(event);
@@ -31,7 +35,7 @@ const FilterButton = props => {
31
35
  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
32
36
  width: iconWidth,
33
37
  height: iconHeight,
34
- color: color
38
+ color: activeState ? activeColor : color
35
39
  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
36
40
  };
37
41
  exports.FilterButton = FilterButton;
@@ -40,8 +44,10 @@ FilterButton.defaultProps = {
40
44
  buttonText: 'Filter',
41
45
  height: '40px',
42
46
  color: '#212121',
47
+ activeColor: '#229E38',
43
48
  iconHeight: 12,
44
49
  iconWidth: 12,
50
+ openState: false,
45
51
  disabled: false,
46
52
  onButtonClick: () => {}
47
53
  };
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 #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);
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);
12
12
  const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.684",
3
+ "version": "1.0.685",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/dist/stories/components/EventInfo.js DELETED
@@ -1,92 +0,0 @@
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 DELETED
@@ -1,20 +0,0 @@
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');