sag_components 1.0.830 → 1.0.832

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/EventDetailsCard.js +3 -1
  2. package/dist/stories/components/FilterButton.js +10 -4
  3. package/dist/stories/components/FilterButton.style.js +1 -1
  4. package/dist/stories/components/QuarterPicker.js +1 -9
  5. package/package.json +1 -1
  6. package/dist/stories/components/EventInfo.js +0 -92
  7. package/dist/stories/components/EventInfo.style.js +0 -20
package/dist/stories/components/EventDetailsCard.js CHANGED
@@ -25,6 +25,7 @@ const EventDetailsCard = props => {
25
25
  data,
26
26
  showStrip,
27
27
  strip,
28
+ count,
28
29
  buttonText,
29
30
  onViewButtonClick,
30
31
  onBannersDropdownClick,
@@ -101,7 +102,7 @@ const EventDetailsCard = props => {
101
102
  banners
102
103
  });
103
104
  }
104
- })), /*#__PURE__*/_react.default.createElement(_EventDetailsCard.MainCard, null, /*#__PURE__*/_react.default.createElement(_EventDetailsCard.List, null, /*#__PURE__*/_react.default.createElement("li", null, "6 products in variety"), data.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
105
+ })), /*#__PURE__*/_react.default.createElement(_EventDetailsCard.MainCard, null, /*#__PURE__*/_react.default.createElement(_EventDetailsCard.List, null, count > 0 && /*#__PURE__*/_react.default.createElement("li", null, count, ' ', "products in variety"), data.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
105
106
  key: index
106
107
  }, /*#__PURE__*/_react.default.createElement("span", null, item.label, ":"), ' ', item.value))), showStrip && /*#__PURE__*/_react.default.createElement(_EventDetailsCard.Strip, null, strip), /*#__PURE__*/_react.default.createElement(_EventDetailsCard.IconButton, {
107
108
  disabled: disableViewDetailsButton,
@@ -133,6 +134,7 @@ EventDetailsCard.defaultProps = {
133
134
  label: 'ROI',
134
135
  value: 'x3.5'
135
136
  }],
137
+ count: 0,
136
138
  showStrip: false,
137
139
  strip: 'Sales Rank 8 out of 43 in category!',
138
140
  buttonText: 'View Details',
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/dist/stories/components/QuarterPicker.js CHANGED
@@ -38,7 +38,6 @@ const QuarterPicker = _ref => {
38
38
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
39
39
  const [value, setValue] = (0, _react.useState)('');
40
40
  const [startDateValue, setStartDateValue] = (0, _react.useState)(null);
41
- const [availableQuartersList, setAvailableQuartersList] = (0, _react.useState)([]);
42
41
  const inputRef = (0, _react.useRef)(null);
43
42
  (0, _react.useEffect)(() => {
44
43
  const handleClickOutside = event => {
@@ -63,13 +62,6 @@ const QuarterPicker = _ref => {
63
62
  setValue(selectedValue);
64
63
  }
65
64
  }, [selectedValue]);
66
- (0, _react.useEffect)(() => {
67
- if (availableQuarters) {
68
- setAvailableQuartersList(availableQuarters);
69
- } else {
70
- setAvailableQuartersList([]);
71
- }
72
- }, [availableQuarters]);
73
65
  const onChangeDate = startDate => {
74
66
  if (startDate) {
75
67
  setIsOpen(!isOpen);
@@ -137,7 +129,7 @@ const QuarterPicker = _ref => {
137
129
  value: value,
138
130
  setValue: setValue,
139
131
  startDateValue: startDateValue,
140
- availableQuarters: availableQuartersList
132
+ availableQuarters: availableQuarters
141
133
  }));
142
134
  };
143
135
  QuarterPicker.defaultProps = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.830",
3
+ "version": "1.0.832",
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');