sag_components 1.0.662 → 1.0.664

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 (4) hide show
  1. package/dist/stories/components/BannerEventBox.js +15 -25
  2. package/dist/stories/components/BannerEventBox.style.js +2 -2
  3. package/dist/stories/components/CollapseMenuItem.js +3 -2
  4. package/package.json +1 -1
package/dist/stories/components/BannerEventBox.js CHANGED
@@ -23,32 +23,32 @@ const BannerEventBox = props => {
23
23
  description,
24
24
  dates,
25
25
  data,
26
- viewBannerTooltip
26
+ fileUrl
27
27
  } = props;
28
- const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
29
28
  const [tooltipPos, setTooltipPos] = (0, _react.useState)({
30
29
  x: 0,
31
30
  y: 0
32
31
  });
33
32
  const moreInfo = (0, _react.useRef)(null);
33
+ const [showItemTooltip, setShowItemTooltip] = (0, _react.useState)(Array(data.length).fill(false));
34
34
  const formatedBanners = () => {
35
35
  switch (banner) {
36
- case 'StopAndShop':
36
+ case 'Stop&Shop':
37
37
  return {
38
38
  icon: /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null),
39
39
  name: 'Stop&Shop'
40
40
  };
41
- case 'FoodLion':
41
+ case 'Food Lion':
42
42
  return {
43
43
  icon: /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null),
44
44
  name: 'Food Lion'
45
45
  };
46
- case 'GiantFood':
46
+ case 'Giant Food':
47
47
  return {
48
48
  icon: /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null),
49
49
  name: 'Giant Food'
50
50
  };
51
- case 'TheGiantCompany':
51
+ case 'The Giant Company':
52
52
  return {
53
53
  icon: /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null),
54
54
  name: 'The Giant Company'
@@ -62,16 +62,16 @@ const BannerEventBox = props => {
62
62
  return null;
63
63
  }
64
64
  };
65
- const [showItemTooltip, setShowItemTooltip] = (0, _react.useState)(Array(data.length).fill(false));
66
65
  const handleItemMouseEnter = (index, e) => {
66
+ const iconBounds = e.target.getBoundingClientRect();
67
67
  setShowItemTooltip(prevState => {
68
68
  const newState = [...prevState];
69
69
  newState[index] = true;
70
70
  return newState;
71
71
  });
72
72
  setTooltipPos({
73
- x: e.clientX,
74
- y: e.clientY
73
+ x: iconBounds.left + iconBounds.width / 2,
74
+ y: iconBounds.top / 1.25
75
75
  });
76
76
  };
77
77
  const handleItemMouseLeave = () => {
@@ -81,18 +81,8 @@ const BannerEventBox = props => {
81
81
  height: height,
82
82
  width: width
83
83
  }, /*#__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, {
84
- ref: moreInfo,
85
- onMouseEnter: () => setShowTooltip(true),
86
- onMouseLeave: () => setShowTooltip(false)
87
- }, "Creatives"), showTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
88
- direction: "top",
89
- content: viewBannerTooltip,
90
- top: moreInfo.current.offsetTop - 20,
91
- left: moreInfo.current.offsetLeft + 30,
92
- style: {
93
- pointerEvents: 'none'
94
- }
95
- }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => {
84
+ href: fileUrl
85
+ }, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => {
96
86
  var _item$items, _item$items2;
97
87
  return item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
98
88
  key: item.name
@@ -107,8 +97,8 @@ const BannerEventBox = props => {
107
97
  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", {
108
98
  key: i
109
99
  }, i))),
110
- top: tooltipPos.y - 70,
111
- left: tooltipPos.x - 30,
100
+ top: tooltipPos.y,
101
+ left: tooltipPos.x,
112
102
  style: {
113
103
  pointerEvents: 'none'
114
104
  }
@@ -120,7 +110,7 @@ var _default = exports.default = BannerEventBox;
120
110
  BannerEventBox.defaultProps = {
121
111
  width: 'auto',
122
112
  height: 'auto',
123
- banner: 'FoodLion',
113
+ banner: 'Food Lion',
124
114
  description: 'Dreft Portable Pretreater Pen',
125
115
  dates: ['2021-06-01', '2021-06-30'],
126
116
  data: [{
@@ -133,5 +123,5 @@ BannerEventBox.defaultProps = {
133
123
  name: 'Product Lines',
134
124
  items: ['coca', 'cola', 'spring']
135
125
  }],
136
- viewBannerTooltip: 'View banner creative....'
126
+ fileUrl: 'https://www.google.com'
137
127
  };
package/dist/stories/components/BannerEventBox.style.js CHANGED
@@ -14,9 +14,9 @@ const CardTitle = exports.CardTitle = _styledComponents.default.h5(_templateObje
14
14
  const Headline = exports.Headline = _styledComponents.default.h6(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n font-weight: 500;\n margin: 0;\n"])));
15
15
  const Block = exports.Block = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 12px;\n"])));
16
16
  const Text = exports.Text = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #8B8989;\n font-size: 12px;\n font-weight: 400;\n margin: 0;\n"])));
17
- const MoreInfo = exports.MoreInfo = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #229E38;\n font-size: 12px;\n font-weight: 400;\n text-decoration-line: underline;\n"])));
17
+ const MoreInfo = exports.MoreInfo = _styledComponents.default.a(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #229E38;\n font-size: 12px;\n font-weight: 400;\n"])));
18
18
  const DetailsWrapper = exports.DetailsWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n margin-top: 12px;\n"])));
19
- const KeyBlock = exports.KeyBlock = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([""])));
19
+ const KeyBlock = exports.KeyBlock = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n /* position: relative; */\n"])));
20
20
  const Key = exports.Key = _styledComponents.default.span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n font-weight: 500;\n"])));
21
21
  const Count = exports.Count = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n color: #8B8989;\n font-size: 12px;\n font-weight: 400;\n"])));
22
22
  const Seperator = exports.Seperator = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n border-right: 1px solid #F2F2F2;\n"])));
package/dist/stories/components/CollapseMenuItem.js CHANGED
@@ -16,14 +16,15 @@ const CollapseMenuItem = props => {
16
16
  subTitle,
17
17
  children,
18
18
  showBorder,
19
- buttonAlignment
19
+ buttonAlignment,
20
+ className
20
21
  } = props;
21
22
  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
22
23
  const handleToggle = () => {
23
24
  setIsItemOpen(!IsItemOpen);
24
25
  };
25
26
  return /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemMainContainer, {
26
- id: "CollapseMenuItemMainContainer",
27
+ className: className,
27
28
  showBorder: showBorder
28
29
  }, /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemContainer, {
29
30
  id: "CollapseMenuItemContainer",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.662",
3
+ "version": "1.0.664",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {