sag_components 1.0.995 → 1.0.998

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 (9) hide show
  1. package/dist/stories/components/BarChart.js +36 -6
  2. package/dist/stories/components/DoublePanelDataRow.js +70 -0
  3. package/dist/stories/components/DoublePanelDataRow.style.js +66 -0
  4. package/dist/stories/components/FilterButton.js +10 -4
  5. package/dist/stories/components/FilterButton.style.js +1 -1
  6. package/dist/stories/components/LinnerDataBox.js +5 -1
  7. package/package.json +1 -1
  8. package/dist/stories/components/EventInfo.js +0 -92
  9. package/dist/stories/components/EventInfo.style.js +0 -20
package/dist/stories/components/BarChart.js CHANGED
@@ -29,13 +29,15 @@ const BarChart = props => {
29
29
  width,
30
30
  height,
31
31
  barChartColor,
32
+ currentBarColor,
32
33
  showLegend,
33
34
  legendData,
34
35
  showDollarSign,
35
36
  showReferenceLine,
36
37
  referenceLinePoint,
37
38
  referenceLineColor,
38
- referenceLineDashed
39
+ referenceLineDashed,
40
+ showCurrentCampaignStyle
39
41
  } = props;
40
42
  const controlsContainerRef = (0, _react.useRef)();
41
43
  const displayFormattedValue = value => {
@@ -69,7 +71,18 @@ const BarChart = props => {
69
71
  if (retailerData && retailerData.length > 0) {
70
72
  return /*#__PURE__*/_react.default.createElement("g", {
71
73
  transform: `translate(${x},${y})`
72
- }, /*#__PURE__*/_react.default.createElement("text", {
74
+ }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/_react.default.createElement("rect", {
75
+ x: -55 // Adjust this to position the background properly
76
+ ,
77
+ y: 35 // Adjust this for vertical alignment with your text
78
+ ,
79
+ width: 110 // Adjust width based on the text length
80
+ ,
81
+ height: 22 // Adjust height based on font size
82
+ ,
83
+ fill: currentBarColor || '#90CE9C',
84
+ rx: 12
85
+ }), /*#__PURE__*/_react.default.createElement("text", {
73
86
  x: 0,
74
87
  y: 0,
75
88
  dy: 16,
@@ -78,8 +91,8 @@ const BarChart = props => {
78
91
  textAnchor: "middle",
79
92
  x: "0",
80
93
  dy: "50",
81
- fontSize: 16,
82
- fontWeight: 600
94
+ fontSize: showCurrentCampaignStyle ? 12 : 16,
95
+ fontWeight: showCurrentCampaignStyle ? 500 : 600
83
96
  }, payload.value), /*#__PURE__*/_react.default.createElement(_BarChart.LabelText, {
84
97
  textAnchor: "middle",
85
98
  x: "0",
@@ -126,7 +139,22 @@ const BarChart = props => {
126
139
  bottom: 0,
127
140
  left: -5
128
141
  }
129
- }, showReferenceLine && /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
142
+ }, showCurrentCampaignStyle && /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
143
+ strokeDasharray: "3 3",
144
+ vertical: false
145
+ }), showCurrentCampaignStyle && /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
146
+ tickCount: 10,
147
+ interval: "preserveEnd",
148
+ domain: [0, 'auto'],
149
+ tick: {
150
+ fill: '#B1B1B1'
151
+ },
152
+ axisLine: false,
153
+ fontWeight: 400,
154
+ fontSize: "12px",
155
+ tickLine: false,
156
+ tickFormatter: value => `${displayFormattedValue(value)}`
157
+ }), showReferenceLine && /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
130
158
  y: referenceLinePoint,
131
159
  stroke: referenceLineColor,
132
160
  strokeDasharray: referenceLineDashed
@@ -194,5 +222,7 @@ BarChart.defaultProps = {
194
222
  showReferenceLine: false,
195
223
  referenceLinePoint: 0,
196
224
  referenceLineColor: '#212121',
197
- referenceLineDashed: '5'
225
+ referenceLineDashed: '5',
226
+ showCurrentCampaignStyle: false,
227
+ currentBarColor: '#90CE9C'
198
228
  };
package/dist/stories/components/DoublePanelDataRow.js ADDED
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.DoublePanelDataRow = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _DoublePanelDataRow = require("./DoublePanelDataRow.style");
10
+ var _ArrowUpIcon = require("./icons/ArrowUpIcon");
11
+ var _ArrowDownIcon = require("./icons/ArrowDownIcon");
12
+ var _CommonFunctions = require("./CommonFunctions");
13
+ /* eslint-disable no-restricted-globals */
14
+
15
+ const DoublePanelDataRow = props => {
16
+ const {
17
+ width,
18
+ height,
19
+ data,
20
+ backgroundColor,
21
+ className,
22
+ customDataFormat,
23
+ showPercentChange
24
+ } = props;
25
+ const getArrowSign = arrowSign => {
26
+ if (!arrowSign) {
27
+ return '-';
28
+ }
29
+ if (arrowSign === 'up') {
30
+ return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
31
+ color: "#5FCC70",
32
+ value: 34 // TODO: when ready, replace with actual value
33
+ }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
34
+ width: 12,
35
+ height: 12
36
+ }), ' ', "(+34K)");
37
+ }
38
+ return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
39
+ color: "#D23630",
40
+ value: 66 // TODO: when ready, replace with actual value
41
+ }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
42
+ width: 12,
43
+ height: 12
44
+ }), ' ', "(-12K)");
45
+ };
46
+ return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.LinnerContainer, {
47
+ className: className,
48
+ backgroundColor: backgroundColor,
49
+ width: width,
50
+ height: height,
51
+ customDataFormat: customDataFormat
52
+ }, data.map(item => /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBox, {
53
+ className: "data-box-item"
54
+ }, item.title && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBoxTitle, {
55
+ className: "DataBoxTitle"
56
+ }, item.title), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItem, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, item.sign), customDataFormat ? /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, {
57
+ className: "DataBoxValue"
58
+ }, ''.concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, null, ''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")), showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemNoValue, null, "N/A")), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.ValueChange, null))));
59
+ };
60
+ exports.DoublePanelDataRow = DoublePanelDataRow;
61
+ var _default = exports.default = DoublePanelDataRow;
62
+ DoublePanelDataRow.defaultProps = {
63
+ className: '',
64
+ width: '100%',
65
+ height: 'auto',
66
+ data: [],
67
+ backgroundColor: '#FFFFFF',
68
+ customDataFormat: false,
69
+ showPercentChange: false
70
+ };
package/dist/stories/components/DoublePanelDataRow.style.js ADDED
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ValueChange = exports.PercentageChange = exports.LinnerContainer = exports.DataBoxTitle = exports.DataBox = exports.CellItemValueSign = exports.CellItemNoValue = exports.CellItem = exports.BigValue = void 0;
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div`
10
+ font-family: "Poppins", sans-serif;
11
+ display: grid;
12
+ gap: 48px 0;
13
+ grid-template-columns: repeat(5, 1fr);
14
+ grid-template-rows: auto auto;
15
+ width: ${props => props.width};
16
+ height: ${props => props.height};
17
+ background-color: ${props => props.backgroundColor};
18
+ padding: 50px 20px 20px;
19
+ box-sizing: border-box;
20
+ `;
21
+ const DataBox = exports.DataBox = _styledComponents.default.div`
22
+ height: 100%;
23
+ padding: 0 40px;
24
+ border-left: 1px solid #d0d0d0;
25
+ &:nth-child(1),
26
+ &:nth-child(6) {
27
+ border-left: none;
28
+ padding-left: 0;
29
+ }
30
+ &:nth-child(5),
31
+ &:nth-child(10) {
32
+ padding-right: 0;
33
+ }
34
+ `;
35
+ const CellItem = exports.CellItem = _styledComponents.default.div`
36
+ display: flex;
37
+ align-items: center;
38
+ `;
39
+ const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span`
40
+ font-size: 18px;
41
+ display: block;
42
+ margin: 0 0 12px;
43
+ `;
44
+ const BigValue = exports.BigValue = _styledComponents.default.span`
45
+ font-size: 40px;
46
+ font-weight: 500;
47
+ margin-right: 5px;
48
+ `;
49
+ const CellItemValueSign = exports.CellItemValueSign = _styledComponents.default.span`
50
+ font-size: 16px;
51
+ font-weight: 400;
52
+ `;
53
+ const ValueChange = exports.ValueChange = _styledComponents.default.span`
54
+ font-size: 16px;
55
+ font-weight: 400;
56
+ `;
57
+ const CellItemNoValue = exports.CellItemNoValue = _styledComponents.default.span`
58
+ font-size: 40px;
59
+ font-weight: 500;
60
+ `;
61
+ const PercentageChange = exports.PercentageChange = _styledComponents.default.div`
62
+ display: flex;
63
+ align-items: center;
64
+ font-size: 16px;
65
+ color: ${props => props.color};
66
+ `;
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/LinnerDataBox.js CHANGED
@@ -27,7 +27,11 @@ const LinnerDataBox = props => {
27
27
  customDataFormat: customDataFormat
28
28
  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxWrap, {
29
29
  width: `${100 / data.length}%`
30
- }, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, item.title && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, null, item.title), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== "null" && item.value !== "undefined" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentSign, null, item.sign), customDataFormat ? /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, null, "".concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellValue, null, "".concat("$", (0, _CommonFunctions.getFormattedValue)(extraInfoItem.value), (0, _CommonFunctions.getFormattedUnits)(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
30
+ }, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, item.title && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, {
31
+ className: "DataBoxTitle"
32
+ }, item.title), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== "null" && item.value !== "undefined" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentSign, null, item.sign), customDataFormat ? /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, {
33
+ className: "DataBoxValue"
34
+ }, "".concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellValue, null, "".concat("$", (0, _CommonFunctions.getFormattedValue)(extraInfoItem.value), (0, _CommonFunctions.getFormattedUnits)(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
31
35
  className: "vertival-line",
32
36
  style: {
33
37
  width: "1px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.995",
3
+ "version": "1.0.998",
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');